This is a migrated thread and some comments may be shown as answers.

Grid with Spaces in Fields

5 Answers 231 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tan
Top achievements
Rank 1
Tan asked on 25 Jan 2018, 07:22 PM

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

Sort by
0
Tan
Top achievements
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>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    
</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
Viktor Tachev
Telerik team
answered on 26 Jan 2018, 11:46 AM
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:

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
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:

  1. Can't load the input when clicking in the cell
  2. Can't save even if you only edit the normal field

 

 

0
Accepted
Viktor Tachev
Telerik team
answered on 30 Jan 2018, 01:24 PM
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
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
answered on 31 Jan 2018, 05:31 PM

Hi Viktor,

Thank you for the help.

Have a nice day!

 

Tan

Tags
Grid
Asked by
Tan
Top achievements
Rank 1
Answers by
Tan
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or