Dynamic columns and rows in WebDataGrid

Hi.

I am trying to create a dynamic matrix using WebDataGrid. The number of columns will be dynamically retrieved from data base (headers and data, columns and rows). Each column is of any type.

I want to tie same dropdown list to all the cells across the rows of all columns. However, as I don’t know the number of columns in advance,

For example, I am interested to make a WebDataGrid where someone type column should be a TemplateDataField and her ItemTemplate will be a DropDownList…

Can you help me, please? How can I do this using WebDataGrid?
Please, help me! Waiting for your response.

Thank you so much.

Hello Geovanny,

 

Thank you for posting in the community.

I am attaching a small sample which illustrates how your requirement could be achieved. A DataTable is used as a datasource and on each subsequent load of the page a random number of columns (between 1 and 6) are generated. By iterating over the columns in the DataTable, a Templated field can be created for each one in the grid using a dynamicly created template. Notice that the templated fields are re-generated on each PostBack at the PreInit stage:

 

public partial class _Default : System.Web.UI.Page
{
    protected override void OnPreInit(EventArgs e)
    {
        if (!IsPostBack)
        {
            Session["ds"] = populateGrid();
        }
 
        foreach (DataColumn col in (Session["ds"] as DataTable).Columns)
        {
            TemplateDataField templateCol = new TemplateDataField();
            templateCol.Key = col.ColumnName;
 
            templateCol.ItemTemplate = new CustomItemTemplate();
 
            WebDataGrid1.Columns.Add(templateCol);
        }
        base.OnPreInit(e);
    }
    protected void Page_Load(object sender, EventArgs e)
    {
 
 
        WebDataGrid1.DataSource = Session["ds"];
        WebDataGrid1.DataBind();
    }
 
 
    protected DataTable populateGrid()
    {
        DataTable dt = new DataTable();
        Random rdm = new Random();
       
        DataColumn col;
 
        for (int i=0; i < rdm.Next(1, 6); i++) {
            col = new DataColumn("Name" + i);
            dt.Columns.Add(col);
        }
 
 
        DataRow row;
        for (int i = 0; i < 10; i++)
        {
            row = dt.NewRow();
            for (int j = 0; j < dt.Columns.Count; j++) {
                row.SetField<string>("Name" + j, "Name" + i + j);
            }
 
            dt.Rows.Add(row);
        }
 
        return dt;
    }
}
 
 class CustomItemTemplate : ITemplate
{
    #region ITemplate Members
 
    public void InstantiateIn(Control container)
    {
        Label lbl = new Label();
        lbl.ID = "lbl1";
 
        //get the key of the column we are instantiating the template in
        String columnKey = (((Infragistics.Web.UI.GridControls.GridRecordItem)(((Infragistics.Web.UI.TemplateContainer)container).Item)).Column).Key;
 
        //set the label's text to the value of the current item for that column
        lbl.Text = DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)container).DataItem, columnKey ).ToString();
 
        DropDownList list = new DropDownList();
        list.ID = "ddList";
        list.Items.Add("item 1");
        list.Items.Add("item 2");
 
        container.Controls.Add(lbl);
        container.Controls.Add(list);
    }
 
    #endregion
}

 

Please note that an alternative approach also exists if your requirement is not to show the dropdowns at all times but only while editing a cell – a DropDownProvider can be used in this scenario and a ColumnSetting may be added for each generated BoundDataField in the CellEditing behavior. More information on using editor providers with WebDataGrid may be found at:

https://www.infragistics.com/help/aspnet/webdatagrid-using-editor-providers

Feel free to contact me if you have any questions.

WebDataGridWithDynamicColumnsAndDropDowns

Hello Petar

Thank you very much for your reply, helped me a lot. I achieved to load data into the GridViewData, but I need to make CRUD operations manually. I did all this in a standard component GridView of ASP, and I want to make same in a Infragistics component WebDataGrid (or someone other component that you recommend me).

I attach some images about my requirement, made with object GridView ASP.

Now, I want to use the facilities provided by a WebDataGrid object; edit, update and delete using keys F2, Enter and Supr respectively. 

 

Now, I not to show the dropdowns at all times; only while editing a cell. Could you help me, please? 

Waiting for your response. Thank you so much.

Geovanny Domínguez.

 

imgs

I put some parts of the code of what I did with a GridView object ASP. Best, I attach the code because I don’t know how to paste to look and feel like your post. Now, the name of the form is wfrmDinamicGrids.aspx, and I am trying the same with a WebDataGrid Infragistics object in the form wfrmDinamicGridsI.aspx.

 

I hope any suggestions. Thank you so much.

Geovanny Domínguez.

WSDynamicGrid

Hello Petar,

I'm trying edit your sample, but I have not gotten. I don't understand why? double click or by pressing F2, does not working. I've already added code for DataKeyFields to WebDataGrid1, but not working.

Can you help or explain me, please? Why doesn't It work? I need to do CRUD operations.

Thank you very much!

Greetings.

Anyone, Can you help me please ?, I keep trying

Thank you very much…

Hello Geovanny,

 

If you want the drop downs to be visible only while you’re editing the cells you could use  DropDownProviders for the grid instead. There’s an example on how that would look here:

http://www.infragistics.com/products/aspnet/sample/data-grid/dropdown-editors

 

 

When you’re using only template column the  grid will not detect the changes you make in them since the template columns are unbound  so they have no connection to the actual data source of the grid.

 

The editor providers function a bit differently.  They’re assigned to a bound data field column from the grid and manage the values of the cells in that column. So if you change the selection via an editor provider the values of the cell will be changed accordingly and you would be able to commit them which would in turn raise the RowUpdating event where you can manage the updating to the data source.

 

I’ve updated Petar’s sample to use DropDownEditorProvider’s instead of templates. Please refer to it and let me know if this is what you’re trying to achieve.

 

 

Best Regards,

Maya Kirova

Developer Support Engineer

Infragistics, Inc.

http://www.infragistics.com/support

WebDataGridWithDynamicColumnsAndDropDowns_modified

 

Hello Maya,

Thank you so much for your reply, and yeah!, I been already achieved to do this. But now I have other problem, if you remember, my post subject was "Dinamyc columns and rows in WebDataGrid", I had to make all in code behind and not in aspx page, but anyway, you helped me a lot.

Thanks for all.

Hello Geovanny,

In the sample the columns are created dynamically and added to the grid’s columns collection as are the separate drop down editor providers.

Do you need the behaviors to be created runtime as well? If that’s the case before creating the columns and editors you can create the editing core behavior and the cell editing behavior using the CreateBehavior method. There’s an example with the selection behavior here:

https://www.infragistics.com/help/aspnet/webdatagrid-adding-a-behavior-at-runtime

Let me know if you’ve encountered any issues or if you have any questions.

 

Best Regards,

Maya Kirova

Developer Support Engineer

Infragistics, Inc.

http://www.infragistics.com/support

 

 

Hello Maya,

Yes, I needed to create the behaviors runtime as well, but, I already got it. Thank you so much! 

See you next opportunity.

Greetings!

Geovanny Domínguez.