This is a migrated thread and some comments may be shown as answers.

Problem in Client side paging in RadGrid

19 Answers 740 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sundar
Top achievements
Rank 1
Sundar asked on 29 Oct 2008, 07:08 PM
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

19 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 31 Oct 2008, 09:49 AM
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.
0
Sundar
Top achievements
Rank 1
answered on 02 Nov 2008, 05:32 PM
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
0
Rosen
Telerik team
answered on 05 Nov 2008, 01:12 PM
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.
0
Kevin Castle
Top achievements
Rank 1
answered on 01 Dec 2008, 09:33 PM
"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?
0
Crescent
Top achievements
Rank 1
answered on 02 Dec 2008, 03:20 AM
> 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.
0
Enrico Foschi
Top achievements
Rank 2
answered on 17 Dec 2008, 11:29 AM
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.
0
Vlad
Telerik team
answered on 17 Dec 2008, 11:33 AM
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.
0
Enrico Foschi
Top achievements
Rank 2
answered on 17 Dec 2008, 11:54 AM
Hi Vlad,

I am checking the examples now.

Thanks,
Enrico
0
Enrico Foschi
Top achievements
Rank 2
answered on 17 Dec 2008, 12:29 PM
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





0
Rosen
Telerik team
answered on 17 Dec 2008, 02:05 PM
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.
0
Enrico Foschi
Top achievements
Rank 2
answered on 17 Dec 2008, 02:16 PM
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
0
Sebastian
Telerik team
answered on 17 Dec 2008, 02:20 PM
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.
0
Enrico Foschi
Top achievements
Rank 2
answered on 17 Dec 2008, 02:24 PM
Hi Sebastian.

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

Thanks
0
Sebastian
Telerik team
answered on 17 Dec 2008, 02:59 PM
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.
0
Neerav
Top achievements
Rank 1
answered on 01 Dec 2010, 05:52 AM
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

 

0
Prangadj
Top achievements
Rank 1
answered on 01 Dec 2010, 09:50 AM
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.
0
Neerav
Top achievements
Rank 1
answered on 01 Dec 2010, 01:25 PM
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

0
Neerav
Top achievements
Rank 1
answered on 02 Dec 2010, 01:50 PM
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

 

0
Maria Ilieva
Telerik team
answered on 07 Dec 2010, 04:32 PM
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.
Tags
Grid
Asked by
Sundar
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Sundar
Top achievements
Rank 1
Kevin Castle
Top achievements
Rank 1
Crescent
Top achievements
Rank 1
Enrico Foschi
Top achievements
Rank 2
Vlad
Telerik team
Sebastian
Telerik team
Neerav
Top achievements
Rank 1
Prangadj
Top achievements
Rank 1
Maria Ilieva
Telerik team
Share this question
or