Hi,
I'm trying to load a grid with spaces in the datasource field name but there seems to be an error.
I saw that you guys fixed it 3 years ago here but it seems to have been reintroduced.
I couldn't figure out how to link from the Kendo UI Dojo so I copy pasta'd the code here:
5 Answers, 1 is accepted
0
Tan
Top achievements
Rank 1
Rank 1
answered on 25 Jan 2018, 07:22 PM
Sorry, I hit tab and hit submit. Here's the code:
<!DOCTYPE html><html><head> <base href="https://demos.telerik.com/kendo-ui/grid/index"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.bootstrap-v4.min.css" /> <script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script> </head><body><div id="example"> <div id="grid"></div> <script> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: [ {id: 'cat', 'New Field': 'cat'}, {id: 'cat', 'New Field': 'dog'} ], height: 550, columns: [{ field: "New Field", title: 'Title' }] }); }); </script></div></body></html>0
Hi Tan,
I have examined the sample code and noticed that the columns.field is not defined correctly. Note that in cases where the field name includes space you should use square brackets and quotes to specify the field. Like this:
You can also check a runnable version of the code in the following dojo:
Let me know how it works for you.
Regards,
Viktor Tachev
Progress Telerik
I have examined the sample code and noticed that the columns.field is not defined correctly. Note that in cases where the field name includes space you should use square brackets and quotes to specify the field. Like this:
columns: [{ field: "['New Field']", title: 'Title'}]You can also check a runnable version of the code in the following dojo:
Let me know how it works for you.
Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Tan
Top achievements
Rank 1
Rank 1
answered on 26 Jan 2018, 03:48 PM
Hey Viktor,
The code that you posted works great for displaying!
However, it doesn't seem to be working with inline editing:
Grid 2 seems to work fine because it does not have fields with a space in it but Grid 1:
- Can't load the input when clicking in the cell
- Can't save even if you only edit the normal field
0
Accepted
Hi Tan,
Please have in mind that having a space in the field name is considered bad practice. Such implementation would generate a JSON that has a space in the property names. For more information on the recommended format of JSON property names please refer to the article below:
The approach from my previous post can be used as a workaround in simpler scenarios where the Grid component will display data. However, when editing is also a requirement the approach is not applicable.
With that said, if the database that you are using contains field names with spaces I would suggest specifying a ViewModel that will map these fields to values with no spaces. This way the fields that are sent to the client will not contain spaces.
Regards,
Viktor Tachev
Progress Telerik
Please have in mind that having a space in the field name is considered bad practice. Such implementation would generate a JSON that has a space in the property names. For more information on the recommended format of JSON property names please refer to the article below:
The approach from my previous post can be used as a workaround in simpler scenarios where the Grid component will display data. However, when editing is also a requirement the approach is not applicable.
With that said, if the database that you are using contains field names with spaces I would suggest specifying a ViewModel that will map these fields to values with no spaces. This way the fields that are sent to the client will not contain spaces.
Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Tan
Top achievements
Rank 1
Rank 1
answered on 31 Jan 2018, 05:31 PM
Hi Viktor,
Thank you for the help.
Have a nice day!
Tan