Issue when using a Dash in data-field

8 posts, 1 answers
  1. briankb
    briankb avatar
    88 posts
    Member since:
    Feb 2004

    Posted 16 Jun 2012 Link to this post

    I'm not sure if this is a bug or just my not understanding the limitation of the data-field property.

    While using the kendo grid to transform an existing table the rendering and functionality was not working if I had a data-field name with a dash. Underscores don't seem to cause an issue only a dash.

    Works:
    <th data-field="rendering_engine">Rendering engine</th>

    Fails:
    <th data-field="rendering-engine">Rendering engine</th>
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 19 Jun 2012 Link to this post

    Hello Brian,

    The dash is not a valid JavaScript identifier. Due to this limitation, you should consider the idea of not using dashes in the data-field name. 
      
    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. briankb
    briankb avatar
    88 posts
    Member since:
    Feb 2004

    Posted 19 Jun 2012 Link to this post

    Ironic that the "data-field" property has a problem with dashes...

    Just for those who find themselves equally as ignorant as me...  here is the blurb they are talking about. 

    All identifiers must begin with a letter, an underscore _ ), or a dollar sign $ ).

    Identifiers cannot begin with a space. This is obvious enough since the name doesn't start until the spaces end, but the other characters not allowed may need a little explanation. You don't want to use special characters that are operators, such as + or - since JavaScript will to apply the operation to the identifier. That makes sense. Numbers also cannot be used because JavaScript assumes that anything that starts with a number is a number, a numeric literal. More on that later.

    All characters after the first character may be letters, numbers, an underscore _ ), or a dollar sign $ ).

    Once you have established that the identifier is an indentifier, you can use numbers within the name.


  5. Ray Maynard
    Ray Maynard avatar
    3 posts
    Member since:
    Aug 2009

    Posted 15 Jan 2015 in reply to Iliana Nikolova Link to this post

    Hi
    I have the same issue. As the column name is coming from a back end system written in Progress ABL, and has existed for decades then the names will contain hyphens (Dashes).

    I think I could change them post serialization to underscores, use them in the Kendo grid and then revert them before posting to back end system, but that sounds both hard and risky.

    Is there no way to configure Kendo Grid column names to have hyphens?
    The error thrown in debug is:
    function anonymous(d) {
    return d.CONTACT-DETAILS
    }

    d contains a CONTACT-DETAILS field.
    The rest of the JS and JQuery in application has to refer to field as
    d["CONTACT-DETAILS"] . As per http://www.craiglotter.co.za/2010/08/12/accessing-values-in-javascript-json-objects-with-keys-containing-hyphens-dashes/ Can I change Kendo to do same?

    Thanks


  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 20 Jan 2015 Link to this post

    Hi Ray,

    Please take a look at this basic example which demonstrates how to use dashes in the fields names. 

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Obenaus
    Obenaus avatar
    2 posts
    Member since:
    Jun 2016

    Posted 07 Jul in reply to Iliana Nikolova Link to this post

    Hi Illiana.

    I use fields with dash in the names.

    When enabling groupable in your basic example, and try to group by First Name column, the group name is wrong rendered as ['first-name'] instead of the column title.

     

    Can you check this out?

     

    Thaks

  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 12 Jul Link to this post

    Hi Mauricio,

    You could try setting a dataSource model definition and a "from" configuration which will create a mapping between a dashed and non-dashed field name (dojo). 

    Keep in mind that using dashes in field names is not officially supported and it is recommended to avoid it. If possible, replace the dashes with underscore.

    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  9. Obenaus
    Obenaus avatar
    2 posts
    Member since:
    Jun 2016

    Posted 12 Jul in reply to Iliana Nikolova Link to this post

    Thank´s Iliana,

     

    Liked the "from"configuration. I will try it.

    Replace dashes at the moment is not possible...

    I managed do make it work, by using the change event on datasource, and updating the groups field´s with the correct name:

    change: function (event) {
    var ds = event.sender;
    var groups = jQuery.extend(true,{},ds.group());
    var change = false;
    for (var i = 0; i < groups.length; i++) {
       var field = groups[i].field;
       if (field.indexOf("'") >= 0) {
          groups[i].field = field.replace(/'/g, '\"');
       }
    }
    ds.group(groups);
    }

Back to Top
Kendo UI is VS 2017 Ready