Conditional custom styling for Kendo UI grid

[subhasis]

Hi,

I am new to KENDO UI controls . I want to group two columns next to each other in kendo UI grid with a outline border and a background colour to those two grid columns so to differentiate two columns from other columns to make it as distinguishable from other columns.

$("#divPhaseGrid").kendoGrid({

            filterable: true,

             resizable: true,
            pageable: true
            , sortable: true
            , silectable: true
            , selectable: true
            , dataSource: { data: data, pageSize: 10 },
            columns: [
            { field: "PhaseTypeName", title: "Phase" ,width: "65px" }
            , { field: "PROJECTMANAGER", title: "Owner",width: "65px" }
            , { field: "PhaseStartDate", title: " Phase Start Date" ,width: "100px"}
            , { field: "PhaseStartDateActual", title: "Phase Actual Start Date" ,width: "100px"}
            , { field: "StatusName", title: "Status",width: "110px", attributes: { style: "background-color:#=StatusColorHEX#;" } }
            , { title: "", template: ' <a class="k-button" onclick="openPhaseform(#=PhaseID#);" style="min-width:25px;" ><span class="k-icon k-i-pencil"></span></a> ', width: "50px" }
              ]
           
            });

For Example- I  want to display some outline borders and background colours to PhaseStartdate and PhaseStartDateAtual columns to distinguish from other columns in the grid.

Please provide some pointers or sample links to achieve this.

Regards,
Subh

[Iliana Dyankova]

Hi Subh,

In order to achieve this you could use the columns.attributes option. For example: 

$("#divPhaseGrid").kendoGrid({
  //....
  columns: [
     //....
    , { field: "PhaseStartDate", title: " Phase Start Date" ,width: "100px", attributes: {style: "background: red"}}
    , { field: "PhaseStartDateActual", title: "Phase Actual Start Date" ,width: "100px", attributes: {style: "background: yellow"}}
    //....
  ]
});

Regards,
Iliana Nikolova
Telerik