We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team September 26, 2017 01:29 PM UTC

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. 


Refer the help documentation. 


Regards, 
Thavasianand S. 



HZ hui zheng October 9, 2017 12:56 PM UTC

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



TS Thavasianand Sankaranarayanan Syncfusion Team October 10, 2017 06:23 PM UTC

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. 


Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon