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
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.
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
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 = 1, len = 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.
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?
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.
Guys, please either implement this feature asap or just clearly mention this lack.
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.
I am checking the examples now.
Thanks,
Enrico
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<string, object> GetDataForSearch(int startRowIndex, int maximumRows, List<GridSortExpression> sortExpression, List<GridFilterExpression> filterExpression) |
{ |
Dictionary<string, object> retVal = new Dictionary<string, object>(); |
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
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.
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
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.
Will do. Can you please link me the ticketing service / helpdesk or should I contact the sales team?
Thanks
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.
Posted 14 hours ago (permalink)
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
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.
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
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
Please test the suggestion provided in the official support ticket opened for this issue.
Best wishes,
Maria Ilieva
the Telerik team