KENDO GRID HEADER STYLES

Hi All,

To give styles to KENDO  Grid we need to overwrite their inbuilt  available CSS class properties, Here is solution

 Use the following to do this,

     .k-header
    {
        background-image: url('<url of the image>');
        background-position: <value>;
        background-repeat:  <value>;
        border-collapse:  <value>;
        border-right-color: # <HEX value>;
        border-style:  <value>;
        border-width:  <value>px;
        color: # <HEX value>;
        font:  <value>;
        font-weight:  <value>;
        padding:  <value>px  <value>px  <value>px  <value>px;
        text-align:  <value>;
        vertical-align:  <value>; 
    }

Example:

     .k-header
    {
        background-image: url('../../Images/GridHeaderBg.png');
        background-position: center;
        background-repeat: repeat;
        border-collapse: collapse;
        border-right-color: #EFEFEF;
        border-style: solid;
        border-width: 1px;
        color: #EFEFEF;
        font: bold 15px Verdana, "Helvetica Neue" ,Helvetica,sans-serif;
        font-weight: bold;
        padding: 8px 0px 8px 4px;
        text-align: center;
        vertical-align: top; 
    }

Note:

Here I am giving Data field with preceding its object name. 

CONDITIONALLY FORMAT KENDO GRID COLUMN

Hi All,

Many of us struck with conditionally formatting Kendo Grid Columns. Here is the solution,

There are two ways you can do this,

1. Using Template Function
2. Using Client Template Function

You can use template function when there is no requirement for sorting of that column in the kendo grid.

So I always suggest Client template property of kendo grid .

 Use the following way to do this,

                                    .ClientTemplate(
                                   "# if (DataField == null) { #" +
                                   "&nbsp;" +
                                   "# } else if (DataField == 0) { #" +
                                   "&nbsp;" +
                                   "# } else { #" +
                                   "<div>#= kendo.toString(DataField , '<FormatString>') #&nbsp;</div>" +
                                   "# } #"

                                   );

Example:

                                   .ClientTemplate(

                                   "# if (empSalary == null) { #" +
                                   "&nbsp;" +
                                   "# } else if (empSalary == 0) { #" +
                                   "&nbsp;" +
                                   "# } else { #" +
                                   "<div>#= kendo.toString(empSalary , 'c') #&nbsp;</div>" +
                                   "# } #"
                                   );

Note:

Here I am giving Data field preceding its object name. 

HOW TO FORMAT COLUMN IN KENDO GRID

Hi All,

We can use Client Template to display formatted data fields in Kendo Grid columns.

 Use the following syntax this,

ClientTemplate("#= kendo.toString(DataField, 'Format String') #");

Example:

To Display currency with Dollar Sign
ClientTemplate("#= kendo.toString(Amount, 'c') #");

To Display Date in dd/MM/YYYY format

ClientTemplate("#= kendo.toString(DOBDate, 'dd/MM/yyyy') #");

To Display Decimal with 2 digits

ClientTemplate("#= kendo.toString(totalUnits, 'n2') #");

Note:

Here I am giving Data field with preceding its object name. 

HOW TO DISPLAY IMAGE BUTTON COLUMN IN KENDO GRID

Hi All,

Many of us struck with displaying IMAGE BUTTON in Kendo Grid Columns. Here is the solution,

We can use Client Template to display HTML elements in Kendo Grid columns.

 Use the following syntax this,

.ClientTemplate("<a href=\"javascript: YourJSFunction('#= Parameter#','this');\"><img style='border: 0;' src='../../Content/Images/ourImage.jpg' alt='Arrow' /></a><a href=\"javascript:ImageClickFunction('#= Parameter#');\" style='display: none;'><img style='border: 0;' src='../../Content/Images/Image2.jpg' alt='Arro' /></a>");

Example:

             .ClientTemplate("<a href=\"javascript: ShowDetails('#= EmpID#','this');\"><img style='border: 0;' src='../../Content/Images/ImaEmpID.jpg' alt='Arrow' /></a><a href=\"javascript:ImageClickFunction('#= EmpNane #');\" style='display: none;'><img style='border: 0;' src='../../Content/Images/ImageEMP2.jpg' alt='Arro' /></a>");

Note:

Here I am giving Data field with preceding its object name. 

HOW TO DISPLAY DATA FIELD IN KENDO GRID COLUMN CLIENT TEMPLATE

Hi All,

Many of us struck with displaying Data Field in Kendo
Grid. Here is the solution,

We can use #=  # to display data field in client
template.

 Use the following way to do this,

.ClientTemplate("#= columnDataFiled# ");

Example:

.ClientTemplate("#= EmployeeID#");

Note:

Here I am giving Data field with preceding its object
name. 

HOW TO DISPLAY HYPER LINK COLUMN IN KENDO GRID

Hi All,

Many of us struck with displaying Hyper Link Columns in Kendo Grid. Here is the solution,

There are two ways you can do this,

1. Using Template Function
2. Using Client Template Function

You can use template function when there is no requirement for sorting of that column.

So I always suggest Client template.

 Use the following way to do this,

                .ClientTemplate("<a href=\"javascript:yourJSfunctions('#= DataFiled#');\"> #= columnDataFiled# </a>");

Example:

.ClientTemplate("<a href=\"javascript:GetEmployeeDetails('#= EmployeeID#');\"> #= EmployeeID# </a>");

Note:

Here I am giving Data field with preceding its object name.