how can i make my kendo dropdown list live ? ?_?

Question

i have a kendo Dropdown list its working but i need to make it a live one without the button... whenever i pick one item inside the dropdown it automatically update whats inside my grid or the query on my grid base on the selected on the dropdown list.

here's my code:

@using (Html.BeginForm())
{
    <input type="hidden" id="hiddenUser" name="hiddenUser" value="@userId" />
    <p>
        <input id="ddlWorker" name="ddlWorker" style="width: 250px;"   value="@ddlWorker" />
        &nbsp;
        <input type="submit" value="Filter Workers by Position" class="styledButton" />
    </p>
}

JS:

var userId = $("#hiddenUser").val();

$("#ddlWorker").kendoDropDownList({
    dataTextField: "JobCode",
    dataValueField: "ID",
    autoBind: false,

    optionLabel: {
        JobCode: "--- Please Select Position ---",
        ID: ""
    },
    // define custom template
    template: '<h5>${ data.JobCode }</h5>',

    dataSource: {
        transport: {
            read: {
                url: '/Worker/LoadWorkerDropdownList?userId=' + userId,
                dataType: "json",
                type: "POST"
            }
        }
    }
});

var dropdownlist = $("#ddlWorker").data("kendoDropDownList");

dropdownlist.list.width(250);

my controller for the grid

public JsonResult LoadWorkerList( string search, int? positionSelected, int? statusValue)
        {


            // check if search string has value
            // retrieve list of workers filtered by search criteria
            var list = (from a in db.Workers
                        where a.LogicalDelete == false
                        select a).ToList();

            List<WorkerInfo> wlist = new List<WorkerInfo>();
            foreach (var row in list)
            {
                WorkerInfo ci = new WorkerInfo
                {
                    ID = row.ID,
                    FirstName = row.FirstName,
                    LastName = row.LastName,
                    Name = row.FirstName + " " + row.LastName,
                    LastFName = row.LastName + " " + row.FirstName,
                    PositionSelected = positionSelected,
                    LogicalDelete = row.LogicalDelete

                };
                wlist.Add(ci);
            }
            if (positionSelected.HasValue)
            {
                var workerIdList = new List<Int32>();

                var filterList = (from a in db.Client_Worker_Position
                                  where a.LogicalDelete == false && positionSelected == a.ClientCustomerPositionID
                                  select a).ToList();
                var listSelect = (from a in db.Worker_Availability
                                  where a.LogicalDelete == false
                                  select a).ToList();

                foreach (var row in listSelect)
                {

                    var shiftList = (from a in db.Client_Customer_Position_Shift
                                     where a.LogicalDelete == false && positionSelected == a.Client_Customer_PositionID
                                     select a).ToList();

                    foreach (var positionShift in shiftList)
                    {


                        if (positionShift.Day_LookID == row.AvailableDay_LookID || positionShift.Day_LookID == 76 || row.AvailableDay_LookID == 76)
                        {

                            if (((positionShift.StartTime == "Anytime" && positionShift.EndTime == "Anytime") || (row.StartTime == "Anytime" && row.EndTime == "Anytime")) ||
                                 (row.StartTime == "Anytime" || row.EndTime == "Anytime") || (positionShift.StartTime == "Anytime" || positionShift.EndTime == "Anytime"))
                            {
                                workerIdList.Add(row.ID);
                            }
                            else
                            {
                                DateTime posStartTime = Convert.ToDateTime(positionShift.StartTime);
                                DateTime availStartTime = Convert.ToDateTime(row.StartTime);
                                DateTime posEndTime = Convert.ToDateTime(positionShift.EndTime);
                                DateTime availEndTime = Convert.ToDateTime(row.EndTime);


                                if ((positionShift.StartTime == row.StartTime &&
                                    positionShift.EndTime == row.EndTime) || (positionShift.StartTime == row.StartTime ||
                                    positionShift.EndTime == row.EndTime)
                                    || (posStartTime < availStartTime && posEndTime > availEndTime))
                                {
                                    workerIdList.Add(row.ID);
                                }
                            }

                        }

                    }

                }

                var toBeList = (from a in listSelect

                                where a.LogicalDelete == false
                                select a).ToList();
                var setToList = toBeList.Select(x => x.ID).Except(filterList.Select(y => y.WorkerAvailabilityId)).ToList();

                var selectedPosition = (from a in listSelect
                                        join b in db.Workers
                                        on a.Worker_ID equals b.ID
                                        join c in db.Client_Customer_Position
                                        on positionSelected equals c.ID
                                        where workerIdList.Contains(a.ID) && a.LogicalDelete == false && b.LogicalDelete == false
                                        && c.LogicalDelete == false && setToList.Contains(a.ID)
                                        select new WorkerInfo()
                                        {
                                            ID = b.ID,
                                            WorkerAvailID = a.ID,
                                            FirstName = b.FirstName,
                                            PositionSelected = positionSelected,
                                            LastName = b.LastName


                                        }).ToList();


                var distinctList = selectedPosition.GroupBy(x => x.ID)
                         .Select(g => g.First())
                         .ToList();


                wlist = distinctList.ToList();

            }
            if (!search.Equals("Search Worker"))
            {

                var wolist = (from a in wlist
                              where a.FirstName.ToLower().Contains(search.ToLower()) ||
                              a.LastName.ToLower().Equals(search.ToLower()) ||
                              a.Name.ToLower().Equals(search.ToLower()) ||
                              a.LastFName.ToLower().Equals(search.ToLower())
                              select a).ToList();
                wlist = wolist;
            }
            else
            {
                var wolist = (from a in wlist
                              where a.LogicalDelete == false
                              select a).ToList();
                wlist = wolist;
            }
            ViewBag.positionSelected = positionSelected;
            return Json(wlist.ToList().OrderBy(p => p.FirstName.ToLower()), JsonRequestBehavior.AllowGet);
        }

thanks :D

Answer 1

Here is a working copy of Kendo DropDownList which will change the value of a Kendo Grid.

My HTML: I've linked the necessary css/js files for kendo and general markup to hook kendo controls.

<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css" rel="stylesheet" />

<script src="@Url.Content("http://cdn.kendostatic.com/2013.3.1119/js/jquery.min.js")"></script>
<script src="@Url.Content("http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js")"></script>
<script src="@Url.Content("http://cdn.kendostatic.com/2013.3.1119/js/kendo.aspnetmvc.min.js")"></script>

<div>
    <label class="control-label" for="shiftName">Shift</label>
    <div class="controls">
        <input id="ShiftInputs" type="text" style="width: 100%; min-width: 60px; max-width: 230px;" value="" />
    </div>
    <br />
    <div class="box-content">
        <label class="control-label" for="shiftName">Operator</label>
        <div id="OperatorGrid"></div>
        <div class="clearfix"></div>
    </div>
</div>

My javascript:

//Initialize Kendo DDL
$(document).ready(function () {
        $("#ShiftInputs").kendoComboBox({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: ShiftData,
            index: 0,
            change: onChange
        });

        //Loading Kendo Grid with all data
        $("#OperatorGrid").data("kendoGrid").dataSource.read();
    });

//DDL values
var ShiftData = [{ text: "ALL", value: "ALL" }, { text: "DAY", value: "DAY" }, { text: "NIGHT", value: "NIGHT" }];

//DDL change event function, hitting Home controller, function StatusCmbChanged.

    function onChange() {
        var statusValue = $("#ShiftInputs").val();
        $.ajax({
            url: 'Home/StatusCmbChanged',
            type: "POST",
            data: { "statusValue": statusValue },
            dataType: "json"
        }).done(delayedRefresh());
    }

    function delayedRefresh() {
        window.setTimeout(Refresh, 500);
    }

    function Refresh() {
        $("#RefreshMessage").show("slow").delay(5000).hide("slow");
        $("#OperatorGrid").data("kendoGrid").dataSource.read();
    }

    //Main Kendo Grid
    $("#OperatorGrid").kendoGrid({

        dataSource: {

            transport: {
                read: {
                    url: "Home/GetOperatorData",
                    type: "POST",
                    contentType: "application/json",
                    dataType: "json"
                },
                update: {
                    url: "UpdateOperatorData",
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    dataType: "json"
                },
                parameterMap: function (data, operation) {
                    if (operation != "read") {
                        return kendo.stringify(data.models);
                    }
                }
            },

            serverPaging: false,
            pageSize: 10,            
            schema: {
                model: {
                    id: "ID",
                    fields: {
                        ID: { editable: false },
                        Title: { validation: { required: true } },
                        Name: { editable: true },
                        Hours: { editable: true, type: "number", validation: { required: true, min: 0, step: 0.25 } },
                        Shift: { editable: true },
                        Comments: { editable: true }
                    }
                }
            }    
        },

        pageable: {
            refresh: true,
            pageSizes: true
        },
        sortable: true,
        autoBind: false,

        columns:
        [
            { field: "Title", width: 100 },
            { field: "Name", width: 120 },            
            { field: "Hours", width: 100 },
            { field: "Shift", width: 100 },
            { field: "Comments", width: 100 },            
        ]
    });

My MVC Codes: Controller:

public ActionResult Index()
        {    
            return View();
        }

My Data Table for the Grid:

static DataTable GetTable()
        {
            DataTable table = new DataTable();
            table.Columns.Add("ID", typeof(int));
            table.Columns.Add("Title", typeof(string));
            table.Columns.Add("Name", typeof(string));
            table.Columns.Add("Hours", typeof(int));
            table.Columns.Add("Shift", typeof(string));
            table.Columns.Add("Comments", typeof(string));

            table.Rows.Add(0, "Mr", "Indocin David", 12, "DAY", "Good sprit");
            table.Rows.Add(1, "Mr", "Enebrel Sam", 8, "NIGHT", "");
            table.Rows.Add(2, "Dr", "Hydralazine Christoff", 12, "DAY", "");
            table.Rows.Add(3, "Mrs", "Combivent Janet", 12, "DAY", "");
            table.Rows.Add(4, "Miss", "Dilantin Melanie", 8, "NIGHT", "Lazy");
            table.Rows.Add(5, "Mr", "Tim Melanie", 14, "DAY", "");
            table.Rows.Add(6, "Mr", "Robin Sriboski", 6, "NIGHT", "");
            table.Rows.Add(7, "Mrs", "Anna Frank", 13, "NIGHT", "");
            table.Rows.Add(8, "Mr", "Dimitri Petrovich", 9, "DAY", "Hard worker");
            table.Rows.Add(9, "Mr", "Roberto Carlos", 7, "NIGHT", "");
            table.Rows.Add(10, "Mrs", "Stepheny Abraham Lincoln", 13, "DAY", "");

            return table;
        }

My Kendo Grid Read:

[HttpPost]
        public ContentResult GetOperatorData([DataSourceRequest]DataSourceRequest request)
        {
            string OperatorJsonData = "";

            DataTable table = GetTable();

            string Shift = Session["CurrentShift"] as string;

            if (!string.IsNullOrEmpty(Shift) && (Shift == "DAY" || Shift == "NIGHT"))
            {
                OperatorJsonData = JsonConvert.SerializeObject(from myRow in table.AsEnumerable()
                                                               where myRow.Field<string>("Shift") == Shift
                                                               select new
                                                               {
                                                                   ID = myRow.Field<int>("ID"),
                                                                   Title = myRow.Field<string>("Title"),
                                                                   Name = myRow.Field<string>("Name"),
                                                                   Hours = myRow.Field<int>("Hours"),
                                                                   Shift = myRow.Field<string>("Shift"),
                                                                   Comments = myRow.Field<string>("Comments")
                                                               });

            }
            else
            {
                OperatorJsonData = JsonConvert.SerializeObject(table);
            }

            return new ContentResult { Content = OperatorJsonData, ContentType = "application/json", ContentEncoding = Encoding.UTF8 };
        }

My Kendo DropDownList onChange Ajax call hit point:

[HttpPost]
        public void StatusCmbChanged(string statusValue)
        {
            if (!string.IsNullOrEmpty(statusValue))
            {
                Session.Remove("CurrentShift");
                Session["CurrentShift"] = statusValue;
            }
        }

@marlonies hope this will help you.

Answer 2

As far as I understand, you want to select a value in Kendo Dropdownlist and that should update data in a Kendo Grid based on the selection.

First of all, on dropdownlist you should bind with the event, which eventually make a request on the server side and saves it in the session or whatever.

$("#ddlWorker").kendoDropDownList({
                    dataTextField: "JobCode",
                    dataValueField: "ID",
                    autoBind: false,

                    select: onDDLSelect,

                    optionLabel: {
                        JobCode: "--- Please Select Position ---",
                        ID: ""    
                    },

                    // define custom template
                    template: '<h5>${ data.JobCode }</h5>',

                    dataSource: {
                        transport: {
                            read: {
                                url: '/Worker/LoadWorkerDropdownList?userId=' + userId,
                                dataType: "json",
                                type: "POST"    
                            }
                        }
                    }        
                });

Now you make a simple JSon call to the serverside something like the following

function onDDLSelect() {

    var statusValue = $("#ddlWorker").val();

    $.ajax({
        url: '/Worker/ddlWorkerChanged',
        type: "POST",
        data: { "statusValue": statusValue },
        dataType: "json"
    }).done(delayedRefresh());
}

The main reason of delayedRefresh() is to give some time to JSon to finish its work before we call the kendo grid to reload. You can make an synchronous ajax call to remove this.

function delayedRefresh() {
    window.setTimeout(Refresh, 500);
}

function Refresh() {        
    $("#YourGridName").data("kendoGrid").dataSource.read();
}

Now on the server side make some way you can read the value what onDDLSelect() saves for kendo grid. Some checks like if your dropdown value is present or not. if present then do query for the selected value otherwise query for all.

[HttpPost] 
public void ddlWorkerChanged(string statusValue) 
{ 
// you save the ddl selection in session or the way you prefer 
} 

You save it and go back after few seconds.

$("#YourGridName").data("kendoGrid").dataSource.read(); 

It will fire and tell your grid to reload its data again. Say the following is your Kendo Grid read function (say it hits on GetShiftReportData) in the serverside..

public ActionResult GetShiftReportData([DataSourceRequest]DataSourceRequest request) 
{ 
  //if (session data is present) 
    //{ selected query } 
  //else 
    //{ regular query } 

  return Json(result, JsonRequestBehavior.AllowGet); 
}

for more reference see kendo official demos @ http://demos.kendoui.com/web/dropdownlist/events.html