Hello,
I have a webhierarchicaldatagrid withy only 2 levels:
<ig:WebHierarchicalDataGrid ID="GridSampleSize" runat="server" AutoGenerateBands="False" AutoGenerateColumns="False" EnableAjax="False" Height="450px" Width="746px" DataKeyFields="MAINKEY,SAMPLESIZE,PHASE" OnInit="GridSampleSize_Init"> <Columns> <ig:BoundDataField DataFieldName="PHASE" Key="PHASE"> <Header Text="<%$ Resources:Labels, lblPHASE %>" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="APPROVED" Key="APPROVED"> <Header Text="APPROVED" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="REJECTED" Key="REJECTED"> <Header Text="REJECTED" /> </ig:BoundDataField> </Columns> <Bands> <ig:Band AutoGenerateColumns="False" DataMember="dsMeasSampleSizeEnfant2_DefaultView" Key="dsMeasSampleSizeEnfant2_DefaultView"> <Columns> <ig:BoundDataField DataFieldName="POINT" Key="POINT" Width="50px"> <Header Text="<%$ Resources:Labels, lblPOINT %>" /> </ig:BoundDataField> <ig:BoundDataField Width="250px" DataFieldName="DESCRIPT" Key="DESCRIPT"> <Header Text="<%$ Resources:Labels, lblDESCRIPT %>" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="TOLERANCE" Key="TOLERANCE" Width="50px" DataType="System.Decimal"> <Header Text="<%$ Resources:Labels, lblTOLERANCE %>" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="SIZE" Key="SIZE" Width="50px" DataType="System.Decimal"> <Header Text="SIZE" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="SUPVAL" Key="SUPVAL" Width="140px" DataType="System.Decimal"> <Header Text="<%$ Resources:Labels, lblSUPVAL %>" /> </ig:BoundDataField> </Columns> <Behaviors> <ig:EditingCore> <Behaviors> <ig:CellEditing Enabled="true" EditModeActions-EnableF2="true"> <ColumnSettings> <ig:EditingColumnSetting ColumnKey="POINT" ReadOnly="true" /> <ig:EditingColumnSetting ColumnKey="DESCRIPT" ReadOnly="true" /> <ig:EditingColumnSetting ColumnKey="TOLERANCE" ReadOnly="true" /> <ig:EditingColumnSetting ColumnKey="SIZE" ReadOnly="true" /> <ig:EditingColumnSetting ColumnKey="SUPVAL" ReadOnly="true" /> </ColumnSettings> </ig:CellEditing> </Behaviors> </ig:EditingCore> </Behaviors> </ig:Band> </Bands></ig:WebHierarchicalDataGrid>
My grid is bound in code behind.
I would like to have some cells in red, regarding this condition in my second level:
if (supval - size)>tolerance then supval cell should be in red..
I am trying to do it in client side, because I would like to have it on live (so when the value in supval is changed)
Do you have some ideas to do it?
Thanks for your help.
I would suggest the following approach :
if you would like on initial load the grid to color a given cell you can handle the initialize client-side event handler like so:
89
90 function gridInit(sender, args) {
91 for (var i = 0; i < sender.get_rows().get_length(); i++) {
92
93 var row = sender.get_rows().get_row(i);
94
95 for (var j = 0; j < row.get_cellCount(); j++) {
96
97 var cell = row.get_cell(j);
98
99 if (cell.get_text() == "Item 1") {
100 cell._element.style.backgroundColor = "red";
101 }
102 }
103 }
104 }
If you would like to handle this on the child band level you can handle RowExpanded event handler and then to pass through the cell like above.
90 function rowExpanded(sender, args) {
91 // debugger;
92 var sender = args.get_row().get_rowIslands()[0];
93 for (var i = 0; i < sender.get_rows().get_length(); i++) {
95 var row = sender.get_rows().get_row(i);
97 var is = row.get_rowIslands();
98 // debugger;
99 for (var j = 0; j < row.get_cellCount(); j++) {
100
101 var cell = row.get_cell(j);
102 Sys.Debug.trace(cell.get_text());
103 if (cell.get_text() == "Item 30") {
104 cell._element.style.backgroundColor = "red";
105 }
106 }
107 }
108 }
Hope this helps you.
Hi Radoslav,
Thanks for your quickly help.
For the init, I have no more problems, thanks for your sample.
I have some more problems for the rowExpanded event:
In order to handle rowExpanded event, my whdg needs to have the property "EnableAjax" set to "true".
But when this property is set to "true", I have a runtime error: "Sys.ArgumentException: Cannot deserialize. The data does not correspond to a valid JSON" if I try to expand a band level.
I read in a post that this error was due to the "EnableAjax" property, and yes, when it is set to "false", I could expand my levels without any problems. But how could I combine the EnableAjax=false with rowExpanded event?
Thanks again for your help.
Regards
Damien
Hello Damien,
You should not get any errors in combination of EnableAjax= true and RowExpanded event. I need more information regarding your scenario. Please can you post your code related to the gird here ( aspx declaration / code-behind).
Thank you.
Hello Radoslav,
I will try to explain you the running, then I will give you the code:
I have a dropdown List with some data. The grid data depend on the value choosen in this dropdownlist. Please see in picture I have enclosed:
(I have also enclosed the error message, with and without debugging, it could help you.)
I will give you 2 ways that give the error, because it is little strange.
1st way:
1- I launch my page, there is a default value on the dropdown list, and I have no problem to expand levels.
2- Then I change value in the drop down list: data for top level are correctly displayed
3- I try to expand, I have my error message
2nd way:
1- I launch my page, there is a default value on the dropdown list, I do not expand levels.
2- I change the value in my dropdown List: data for top level are correctly displayed
3- I expand my level, all it is correct
4- I change again my value in the dropdown: data for top level are correctly displayed
5- I try to expand, I have my error message
So the problem appears each time I expand the grid, change value in dropdown then expand it again…
If I set my property ‘EnableAjax’ to false, I have no more problems.
Please find below my grid declaration: in aspx file:
<ig:WebHierarchicalDataGrid ID="GridSampleSize" runat="server" AutoGenerateBands="False"
AutoGenerateColumns="False" EnableAjax="true" Height="450px" Width="746px" DataKeyFields="MAINKEY,SAMPLESIZE,PHASE"
ClientEvents-Initialize="gridInit">
<AjaxIndicator Enabled="False" />
<ClientEvents RowExpanded="rowExpanded"/>
<Columns>
<ig:BoundDataField DataFieldName="PHASE" Key="PHASE">
<Header Text="<%$ Resources:Labels, lblPHASE %>" />
</ig:BoundDataField>
<ig:BoundDataField DataFieldName="APPROVED" Key="APPROVED">
<Header Text="APPROVED" />
<ig:BoundDataField DataFieldName="REJECTED" Key="REJECTED">
<Header Text="REJECTED" />
</Columns>
<Bands>
<ig:Band AutoGenerateColumns="False" DataMember="dsMeasSampleSizeEnfant2_DefaultView"
Key="dsMeasSampleSizeEnfant2_DefaultView">
<ig:BoundDataField DataFieldName="POINT" Key="POINT" Width="50px">
<Header Text="<%$ Resources:Labels, lblPOINT %>" />
<ig:BoundDataField Width="250px" DataFieldName="DESCRIPT" Key="DESCRIPT">
<Header Text="<%$ Resources:Labels, lblDESCRIPT %>" />
<ig:BoundDataField DataFieldName="TOLERANCE" Key="TOLERANCE" Width="50px" DataType="System.Decimal">
<Header Text="<%$ Resources:Labels, lblTOLERANCE %>" />
<ig:BoundDataField DataFieldName="SIZE" Key="SIZE" Width="50px" DataType="System.Decimal">
<Header Text="SIZE" />
<ig:BoundDataField DataFieldName="SUPVAL" Key="SUPVAL" Width="140px" DataType="System.Decimal">
<Header Text="<%$ Resources:Labels, lblSUPVAL %>" />
<Behaviors>
<ig:EditingCore>
<ig:CellEditing Enabled="true" EditModeActions-EnableF2="true">
<ColumnSettings>
<ig:EditingColumnSetting ColumnKey="POINT" ReadOnly="true" />
<ig:EditingColumnSetting ColumnKey="DESCRIPT" ReadOnly="true" />
<ig:EditingColumnSetting ColumnKey="TOLERANCE" ReadOnly="true" />
<ig:EditingColumnSetting ColumnKey="SIZE" ReadOnly="true" />
</ColumnSettings>
</ig:CellEditing>
</Behaviors>
</ig:EditingCore>
</ig:Band>
</Bands>
<ig:Sorting>
</ig:Sorting>
<ig:Activation ActiveRowCssClass="igg_ActiveRow" ActiveCellCssClass="igg_ActiveCell"
Enabled="true" />
</ig:WebHierarchicalDataGrid>
And below the aspx.cs page: (I bind data in this file, calling web services methods to select data)
protected void LoadDS()
{
StringBuilder builderGridEnfant1 = new StringBuilder();
StringBuilder builderGridEnfant2 = new StringBuilder();
DataSet dsMeasSampleSizeEnfant1 = new DataSet();
DataSet dsMeasSampleSizeEnfant2 = new DataSet();
string getSampleSize;
if (this.IsNullOrEmpty(ChoiceOfSampleSize.SelectedValue.ToString()))
getSampleSize = HttpContext.Current.Session["SAMPLESIZE"].ToString();
else
getSampleSize = ChoiceOfSampleSize.SelectedValue.Trim();
builderGridEnfant1.Append("SELECT DISTINCT MAINKEY, SAMPLESIZE, PHASE, PHASE_LEV, APPROVED, REJECTED ");
builderGridEnfant1.Append(" FROM " + getProxyComment.GetBrandName() + ".MEASSAMPLESIZES ");
builderGridEnfant1.Append("WHERE ");
builderGridEnfant1.Append("MAINKEY = '" + this.GetStyleID + "' AND CODE='1' AND SAMPLESIZE='" + getSampleSize.Trim() + "' ORDER BY SAMPLESIZE,PHASE_LEV");
builderGridEnfant2.Append("SELECT DISTINCT MAINKEY, MAINKEY, PHASE ,PHASE_LEV, SAMPLESIZE, POINT, TOLERANCE, DESCRIPT, ");
builderGridEnfant2.Append("SIZE, SUPVAL, APPROVED, REJECTED FROM " + getProxyComment.GetBrandName() + ".MEASSAMPLESIZES ");
builderGridEnfant2.Append("WHERE ");
builderGridEnfant2.Append("MAINKEY = '" + this.GetStyleID + "' AND CODE='1' AND SAMPLESIZE='" + getSampleSize.Trim() + "' ORDER BY SAMPLESIZE,PHASE_LEV,POINT");
getProxyComment.Timeout = 5000;
dsMeasSampleSizeEnfant1 = getProxyComment.GetTableView(builderGridEnfant1.ToString());
dsMeasSampleSizeEnfant1.Tables[0].TableName = "GridDataEnfant1";
dsMeasSampleSizeEnfant2 = getProxyComment.GetTableView(builderGridEnfant2.ToString());
dsMeasSampleSizeEnfant2.Tables[0].TableName = "GridDataEnfant2";
Infragistics.Web.UI.DataSourceControls.DataView dvEnfant1 = new Infragistics.Web.UI.DataSourceControls.DataView();
dvEnfant1.ID = "dsMeasSampleSizeEnfant1_DefaultView";
dvEnfant1.DataMember = "DefaultView";
dvEnfant1.DataSource = dsMeasSampleSizeEnfant1;
Infragistics.Web.UI.DataSourceControls.DataView dvEnfant2 = new Infragistics.Web.UI.DataSourceControls.DataView();
dvEnfant2.ID = "dsMeasSampleSizeEnfant2_DefaultView";
dvEnfant2.DataMember = "DefaultView";
dvEnfant2.DataSource = dsMeasSampleSizeEnfant2;
WebHierarchicalDataSource hdsMain = new WebHierarchicalDataSource();
hdsMain.DataViews.Add(dvEnfant1);
hdsMain.DataViews.Add(dvEnfant2);
//Defining relation.
Infragistics.Web.UI.DataSourceControls.DataRelation drMain1 = new Infragistics.Web.UI.DataSourceControls.DataRelation();
drMain1.ParentDataViewID = "dsMeasSampleSizeEnfant1_DefaultView";
drMain1.ChildDataViewID = "dsMeasSampleSizeEnfant2_DefaultView";
drMain1.ParentColumns = new string[] { "MAINKEY,SAMPLESIZE,PHASE" };
drMain1.ChildColumns = new string[] { "MAINKEY,SAMPLESIZE,PHASE" };
hdsMain.DataRelations.Add(drMain1);
GridSampleSize.DataKeyFields = "MAINKEY,SAMPLESIZE,PHASE";
GridSampleSize.DataMember = "dsMeasSampleSizeEnfant1_DefaultView";
GridSampleSize.DataSource = hdsMain;
GridSampleSize.Key = "dsMeasSampleSizeEnfant1_DefaultView";
}
This method is called in page_Load and when the value in my dropdown list is changed.
Thanks for your time!
Best Regards
it was the reason! I have cleared database like you told me in 'ValueChanged' event of my DDL, and it solves the problem!
Thanks a lot.
Thanks for the detailed explanations,
I would suggest clear the datasource right before assign a new one like this :
WebHierarchicalDataGrid1.GridView.ClearDataSource();
WebHierarchicalDataGrid1.Columns.Clear();
WebHierarchicalDataGrid1.Rows.Clear();
It looks like that the gird is confused when the datasource is changed in this particular way. When the grid performs AJAX request it expects to get the same datasorce but in your case it was changed.
Please try the above suggestion.
Thanks.