Kendo UI - Tab control

In this tutorial, we will discuss about getting records for Kendo Grid and displaying them. Will also see, how to retrieve a specific column value on click of a row event.

I had written a sample Kendo Grid Html, which will display four columns, namely Employee ID, Name, Join Date and Comments

Data definition for this grid resides in DemoNamespace.Models.TestData, which is nothing but defining properties of the above columns. Once defined, make sure your controller method returns JSON data to be bound to the grid....

In the above, while binding the columns, you could define their width and title attributes as shown.

  .Read will invoke the call to Home Controller -> GetTestData method and returns a result set to be tied up with the grid.

   On selection of a row, the code will start executing the method "recordselected" as indicated. Below is the code where it defines the method and gives an alert of the selected Employee Name.

Few changes are required in controller, before we could run and test it. Here is a sample code of, how the  action method should be defined...

While returning the json result set, it should have .ToDataSourceResult(request), else the grid will not be bound with the returned data... Also parameters must contain [DataSourceRequestAttribute] DataSourceRequest request as the first parameter and other parameters should follow....

Happy coding....

How to pass parameters to Kendo UI control through a data method instead of reading it through read action

Lets review a new way to pass parameter to Kendo Dropdownlist. This option is straightforward, when you have a parameter to invoke and nothing else to be processed while doing this.


Below is a sample code which will load a Kendo DropDownList with a defined parameter.

       The above can be achieved as below too.  Both the methods do the same thing, except in the method below, we can demand to do some extra steps and retrieve value to be passed. This might come in handy, when you want to read a control, which will not be loaded with data, while loading this control. There are few other instances, where this will be helpful. Once you have the parameter, you just have to invoke a force read for this drop down and the results will show up.

The sample code to do the same is given below....

Kendo UI - Select event (Kendo Drop Down List)

In a Kendo UI development, it provides developers with more flexible options and easier approach towards our development needs. Whenever there is a need to trigger an ajax call or set another value within the form or to do any thing dynamic, select event will provide few ways to achieve this. I had implemented this in a regular usage as well as for dynamically generated controls and it comes real handy in those situations.

  Lets see some ways to handle select events for Kendo UI drop down list.

In this code below, I am trying to initialize a drop down list by providing text field, value field and an option label. When it comes to invoking methods, you can define as many as you might need within the Events option.

  Here this example will deal with select event only. This code, invokes SelectionUpdate method on change of a drop down, where we can retrieve data, either through event argument or through jQuery.

In this code snippet below, the same selection change event can be accomplished just by writing your function within the @<text> </text> tags.

Either way, the code gets executed, but depends on individuals comfort level.  Having it within a script tag, will help to gather all the scripts together in a separate file and might help towards easy maintenance.

Kendo UI drop down - How to force a second drop down to read data source after first drop downs selection event without using Cascading

In this case, lets review the scenario first. I have  a drop down ddl1, on its selection event, I would like to read data source for second drop down ddl2.

In the code below, I will create both the drop downs and give a data source to read initially. For my second drop down, I will pass an empty string to avoid loading data.

Below is the code to define my drop down lists:

  In the first one, I had defined text and value fields along with my controller method, similar to ddl2. But for ddl1, I do not require any input parameters. So when loading the UI, ddl1 will be loaded and I will disable the second one, until it is ready to read and load data.

@(Html.Kendo().DropDownList()
                    .Name("ddl1")
                    .OptionLabel("Select an option for ddl1....")
                    .DataTextField("textvalue") // value to be displayed in the drop down
                    .DataValueField("idvalue")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("Getddl1Data", "DataLoad");
                        });
                   })
                  .Events(events => {events.Change("Loadddl2");    })
                    )

Script below will disable ddl2 until, I will force it to read.

<script>
var ddlltodisable = $("#ddl2").data("kendoDropDownList");
ddlltodisable.enable(false);
</script>

In my second drop down list, I am passing an empty string to avoid data being read and load for the first time.

@(Html.Kendo().DropDownList()
                    .Name("ddl2")
                    .OptionLabel("Select an option for ddl2....")
                    .DataTextField("textvalue")
                    .DataValueField("idvalue")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("Getddl2Data", "DataLoad", new { parameter1= "" });
                        });
                   })
 )

Below is the script to enable ddl2 and read data with a parameter value from ddl1.

function Loadddl2() {
        $("#ddl2").data("kendoDropDownList").enable(true); //enable drop down list 2
     
        // force read data source for drop down list 2
        var readddl2= $('#ddl2').data("kendoDropDownList");
        readddl2.dataSource.read({ paramvalue: $('#ddl1').data("kendoDropDownList").value() });        
   }

Lets review the controller methods here...

public class DataLoadController : Controller
{
   
      public JsonResult Getddl1Data()
      {
   
             return someobjectforddl1;
       }

       public JsonResult Getddl2Data(string dropdownvalue)
     {
           if(!(string.IsNullorEmpty(dropdownvalue)))
          {
                     // run the code to retrieve data only when valid input
                     return someobjectforddl2;
           }
      }

}