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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

132827 Sep 23,2017 04:16 PM UTC Oct 10,2017 06:23 PM UTC JavaScript 3
loading
Tags: ejGrid
hui zheng
Asked On September 23, 2017 04:22 PM UTC

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 [Syncfusion]
Replied On 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. 


hui zheng
Replied On 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


Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;