[Datagrid]Add an OnCellChange
Application Type

Is there a way to dynamically add a column to a Datagrid and then add an OnCellChange event to that cell?


i had the same scenario with my previous project . when i was needed to show dynamically columns. may be this will help you.

create a sql 

for example 

SELECT {customers}.[CustomerID] AS ID
FROM Customers;  

and the same structure output for sql 

then in grid put a list in the place of colomn and put textcolumn element of grid and use the values of json of output for grid.

then on the column you can add the link column also 

hope this helps.




Can you please explain what you mean by adding a column dynamically? I believe the data source for your table must be some aggregate or advanced SQL fetching fixed set of columns for you. And these data sources in normal circumstances cannot be changed dynamically. This implies that you are already getting all the columns to populate your grid. Having said that, I see you have two options:

1. You might be familiar that data grid provides the option of showing or hiding columns as desired.

2. You also have the option to save views for a user i.e. you can show only a set of columns based on the view configured for the user. User still has the option to show or hide the columns as mentioned in above point.

Hope it helps!


thank you for your reply.

We have adopted a method of displaying columns with data to be displayed by switching between display and non-display.

However, when displaying 150 columns and 10,000 rows, scrolling takes a long time and editing is not possible.

I would like to add only columns that have data to display and set events and CSS for those cells.

Is it possible?



We had the same scenario in which grid is so dynamic that we are showing 64 scenarios and for each scenario different columns are showing in a grid and there are around 600 attributes which belongs to this 64 scenarios. There is a lot of Customization  that we had to do.

  • So we created one Entity which contains all the configuration of attributes.
    Attribute Name,AttributeJsonName,Type of column(this define if the column is date, text or dropdown)IsEditable(this will help us to define which attribute is editable) also an identifier to group entity which defines for which group these attributes belongs to.
  • Now just add these basis on your Type of column define and use if widgets to define the column from the configuration entity by checking conditions
  • Now In a grid we have use List and on that list we did a binding of our configuration entity. And add a action column or text column its upto you you can define the col
  • And in the grid source we passed the Json(but we need to make sure all the Json binding that we are assigning in the data source of grid must be present in our configuration table.
  • If we miss anything we will get binding error.
  • Now you have all the controls to set the editable property to you column as well as On change action, You don't need to add separate on change or configuration, it is all done under one hud.

But we had to do lot customisation On JS to make it work basis on our requirements.

I cannot attach a sample right now because it tool a lot of effort to do the full customisation, but I'll try to create a small POC.

Tousif Khan

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.