YUICustomCellAndSort.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <title>Index Page</title>
    <style type="text/css">
        .yui-skin-sam .yui-dt-liner { white-space:nowrap; } 
    </style>
    <script type="text/javascript">
        YAHOO.example.Data = {
            bookorders: [
        { id: "po-0167", date: new Date(1980, 2, 24), quantity: 1, amount: 4, title: "A Book About Nothing", Names: ["AA", "BB"] },
        { id: "po-0783", date: new Date("January 3, 1983"), quantity: 3, amount: 12.12345, title: "The Meaning of Life", Names: ["CC", "DD"] },
        { id: "po-0297", date: new Date(1978, 11, 12), quantity: 12, amount: 1.25, title: "This Book Was Meant to Be Read Aloud", Names: [] },
        { id: "po-1482", date: new Date("March 11, 1985"), quantity: 6, amount: 3.5, title: "Read Me Twice", Names: [] }
    ]
        };

        YAHOO.util.Event.addListener(window, "load", function () {
            YAHOO.example.Basic = function () {

                var myCustom = function (elLiner, oRecord, oColumn, oData) {
                    var temp = oRecord.getData("Names");
                    var index = oRecord.getData("amount");
                    if (temp.length > 0) {
                        var aa = "";
                        for (var i = 0; i < temp.length; i++) {
                            aa += ("<a href='" + index + "'>" + temp[i] + "</a><br />");
                        }
                        elLiner.innerHTML = aa;
                    }
                }

                var sortStates = function (a, b, desc) {
                    var comp = YAHOO.util.Sort.compare;
                    var result;
                    if ((a.getData("Names").length > 0) && (b.getData("Names").length > 0)) {
                        //alert(comp(a.getData("quantity"), b.getData("quantity"), desc) + ">>>>>>");
                        result = (comp(a.getData("quantity"), b.getData("quantity"), desc));
                    }
                    else if ((a.getData("Names").length == 0) && (b.getData("Names").length == 0)) {
                        //alert(comp(a.getData("quantity"), b.getData("quantity"), desc) + "======");
                        result = (comp(a.getData("quantity"), b.getData("quantity"), desc));
                    }
                    else if ((a.getData("Names").length > 0) && (b.getData("Names").length == 0)) {
                        result = desc == true ? 1 : -1;
                    }
                    else if ((a.getData("Names").length == 0) && (b.getData("Names").length > 0)) {
                        result = desc == true ? -1 : 1;
                    }
                    return result;
                }

                var myColumnDefs = [
            { key: "id", sortable: true, resizeable: true },
            { key: "date", formatter: YAHOO.widget.DataTable.formatDate, sortable: true, sortOptions: { defaultDir: YAHOO.widget.DataTable.CLASS_DESC }, resizeable: true },
            { key: "quantity", formatter: YAHOO.widget.DataTable.formatNumber, sortable: true, resizeable: true },
            { key: "amount", formatter: YAHOO.widget.DataTable.formatCurrency, sortable: true, resizeable: true },
            { key: "title", sortable: true, resizeable: true },
            { key: "Names", sortable: true, resizeable: true, formatter: myCustom, sortOptions: { sortFunction: sortStates} }
        ];

                var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
                myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
                myDataSource.responseSchema = {
                    fields: ["id", "date", "quantity", "amount", "title", "Names"]
                };

                var myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, myDataSource, { caption: "DataTable Caption" });

                return {
                    oDS: myDataSource,
                    oDT: myDataTable
                };
            } ();
        });


    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: ViewData["Message"] %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    </p>
    <hr />
    <div id="basic"></div> 
</asp:Content>