KENDO GRID CHANGE HEIGHT TO DISPLAY MANY RECORDS

Hi All,

Many of us struck with displaying more no records in a scroll-able Kendo Grid.

We can adjust the height of the Kendo grid so that we can make more no of records viewed by the users,

Here is the solution,

 If you want all over the application the kendo grid should be of same height then, in the Kendo.default.min.css file give the following style,

div .k-grid-content 
{

max-height: 900px;

}

OR

If you want for a particular page alone means in that page include the above mentioned style in the top where we are declaring script blocks

div .k-grid-content 
{

max-height: 900px;

}

Now Check your kendo grid by running the code...

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. 

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.