YUI Data Table Issues / Questions

Question

I am using the data table with my ASP.NET MVC 3 web application and so far it is going quite well. I connect to a SQL Server 2008 database, and I return data by using a stored procedure. I am using IE 8 and the latest version of Firefox. The version of YUI is 2.8.2r1. I have a couple of questions regarding the data table :)

Here is my data table's code:

<script type="text/javascript">
    YAHOO.util.Event.onDOMReady(function () {
        var grdNewsColumnDefs, grdNewsDataSource, grdNewsConfigs, grdNewsDataTable;

        // News list data table
        var formatActionLinks = function (oCell, oRecord, oColumn, oData) {
            var newsId = oRecord.getData('NewsId');
            oCell.innerHTML = '<a href="Edit/' + newsId + '">Edit</a> | ' +
                '<a href="Details/' + newsId + '">Details</a>';
        };

        var formatActive = function (oCell, oRecord, oColumn, oData) {
            if (oData) {
                oCell.innerHTML = "Yes";
            }
            else {
                oCell.innerHTML = "No";
            }
        };

        grdNewsColumnDefs = [
            { key: 'Title', label: 'Title', className: 'align_left' },
            { key: 'Active', label: 'Active', className: 'align_left', formatter: formatActive },
            { key: 'Action', label: 'Actions', className: 'align_left', formatter: formatActionLinks }
        ];

        grdNewsDataSource = YAHOO.util.DataSource('@Url.RouteUrl(Url.NewsJsonList())');
        grdNewsDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        grdNewsDataSource.responseSchema = {
            resultsList: 'DataResultSet',
            fields: [
                { key: 'NewsId' },
                { key: 'Title' },
                { key: 'Active' },
                { key: 'Action' }
            ]
        };

        grdNewsConfigs = {
            paginator: new YAHOO.widget.Paginator({
                rowsPerPage: 20
            })
        };

        grdNewsDataTable = new YAHOO.widget.DataTable('grdNews', grdNewsColumnDefs, grdNewsDataSource, grdNewsConfigs);
        grdNewsDataTable.on('initEvent', function () {
            YAHOO.util.Dom.setStyle(grdNewsDataTable.getTableEl(), 'width', '100%');
        });
    });
</script>

Not sure what I am doing wrong, but here is my action method that returns my data:

public ActionResult JsonList()
{
    JsonEncapsulatorDto<News> data = new JsonEncapsulatorDto<News>
    {
        DataResultSet = newsService.FindAll()
    };

    return Json(data, JsonRequestBehavior.AllowGet);
}

I put a breakpoint on the return Json... line to see if this action method is hit. When the page loads the first time it goes to the break, I hit F5 then it runs and displays the view with the populated grid. When I refresh my browser by pressing F5 then my breakpoint is not hit again, I'm not sure why, it never goes in here again.

How is data loaded into the grid? If I have 100 records in the table and I have set my rowsPerPage to 20 then I will have 5 pages. Given my code above, is data loaded all at once, meaning is all 100 rows loaded at once? I would preferably like to have it loaded in "chunks" instead of having it all loaded at once. In another table I have much more records and this will not be a wise design approach to load everything at once. How would I implement something like this?

I am trying to style certain table headers and cells in the data table. I worked through this article explaining how to style a data table: http://www.satyam.com.ar/yui/widgetstyles.html. When I set the td to right align then the th for that column is also right aligned, why is this? You can see above how I set the className property. Here is my stylesheet code:

.yui-skin-sam .yui-dt td.align_left{text-align:left}

Given the above scenario, I want the column header to be left aligned and the corresponding column rows to right aligned? I probably won’t use it like this, but just want to know how to set a style to different elements?

I set the data table's width to be 100%, but when I page to the next page then it seems to loose this width of 100%. Why is this? What I need to do to have my data table to keep my width of 100%?

If I were to update data then it does not display as updated. Why is this and what do I need to do get the updated data to display in the data table?

Answer 1

You have configured your YUI grid to use an AJAX request to fetch the remote data:

grdNewsDataSource = YAHOO.util.DataSource('@Url.RouteUrl(Url.NewsJsonList())');

GET AJAX requests could be cached by the browser which explains why your controller action is hit only once (the first time you load the page). In order to avoid this caching you could either configure YUI to use a POST request or append a random number to the URL each time the page is loaded.

How is data loaded into the grid? If I have 100 records in the table and I have set my rowsPerPage to 20 then I will have 5 pages.

No matter what you set on the client side the following:

DataResultSet = newsService.FindAll()

is a clear indication that the server fetches all records from the database and sends all records back to the client and it is the client that retrieves only the necessary records to show which is inefficient.

Ideally the pagination should be done on the server. Here's an example from the documentation. The client sends the startIndex and results parameters to the server so that it could paginate the data set on the server and return only the necessary rows that will be shown on the screen.