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

Client side paging

3 Answers 137 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jamil
Top achievements
Rank 1
Jamil asked on 30 Jan 2013, 11:14 PM

Hi,

i've populated the grid with all the records (600) during the asp.net  page loading and ncessary grid settings too. for example, VirtualItemCount and set the pagesize=100. the pager is properly showing the number of pages and the number of records.

 What i want to do is to show data of one page at a time which means once the asp.net page is loaded it will show the first page content which is doing upon the first load. Now when a user clicks on the next button, the grid should show the next page content. I don't wana do the poast back because all the data is already binded with the grid. it is just a matter of displaying per page. 

i've implemneted grid1_Command on client side to avoid post back whenever a user will click any button on the pager. Now i need to ask you what setting i need to do either with the grid or master table to show the next page content?

please note that when i click the next button the  pager, its status gets change to 2 of 6 page but the grid still shows first 100 records whereas it should show 101-200 records.

Thanks.

function grid1_Command(sender, args) {
              args.set_cancel(true);
                 
              var cmdName = args.get_commandName();
              if (cmdName == 'Page') {
                  var cmdArg = args.get_commandArgument();
                  switch (cmdArg) {
                      case "Next":

                          break;
                  }
              }                                         
          }



 I've following settings on the grid. i'm purposely omitting the columns part.

<telerik:RadGrid ID="grid1" runat="server" AutoGenerateColumns="False"
                        EnableEmbeddedSkins="False" Skin="Grid" EnableViewState="true"
                        PageSize="100" AllowPaging="true" AllowSorting="true" HorizontalAlign="Left"
                        GridLines="None" Width="100%" Height="100%" AllowMultiRowSelection="true">                                           
                        <MasterTableView Width="100%" CellPadding="0" EnableTheming="False" CanRetrieveAllData="true"
                            GridLines="None" GroupsDefaultExpanded="False" HorizontalAlign="Left" TableLayout="Fixed"                            
                            HeaderStyle-HorizontalAlign="Left" AllowMultiColumnSorting="false"
                            AllowNaturalSort="true" AllowCustomSorting="false" ShowHeadersWhenNoRecords="true"> <SortExpressions>
                                <telerik:GridSortExpression FieldName="CreationDate" SortOrder="Descending" />
                                </SortExpressions>                                                                                                                                                                                                          
                            <PagerStyle AlwaysVisible="true" Height="25px" Width="100%" Mode="NextPrev" />                           
                       </MasterTableView>                      
                        <ClientSettings EnablePostBackOnRowClick="false" EnableRowHoverStyle="true" AllowColumnHide="true">                           
                            <Selecting AllowRowSelect="True" />                   
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="100%" FrozenColumnsCount="0" />                           
                            <ClientEvents OnCommand="grdModelSearch_Command" OnRowSelecting="RowSelecting" OnRowSelected="RowSelected" OnRowDeselected="RowDeselected" OnRowDblClick="RowDoubleClicked" />
                            <Resizing AllowColumnResize="true" />                                               
                        </ClientSettings>               
                        <SortingSettings EnableSkinSortStyles="false" />                         
            </telerik:RadGrid>                      

3 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 04 Feb 2013, 10:33 PM
Hi,

The issue you have stumbled upon is most probably due to the sequence in which client-side events in the grid fire - some of those precede the OnCommand event (such as changing buttons and their hover styles, showing sort pictures etc.) and some of those come after it. This sequence of events is not a bug with the control and cannot be changed as it is related, as already mentioned, to client-side binding. To sum it up, given your scenario, the OnCommand event will not do with all post-back commands and you need to work around those cases. In the case of the page index changing problem, the work-around is as follows:
<telerik:RadScriptBlock ID="ScriptBlock1" runat="server">
    <script type="text/javascript">
        var currentPageIndexl;
        function pageLoad() {
            currentPageIndex = $find("RadGrid1").get_masterTableView().get_currentPageIndex()
        }
        function onCommand(sender, args) {
            args.set_cancel(true);
            sender.get_masterTableView().set_currentPageIndex(currentPageIndex);
        }
    </script>
</telerik:RadScriptBlock>

Give it a try and see if it works for you.

Regards,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Jamil
Top achievements
Rank 1
answered on 05 Feb 2013, 03:24 PM
sorry, it did not work.... i experienced the same behavior i.e. the grid does not reflect the next page but the default pager does change its page number and record number status.

Technically it should work but in vain. I'm using Telerik 2011.2.915.40 version.

Please let me know if there is a workaround for this as soon as you can becuase i've to deliver time sensitive task.

Thanks.
0
Pavlina
Telerik team
answered on 08 Feb 2013, 02:49 PM
Hi Jamil,

At this point it will be best if you prepare a sample runnable project and send it to us, so we can debug it locally and provide a proper solution for you.

You can also download the latest version of RadControls for ASP.NET AJAX and see if it makes any difference.

All the best,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Jamil
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Jamil
Top achievements
Rank 1
Share this question
or