Clientside PagerTemplate?

[sitefinitysteve]

Doing clientside binding, and I just want my pager to be

Next | Previous

...if I set the template in the markup it posts back.

Whats the way to get this done?

[Nikolay Rusev]

Hello Steve,

Bellow code demonstrates how to utilize RadGrid PagerTemplate with client-side binding.

01.<telerik:RadGrid runat="server" ID="RadGrid2" AutoGenerateColumns="false" AllowPaging="true"
02.            PageSize="2">
03.            <MasterTableView>
04.                <Columns>
05.                    <telerik:GridBoundColumn DataField="ID">
06.                    </telerik:GridBoundColumn>
07.                </Columns>
08.                <PagerTemplate>
09.                    <input class="rgPagePrev" title="Previous Page" onclick="$find('<%#Container.OwnerTableView.ClientID%>').page('Prev');"
10.                        value=" " type="button">
11.                    <input class="rgPageNext" title="Next Page" onclick="$find('<%#Container.OwnerTableView.ClientID%>').page('Next');"
12.                        value=" " type="button">
13.                </PagerTemplate>
14.            </MasterTableView>
15.            <ClientSettings>
16.                <ClientEvents OnCommand="command" />
17.            </ClientSettings>
18.        </telerik:RadGrid>

01.<script type="text/javascript">
02.           //sample data
03.           var data =
04.           [
05.               { ID: 1 },
06.               { ID: 2 },
07.               { ID: 3 },
08.               { ID: 4 },
09.               { ID: 5 },
10.               { ID: 6 },
11.           ];
12.           var mtv = null;
13.           function pageLoad()
14.           {
15.               //cache the ref to MasterTableView
16.               mtv = $find("RadGrid2").get_masterTableView();
17.
18.               //bind RadGrid
19.               bindGrid(0, 2);
20.
21.               //set virtual items count
22.               mtv.set_virtualItemCount(data.length - 1);
23.           }
24.           function command(sender, args)
25.           {
26.               //cancel to prevent postback
27.               args.set_cancel(true);
28.
29.               //calculate page size items
30.               var pageSize = mtv.get_pageSize();
31.               var index = mtv.get_currentPageIndex() * pageSize;
32.               var itemsToTake = Math.min(pageSize, data.length);
33.
34.               //bind RadGrid
35.               bindGrid(index, index + itemsToTake);
36.           }
37.           function bindGrid(startIndex, endIndex)
38.           {
39.               mtv.set_dataSource(Array.prototype.slice.call(data, startIndex, endIndex));
40.               mtv.dataBind();
41.           }
42.       </script>

Greetings,
Nikolay
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[sitefinitysteve]

Perfect, thank you!