Paging/Scrolling not working as expected with AJAX binding

[Richard]

I have a hierarchal grid that's mostly doing what I want, however, paging and scrolling are not working as expected.  I'm using AJAX binding.  It doesn't seem to matter what I set pageSize to in the DataSource section; the presentation doesn't change much, only the number of page buttons for example.  In my current scenario I have 12 rows in the 2nd level grid, and a pageSize of 6.  Scrolling is turned on.  The grid allows me to scroll through all 12 rows, but what I expected was that I could use the page buttons to advance.  I tried turning scrolling off and it kept right on scrolling the entries.  This is very curious, and not at all what I expected.  The following shows my grid markup (RAZOR format):

@(Html.Kendo().Grid(Model)
    .Name("BatchGrid")
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:525px; width:1200px" })
    .Columns(columns =>
                {
                    columns.Bound(b => b.BatchID)
                                        .Width("300px")
                                        .Title("Batch ID")
                                        .Visible(false);
                    columns.Bound(b => b.ShortBatchID)
                                        .Width("100px")
                                        .Title("Batch ID");
                    columns.Bound(b => b.HasErrorTransaction)
                                        .Width("50px")
                                        .Title("Err").Visible(false);
                    columns.Command(c => c.Custom("Post Batch")
                                          .Click("onClickPostBatch")
                                          .HtmlAttributes(new { style = "width:100px;" }));
                    columns.Bound(b => b.Created_Emp_Name)
                                        .Width("200px")
                                        .Title("Created Employee");
                    columns.Bound(b => b.Transmitted_DateTime)
                                        .Width("175px")
                                        .Format("{0:MM/dd/yyyy hh:mm tt}")
                                        .Title("Transmitted");
                    columns.Bound(b => b.Completed_DateTime)
                                        .Width("175px")
                                        .Format("{0:MM/dd/yyyy hh:mm tt}")
                                        .Title("Completed");
                    columns.Command(c => c.Custom("Delete Batch")
                                          .Click("onClickDeleteBatch")
                                          .HtmlAttributes(new { style = "width:100px;" }));
                }
            )
        .DataSource(dataSource => dataSource
            .Ajax()
            .Sort(sort => sort.Add("HasErrorTransaction").Ascending()) // <-- initial sort
            .PageSize(12)
            .Read(read => read.Action("FetchBatchCollection", "Home").Data("addlData"))
            .ServerOperation(false)
        )
        .Events(events => events.DataBound("onBatchGridDataBound")
                                .DetailExpand("onBatchGridExpand"))
        .ClientDetailTemplateId("transactions")
    )

<!-- Nested grid for transaction object, member of BatchHeader.TranCollection
     There can be many ITransaction objects per BatchHeader -->
<script id="transactions" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ROAMTranReview.ROAMHostSvc.TransactionBase>()
            .Name("TranGrid_#=BatchID#")  // makes the sub-grid name unique so that it will be displayed on each child row.
            .HtmlAttributes(new { style = "height:535px; width:1400px" })
            .Columns(columns =>
            {
                columns.Bound(b => b.BatchID)
                                    .Visible(false);
                columns.Bound(b => b.TransactionType)
                                    .Visible(false);
                columns.Bound(b => b.ID)
                                    .Width("300px")
                                    .Title("Transaction ID")
                                    .Visible(false);
                columns.Bound(b => b.ShortTranID)
                                    .Width("100px")
                                    .Title("Tran ID");
                columns.Command(c => c.Custom("View Transaction")
                                      .Click("onClickViewTransaction")
                                      .HtmlAttributes(new { style = "width:100px;" }));
                columns.Bound(b => b.TranTypeDisplayText)
                                    .Width("100px")
                                    .Title("Type");
                columns.Bound(b => b.ItemID)
                                    .Width("100px")
                                    .Title("Item ID");
                columns.Bound(b => b.ItemDescription)
                                    .Width("300px")
                                    .Title("Item Description");
                columns.Bound(b => b.Quantity)
                                    .Width("50px")
                                    .Title("Qty");
                columns.Bound(b => b.WorkOrderTask)
                                    .Width("100px")
                                    .Title("Workorder");
                columns.Bound(b => b.EmployeeName)
                                    .Width("200px")
                                    .Title("Employee");
                columns.Command(c => c.Custom("Delete Transaction")
                                      .Click("onClickDeleteTransaction")
                                      .HtmlAttributes(new { style = "width:155px;" }));
                columns.Bound(b => b.PostingFlagDisplayText)
                                    .Width("150px")
                                    .Title("Posting Flag");
           })
           .Scrollable()
           .Pageable()
           .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(6)
                .Read(read => read.Action("FetchTransactionCollection", "Home", new { batchID = "#=BatchID#" }))
            )
            .Events(events => events.DataBound("onTranGridDataBound")
                                .DetailExpand("onTranGridExpand"))
            .ToClientTemplate()
    )

</script>

[Dimo]

Hi Richard,

I am afraid I didn't understand what is the expected behavior and how is the actual behavior different. Can you please clarify? Also specify which of the two Grids you are referring to - the detail one (TranGrid_#=BatchID#) ?

The paging and scrolling of the master and detail Grids is completely independent.

If the Grid databinding does not work as expected, please make sure that:

1. the action method implementation is correct and the ToDataSourceResult() method is called
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding

2. the kendo.aspnetmvc.min.js file is registered, after the main Kendo UI script file (kendo.web.min.js or kendo.all.min.js or your custom combined script file)

On a side note, setting a column width via the column's HtmlAttributes() is incorrect. You can only use .Width() for that.

Regards,
Dimo
Telerik

 

 

[Richard]

Hi Dimo,
The behavior I expected is that pageSize and grid height interact with each other and that I can use the paging function to page back and forth in the records held by the grid.  In this case I'm talking about the Transaction grid (the child) but it could just as well apply to the Batch grid (the parent) as well.  Presently the first page is not full for that one.  

For example; let's say that pageSize is 6 and my Transaction object has 12 rows to show.  12 rows come back from the call to the Controller.  I expect as many rows to be displayed as the grid height allows, or 6, and that I can use the paging buttons at the bottom of the grid to page back and forth between the first and second set of 6 rows.  I thought Scrolling might be interfering so I tried turning it off, but the behavior persisted.  Essentially, the number of page buttons presented corresponds with the number of logical pages, but they don't actually do anything.  I can scroll through the records, but in that case, what good is paging?  Let's say I have 20 rows to view.  It appears that I must scroll through all of them vs. being able to page through them.  It's confusing to the user.  

As to your side note, the only way to specify a width for the Command columns is via the HtmlAttributes property.  I retried Width after reading your comment but not only does Intellisense not like it, the page throws an error.  I put it back to using the HtmlAttributes property and all works fine.  This appears to be undocumented, or perhaps the lack of a Width property for Command columns is a bug.  You'll note that all my bound columns use the Width property. 

Cheers!  

Rich

[Dimo]

Hi Rich,

Command columns certainly have a Width() fluent method and you can see it in action here:

http://demos.telerik.com/aspnet-mvc/grid/editing-inline

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

Actually now I see that you are setting a width to the command button itself, and not the column. In case this is what you want to do, then it's OK to use HtmlAttributes().

As for the main discussion, if the page size is 6, the server response should only return 6 items, unless ServerOperation(false) is set (it is set in your case, but only for the master Grid). In all cases, if the page size is 6, only 6 rows should be rendered. So based on what you are saying, the current child Grid behavior is indeed incorrect, but probably due to incorrect implementation. Please check the code and compare it with our demos and documentation. Send a runnable demo for further inspection, if needed.

http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding

The following video demonstrates the correct Grid behavior when ServerOperation() is true (by default) and false:

http://screencast.com/t/hArk3bSeLJ


Regards,
Dimo
Telerik