Kendo UI Examples

In this article I will explain what kendo UI is, how to create KENDO UI grid and bind data to Grid, how to create Kendo UI dropdown list and bind data to dropdown list.

Below all are the kendo UI related examples.

What kendo UI is, how to create KENDO UI grid and bind data to Grid, how to create Kendo UI dropdown list and bind data to dropdown list.

What is Kendo UI?

How to write code for grid row cancel event in KENDO UI ASP.NET MVC

How to set MVC kendo UI grid row cell background color?

How to give color to grid view row in Kendo UI

How to bind data to grid view using Kendo UI controls with MVC architecture

How to bind data to a Dropdown list using Kendo UI controls with MVC 4?

Kendo Grid Popup Editing Mode

How to remove default loading popup image in Kendo UI grid

How to create Kendo UI pie chart in asp.net web application?

How to remove default loading popup image in Kendo UI grid

In this article I will explain how to disable the default loading popup image in kendo UI grid.

Many of us may find the loading popup very small and sometimes the user may not see it clearly. To avoid this we’ll be using our own modal popups. But still the default modal popup cannot be removed completely. This makes difficult for the user to identify whether the data is retrieved or not. In order to overcome this we can hide the default modal popup using CSS.

To hide the default modal popup we have to write the required CSS property.

Define a style tag on the beginning of the .cshtml page.

<style>

</style>

Inside the style tag you can write the following CSS to hide the default loading image in the kendoUI grid.

.k-loading-image {

        display: none;

    }

Now the entire code altogether is

<style>

.k-loading-image {

        display: none;

    }

</style>

The applied CSS style hides the default modal popup image. If you want the same action to happen in all the pages, define the above mentioned CSS in the corresponding layout page.

What is Kendo UI?

Kendo UI is an HTML5, jQuery-based framework for building modern web apps. Advantages of using Kendo UI

a.       Fast And Responsive

Performance matters. One of the key bottlenecks in modern web development is network latency. The time it takes to make a request to the server and get the results can account for a huge portion of page load time, and with hit-and-miss mobile internet, the problem is magnified. 

With JavaScript development, this is achieved by sending JSON (or sometimes XML) data to the client instead of sending a mix of data and markup HTML. All HTML rendering happens in the browser, keeping communication with the server fast and to a minimum.

b.      Universal Front End Platform

ASP.NET may make certain front-end tasks “drag-and-drop easy,” but it may not be the best platform for raw service performance (too much overhead). Maybe a lightweight NodeJS server would be a better simple, fast service provider.

With a JavaScript/HTML5 front-end, you can test server-side performance and pick the best platform for the task. As long as JSON gets to the browser, your front-end is covered.

How to write code for grid row cancel event in KENDO UI ASP.NET MVC

In this article I will explain How to write code for grid row cancel event in KENDO UI ASP.NET MVC

Below code is use full for bind data to grid.

In events section we write a row cancel event.

@(Html.Kendo().Grid<KendoUIMvcApplication1.Models.GenerateDataCorrespondingToItem>()

                .HtmlAttributes(new { style = "width:100%;" })

                .Name("grid_#=ID#")

                .Columns(columns =>

                {

                    columns.Bound(o => o.ID).Width(5).Visible(false);

                    columns.Bound(o => o.date).Width(50).Format("{0:MM-dd}").Title("Date");

                    //columns.Bound(o => o.item).Width(90).Title("Item");

                    columns.Bound(o => o.comp).Width(50).Title("Company");

                   

                    columns.Command(command => { command.Edit().Text(" ").UpdateText(" ").CancelText(" "); }).Width(75);

                })

                .Editable(editable => editable.Mode(GridEditMode.InLine))

                .Events(events => events.DataBound("dataBound1").Cancel("OnCancel"))

                .DataSource(dataSource => dataSource

                    .Ajax()

                    .PageSize(15)

                    .Events(events => { events.RequestEnd("RequestCompleted"); })

                    .Model(model =>

                           {

                               model.Id(o => o.ID);

                               model.Field(o => o.date).Editable(false);

                              

                           }

                            )

)

)

How to set MVC kendo UI grid row cell background colour?

In this article I will how to set MVC kendo ui grid row cell background colour.

First we need to identity which column colour you want change.

See the below code for MVC KENDO UI grid row cell background colour.

function dataBound1(e) {

                        var i = 0;

                        dataView = this.dataSource.view();

if (dataView[i].bomc != dataView[i + 2].bomc) {

                                var uid = dataView[i].uid;

                                var uid1 = dataView[i].bomc;

                                var colName = $('#grid').find('th').eq(7).text()

                                $("#grid tbody").find("tr[data-uid=" + uid + "]").find("td:eq(" + 7 + ")").css("background-color", "yellow");

                            }

}

How to give colour to grid view row in Kendo UI

In this article I will explain how to give colour to grid view row in Kendo UI

First we can identify dataview length; based on the length we can give colour to grid view row

if (dataView.length > 0) {

                            var k = 0;

                            for (k = 0; dataView.length > k; k++) {

                                var uid = dataView[k].uid;

                                $("#grid tbody").find("tr[data-uid=" + uid + "]").css("background-color", "Yellow");

                            }

                        }

How to clear dropdown list and Date picker selected data in Kendo ui

In this article I will explain how to clear dropdown list and Date picker selected data in Kendoui.

Dropdown list selected data clear

When I changed Date picker data on that time dropdown list selected data will be clear.

@(Html.Kendo().DatePicker().Name("StartDate").Format("{0:MM/dd/yyyy}")

                    .Events(e =>

                        {

                            e.Change("ChangeInDate");

                        }

                        )

                )

Below function is useful for clear dropdown list selected data  

function ChangeInDate(e) {

                        $("#ddlMonths").data("kendoDropDownList").select(0)

                        $("#ddlWeeks").data("kendoDropDownList").select(0)

                        var grid = $("#grid").data("kendoGrid");

                        grid.dataSource.read();

                    }

Date picker selected data clear

Kendo Grid Popup Editing Mode

In this article am going to explain about

1.      How to make kendo grid editable.

2.      How to give a title to popup.

3.      How to disable editing specified columns in edit popup mode.

4.      How to disable the display of few unwanted columns in popup.

5.      How to specify the width of a column in popup.

6.      How to rename the column.

Technology Used: Kendo UI

Scripting Language: JavaScript

How to bind data to grid view using Kendo UI controls with MVC architecture

Binding Data to grid view using Kendo UI controls

Here we explain the process of binding data to the grid view using kendo UI.

Here we have designed the grid using kendo UI controls and have bound the data from the database with a stored procedure.

The architecture that we have used is MVC (Model View Controller) and the framework is Entity framework model.

In order to bind the data to grid view first we need to take a Kendo grid.

How to Bind data to a Dropdown list using Kendo UI controls with MVC 4.

In this article I will explain how to Bind data to a Dropdown list using Kendo UI controls with MVC 4.

                                                                                                                             

Binding data to a drop down list using kendo UI controls and MVC (Model View Controller) architecture

@(Html.Kendo().DropDownList()

    .Name("ddlEmployeeDetails")

    .HtmlAttributes(new { style = "width:150px" })

    .OptionLabel("Select EmployeeName")

    .DataTextField("EmployeeName")

    .DataValueField("RegistrationID")

    .Events(events => events.Change("DealerSelectChangeInTeleCaller"))

    .DataSource(source =>

              {

                  source.Read(read =>

                  {

                      read.Action("GetAllEmployeeDetails", "Reports");

                  })

                        .ServerFiltering(true);

              })

                  )

The events define the change of events.

How to create Kendo UI pie chart in asp.net web application?

In this article I will explain how to create Jquery pie chart in asp.net web application.

First we need to add web service to the web application. In that web service need write below code.

Web service code:

Add below code in after namespaces

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

[System.Web.Script.Services.ScriptService]