RadGrid Clientside Binding

[Michael]

Hi,

I have a question regarding client side binding. I think I am missing something here but can't find any information on how to properly do this from the documentation. Anyhow, I am using json object to bind to the grid as my datasource. I have no problem binding this to the grid. I tried it with a default grid without any settings and it works like a charm. The problem i get is when I tried to do paging. I put PageSize="2" and AllowPaging="True" as seen below and it simply doesn't work. In my example below I have 6 items, it always shows 6 items in the grid even with the page size set to 2. The paging icons below the grid seems to show the right numbers though based on the row count I declared. (mtv.set_virtualItemCount(msg.length);)


To add to that, when I try to click the next page (or any paging button), the grid just disappears.

A simple example like this that works would be very helpful.

//javscript

function bindGrid(){
var msg = [{ "ID": 1, "Text": "Text1" }, { "ID": 2, "Text": "Text2"}, 
   { "ID": 3, "Text": "Text3"}, { "ID": 4, "Text": "Text4"}, 
   { "ID": 5, "Text": "Text3"}, { "ID": 6, "Text": "Text6"} ]

var grid = $find("<%=  RadGrid1.ClientID %>")
var mtv = grid.get_masterTableView();
        mtv.set_dataSource(msg);
        mtv.dataBind();          
        mtv.set_virtualItemCount(msg.length);
} 

<telerik:RadGrid ID="RadGrid1" runat="server" >               
<mastertableview PageSize="2" AllowPaging="true" >                   
<Columns>                       
<telerik:GridBoundColumn DataField="ID" HeaderText="ID" />
                        <telerik:GridBoundColumn DataField="Text" HeaderText="DocName" />
                </Columns>               
</mastertableview><br>               
<clientsettings>                   
<ClientEvents  OnCommand=function(){} />               
</clientsettings>
</telerik:RadGrid>

[Tsvetina]

Hi Michael,

Please note that if the grid's datasource cannot perform paging using passed parameters on the client, then you need to do the paging logic. With your sample datasource, the following code can be used to enable paging in RadGrid on the client:

var msg = [{ "ID": 1, "Text": "Text1" }, { "ID": 2, "Text": "Text2" },
{ "ID": 3, "Text": "Text3" }, { "ID": 4, "Text": "Text4" },
{ "ID": 5, "Text": "Text3" }, { "ID": 6, "Text": "Text6"}];
 var mtv;
 function bindGrid(pageSize, pageIndex) {
     var grid = $find("<%=RadGrid1.ClientID %>");
     mtv = grid.get_masterTableView();
     var index = 0;
     var newPageMsg = new Array();
     //from the array take only the needed items for the current page
     for (var i = pageSize * (pageIndex - 1); i < pageSize * (pageIndex - 1) + pageSize; i++) {
         newPageMsg[index] = msg[i];
         index++;
     }
     mtv.set_virtualItemCount(msg.length);
     mtv.set_dataSource(newPageMsg);
     mtv.dataBind();
 }

 function pageLoad() {
     bindGrid(2, 1);
 }

 function RadGrid1_Command(sender, args) {
     if (args.get_commandName() == 'Page') {
        // debugger;
         args.set_cancel(true);
         var pageSize = sender.get_masterTableView().get_pageSize();
         var argument = args.get_commandArgument();
         var pageIndex;
         if (argument == "Prev") {
             pageIndex = mtv.get_currentPageIndex() - 1;
         }
         if (argument == "Next") {
             pageIndex = mtv.get_currentPageIndex() + 1;
         }
         if (argument == "First") {
             pageIndex = 1;
         }
         if (argument == "Last") {
             pageIndex = Math.ceil(msg.length / pageSize);
         }
         bindGrid(pageSize, pageIndex);
     }
 }

With a simpler paging (not showin Prev,Next, etc.) the if checks on the paging argument can be skipped, as it would always be the new page index.

Kind regards,
Tsvetina
the Telerik team