How to add Dynamic checkbox Columns in ig:WebHierarchicalDataGrid

pughazendhi C posted over 3 years ago

I am working on a ASP.NET project.I am new to Infragistics.

I have a requirement to add check box column dynamically. I have 3 fixed columns those are BoundFields.

My Requirement is,

After bunding 3 fixed columns I have to add checkbox column dynamically in the code behind and need to bind value based on value getting from the database.

Please suggests me any other best option. Please find grid view screenshot and code.

Please provide me some sample code would be appreciable

Design View:

I need to make column dynamic marked in red. Currently these columns are static. I need to make all checkbox column dynamically binding

Code

 <ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid" runat="server" Width="100%" AutoGenerateBands="true"
                                AutoGenerateColumns="false" DataKeyFields="IQuestionId" EnableDataViewState="true" CollapseButton-ImageUrl="~/images/colapseMinus.png" 
                                CollapseButton-HoverImageUrl="~/images/colapseMinus.png" CollapseButton-PressedImageUrl="~/images/colapseMinus.png"
                                ExpandButton-ImageUrl="~/images/expandPlus.png" ExpandButton-HoverImageUrl="~/images/expandPlus.png" 
                                ExpandButton-PressedImageUrl="~/images/expandPlus.png"
                                CssClass="headerRow" GroupingSettings-GroupedBandCssClass="headerRow">

                                <Behaviors>
                                    <ig:Selection Enabled="false" CellClickAction="Row" RowSelectType="None">
                                    </ig:Selection>
                                </Behaviors>

                                <GroupingSettings EnableColumnGrouping="True" GroupAreaVisibility="Visible" InitialRowExpandState="Collapsed" />

                                <Columns>
                                    <ig:BoundDataField DataFieldName="IQuestionId" Width="0%" Key="IQuestionId" Hidden="true" Header-Text="" />
                                    <ig:BoundDataField DataFieldName="VchQuestionText" Width="30%" Key="VchQuestionText" Hidden="false" Header-Text="Question Text" />
                                    <ig:BoundDataField DataFieldName="VchSectionName" Width="0%" Key="VchSectionName" Hidden="true" Header-Text="Section Name" />
                                    <ig:BoundDataField DataFieldName="VchQuestionType" Width="15%" Key="VchQuestionType" Hidden="false" Header-Text="Question Type" />
                                    <ig:BoundDataField DataFieldName="VchAnswerType" Width="15%" Key="VchAnswerType" Hidden="false" Header-Text="Answer Type" />

                                    <ig:TemplateDataField Key="TempMedical" Header-Text="MedicalTest" Width="8%">
                                        <ItemTemplate>
                                            <asp:CheckBox ID="chkMedical" runat="server"
                                                Checked='<%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "Medical") %>' />
                                        </ItemTemplate>
                                    </ig:TemplateDataField>

                                    <ig:TemplateDataField Key="TempAviation" Header-Text="AviationTest" Width="8%">
                                        <ItemTemplate>
                                            <asp:CheckBox ID="chkAviation" runat="server"
                                                Checked='<%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "Aviation") %>' />
                                        </ItemTemplate>
                                    </ig:TemplateDataField>

                                    <ig:TemplateDataField Key="TemSecurity" Header-Text="Security" Width="8%">
                                        <ItemTemplate>
                                            <asp:CheckBox ID="chkISecurity" runat="server"
                                                Checked='<%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "ISecurity") %>' />
                                        </ItemTemplate>
                                    </ig:TemplateDataField>

                                    <ig:TemplateDataField Key="TemTechinical" Header-Text="Techinical" Width="8%">
                                        <ItemTemplate>
                                            <asp:CheckBox ID="chkTechinical" runat="server"
                                                Checked='<%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "Techinical") %>' />
                                        </ItemTemplate>
                                    </ig:TemplateDataField>

                                    <ig:TemplateDataField Key="TemLogistics" Header-Text="Logistics" Width="8%">
                                        <ItemTemplate>
                                            <asp:CheckBox ID="chkLogistics" runat="server"
                                                Checked='<%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "Logistics") %>' />
                                        </ItemTemplate>
                                    </ig:TemplateDataField>

                                </Columns>


                            </ig:WebHierarchicalDataGrid>

Top Replies

70

Offline pughazendhi C posted over 3 years ago in reply to Martin Asenov +1 verified
Hi, Thanks for you swift response.The Sample which you have shared been working fine. But I have another issue while getting the checkbox control...view reply »

Parents

No Data

Reply

1080

Offline Martin Asenov posted over 3 years ago

Hello,

Thank you for posting in our community.

Please keep in mind that this section of the forums is about our Ignite UI for JavaScript toolset. In the future, please make sure that your queries are submitted in the corresponding section in our forum. This way we can address your issues more accurately.

I have created a sample illustrating how your requirement could be achieved by defining a custom template class in code-behind. Please test it on your side and let me know how it behaves.

If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce.

Looking forward to hearing from you.

7433.Sample.zip
Cancel
Reply

Cancel

Children

70

Verified Answer
Offline pughazendhi C posted over 3 years ago in reply to Martin Asenov
Hi,

Thanks for you swift response.The Sample which you have shared been working fine.

But I have another issue while getting the checkbox control or

how to get checkbox control and check whether it has checked or not. I am getting object reference error while getting checkbox control.

Please find below code which I have tried to get control but checkbox returning null.

public static object GetWebGridControl(Infragistics.Web.UI.GridControls.GridRecord row, string cntName, string templateName = null) { if (templateName != null) return row.Items.FindItemByKey(templateName).FindControl(cntName); else return row.Items.FindItemByKey(cntName).Value; } //I am passing row and controlid,template key) CheckBox cpFocus = UIHelper.GetWebGridControl(row, "chk-" + tripFocus.vchTripFocusName, null) as CheckBox;

"CpFocus" returning null. Because it is not getting control.

sample html code for one dynamic checkbox I got from view source of the grid page

<input name="ctl00$ctl00$ctl00$TopHeader$MainMenu$AdminPageContent$WebHierarchicalDataGrid$ctl00$it4_2$chk-MedFit"
id="ctl00_ctl00_ctl00_TopHeader_MainMenu_AdminPageContent_WebHierarchicalDataGrid_ctl00_it4_2_chk-MedTest"
type="checkbox" checked="checked">

Please assist me how to get the dynamic template check control code behind and I need to store it into database.

Thanks in Advance. Please help me out to resolve the issue ASAP.

Thanks
Cancel
Reply

Reject Answer

Cancel
70

Offline pughazendhi C posted over 3 years ago in reply to Martin Asenov

I am appending to the previous post which I have posted.

I have modified my code to get the checkbox but still I am getting null exception for the checkbox control.

Here is my code

Code to generate the ItemTemplate dynamically

public void GenerateTemplatedColumn(List<TemplateColumn> TempColumn)
    {


        int count = 0;
        foreach(var col in dtBindConfig.Columns)
        {
            if (count > 3)
            {
                string colName = Regex.Replace(col.ToString(), @"\s+", "");//removing spaces from the TempColumns

                TemplateDataField templateCol = new TemplateDataField();
                templateCol.Key = colName.ToString();
                templateCol.Header.Text = colName.ToString();
                templateCol.Width = Unit.Percentage(8);
                templateCol.ItemTemplate = new CustomItemTemplate();
                this.WebHierarchicalDataGrid.Columns.Add(templateCol);
            }

            count = count + 1;
        }
    }

The below code for binding value and setting ID for Checkbox/Template column dynamically

private class CustomItemTemplate : ITemplate
    {
        public void InstantiateIn(Control container)
        {
            string columnKey = (((GridRecordItem)(((TemplateContainer)container).Item)).Column).Key;

            string spaceFreeColumnKey = Regex.Replace(columnKey, @"\s+", "");
            CheckBox checkbox = new CheckBox();
            checkbox.ID = "chk" + spaceFreeColumnKey;
            checkbox.Checked = (bool)DataBinder.Eval(((TemplateContainer)container).DataItem, spaceFreeColumnKey);
            container.Controls.Add(checkbox);
        }
    }

Below code I have written to get the values from WebHierarchicalDataGrid save button click
private int UpdateCheckBoxValuetoDatabase(WebHierarchicalDataGrid grdCtrl)
    {
foreach (GridRecord row in grdCtrl.Rows)
        {


            SectionId = Convert.ToInt32(UIHelper.GetWebGridControl(row, "iSectionID"), CultureInfo.InvariantCulture);
     List<TemplateColumn> TempColumn =GetDynamicTemplateColumns(); //Getting all dynamic check box columns will returns all checkbox column names

            int cnt = 0;
            foreach (var columnName in TempColumn)
            {
                string tripfocus = Regex.Replace(tripFocus.vchTripFocusName, @"\s+", "");
                string ID = "chk" + columnName;
                string templateName = columnName;
                CheckBox chkTripFocus = UIHelper.GetWebGridControl(row, ID, templateName) as CheckBox;//this method to find the checkbox by Template key and CheckBoxID but here returns null


                if (chkTripFocus.Checked)
                {
                    bActive = true;
                }
                configureSection.vchTripFocusName = tripFocus.vchTripFocusName;
                configureSection.iSectionID = SectionId;
                configureSection.bActive = bActive;
                // ntmClient.UpdateTripSectionMapped(configureSection);
            }

}

The chkTripFocus alway returning null. I suspected that ID was wrong in the Grid but I am using the same to get the checkbox control. still I am getting null reference error.

Below code to find the countrol based on control ID or Template Key

public static object GetWebGridControl(Infragistics.Web.UI.GridControls.GridRecord row, string cntName, string templateName = null)
        {
            if (templateName != null)
                return row.Items.FindItemByKey(templateName).FindControl(cntName);
            else
                return row.Items.FindItemByKey(cntName).Value;
        }

Please help me out how to get check box row from the Grid. I have to resolve urgently I am doing some POC please help ASAP

Thanks
Cancel
Reply

Cancel