Grid with Spaces in Fields

6 posts, 1 answers
  1. Tan
    Tan avatar
    4 posts
    Member since:
    Aug 2017

    Posted 25 Jan 2018 Link to this post

    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:

        
  2. Tan
    Tan avatar
    4 posts
    Member since:
    Aug 2017

    Posted 25 Jan 2018 Link to this post

    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>
  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2396 posts

    Posted 26 Jan 2018 Link to this post

    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.
  4. Tan
    Tan avatar
    4 posts
    Member since:
    Aug 2017

    Posted 26 Jan 2018 in reply to Viktor Tachev Link to this post

    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

     

     

  5. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    2396 posts

    Posted 30 Jan 2018 Link to this post

    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.
  6. Tan
    Tan avatar
    4 posts
    Member since:
    Aug 2017

    Posted 31 Jan 2018 in reply to Viktor Tachev Link to this post

    Hi Viktor,

    Thank you for the help.

    Have a nice day!

     

    Tan

Back to Top