Hello,
I created my own PagerTemplate as described here.
Because the Grid only groups the shown rows on the page I decided to disable the Paging so the user can see all grouped rows.
Before I created my own PagerTemplate the disable function of the behaviour worked.
Here is the asp code:
<script type="text/javascript"><!-- function Grid_Paging_PageIndexChanged(sender) { var grid = $find('<%=Grid.ClientID%>'); var parentGrid = grid.get_gridView(); var dropdownlist = document.getElementById("ctl00_cphMain_DataControl1_Grid_ctl00_ctl00_DropDownList1"); //var dropdownlist = document.getElementById("<%=Grid.ClientID%>".concat("_ctl00_ctl00_DropDownList1")); dropdownlist.options[parentGrid.get_behaviors().get_paging().get_pageIndex()].selected = true; } function PrevButton_Click() { var grid = $find('<%=Grid.ClientID%>'); var parentGrid = grid.get_gridView(); if (parentGrid.get_behaviors().get_paging().get_pageIndex() > 0) { parentGrid.get_behaviors().get_paging().set_pageIndex(parentGrid.get_behaviors().get_paging().get_pageIndex() - 1); }} function NextButton_Click() { var grid = $find('<%=Grid.ClientID%>'); var parentGrid = grid.get_gridView(); if (parentGrid.get_behaviors().get_paging().get_pageIndex() < parentGrid.get_behaviors().get_paging().get_pageCount() - 1) { parentGrid.get_behaviors().get_paging().set_pageIndex(parentGrid.get_behaviors().get_paging().get_pageIndex() + 1); }} function FirstButton_Click() { var grid = $find('<%=Grid.ClientID%>'); var parentGrid = grid.get_gridView(); parentGrid.get_behaviors().get_paging().set_pageIndex(0);} function LastButton_Click() { var grid = $find('<%=Grid.ClientID%>'); var parentGrid = grid.get_gridView(); parentGrid.get_behaviors().get_paging().set_pageIndex(parentGrid.get_behaviors().get_paging().get_pageCount() - 1);} function IndexChanged() { var grid = $find('<%=Grid.ClientID%>'); var parentGrid = grid.get_gridView(); var dropdownlist = document.getElementById("ctl00_cphMain_DataControl1_Grid_ctl00_ctl00_DropDownList1"); parentGrid.get_behaviors().get_paging().set_pageIndex(dropdownlist.selectedIndex);}</script> <iggrd:WebHierarchicalDataGrid ID="Grid" runat="server" Width="576px" Height="250px" OnLoad="Grid_Load" OnRowSelectionChanged="Grid_RowSelectionChanged" OnDataFiltered="Grid_DataFiltered" OnColumnSorted="Grid_ColumnSorted" ImageDirectory="" OnInit="Grid_Init" OnGroupedColumnsChanged="Grid_GroupedColumnsChanged" OnRowIslandDataBinding="Grid_RowIslandDataBinding" ShowFooter="True" AutoGenerateBands="False" > <GroupingSettings EnableColumnGrouping="True" GroupAreaVisibility="Visible" InitialRowExpandState="Collapsed" ShowBandInGroupByArea="False" > </GroupingSettings> <Behaviors> <iggrd:Activation> </iggrd:Activation> <iggrd:Selection CellClickAction="Row" RowSelectType="Single" CellSelectType="None"> <AutoPostBackFlags RowSelectionChanged="True" /> </iggrd:Selection> <iggrd:Filtering> </iggrd:Filtering> <iggrd:Paging PageSize="30" QuickPages="5" PagerMode="NumericFirstLast"> <PagingClientEvents PageIndexChanged="Grid_Paging_PageIndexChanged" /> <PagerTemplate> <asp:Button runat="server" ID="FirstButton" Text="<<" OnClientClick="FirstButton_Click(); return false" Height="22px" CssClass=".igg_PageLink" /> <asp:Button runat="server" ID="PrevButton" Text="<" OnClientClick="PrevButton_Click(); return false" Height="22px" CssClass=".igg_PageLink" /> <asp:Button runat="server" ID="NextButton" Text=">" OnClientClick="NextButton_Click(); return false" Height="22px" CssClass=".igg_PageLink" /> <asp:Button runat="server" ID="LastButton" Text=">>" OnClientClick="LastButton_Click(); return false" Height="22px" CssClass=".igg_PageLink" /> <asp:DropDownList ID="DropDownList1" runat="server" Height="26px" OnChange="IndexChanged()" ></asp:DropDownList> <asp:Label ID="PageCount" runat="server" Text="von 1" Height="22px"></asp:Label> </PagerTemplate> </iggrd:Paging> <iggrd:ColumnMoving> </iggrd:ColumnMoving> <iggrd:ColumnResizing> </iggrd:ColumnResizing> <iggrd:Sorting> </iggrd:Sorting> <iggrd:SummaryRow> </iggrd:SummaryRow> </Behaviors> </iggrd:WebHierarchicalDataGrid>
<script type="text/javascript"><!--
function Grid_Paging_PageIndexChanged(sender) { var grid = $find('<%=Grid.ClientID%>'); var parentGrid = grid.get_gridView(); var dropdownlist = document.getElementById("ctl00_cphMain_DataControl1_Grid_ctl00_ctl00_DropDownList1"); //var dropdownlist = document.getElementById("<%=Grid.ClientID%>".concat("_ctl00_ctl00_DropDownList1"));
dropdownlist.options[parentGrid.get_behaviors().get_paging().get_pageIndex()].selected = true; }
function PrevButton_Click() { var grid = $find('<%=Grid.ClientID%>'); var parentGrid = grid.get_gridView(); if (parentGrid.get_behaviors().get_paging().get_pageIndex() > 0) { parentGrid.get_behaviors().get_paging().set_pageIndex(parentGrid.get_behaviors().get_paging().get_pageIndex() - 1); }}
function NextButton_Click() { var grid = $find('<%=Grid.ClientID%>'); var parentGrid = grid.get_gridView(); if (parentGrid.get_behaviors().get_paging().get_pageIndex() < parentGrid.get_behaviors().get_paging().get_pageCount() - 1) { parentGrid.get_behaviors().get_paging().set_pageIndex(parentGrid.get_behaviors().get_paging().get_pageIndex() + 1); }}
function FirstButton_Click() { var grid = $find('<%=Grid.ClientID%>'); var parentGrid = grid.get_gridView(); parentGrid.get_behaviors().get_paging().set_pageIndex(0);}
function LastButton_Click() { var grid = $find('<%=Grid.ClientID%>'); var parentGrid = grid.get_gridView(); parentGrid.get_behaviors().get_paging().set_pageIndex(parentGrid.get_behaviors().get_paging().get_pageCount() - 1);}
function IndexChanged() { var grid = $find('<%=Grid.ClientID%>'); var parentGrid = grid.get_gridView();
var dropdownlist = document.getElementById("ctl00_cphMain_DataControl1_Grid_ctl00_ctl00_DropDownList1"); parentGrid.get_behaviors().get_paging().set_pageIndex(dropdownlist.selectedIndex);}</script>
<iggrd:WebHierarchicalDataGrid ID="Grid" runat="server" Width="576px" Height="250px" OnLoad="Grid_Load" OnRowSelectionChanged="Grid_RowSelectionChanged" OnDataFiltered="Grid_DataFiltered" OnColumnSorted="Grid_ColumnSorted" ImageDirectory="" OnInit="Grid_Init" OnGroupedColumnsChanged="Grid_GroupedColumnsChanged" OnRowIslandDataBinding="Grid_RowIslandDataBinding" ShowFooter="True" AutoGenerateBands="False" > <GroupingSettings EnableColumnGrouping="True" GroupAreaVisibility="Visible" InitialRowExpandState="Collapsed" ShowBandInGroupByArea="False" > </GroupingSettings>
<Behaviors> <iggrd:Activation> </iggrd:Activation> <iggrd:Selection CellClickAction="Row" RowSelectType="Single" CellSelectType="None"> <AutoPostBackFlags RowSelectionChanged="True" /> </iggrd:Selection> <iggrd:Filtering> </iggrd:Filtering> <iggrd:Paging PageSize="30" QuickPages="5" PagerMode="NumericFirstLast"> <PagingClientEvents PageIndexChanged="Grid_Paging_PageIndexChanged" /> <PagerTemplate> <asp:Button runat="server" ID="FirstButton" Text="<<" OnClientClick="FirstButton_Click(); return false" Height="22px" CssClass=".igg_PageLink" /> <asp:Button runat="server" ID="PrevButton" Text="<" OnClientClick="PrevButton_Click(); return false" Height="22px" CssClass=".igg_PageLink" /> <asp:Button runat="server" ID="NextButton" Text=">" OnClientClick="NextButton_Click(); return false" Height="22px" CssClass=".igg_PageLink" /> <asp:Button runat="server" ID="LastButton" Text=">>" OnClientClick="LastButton_Click(); return false" Height="22px" CssClass=".igg_PageLink" /> <asp:DropDownList ID="DropDownList1" runat="server" Height="26px" OnChange="IndexChanged()" ></asp:DropDownList> <asp:Label ID="PageCount" runat="server" Text="von 1" Height="22px"></asp:Label> </PagerTemplate> </iggrd:Paging> <iggrd:ColumnMoving> </iggrd:ColumnMoving> <iggrd:ColumnResizing> </iggrd:ColumnResizing> <iggrd:Sorting> </iggrd:Sorting> <iggrd:SummaryRow> </iggrd:SummaryRow> </Behaviors> </iggrd:WebHierarchicalDataGrid>
In the code-behind I have disabled the Paging behaviour in the GroupedColumsChanged event.
protected void Grid_GroupedColumnsChanged(object sender, GroupedColumnsChangedEventArgs e) { if (e.GroupedColumns.Count > 0) { Grid.Behaviors.Paging.Enabled = false; } else { Grid.Behaviors.Paging.Enabled = true; //Grid.Rows[0].Items.FindItemByKey(e.GroupedColumns[0].ColumnKey).Column.Hidden = false; } }
Can I disable the paging on the client?
Infragistics Version: 2014 Volume 2.
Thank you for the code shared. I understand you scenario but I am surprised if this worked without the Paging Template. Even if you disable the paging in the GroupedColumnsChaning server side event it does not seem to affect the app as a whole. I believe the behavior should be removed and grid rendered again for this to take effect, but before proceeding please review the attached sample and let me know if this is the behavior you were facing before implementing the template.
Thanks for your sample. This is exactly the behavior I wanted. Your suggestion to remove and add the behavior in the GroupedColumnChanged event helped me.
But it is not necessary to remove it. You can disable the behavior and enable it again. The important thing to do is the to call the Grid.RefreshBehaviors() after changing the state.
I adjusted your sample because I only use the WHDG to group my rows. I don't have a hierarchical data structure.
Now I have the problem with my custom pager after enabling the paging again. The DropDownList is never filled again. Maybe the Grid_RowIslandDataBound event is the wrong event to fill it again? Is there a better event I should do that? Should I fill the DropDownList on the client with JavaScript using the pageCount of the paging behavior?
My infragistics version is 14.2.20142.1028.
I attached the new sample. I added some cell coloring to test it. I hope you don't mind.
I didn't try to use the ClientScriptManager at the moment so you can get the error I mentioned.
Hello Mathias,
Thank you for your sample. I saw your idea and further modified the sample to avoid the error you receive. Here is what I changed:
1) Setting EnableEventValidation attribute to false in the Page directive to avoid the error you were receiving:
<%@ Page EnableEventValidation="false" Language="C#" AutoEventWireup="true" CodeFile="WebForm1.aspx.cs" Inherits="Infragistics_Test.WebForm1" %>
2) Populate the drop down with items on Grid_Init AND on Grid_paging_PageIndexChanged:
function Grid_Init() { populateList(); }
function Grid_Paging_PageIndexChanged(sender) { var grid = $find('<%=Grid.ClientID%>'); var parentGrid = grid.get_gridView(); var dropdownlist = document.getElementById("DropDownList1"); populateList(); dropdownlist.options[parentGrid.get_behaviors().get_paging().get_pageIndex()].selected = true; }
3) Changed ClientIDMode attribute of the dropdown to static, because after postbacks id changes and the selectors previously used failed
<asp:DropDownList ID="DropDownList1" ClientIDMode="Static" runat="server" Height="26px" OnChange="IndexChanged()"></asp:DropDownList>
All selectors now get reference to the dropdown control like this
var dropdownlist = document.getElementById("DropDownList1");
Please run the attached sample and let me know if this works for you.
Thank you very much, the sample works very well in my application.
I only had to change the Grid_Paging_PageIndexChanged function to execute the populateList() function before setting the selected item.
I am glad this helped. Please let me know if you have further questions in the matter.
I have one more thing.
In the custom pager I defined a label after the dropdownlist which represents the page count of the grid.
Unfortunatelly the label pageCount is rendered as a text node inside the DropDownlist.
If I set the label before the list it will be rendered as a separate label element.
You can see the issue in your sample too.
I guess this is the issue if you have missed to set ClientIDMode="Static".
Anyway, thank you for sharing the other solution you have found, so that other community member can benefit from it also. Please let me know if you have any further questions on the matter.
Thanks but that only worked on the page initialization. If I change the page my JavaScript can't find the PageCount label.
So I tried another solution and this works for me. On every execution of the populateList method I create the label dynamically if the getElementByID() function can not find it.
I attached the sample.
This is strange. However you can easily move the element after the dropdown using BLOCKED SCRIPT
document.getElementsByClassName("igg_Pager")[0].appendChild(document.getElementById("PageCount"));
You need to execute this line both in the end of Grid_Init() and Grid_Paging_PageIndexChanged() functions.