RadGrid Clientside Binding

Thread is closed for posting
2 posts, 0 answers
  1. Michael
    Michael avatar
    3 posts
    Member since:
    Mar 2011

    Posted 17 Feb 2012 Link to this post


    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>
  2. Tsvetina
    Admin
    Tsvetina avatar
    1874 posts

    Posted 22 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top