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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 09:29 AM

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 08:56 AM

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 02:23 PM

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.

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.

;