columns.customAttributes doesn't work in Internet Explorer 11?

[hui zheng]

Hi,

columns.customAttributes is used to set column background color. See the code below. It works fine in Chrome, but doesn't work in Internet Explorer 11, the column background color is not displayed. See attached screenshots from Chrome and internet explorer. Can you check this and provide the solution? Thanks!

      var datagrid;

      function onLoad() {

        var data = 

          [

  {

    "field0": 1,

    "color0": "#FFE5E5",

    "field1": 2

  },

  {

    "field0": 10,

    "color0": "#FF0000",

    "field1": 20

  }

];

        var columns =

            [ 

  {

    "field": "field0",

    "headerText": "Header1",

    "customAttributes": {"style": "background-color: {{:color0}}"},

    "visible": true,

    "textAlign": "left"

  },

            {

    "field": "field1",

    "headerText": "Header2",

    "visible": true,

    "textAlign": "left"

  }

 ];

            

         datagrid = $("#Grid").ejGrid({

               dataSource: data,   

               allowScrolling: true,allowResizing :true,

               columns: columns,

               allowSelection: true,

               selectionType : "single",

               selectionSettings: { selectionMode: ["cell"] },

               isResponsive:true,

               minWidth:300

          }).ejGrid("instance");

       }

     

Br

Hui

Attachment: backgroundColor_e0edc69a.zip

[Thavasianand Sankaranarayanan]

Hi Hui, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to set a background-color for a cell based on Grid dataSource. So, we suggest you to use queryCellInfo event of ejGrid control to set the background color for a cell. 

Refer the below code example. 

<script type="text/javascript"> 

        $(function () { 

            

            --- 

             

            $("#Grid").ejGrid({ 

                dataSource: data, 

                 

                --- 

 

 

                queryCellInfo: function(args){ 

 

                     if(args.column.field == "field0"){ 

 

                        $(args.cell).css("background-color", args.rowData.color0) 

                     } 

 

                } 

                         

            }); 

        }); 

    </script> 

We have prepared a simple JsPlayground sample in the following link. 

JsPlayground link: http://jsplayground.syncfusion.com/wyqcjr51 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#events:querycellinfo 

Regards, 

Thavasianand S. 

[hui zheng]

Hello,

Thanks for answer. But it would be good that we can get our original code working in internet explorer 11 as well.  Do you know why setting background color using JsRender expression{{:color}} is not working in internet explorer?

Thanks

Hui

[Thavasianand Sankaranarayanan]

Hi Hui, 

By default IE doesn't like the { } brackets in the style attribute. Then the style background color is not set to that column. So that we suggest you for the alternative way to achieve your requirement. 

Refer the general solution link. 

Link: https://github.com/aurelia/templating/issues/232 

Regards, 

Thavasianand S.