I am upgrading from 10.3 to 14.2, and in this example especially, from an UltraWebGrid to a WebHierarchicalDataGrid. I am using Visual Studio 2010 with VB.Net and ASP.Net website. This is a "two level" grid and I want to allow users (of specific permissions) to add rows to specific sections. I will explain the old way of what we were doing and where I am with the new way. (Note: Please understand that there are multiple developers on this project and I was not on the team when 10.3 was implemented, so why some things were done some ways I am not sure.)
Old WayAcross the top we have five buttons, one of them being "New". On Page_Load, the click function of this button would be set to "AddRow". Following is the AddRow function:
var parentRow; function AddNew(oButton, oEvent) { var readOnly = 0; try { var row = igtbl_getActiveRow("<% response="" write="" wdgadmin="" clientid="">"); var pRow = igtbl_getParentRow("<% response="" write="" wdgadmin="" clientid="">", row.Element); if (pRow==null) { //alert("pRow=null"); pRow=row.Element; myRow=igtbl_getRowById(pRow.id); parentRow=myRow; } else { //alert ("getting row"); //myRow=igtbl_getRowById(row.Element.id); myRow=parentRow; } readOnly=myRow.getCell(0).getValue(); if (readOnly > 0) { //alert ("trying to insert"); igtbl_addNew("<% response="" write="" wdgadmin="" clientid="">", 1); //alert ("Inserted"); igtbl_EnterEditMode("<% response="" write="" wdgadmin="" clientid="">"); } oEvent.cancel = true; } catch(ex) { alert("Select the appropriate category before clicking new"); } }
Looking at this forum post, it appears that there is a much simpler way for single level grids, but I am curious as to how I can manipulate it for a multi-level grid.
Suggested New Way (Single Level Grid) function AddNewRow() { var grid = $find("wdgAdmin"); var row = new Array(grid.get_rows().length, "Name", "Description"); grid.get_rows().add(row); }
In the markup in the old way, there was nothing that specified anything for adding a new row. It was all done in the code behind. However, I believe there are things I need to do in the new grid in the markup. Here's what it looks like.
New Markup <igwdg:WebHierarchicalDataGrid ID="wdgAdmin" ClientIDMode="Static" OnRowAdded="wdgAdmin_RowAdded" runat="server" InitialDataBindDepth="0" AutoGenerateBands="true" AutoGenerateColumns="false" DataKeyFields="Permissions"> <Columns> <igwdg:BoundDataField Key="Permissions" DataFieldName="Permissions" DataType="System.Int64" Hidden="true"> <Header Text="Permissions" Tooltip="Permissions" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="OrgOfficeSectionId" DataFieldName="OrgOfficeSectionId" DataType="System.Decimal" Hidden="true"> <Header Text="OrgOfficeSectionId" Tooltip="OrgOfficeSectionId" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="SectionID" DataFieldName="SectionID" DataType="System.Decimal" Hidden="True"> <Header Text="SectionID" Tooltip="SectionID" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="OfficeId" DataFieldName="OfficeId" DataType="System.Decimal" Hidden="True"> <Header Text="OfficeId" Tooltip="OfficeId" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="OrgId" DataFieldName="OrgId" DataType="System.Decimal" Hidden="True"> <Header Text="OrgId" Tooltip="OrgId" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="Header" DataFieldName="Header" Width="784px"> <Header Text="Category" Tooltip="Category" /> </igwdg:BoundDataField> </Columns> <Behaviors> <igwdg:Sorting Enabled="false"></igwdg:Sorting> <igwdg:EditingCore> <Behaviors> <igwdg:RowAdding Enabled="false"></igwdg:RowAdding> <igwdg:RowEditing Enabled="false"></igwdg:RowEditing> <igwdg:RowDeleting Enabled="false"></igwdg:RowDeleting> </Behaviors> </igwdg:EditingCore> </Behaviors> <Bands> <igwdg:Band DataMember="Item" Key="Item" DataKeyFields="Permissions" AutoGenerateColumns="false"> <Columns> <igwdg:BoundDataField Key="Permissions" DataFieldName="Permissions" DataType="System.Int64" Hidden="True"> <Header Text="Permissions" Tooltip="Permissions" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="SectionId" DataFieldName="SectionId" DataType="System.Decimal" Hidden="True" Width="30px"> <Header Text="SectionId" Tooltip="SectionId" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="ItemId" DataFieldName="ItemId" DataType="System.Decimal" Hidden="True" Width="30px"> <Header Text="ItemId" Tooltip="ItemId" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="OfficeId" DataFieldName="OfficeId" DataType="System.Decimal" Hidden="True" Width="30px"> <Header Text="OfficeId" Tooltip="OfficeId" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="OrgId" DataFieldName="OrgId" DataType="System.Decimal" Hidden="True" Width="30px"> <Header Text="OrgId" Tooltip="OrgId" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="ItemName" DataFieldName="ItemName" Width="130px" HtmlEncode="true"> <Header Text="Name" Tooltip="Name" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="Item" DataFieldName="Item" Width="600px" HtmlEncode="true" EnableMultiline="true"> <Header Text="Description" Tooltip="Description" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="OfficeCode" DataFieldName="OfficeCode" Hidden="True"> <Header Text="OfficeCode" Tooltip="OfficeCode" /> </igwdg:BoundDataField> </Columns> <Behaviors> <igwdg:EditingCore Enabled="true" AutoCRUD="false"> <Behaviors> <igwdg:RowAdding Enabled="true" Alignment="Top"></igwdg:RowAdding> <igwdg:RowEditing Enabled="true"></igwdg:RowEditing> <igwdg:RowDeleting Enabled="true"></igwdg:RowDeleting> <igwdg:CellEditing Enabled="true"> <ColumnSettings> <igwdg:EditingColumnSetting ColumnKey="ItemName" /> <igwdg:EditingColumnSetting ColumnKey="Item" /> </ColumnSettings> </igwdg:CellEditing> </Behaviors> </igwdg:EditingCore> <igwdg:Sorting Enabled="true" SortingMode="Single"> <ColumnSettings> <igwdg:SortingColumnSetting ColumnKey="ItemName" Sortable="true" /> </ColumnSettings> </igwdg:Sorting> </Behaviors> <Bands> <igwdg:Band DataMember="Response" Key="Response" DataKeyFields="ResponseID" AutoGenerateColumns="false"> <Columns> <igwdg:BoundDataField Key="ResponseID" DataFieldName="ResponseID" DataType="System.Decimal" Hidden="True"> <Header Text="ResponseID" Tooltip="ResponseID" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="ItemId" DataFieldName="ItemId" DataType="System.Decimal" Hidden="True"> <Header Text="ItemId" Tooltip="ItemId" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="ResponseCode" DataFieldName="ResponseCode"> <Header Text="ResponseCode" Tooltip="ResponseCode" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="Response" DataFieldName="Response"> <Header Text="Response" Tooltip="Response" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="ResponseOrder" DataFieldName="ResponseOrder" DataType="System.Decimal" Hidden="True"> <Header Text="ResponseOrder" Tooltip="ResponseOrder" /> </igwdg:BoundDataField> <igwdg:BoundDataField Key="Permissions" DataFieldName="Permissions" DataType="System.SByte" Hidden="True"> <Header Text="Permissions" Tooltip="Permissions" /> </igwdg:BoundDataField> </Columns> <Behaviors> <igwdg:EditingCore> <Behaviors> <igwdg:RowAdding Enabled="true"></igwdg:RowAdding> </Behaviors> </igwdg:EditingCore> </Behaviors> </igwdg:Band> </Bands> </igwdg:Band> </Bands> </igwdg:WebHierarchicalDataGrid>
There was a private Sub called wdgAdmin_AddRowBatch that handled wdgAdmin.AddRowBatch. In there, it would determine if the record was a duplicate, remove it if it was, create the new record if it wasn't and then updated the dataset. I have now changed that to wdgAdmin_RowAdded to handle wdgAdmin.RowAdded (had to change Sub level to Protected as Private gave an error of it not being defined).
So I can click in the cells that show for a new row, but when I hit Enter, it doesn't hit my code behind, and I can't figure out why.
Other issues I'm having include:
1. Unable to edit any row but the first one. When I click in the cells for the first child row, they show as editable. However, none of the other 50 rows in that band allow me to do the same. Why is it only allowing the first row to be updated?
2. I can expand the first row, but not all rows expand. In this specific example, I have three rows, two have "+" to expand them; the first and the third. The first row expands, but the third does not. With other values queried, I've had all three rows with the "+". Two of them expanded (first and third), but the second one wouldn't.
I know an upgrade from 10.3 to 14.2 and UltraWebGrid to WebHierarchicalDataGrid is not going to be straight forward. I have a lot of code behind issues as well (attributes and functions that are no longer available and no documentation that shows a 1-to-1 relationship or applicable workaround), but I'll save those for another day. For this grid, it is databound on Page_Load as we have DALs that are pulling specific datasets and no Data Source Object I've found adequately translates. The dataset has 5 tables but only two are being used in this grid.
Please let me know if you are able to help with any or all of these issues. I truly appreciate it. Thanks.
Hello,
Thank you for contacting Infragistics!
I have done some looking into this matter and have the following information. With your first issue of only being able to edit the first row in the child band I have some follow up questions concerning this matter:
What is the full version of v14.2 you are using? Do you handle any events on the client side concerning entering edit mode that you then cancel?
Concerning expanding rows, you can do this manually by setting the Expanded property of a row, for example:
((Infragistics.Web.UI.GridControls.ContainerGridRecord)(Whdg1.Rows[0])).Expanded = true;
What is the full version of v14.2 you are using?
14.2.20142.1028
This version is currently installed on my local machine, but more importantly, on our test build server and we are in a time crunch and do not want to update it. We were supposed to have development done by 01/16 to deploy this past weekend, but with all of the issues we're running into, we had to push it back. We do not want to risk having to push it back any further.
Do you handle any events on the client side concerning entering edit mode that you then cancel?
No.
Concerning expanding rows, you can do this manually by setting the Expanded property of a row
I want the user to expand the rows, not the code. The grid loads with multiple records that could be expanded. They may not want to expand each section, only one or a few. They should be able to click on the "+" and expand those rows.
Thank you for the update. First concerning expanding of child records. There is already an icon that when the user clicks on will expand or collapse the child records of that row. This currenly happens on user input of clicking the expansion icon and it will only expand the ones the user wants. If you want it to be a “+” and “-“ you can change the image. The images for these are called ighg_Expand.gif and ighg_Collapse.gif. They are located in the ig_res/default/images folder.
Concerning editing I have been unable to reproduce the issue you are seeing. I am attaching my sample for reference. Please run my sample and let me know what behavior you see. Note I have removed the ig_res and bin folder for file size to be able to attach to the forums. You will want to replace these before running.
Do you have an isolated sample that reproduces this issue?
Please let me know if you have any questions concerning this matter.
Concerning the expanding rows, the issue is not the "+". The issue is that I cannot expand all of the rows. I'll try to better explain. In this hierarchical grid, not all of the base rows will have child rows. In a specific example, the first base row DOES have child rows, the second base row DOES NOT have child rows, and the third base row DOES have child rows. On this page, the first base row WILL expand. The second base row has no need to expand. However, the third base row does need to expand (on user click) but IT IS NOT. Now, on another page*, there's a semi similar issue. All three base rows have child rows. BUT, only the first and third base rows will expand, the second base row WILL NOT expand. All three of those rows have the "+", so they ALL should expand. My reason for pointing out the "+" originally was to show that the grid knows there are child rows and that it should expand. But for one reason or another, not every row (that should) expands.
I have attached an image showing the second example, expanded those that will expand. The one not expanded won't expand no matter how many times I click it. The image doesn't even change to a "-".
* When I say another page, it is the same aspx page, but accessed by a different link and loading a different dataset.
I'm currently looking at your example and comparing to mine. I'll get back to you if it helps me at all. Thanks.
It appears that the issue with both the expanding and editing is related to my DataKeyFields
Table1 Field1 Field2 - PK Field3 - PK Field4 - PK Field5 Field6
Table2 Field1 Field2 - PK Field3 - PK Field4 Field5 Field6 Field7 Field8 Field9
Table3 Field1 - PK Field2 Field3 Field4 Field5 Field6
Table1.Field2 relates to Table2.Field1. Table2.Field2 relates to Table3.Field1.
Originally in the markup, the grid tag had a DataKeyFields set to Table1.Field6. The first band had a DataKeyFields set to Table2.Field9. The second band had a DataKeyFields set to Table3.Field1.
I have found out that the DataKeyFields were actually being set in the code behind in the InitializeLayout (I had yet to convert it). Upon converting it, they now get set like the following:
Private Sub wdg_Initialize(ByVal sender As Object, ByVal e As System.EventArgs) Handles wdg.Init Try wdg.DataKeyFields = dataSet.Tables("Table1").PrimaryKey(0).ColumnName wdg.Bands(0).DataKeyFields = dataSet.Tables("Table2").PrimaryKey(0).ColumnName Catch ex As Exception HandleException(ex.Message) End TryEnd Sub
Because of this, I have removed the DataKeyFields in the markup and it expands all records and I can select each record for editing.
I still need to work on the adding the row issue. Do you have any suggestions on how to accomplish what was in my original post for the WebHierarchicalDataGrid? What are the new correlating functions?
Thank you for the update. Adding a row to the WebHierarchicalDataGrid in JavaScript is going to be similar to the WebDataGrid. The main differences are getting the grid or child grid then getting the rows. For example to add a row to the parent grid the code would be as follows:
var grid = $find("wdgAdmin"); var newRow = new Array(grid.get_gridView().get_rows().length, "Name", "Description"); grid.get_gridView().get_rows().add(newRow);
var grid = $find("wdgAdmin");
var newRow = new Array(grid.get_gridView().get_rows().length, "Name", "Description");
grid.get_gridView().get_rows().add(newRow);
To add them to a child grid you would do something like the following:
var grid = $find("wdgAdmin"); var row = grid.get_gridView().get_rows().get_row(0); //the 0 would be replaced with the index of the parent row. var childGrid = row.get_rowIslands()[0]; //Note that get_rowIslands() will return empty/null if the child grid hasn’t been expanded out. Also you will always index at 0 unless you have multiple child grids per parent row. var newRow = new Array(childGrid.get_rows().length, "Name", “Description”); childGrid.get_rows().add(newRow);
var row = grid.get_gridView().get_rows().get_row(0); //the 0 would be replaced with the index of the parent row.
var childGrid = row.get_rowIslands()[0]; //Note that get_rowIslands() will return empty/null if the child grid hasn’t been expanded out. Also you will always index at 0 unless you have multiple child grids per parent row.
var newRow = new Array(childGrid.get_rows().length, "Name", “Description”);
childGrid.get_rows().add(newRow);
Please let me know if you have any further questions concerning this matter.