This is a migrated thread and some comments may be shown as answers.

Conditional custom styling for Kendo UI grid

1 Answer 54 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
subhasis
Top achievements
Rank 1
subhasis asked on 20 Feb 2014, 09:42 AM
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

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 21 Feb 2014, 05:02 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
subhasis
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or