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.
Hello Matthias,
Thank you for providing a sample that represents your issue. I have been looking at it and it seems that the DropDownList is not initialized, only its html element is rendered, but the control itseld does not exist. I am further investigating this to see why it happens and to suggest a solution.
did you find a solution for this problem?
Best regards,
Matthias Mildner
Hello Mathias,
I will update this thread today,17 march. Thank you for your patience and understanding as working on this is taking longer than expected.
As mentioned some controls placed inside the paging template fail to initialize in similar scenario. I spent time investigating this and the most painless solution seems to just trigger a postback so that the grid refreshes itself and the controls successfully initialize. To achieve this I handle the GroupedColumnsChanged client side event and trigger a postback as follows:
function Grid_ContainerGrid_GroupedColumnsChanged(sender, eventArgs) { if (eventArgs.get_groupedColumns().get_length() == 0) { __doPostBack('Grid', ''); } }
To avoid the full postback I have placed the grid inside an UpdatePanel control. Please let me know if this works for you or if you need a different solution/approach to this issue.
first of all thank you for your investigation.
I tried the code in the test sample and it worked. Unfortunatelly it doesn't work in my program. I have to further look at it.
As a test I tried to fill the combobox on the client in the Grid_Init event. It seems to work but if I want to change the page I get an AJAX error: Invalid Postback or Callback argument.
The message says that I have to use the ClientScriptManager.RegisterForEventValidation() method on every value the dropdown list have. Maybe the issue wouldn't exist if I use the Infragistics WebDropDown component. The reason why I use the asp DropDownList is because I can't arrange the asp buttons and the Infragistics dropdownlist in one line.
Does the UpdatePanel have a disadvantage? I have never used it before.
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.
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 am glad this helped. Please let me know if you have further questions in the matter.