iSeller Commerce
iSeller POS Retail
iSeller POS F&B
iSeller POS Express
Crosslight
WebUI
ClientUI
What's New
Download Trial
Web Solution
Mobile Solution
Enterprise Solution
Custom Development
Blog
Community
Latest Development Blogs
ForumPostTopic
Browse By Tag
I have a problem when I try to dynamically change grouping in WebGrid using javascript function on the client side. I use dropdown list to specify in which ways to group data in grid.
<asp:DropDownList ID="ddlGrupiranje" runat="server" SkinID="Medium" onchange="ChangeGroup(this.id);"> <asp:ListItem Text="Po oznaci" Value="1" Selected="True"></asp:ListItem> <asp:ListItem Text="Po fazi" Value="2" Selected="False"></asp:ListItem> <asp:ListItem Text="Po ics-u" Value="3" Selected="False"></asp:ListItem> <asp:ListItem Text="Po oznaci izvornika" Value="4" Selected="False"></asp:ListItem> <asp:ListItem Text="Po tajniku" Value="5" Selected="False"></asp:ListItem> <asp:ListItem Text="Po smjernicama" Value="6" Selected="False"></asp:ListItem> <asp:ListItem Text="Po naslovu" Value="7" Selected="False"></asp:ListItem> <asp:ListItem Text="Povučeni projekti" Value="8" Selected="False"></asp:ListItem> <asp:ListItem Text="Po Glasilu - rasprava" Value="9" Selected="False"></asp:ListItem> <asp:ListItem Text="Po Glasilu - objava" Value="10" Selected="False"></asp:ListItem> <asp:ListItem Text="Po Glasilu - ispravak" Value="11" Selected="False"></asp:ListItem> <asp:ListItem Text="Po Glasilu - potvrđivanje" Value="12" Selected="False"></asp:ListItem> <asp:ListItem Text="Po Glasilu - povlačenje" Value="13" Selected="False"></asp:ListItem> <asp:ListItem Text="Arhiva" Value="14" Selected="False"></asp:ListItem> </asp:DropDownList>
Javascript function is defined like this:
function ChangeGroup(ddlId) { var ddl = document.getElementById(ddlId); var selectedValue = ddl.options[ddl.selectedIndex].value; var grid = ISGetObject("WebGrid1"); if (grid == null) { return; } var rootTable = grid.RootTable; while (rootTable.GroupedColumns[0] != null) { rootTable.GroupedColumns.RemoveAt(0); } switch (selectedValue) { case "1": var newGroup = new WebGridGroup(); newGroup.ColumnMember = "TehOdbor"; newGroup.GroupInterval = "Text"; newGroup.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(newGroup); break; case "2": var newGroup = new WebGridGroup(); newGroup.ColumnMember = "TehOdbor"; newGroup.GroupInterval = "Text"; newGroup.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(newGroup); var groupby2 = new WebGridGroup(); groupby2.ColumnMember = "Faza"; groupby2.GroupInterval = "Text"; groupby2.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby2); break; case "3": var groupby = new WebGridGroup(); groupby.ColumnMember = "TehOdbor"; groupby.GroupInterval = "Text"; groupby.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby); var ics1 = new WebGridGroup(); ics1.ColumnMember = "ICSGrupa1"; ics1.GroupInterval = "Text"; ics1.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(ics1); var ics2 = new WebGridGroup(); ics2.ColumnMember = "ICSGrupa2"; ics2.GroupInterval = "Text"; ics2.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(ics2); var ics3 = new WebGridGroup(); ics3.ColumnMember = "ICS"; ics3.GroupInterval = "Text"; ics3.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(ics3); break; case "4": var groupby = new WebGridGroup(); groupby.ColumnMember = "TehOdbor"; groupby.GroupInterval = "Text"; groupby.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby); var groupby2 = new WebGridGroup(); groupby2.ColumnMember = "Faza"; groupby2.GroupInterval = "Text"; groupby2.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby2); break; case "5": var tajnik = new WebGridGroup(); tajnik.ColumnMember = "Tajnik"; tajnik.GroupInterval = "Text"; tajnik.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(tajnik); var groupby = new WebGridGroup(); groupby.ColumnMember = "TehOdbor"; groupby.GroupInterval = "Text"; groupby.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby); var groupby2 = new WebGridGroup(); groupby2.ColumnMember = "OznakaIzvornika"; groupby2.GroupInterval = "Text"; groupby2.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby2); break; case "6": var groupby = new WebGridGroup(); groupby.ColumnMember = "VezaEUDirektive"; groupby.GroupInterval = "Text"; groupby.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby); break; case "7": var newGroup = new WebGridGroup(); newGroup.ColumnMember = "TehOdbor"; newGroup.GroupInterval = "Text"; newGroup.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(newGroup); break; case "8": var newGroup = new WebGridGroup(); newGroup.ColumnMember = "TehOdbor"; newGroup.GroupInterval = "Text"; newGroup.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(newGroup); break; case "9": var groupby = new WebGridGroup(); groupby.ColumnMember = "Rasprava"; groupby.GroupInterval = "Text"; groupby.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby); var groupby2 = new WebGridGroup(); groupby2.ColumnMember = "Tajnik"; groupby2.GroupInterval = "Text"; groupby2.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby2); break; case "10": var groupby = new WebGridGroup(); groupby.ColumnMember = "Objava"; groupby.GroupInterval = "Text"; groupby.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby); var groupby2 = new WebGridGroup(); groupby2.ColumnMember = "Tajnik"; groupby2.GroupInterval = "Text"; groupby2.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby2); var TOGroup = new WebGridGroup(); TOGroup.ColumnMember = "TehOdbor"; TOGroup.GroupInterval = "Text"; TOGroup.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(TOGroup); break; case "11": var groupby = new WebGridGroup(); groupby.ColumnMember = "Ispravak"; groupby.GroupInterval = "Text"; groupby.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby); var groupby2 = new WebGridGroup(); groupby2.ColumnMember = "Tajnik"; groupby2.GroupInterval = "Text"; groupby2.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby2); break; case "12": var groupby = new WebGridGroup(); groupby.ColumnMember = "Potvrdjivanje"; groupby.GroupInterval = "Text"; groupby.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby); var groupby2 = new WebGridGroup(); groupby2.ColumnMember = "Tajnik"; groupby2.GroupInterval = "Text"; groupby2.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby2); break; case "13": var groupby = new WebGridGroup(); groupby.ColumnMember = "Povlacenje"; groupby.GroupInterval = "Text"; groupby.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby); var groupby2 = new WebGridGroup(); groupby2.ColumnMember = "Tajnik"; groupby2.GroupInterval = "Text"; groupby2.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(groupby2); break; case "14": var newGroup = new WebGridGroup(); newGroup.ColumnMember = "TehOdbor"; newGroup.GroupInterval = "Text"; newGroup.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(newGroup); break; default: var newGroup = new WebGridGroup(); newGroup.ColumnMember = "TehOdbor"; newGroup.GroupInterval = "Text"; newGroup.SortOrder = "Disabled"; grid.RootTable.GroupedColumns.Add(newGroup); break; } grid.RootTable.UpdateUI(); grid.Refresh(); }
Grid itself has over 30 columns. When I change grouping, columns that are used for grouping are removed from RootTable.Columns collection. When I change back grouping to previous selection, javascript error of undefined is thrown, because columns were removed when they were first grouped by.
When GroupedColumns are cleared, regarding columns are not returned to RootTable.Columns collection.
How can this be solved?
Hi,
I forgot to let you know that there is also one properties that you should need to add. 'HideColumnsWhenGrouped="No"' . The sample should be working fine now.
Regards,Handy
The issue should be not happened. Please use grid.RefreshAll() instead of grid.Refresh(). grid.Refresh() doesn't refresh the structure while change or remove grouping would have different structure. Refreshing WebGrid structure would be also needed.
When you removed the group column, you will need also to use RefreshAll(). Please look into WebGridTutorial>> Client_ProgrammaticUI.aspx. There should be a sample in those page about how to remove and add group column.
The error happens when grid.RootTable.UpdateUI(); is called. It happens when I add group by column that has been previously removed from the Group By columns.
I have attached an example for you. I have modified your Programmatic_UI2 example from the WebGridTutorial solution. Run it, click Add Group, then click Remove Group and again Add Group and you will get the same exception.
I found that missing GroupByBoxVisible="True" caused the error. Please try to add this properties in your grouping column. It seems when you want to add a grouped column programmatically from client side, you will need this properties. Hope this helps.
I set the property GroupByBoxVisible="True" in the example that I have previously uploaded and I still get the same exception.
The problem is this. When grid is loaded for the first time, there is no grouping and column Country is shown with other columns in the grid.
When "Add Group" is clicked, javascript function creates grouping and grid groups by the Country column.
When "Remove Group" is clicked, javascript function removes group and there are no more groups in the grid but the Country column is missing.
When "Add Group" is clicked again, "null or not an object" is thrown while calling grid.RootTable.UpdateUI(); in javascript function.
This is probably because column Country is missing from the Columns section of the grid. It was removed by the grid first time it was grouped by but it was not returned to it when it was removed from the GroupedColumns section.
or
Choose this if you're already a member of Intersoft Community Forum. You can link your OpenID account to your existing Intersoft Social ID.
Choose this if you don't have an Intersoft account yet. Your authenticated OpenID will be automatically linked to your new Intersoft account.
Enter your Wordpress Blogname