Field Name with Space and Other Than Numeric Creating Issues to Load the Grid

9 posts, 0 answers
  1. Chetan
    Chetan avatar
    2 posts
    Member since:
    Nov 2011

    Posted 19 Dec 2011 Link to this post

    While binding the Grid to columns with below works well and fine and loads the grid:

    columns: [
                                    { field: "ID", title: "ID" },
                                    { field: "Name", title: "First Name" },
                                    { field: "City_Name", title: "City" },
                                    { field: "Email", title: "Email" },
                                    { field: "pincode", title: "pincode" }

                                 ]

    But when we add the below columns (any of them), then there is any issue. There is no issue with JSON. We found that any field name with spaces or numeric value and special characters does not load the grid at all

    Scenario 1 (does not load the Grid)

    columns: [
                                    { field: "ID", title: "ID" },
                                    { field: "Name", title: "First Name" },
                                    { field: "City_Name", title: "City" },
                                    { field: "Email", title: "Email" },
                                    { field: "pincode", title: "pincode" },
                                    { field: "Last Name", title: "Last Name" }
                                 ]

    Scenario 2 (does not load the Grid)

    columns: [
                                    { field: "ID", title: "ID" },
                                    { field: "Name", title: "First Name" },
                                    { field: "City_Name", title: "City" },
                                    { field: "Email", title: "Email" },
                                    { field: "pincode", title: "pincode" },
                                    { field: "Mob.1", title: "Mobile" }
                                 ]

    Seems to be a bug, or are we doing something wrong ?
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 20 Dec 2011 Link to this post

    Hello Chetan,

    This is expected behavior. Field names should not contain spaces and/or dots.

    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Alberto
    Alberto avatar
    4 posts
    Member since:
    Nov 2012

    Posted 13 Mar 2013 Link to this post

    Hi Nikolay,

    I'm loading a grid from a DataTable. This DataTable is loaded from a table on SQL Server, so I will probably have column names containing spaces. Is it still a problem for the last version of Kendo?

    Thanks
  4. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 15 Mar 2013 Link to this post

    Hello Alberto,

    Here is how to configure the grid in order to bind columns with spaces in the field names: http://jsbin.com/evapes/3/edit 

    This configuration is supported with Q1 2013 Beta release of Kendo UI Web.

    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ayette
    Ayette avatar
    3 posts
    Member since:
    Oct 2011

    Posted 01 Jun 2014 Link to this post

    Tried Nikolav Rusey suggested but still not working for second field (First Name).

    http://jsbin.com/wemun/2/


    $(function() {
      $("#grid").kendoGrid({
        dataSource: {
          data: [
                  { "Title": "Mr.", "First Name": "Name 1"},
                  { "Title": "Dr.", "First Name": "Name 2"},
                  { "Title": "Dr.", "First Name": "Name 3"}
                ]
        },
        columns: [
                   {field : "Title", title: "Title"},
                   {Field: "First Name", title: "First Name"}
                 ]
      });
    });
  6. Ayette
    Ayette avatar
    3 posts
    Member since:
    Oct 2011

    Posted 01 Jun 2014 in reply to Ayette Link to this post

    Correction : http://jsbin.com/wemun/4/

    $(function() {
      $("#grid").kendoGrid({
        dataSource: {
          data: [
                  { "Title": "Mr.", "First Name": "Name 1"},
                  { "Title": "Dr.", "First Name": "Name 2"},
                  { "Title": "Dr.", "First Name": "Name 3"}
                ]
        },
        columns: [
                   {field : "Title", title: "Title"},
                   {field: "First Name", title: "First Name"}
                 ]
      });
    });
  7. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 03 Jun 2014 Link to this post

    Hello Ayette,

    You are not using correct syntax in order to bind the grid correctly. Please revisit the fiddle posted in my previous post, especially the `foo bar` column.

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Ayette
    Ayette avatar
    3 posts
    Member since:
    Oct 2011

    Posted 03 Jun 2014 in reply to Nikolay Rusev Link to this post

    Oh thanks did not see the '["Field Name"]'
  9. Justim
    Justim avatar
    1 posts
    Member since:
    Aug 2015

    Posted 20 Aug 2015 Link to this post

    If you would like to use format strings on columns with spaces you also need to set the a model definition in the dataSource, and a "from" configuration for the field with a space, which will create a mapping between a spaced and non-spaced field name.

    http://jsbin.com/jodukitata/edit?html,js,output

    http://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-Model.define

    Please keep in mind that using fields with spaces is not recommended and you may stumble upon other unexpected issues as well.​

Back to Top