Showing posts with label Kendo UI. Show all posts
Showing posts with label Kendo UI. Show all posts

Wednesday, November 8, 2017

Kendo MultiSelect Server Side Filtering

$(document).ready(function () {
           $("#products").kendoMultiSelect({
               placeholder: "Select products...",
               dataTextField: "ProductName",
               dataValueField: "ProductID",
               dataSource: {
                   type: "odata",
                   serverFiltering: true,
                   transport: {
                       read: {
                           url: "http://demos.kendoui.com/service/Northwind.svc/Products",
                           data: function () {                               
                               return {
                                   text: $("#products").data('kendoMultiSelect').input.val()
                               };
                           }
                       }
                   }
               }
           });
       });

Thursday, November 3, 2016

How To Bind JSON Data To Kendo Dropdownlist

@(Html.Kendo().DropDownList()
 .Name("ExamIDED") //The name of the dropdownlist is mandatory. It specifies the "id" attribute of the widget.
 .DataTextField("ExamDateStr") //Specifies which property of the Product to be used by the dropdownlist as a text.
 .DataValueField("ExamID") //Specifies which property of the Product to be used by the dropdownlist as a value.
 .OptionLabel("Select Exam Date...").HtmlAttributes(new { style = "width:175px", data_value_primitive = "true" })
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetExamDate", "AptitudeTset"); //Set the Action and Controller name
                })
                .ServerFiltering(true); //If true the DataSource will not filter the data on the client.
            })
    .SelectedIndex(1) //Select first item.
)
"AptitudeTset" Controller Action returns JSON data.

public ActionResult GetExamDate()
 {
      //Read List of Exams
      List<AptitudeTestExamSelectModel> model = rep.ReadExamSelectList(); // Possibly, your database call goes here.
      return Json(model, JsonRequestBehavior.AllowGet);
  }

Monday, October 31, 2016

Kendo Grid - Format Date Column

Define your Kendo grid column as follows.

columns.Bound(o => o.FromDate).Title("From Date").Format("0:dd/MM/yyyy}").EditorTemplateName("Date");

Inside "Shared" Folder => EditorTemplates create a new Editor Template called "Date" and add the following.

@model DateTime?
@(Html.Kendo().DatePickerFor(m => m))

Template allows you to pass even a NULL DateTime value.