Hi,
we have a customized webdatagrid with 20 columns per row and have around 1200 rows to display. its taking around 45 seconds to load the entire data and display it to user. Since this grid is on the Homepage of the site. the home page loading is also very slow. we are using Webdatagrid V12.2
<asp:Panel ID="Panel" runat="server"> <ig:WebDataGrid ID="UltraWebGrid" runat="server" OnInitializeRow="UltraWebGrid_InitializeRow" EnableRelativeLayout="false" HeaderCaptionCssClass="GridHeaderCaption" OnInit="UltraWebGrid_Init" OnRowUpdated="UltraWebGrid_RowUpdated" OnRowUpdating="UltraWebGrid_RowUpdating" OnColumnMoved="UltraWebGrid_ColumnMoved" EnableAjax="true" EnableAjaxViewState="true" EnableDataViewState="True" OnColumnResized="UltraWebGrid_ColumnResized" OnColumnSorted="UltraWebGrid_ColumnSorted" > <Behaviors> <ig:Sorting> </ig:Sorting> <ig:ColumnMoving EnableInheritance="True"> </ig:ColumnMoving> <ig:Filtering FilterType="ExcelStyleFilter"> </ig:Filtering> <ig:ColumnResizing Enabled="true"> <ColumnSettings> <ig:ColumnResizeSetting EnableResize="true" /> </ColumnSettings> </ig:ColumnResizing> <ig:EditingCore AutoCRUD="false"> <EditingClientEvents CellValueChanged="UltraWebGrid_Editing_CellValueChanged" /> <Behaviors> <ig:CellEditing> <CellEditingClientEvents /> <EditModeActions EnableOnActive="True" MouseClick="Single" /> </ig:CellEditing> </Behaviors> </ig:EditingCore> </Behaviors> </ig:WebDataGrid> </asp:Panel>
Any Idea on how to speed this up? can we use Asyncscroll/Paging or any other property of the grid to initially load few records and then get some more in background asynchronously and improve the speed of the Page/application?
Thanks,
Hello,
You can use the Paging behavior to control the given number of records that are loaded on each page. This way you will significantly improve the loading time of the WebDataGrid. If you set the PageSize to 20, the WebDataGrid will send to the client only 20 records of all records fetched from the database. So, if you are fetching thousands of records from the database on each request, this is still an issue. IN this situation you can use the Custom DataBinding approach. When using custom data binding, only the records that are needed to display are fetched from the data server, thus strongly decreasing the data load.
If you still need to load a high number of records on the client, the Virtual Scrolling behavior is next thing to try. Virtual Scrolling allows to send partial amounts of data records to the client, and request additional data records on demand as the end-user scrolls through the control. The Virtual Scrolling behavior therefore greatly improves performance. You can also check this sample demonstrating the Virtual Scrolling behavior.
I hope the above information is enough to get you started. Please do not hesitate to contact us if any questions occur.
Hi, I tried implementing paging. I have a couple of follow up issues though.
if I want to change the color of the Page number and make it more apparent to the user, should I override theigg_PageCurrent class? or what should be done?
Secondly, I want to make the paging index to be shown on both top and bottom of the grid.
And thirdly, when I open a record from the grid, it takes me to a new page in te same browser. Now when I hit the back button, I am back to page 1. how do I restore the page number though we hit the back button.
Thanks
Please find my answers below:
1) Overriding the class is best way to define your custom styles. I suggest that you do this in an external css file rather than modifying the original one.
2) Displaying the paging UI botх on top and bottom of the grid is not supported out of the box, so you will need to manually update the grid DOM to achieve that. The client side Initialize event is a suitable timing to do that.
3) The browser navigates back and the grid needs to be displaying the same page, doesnt' it ? Why the page index would need to be updated then ? Please let me know if I am missing something from the scenario.
I am looking forward to hearing from you if further questions occur.
Paging can be turned off and on programmatically via server side code, so you can do this based on the rows count. An example on how to enable Paging programmatically can be found at the Paging help topic.
Please let me know if you have other questions, I will be glad to help.
Hi Any Update for me in this regard?
can we make that, Paging and pager is available only when there is more than 1 page?
The easiest way to preserve the paging is keep the page index in a session before navigating to other pager, and restore that page on each postback:
protected void btAction_Click(object sender, EventArgs e) { Session["CurrentGridPage"] = WebDataGrid1.Behaviors.Paging.PageIndex; Response.Redirect("newage.aspx"); }
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { if (Session["CurrentGridPage"] != null) { int page = (int)(Session["CurrentGridPage"]); WebDataGrid1.Behaviors.Paging.PageIndex = page; } }... }
Please let me know if you have other questions, I will be glad to help
Hi, So for the third question, if a user is viewing records on page 3 and clicks on something that takes to a different page. After the user hits the browser back button, the Pageindex is reset to 1. But the user want to have it as 3 (from what page index was he navigated). Is itr possible, or am I missing something.