What is Kendoui Grid or Kendogrid

•  It Allows User to visualize and edit data in table format
•  It gives many feature to present and manipulate data 
•  To bind the data to the grid we can use Kendoui grid Data source
• There are two possible ways through which  we can instantiate Kendoui grid  

1. From Empty Div
2. From Existing Html Table element\

• The grid is Jquary plugin

Kendo Grid with Check box column selection

To get selected rows from Kendo Grid using checkbox Please follow steps mentioned below,

1. Add one Boolean data type value to the entity we are binding the Kendo Grid,
    

    I.E. => Boolean  Selected {get;set;}

2. In the View( i.e. cshtml page) while defining kendo grid  define the checkbox column as follows,

 Columns.Template(@<text><text>).clientTemplate( "<input type='checkbox'  #= Selected?

                                                    checked= 'checked' ; '' # class = 'chkbxclass'/>");    

3. In the script file corresponding to the view , under           

     $(document).ready function write the following,

   

     function(){

                       $('#gvGridID').on('click','.chkbxclass',

                       function(){

                            var checked = $(this).is(':checked');

                            var grid = $('#gvGridID').data().kendogrid;

                            var dataItem = grid.dataItem($(this).closest('tr'));

                            dataItem.set('Selected',checked);

                          })

                  })

4. On the submit button click to get the values from the orws of kendo grid write the following code in the button click script event,

        

             var grid = $('#gvGridID').data("kendogrid");

              $("#gvGridID tbody").find('tr').each(

                          function() {

                             var dataItem = grid.dataItem($(this).closest('tr'));

                             if(dataItem.Selected == true)

                                {

                                   // Write your logic here like concat all values                                    // with comma separated and store it in                                              // hidden field

                                }

                                            });

Thanks please give your valuable comments

Kendo Grid display hyperlink field

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 of kendo grid 
2. Using Client Template Function of kendo grid

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

So I always suggest Client template of kendo grid.

 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 kendo grid 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 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 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 CONDITIONALLY FORMAT KENDO GRID COLUMNS

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.

So I always suggest Client template.

 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 with preceding its object name. 

HOW TO GIVE STYLES TO KENDO UI GRID HEADER

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.

KENDO GRID ROW SELECTION ON IE11 FIXED

Hi All,

Many of us struck with displaying hyper link in Kendo UI
Grid ON IE 11. 

Most of the times the hyperlink is not clickable,

Here is the solution,

 In the Declararion of kendo Grid we have line linke Below,

.HtmlAttributes(new { style = "position: relative; z-index: 11000" })

Please remove the highlighted style(i.e. z-index: )

Example:

.HtmlAttributes(new { style = "position: relative;" })

Now Check your grid by running the code...

KENDO GRID HEADER SORTING IS NOT WORKING IN IE11 FIXED

Hi All,

Many of us struck with sorting by clicking of header in Kendo UI
Grid ON IE 11 is not working. 

Here is the solution,

 In the Declararion of kendo Grid we have line linke Below,

.HtmlAttributes(new { style = "position: relative; z-index: 11000" })

Please remove the highlighted style(i.e. z-index: )

Example:

.HtmlAttributes(new { style = "position: relative;" })

Now Check your grid by running the code...

KENDO GRID CHANGE HEIGHT OF THE GRID 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 we all over the application the grid should be of same height then in Kendo.default.min.css file give the following style,

div .k-grid-content 
{

max-height: 900px;

}

OR

OR If we 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 grid by running the code...