Rendering Kendo Coumn dynamically [closed]

Question

Columns are rendering dynamically according to response from server. And column names are configured by user, which can be anything.

On rendering Grid it is giving below warning in console. Column name coming from server is 'Total Seen'

Grid column field name 'Total Seen' does not look like a valid JavaScript identifier. Identifiers can contain only alphanumeric characters (including "$" or "_"), and may not start with a digit. Please use only valid identifier names to ensure error-free operation.

Can anyone help?

Answer 1

I have had similar problem recently, but it was connected with other language symbols (Russian).

Here is StackBlitz code I made for you to show available workaround (it's based on official Kendo UI Grid docs). Look at Product Name field in my example.

The main idea is that you set your columns' fields to appropriate values, ie valid Javascript identifiers, before rendering grid. But title property will still contain user's value.

Method _prepareColumnFields is used to convert column's field to valid identifier via regex check (be aware, that for simplicity I use \W regex, but is does not include $ symbol which is also a valid one).

Method _getProcessedGridData is used to prepare dataset, ie replacing invalid property names, which are stored in _fieldsMapping object

In general, I would say that this solution is a little bit messy. I would advise you to prepare proper column names on the user's input stage.

Hope that helps!