как я могу активировать выпадающий список кендо? ?_?

у меня есть раскрывающийся список кендо, он работает, но мне нужно сделать его живым без кнопки ... всякий раз, когда я выбираю один элемент в раскрывающемся списке, он автоматически обновляет то, что находится внутри моей сетки, или запрос в моей базе сетки на выбранном на раскрывающийся список.

вот мой код:

@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);

мой контроллер для сетки

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);
        }

Спасибо


person Mr.Bobo Haha    schedule 16.01.2014    source источник
comment
Извините, просто чтобы уточнить.. вы хотите выбрать значение в раскрывающемся списке кендо, и оно обновит данные в сетке кендо.. я правильно понимаю??   -  person Mahib    schedule 16.01.2014
comment
да, сэр..... извините, если мое объяснение непонятно... но да, сэр... я хочу выбрать значение в раскрывающемся списке кендо, и оно обновит данные в сетке кендо   -  person Mr.Bobo Haha    schedule 16.01.2014


Ответы (2)


Вот рабочая копия Kendo DropDownList, которая изменит значение Kendo Grid.

Мой HTML: я связал необходимые файлы css/js для кендо и общей разметки, чтобы подключить элементы управления кендо.

<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>

Мой 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 },            
        ]
    });

Мои коды MVC: Контроллер:

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

Моя таблица данных для сетки:

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;
        }

Моя сетка кендо Чтение:

[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 };
        }

Мой Kendo DropDownList onChange Ajax call point:

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

@marlonies надеюсь, что это поможет вам.

Предварительный просмотр для всехПредварительный просмотр при выборе ДЕНЬ Предварительный просмотр при выборе НОЧЬ

person Mahib    schedule 19.01.2014
comment
да, сэр, это работает, когда я пытаюсь это сделать, сэр ... но как я могу применить этот способ привязки к моей сетке? потому что у меня есть другой способ на моем контроллере для моей сетки ... я отредактировал свой код, чтобы включить контроллер сетки ... но ваш способ великолепен, просто спросите, могу ли я все еще использовать мой существующий контроллер сетки ... спасибо, сэр ... - person Mr.Bobo Haha; 20.01.2014
comment
@marlonies: я использовал Datatable для простоты. В обычном случае я бы взял данные из базы данных; как хочешь. Подготовьте все и отправьте данные Json, если вы связываете данные с помощью Javascript. Просто используйте JsonConvert.SerializeObject, чтобы преобразовать его в JSon. Для данных Json в Kendo Grid всегда используйте этот формат [{name1: value1, name2: value2}, {name*: value*,..}, {}]. Все должно быть в порядке. Пожалуйста, проголосуйте, если считаете, что решение является принятым ответом. - person Mahib; 20.01.2014
comment
Вы можете использовать свой собственный контроллер сетки. Я показал это, чтобы вы могли понять, как процесс изменения выпадающего списка может повлиять на сетку кендо. - person Mahib; 20.01.2014
comment
да, сэр, спасибо .. я поработаю над этим .. я уже принял ваш ответ, спасибо - person Mr.Bobo Haha; 20.01.2014

Насколько я понимаю, вы хотите выбрать значение в раскрывающемся списке кендо, и это должно обновлять данные в сетке кендо на основе выбора.

Прежде всего, в раскрывающемся списке вы должны привязаться к событию, которое в конечном итоге сделает запрос на стороне сервера и сохранит его в сеансе или что-то еще.

$("#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"    
                            }
                        }
                    }        
                });

Теперь вы делаете простой вызов JSON на сервер примерно так:

function onDDLSelect() {

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

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

Основная причина delayedRefresh() заключается в том, чтобы дать JSon некоторое время для завершения своей работы, прежде чем мы вызовем перезагрузку сетки кендо. Вы можете сделать синхронный вызов ajax, чтобы удалить это.

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

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

Теперь на стороне сервера сделайте так, чтобы вы могли прочитать значение, которое onDDLSelect() сохраняет для сетки кендо. Некоторые проверяют, например, присутствует ли ваше раскрывающееся значение или нет. если присутствует, выполните запрос для выбранного значения, в противном случае запрос для всех.

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

Вы сохраняете его и возвращаетесь через несколько секунд.

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

Он сработает и скажет вашей сетке снова перезагрузить данные. Скажем, следующее — это ваша функция чтения Kendo Grid (скажем, она попадает в GetShiftReportData) на стороне сервера.

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

  return Json(result, JsonRequestBehavior.AllowGet); 
}

для получения дополнительной информации см. официальные демонстрации кендо @ http://demos.kendoui.com/web/dropdownlist/events.html

person Mahib    schedule 16.01.2014
comment
сэр, эта часть кода function onDDLSelect() { var statusValue = $(#ddlWorker).val(); $.ajax({url: 'SignOff/StatusCmbChanged', тип: POST, данные: {statusValue: statusValue}, dataType: json}).done(delayedRefresh()); } это будет частью моего скрипта???? - person Mr.Bobo Haha; 16.01.2014
comment
вы можете буквально делать все, что хотите, в привязке событий... я предполагаю, что для вашей сетки вы получаете данные со стороны сервера... верно? поэтому я публикую выбор выпадающего списка на стороне сервера. - person Mahib; 16.01.2014
comment
и сэр, что я поставлю на URL ?? url: 'SignOff/StatusCmbChanged',?.... я просто не всегда использую ajax...... спасибо - person Mr.Bobo Haha; 16.01.2014
comment
хм... что это за функция URL? я просто не могу понять, какой адрес для приятеля - person Mr.Bobo Haha; 16.01.2014
comment
url не является функцией .. как вы делали это в ddl read .. url: '/Worker/LoadWorkerDropdownList?userId=' + userId вы получаете свои данные со стороны сервера .. верно?? то же самое здесь .. это то место, где вы хотите нажать, когда пользователь выбирает значение в раскрывающемся списке .. пожалуйста, внимательно прочитайте .. когда вы выбираете значение, вы хотите, чтобы сетка отражала изменения в сетке .. правильно ?? - person Mahib; 16.01.2014
comment
да да.. я частично понимаю это, приятель.. спасибо... я буду работать над этим... :D - person Mr.Bobo Haha; 16.01.2014
comment
[HttpPost] public void ddlWorkerChanged(string statusValue) { // вы сохраняете выбор ddl в сеансе или так, как вы предпочитаете } Вы сохраняете его и возвращаетесь через несколько секунд. $(#YourGridName).data(kendoGrid).dataSource.read(); сработает и скажет вашей сетке снова перезагрузить данные. Скажем, следующая функция чтения Kendo Grid на стороне сервера. Json(результат, JsonRequestBehavior.AllowGet); } - person Mahib; 16.01.2014
comment
если решения полезны для вас, пожалуйста, дайте ему исключительный ответ. - person Mahib; 16.01.2014