WebGrid client-side dynamic grouping problem

handy@intersoftpt.com — Sun, 14 Mar 2010 23:37:11 GMT

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

WebGrid client-side dynamic grouping problem

Mladen.maras@combis.hr — Fri, 12 Mar 2010 05:35:32 GMT

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.

How can this be solved?

WebGrid client-side dynamic grouping problem

handy@intersoftpt.com — Fri, 12 Mar 2010 04:54:14 GMT

Hi,

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.

Regards,
Handy

WebGrid client-side dynamic grouping problem

Mladen.maras@combis.hr — Fri, 12 Mar 2010 03:58:59 GMT

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.

WebGrid client-side dynamic grouping problem

handy@intersoftpt.com — Thu, 11 Mar 2010 22:00:06 GMT

Hi,

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.

Regards,
Handy

WebGrid client-side dynamic grouping problem

Mladen.maras@combis.hr — Thu, 11 Mar 2010 09:59:36 GMT

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?

Intersoft Community - WebGrid Enterprise - WebGrid client-side dynamic grouping problem

WebGrid client-side dynamic grouping problem

WebGrid client-side dynamic grouping problem

WebGrid client-side dynamic grouping problem

WebGrid client-side dynamic grouping problem

WebGrid client-side dynamic grouping problem

WebGrid client-side dynamic grouping problem