Bug while setting CSS in template

4 posts, 0 answers
  1. Jason
    Jason avatar
    4 posts
    Member since:
    Mar 2012

    Posted 21 Mar 2012 Link to this post

    The KendoGrid does not seem to handle some CSS settings within a template.

       $("#myList").kendoGrid({
    dataSource: mySource
    columns: [
    { field:
    "SupplierName", title: "Vendor Name:" },
    { field:
    "ColorCode", title: "Vendor Status", template: '<div style="width: 50px; height:20px; background-color: #FF16DC04">#= ColorCode #</div>'}]
    });

    The # is causing problems even when not grouped together with the equal sign (=).
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 21 Mar 2012 Link to this post

    Hello,

    You have to escape the # character using two backslashes. 

    Regards,
    Petyo
    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. Jason
    Jason avatar
    4 posts
    Member since:
    Mar 2012

    Posted 21 Mar 2012 Link to this post

    That solved the issue by having the color code "hardcoded"

     background-color: \\#00ff00;">#= ColorCode #</div>'} 

    But when I try to set it with the actual color code from my datasource, I run into the same problem.
    The ColorCode property holds the value "#f00ff00". 

     background-color: \\\\#= ColorCode #;">#= ColorCode #</div>'} 

    How may I make it "ignore" the # from the property?
  5. Deb
    Deb avatar
    1 posts
    Member since:
    Apr 2012

    Posted 03 Apr 2012 Link to this post

    $("#myList").kendoGrid({
    dataSource: mySource
    columns: [
    { field:
    "SupplierName", title: "Vendor Name:" },
    { field:
    "ColorCode", title: "Vendor Status", template: '<div style="width: 50px; height:20px; background-color: #FF16DC04">#= ColorCode #<//div>'}]

    // escape ?
Back to Top
Kendo UI is VS 2017 Ready