Problem in Client side paging in RadGrid

20 posts, 0 answers
  1. Sundar
    Sundar avatar
    23 posts
    Member since:
    Jun 2008

    Posted 29 Oct 2008 Link to this post

    Hi All,

    I am bind the RadGrid using client side binding. It works fine but when i tried to implement paging for client side binding, i am not able to acheive this. Not sure whether i missed something in my code (either HTML or Javascript). What actully happens is that, even though I use the set_virtualItemCount method, the page actually fills with all the rows. Meaning, if i set the PageSize="5" and if the record count received is more than 5 then it displays all the rows.

    If any body provide me some pointer on the sample code with client side paging and sorting will be apreciated. I would need to look at the HTML code as well as the javascript code.

    I have attached my code below
    //HTML
    <telerik:RadGrid ID="rgrdUsers" runat="server" PageSize="5"
    AllowPaging="true" AllowSorting="True" AllowFilteringByColumn="false" GridLines="Horizontal" Width="100%" Height="500px" >
    ....
    <MasterTableView AllowMultiColumnSorting="True" AutoGenerateColumns="False" PageSize="5" AllowPaging="true">
            ....
    </MasterTableView>
    </telerik:RadGrid>

    //Javascript
        function OnSuccess(result, context)
        {
                masterTableView.set_virtualItemCount(5);
                masterTableView.set_dataSource(result)
                masterTableView.dataBind();
        }

    Thanks in advance
    Sundar
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 31 Oct 2008 Link to this post

    Hi Sundar,

    When using client-side paging your data provider's method should return only records for the current page not the entire dataset. Please review this online demo for working example of this functionality.

    Best wishes,
    Rosen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sundar
    Sundar avatar
    23 posts
    Member since:
    Jun 2008

    Posted 02 Nov 2008 Link to this post

    Hi Rosen

    I apreciate your reply.
    I think i didn't clearly explain my problem.

    While using RadGrid, I was under the impression that when i set the item count using virtualItemCount, it would create the pager like "1 2 3...etc". I use numeric pager mode. But actually, it displays only the "1" in the pager what ever value i set for virtualItemCount.

    e.g. 
    masterTableView.set_virtualItemCount(50);
    with PageSize of 5.
    In this scenario i guessed that it would display 5 records in a page with total of 10 page. Please correct me if i am wrong.

    I have looked at the sample which you have provided. It doesn't use the numeric pager. It uses the default pager with arrow buttons.

    Thanks and regards
    Sundar
  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 05 Nov 2008 Link to this post

    Hi Sundar,

    Unfortunately the numeric pager mode is currently not supported with client-side databinding. However you can easily achieve similar functionality using pager template and few line of javascript to build the pager on the client.
    Similar to this:

     <script type="text/javascript">  
        function updateVirtualItemCount(result)  
            {  
               var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();  
               tableView.set_virtualItemCount(result);  
                 
               var pagerDiv = $get("pagerTemplate");             
               if(pagerDiv){   
                   pagerDiv.innerHTML = "";     
                                              
                   for(var i = 1len = result/tableView.get_pageSize(); i <= len;i++)  
                   {                  
                      var link = document.createElement("a");                    
                      link.href = "#";    
                      link.innerHTML = i;                      
                      link.onclick = function(index){   
                                        var pageIndex = index;   
                                        return function(){ tableView.page(pageIndex);}  
                                     }(i);                                   
                        
                      pagerDiv.appendChild(link);                                     
                      pagerDiv.appendChild(document.createTextNode(" "));   
                   }  
               }             
            }  
     </script> 
     
    <telerik:RadGrid ID="RadGrid1" runat="server">  
     
      <MasterTableView> 
        <PagerTemplate> 
                  <div id="pagerTemplate" style="height:20px;">                      
                  </div> 
            </PagerTemplate> 
        <!-- other grid declaration ..--> 
      </MasterTableView> 
    </telerik:RadGrid> 

    Please give it a try and let us know how it went.

    All the best,
    Rosen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Kevin Castle
    Kevin Castle avatar
    18 posts
    Member since:
    Feb 2007

    Posted 01 Dec 2008 Link to this post

    "Unfortunately the numeric pager mode is currently not supported with client-side databinding. However you can easily achieve similar functionality using pager template and few line of javascript to build the pager on the client."

    Why dont you guys have this listed as a feature which is not supported for client side binding?
    If you're posting code to implement the functionality which is supposed to come with the grid....then how come you guys dont just add it to the control so that it works as it is marketed to work?

    When might we expect this fix to be released?
  7. Crescent
    Crescent avatar
    20 posts
    Member since:
    Jul 2008

    Posted 01 Dec 2008 Link to this post

    > how come you guys dont just add it to the control so that it works as it is marketed to work?

    Have you tried the suggested pager? If you did you would see it's not ready for general use. See http://www.telerik.com/community/forums/aspnet-ajax/grid/error-when-calling-set-virtualitemcount.aspx#690128 for an explanation why.
  8. Enrico Foschi
    Enrico Foschi avatar
    12 posts
    Member since:
    Dec 2008

    Posted 17 Dec 2008 Link to this post

    This major issue and missing feature (paging in client side data binding), not clearly mentioned as missing feature, forced me to get rid of the radGrid control and to switch to jQuery Flexigrid.

    Guys, please either implement this feature asap or just clearly mention this lack.
  9. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 17 Dec 2008 Link to this post

    Hi Enrico,

    This is already implemented .You can check the demo in this blog post for more info:
    http://blogs.telerik.com/blogs/08-12-16/HTTP_Compression_for_your_ASP_NET_AJAX_applications.aspx

    Greetings,
    Vlad
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. Enrico Foschi
    Enrico Foschi avatar
    12 posts
    Member since:
    Dec 2008

    Posted 17 Dec 2008 Link to this post

    Hi Vlad,

    I am checking the examples now.

    Thanks,
    Enrico
  11. Enrico Foschi
    Enrico Foschi avatar
    12 posts
    Member since:
    Dec 2008

    Posted 17 Dec 2008 Link to this post

    Hi Vlad,

    so I am using (with RadControls_for_ASP.NET_AJAX_2008_3_1125_dev) this similar code:

    <telerik:RadGrid ID="RadGrid2" Width="600px" AutoGenerateColumns="false" AllowPaging="true" 
                AllowSorting="true" runat="server"
                <MasterTableView> 
                    <Columns> 
                        <telerik:GridBoundColumn HeaderText="ID" DataField="id" DataType="System.Int32" /> 
                    </Columns> 
                </MasterTableView> 
                <PagerStyle Mode="NextPrevAndNumeric" /> 
                <ClientSettings> 
                    <DataBinding Location="webservices/Pages.asmx" SelectMethod="GetDataForSearch" /> 
                </ClientSettings> 
            </telerik:RadGrid> 

     and this webservice:

    [WebMethod(EnableSession=true)] 
        public Dictionary<stringobject> GetDataForSearch(int startRowIndex, int maximumRows, List<GridSortExpression> sortExpression, List<GridFilterExpression> filterExpression) 
        { 
            Dictionary<stringobject> retVal = new Dictionary<stringobject>(); 
     
            List<TestClass> data = new List<TestClass>(); 
            for (int i = 0; i < maximumRows; i++) 
            { 
                TestClass newData = new TestClass(); 
                newData.id = new Random().Next(0,20000)+i; 
                data.Add(newData); 
            } 
     
            retVal.Add("Data", data); 
            retVal.Add("Count", 1500); 
     
            return retVal; 
        } 

    In the paging I get this:

    http://i42.tinypic.com/8xsk2h.png

    so clearly I don't know why it is displayed just "1 2" instead of all the correct pages, as in the referenced example.

    That is the original issue. Any fix / work-around / solution for that?

    Thanks





  12. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 17 Dec 2008 Link to this post

    Hi Enrico,

    Please follow this link for a trial version of the internal build which addresses the numeric pager issue and excuse us for the inconvenience this issue might caused you.

    Kind regards,
    Rosen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  13. Enrico Foschi
    Enrico Foschi avatar
    12 posts
    Member since:
    Dec 2008

    Posted 17 Dec 2008 Link to this post

    Hi Rosen,

    thank you for your support.

    Here we are using a site-wise license and, of course, is a commercial one (so we can't release our products with a trial version). Do you have any update for a commercial license (can give you details about our license, if required, in pvt)?

    Enrico Foschi
  14. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 17 Dec 2008 Link to this post

    Hi Enrico,

    In order to receive a dev version of the internal build, please start a formal support ticket and we will gladly provide it for you. The fix will be included officially for the next SP2 version of the suite, expected in the middle of January 2009.

    Kind regards,
    Sebastian
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  15. Enrico Foschi
    Enrico Foschi avatar
    12 posts
    Member since:
    Dec 2008

    Posted 17 Dec 2008 Link to this post

    Hi Sebastian.

    Will do. Can you please link me the ticketing service / helpdesk or should I contact the sales team?

    Thanks
  16. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 17 Dec 2008 Link to this post

    Hello Enrico,

    You can access the support ticketing system by logging from your account on telerik.com:

    http://www.telerik.com/login.aspx?returnurl=%2f

    Best regards,
    Sebastian
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  17. Neerav
    Neerav avatar
    50 posts
    Member since:
    Nov 2010

    Posted 30 Nov 2010 Link to this post

    hello every one,

    Posted 14 hours ago (permalink)

    I have used paging on my grid. The grid shows 5 records on single page. Now when I click, suppose on row 1 of page1, the row1 of page1 gets hidden along with row 1 on all pages. May be this is because all pages maintain row index from 0.
    Following is my "OnItemCommand_radgrid1_command" method where I maintain all row indexes in session "link" variable.
    Then I have implemented "prerender" method where I traverse through "link" variable and one by one hide the rows. But rows from all pages gets hidden.
     My "OnItemCommand_radgrid_command" mehtod

    protected

     

     

    void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)

    {

      

     

     

    if (e.CommandName == "MoveToSelected" || e.CommandName == "Delete")  

     

     

    // RadGrid1_ItemDeleted(source, e);

    GridDataItem dataItem = (GridDataItem)e.Item;

     

     

    int index = dataItem.ItemIndex;

     

    int[] arrtemp = (int[])Session["hide"];


    int
    iii = (int)Session["var"];

     
    List<int> lint2 = (List<int>)Session["link"];

     

    lint2.Add(index);

    Session[

     

     

    "link"] = lint2;

     

    arrtemp[(

     

     

    int)Session["var"]] = index;

     

    iii++;

    Session[

     

     

    "var"] = iii;

     

    Session[

     

     

    "hide"] = arrtemp;
    }


    And my preprender method 

    protected void prerender(object sender, System.EventArgs e)  

    {

     

    int[] arr1 = (int[])Session["hide"];

     
    int val1 = (int)Session["var"];

    List<int> lint1 = (List<int>)Session["link"];


    if
    ((bool)Session["state"] == true)

    {

    Session[

     

     

    "state"] = false;

     

    }

     

     

     

    else

     

    { 

     

    foreach (GridDataItem itemm in RadGrid2.MasterTableView.Items)

     

    {

    foreach(int oo in lint1)

    {

     

     

     

    if (itemm.ItemIndex == oo)

     

    itemm.Visible =

     

     

    false;

     

    }

    }

    }

    }

    This is quite problamatic for me.
    Kindly let me know as to how to for furthur.

    Thanks and Regards

     

  18. Prangadj
    Prangadj avatar
    174 posts
    Member since:
    Jan 2008

    Posted 01 Dec 2010 Link to this post

    Of course, dears, because you not check on prerender if you are on first page. Do that in this way:

    foreach (GridDataItem itemm in RadGrid2.MasterTableView.Items) 
    {
      foreach(int oo in lint1) 
      {
         if (itemm.ItemIndex == oo && RadGrid2.MasterTableView.CurrentPageIndex == 0)
            itemm.Visible = false
      
    }

    Hope I am helpful.
  19. Neerav
    Neerav avatar
    50 posts
    Member since:
    Nov 2010

    Posted 01 Dec 2010 Link to this post

    HI

    Thank you so much for youe reply.
    For the time being the problem I am able to get my problem working.
    I was using rowindex in session variable,  instead of which i used key value of rows and I got my problem working.
    --------------------------------------------------------------------------------------------------------------------------------------------------
    Now I have a panel "panel1" on my .aspx page. This panel is used to contain two radtreeview rtv1 and rtv2, where rtv1 is declared in .aspx page and rtv2 is declared in "page_load event";
    There are two asp:radio buttons "rb1" and "rb2". By default "rb1" will get selected and rtv1 will display in panel1. 
    Now  when I click "rb2", rtv1 should get clear from panel1 and rtv2 should get displayed in panel1 i.e. one radtreeview controls should get displayed in panel1 at a time.

    I have used session variables to store rtv1, rtv2 , panel1. Now on click of rb2, when I try to remove rtv1 from panel1, it gets removed but after that when I try to add rtv2 to panel1 I get following error  
    "Script controls may not be registered after PreRender."

    I have telerik script manager declared on .aspx page.

    Kindly let me know where I am getting wrong.

    Thanks and Regards

  20. Neerav
    Neerav avatar
    50 posts
    Member since:
    Nov 2010

    Posted 02 Dec 2010 Link to this post

    Hi,

    Got the previous problem working.
    --------------------------------------------------

    I have a empty "RadGrid1" and hyper links "A","ALL"...  on default.aspx page.
     On click of "ALL" I have opened a new window pop up using  "RadWindow" with radopen = ("default.aspx", radwindowID) method. This will pop up the window on same(default.aspx) page. Now this radwindow is defined on default.aspx page with a another radgrid "radgrid2" in it using content template tags of radwindow. The radgrid2 also has a template column with command = "move to selected" which on click will move the corresponding row from radgrid2 to radgrid1 and hide that row in radgrid2. This process can fill up radgrid1(which was empty). The radgrid2 has "onitemcommand  = "radgrid1_itemcommand"" property set to handle click event from template column (command name = "move to selected"), this property  has logic for hiding row in radgrid2 and moving row to radgrid1.

    Now I have been able to open the window on same page with radgrid2 in it with template column "+" in it.
    The page get loads and all GUI gets displayed properly along with radgrid1 and links. WHen I click "ALL" the radwindow gets pop up with data filled radgrid2 with template column "+" in it.
     The problem is, when I click "+" i.e. template column for first time the "radgrid1_itemcommand" method does not get fired. But from second click onwards the command gets fired and all workds well (i.e. rows get move to radgrid1 from radgrid2).
    On click of template column the radgrid1_itemcommand does not gets fired for first time and because of that, the row does not get move from radgrid2 to radgrid1  only for first time. BUt ll works on and after second click on template column.

    PFA the images of my current scenario where "Radgrid_image1" is image where I click on "+" for first time and nothing happens and "radgrid_image2" is image where the row moves to radgrid1 and get hidden in radgrid2.

     Ihave used following

     

    <telerik:RadAjaxManager runat="server" ID="radAjax" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="RadGrid2">
    <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="RadGrid2"/>
    <telerik:AjaxUpdatedControl ControlID="RadGridfirst" />

    </UpdatedControls>
    </telerik:AjaxSetting>
    </telerik:RadAjaxManager>

    Important thing that when I comment the above ajax setting code, all start to work well even for firts time i.e. rows gets shifted from from first click on template column. But this process closes the radwindow every time the template column getsclicked, so I have to click "ALL" again for opning the radwindow which is not at all my requirement.

    Kindly reply

    Thanks and Regards

     

  21. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 07 Dec 2010 Link to this post

    Hello Neerav,

    Please test the suggestion provided in the official support ticket opened for this issue.

    Best wishes,
    Maria Ilieva
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017