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

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) { #" +
                                   " " +
                                   "# } else if (DataField == 0) { #" +
                                   " " +
                                   "# } 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.