KENDO UI

GRID

1.      HOW TO DISPLAY DATA FIELD IN KENDO GRID

2.      HOW TO DISPLAY HYPER LINK COLUMNS IN KENDO GRID

3.      HOW TO DISPLAY IMAGE BUTTON COLUMNS IN KENDO GRID

4.      HOW TO FORMAT COLUMNS IN KENDO GRID

5.      HOW TO CONDITIONALLY FORMAT COLUMNS IN KENDO GRID

6.      HOW TO GIVE STYLES TO HEADERS IN KENDO GRID

7.      KENDO GRID ROW SELECTION ON IE11 FIXED

8.       KENDO GRID HEADER SORTING IS NOT WORKING IN IE11 FIXED

9.       KENDO GRID CHANGE HEIGHT OF THE GRID TO DISPLAY MANY RECORDS

110.   GET SELECTED ROWS USING CHECKBOX COLUMN IN KENDO GRID

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 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.