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 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.
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.
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.
Thank you for your feedback.
What the UpdatePanel does is convert a full postback to a partial one that updates only the content of the UpdatePanel. If you do not place the grid inside UpdatePanel when the postback happens the page will flicker. I can't think of any disadvantage this may bring. It is your decision to see if this work around will do the job for your application using this additional postback.
Using the Infragistics WebDropDown control issue still persists. It is strange that the asp and IG drop down controls fail to initialize in this scenario, while other controls don't.
You can tell me how you try to populate the control on Grid_Init event so that I can investigate the error you receive.
Looking forward to hearing from you.
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.