2014-01-16 3 views
1

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

вот мой код:

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

спасибо: D

+0

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

+0

да сэр ..... извините, если мои объяснения непонятны .. но да sir .. я хочу выбрать значение в раскрывающемся списке kendo и обновить данные в сетке кендо –

ответ

1

Здесь есть рабочая копия Кендо DropDownList, который изменит значение сетки Кендо.

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

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

Мой Кендо DropDownList OnChange Ajax вызов хитпоинт:

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

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

Preview for All Preview when select DAY Preview when select NIGHT

+0

@marlonies делает это работаю для вас? – Mahib

+0

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

+0

@marlonies: Я использовал Datatable для упрощения. получать данные из базы данных, каким бы способом вы ни занимались. Подготовьте все и отправьте данные Json, если вы связываете данные с Javascript. Просто используйте JsonConvert.SerializeObject, чтобы преобразовать его в JSon. Для данных Json для Kendo Grid всегда следует этот формат [{name1: value1 , name2: value2}, {name *: value *, ..}, {}]. Это должно быть хорошо. Пожалуйста, проголосуйте, если вы считаете, что решение является принятым ответом. – Mahib

1

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

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

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

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

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

+0

с этой частью кода function onDDLSelect() { var statusValue = $ ("# ddlWorker"). Val(); $ .ajax ({ URL: 'SIGNOFF/StatusCmbChanged', типа: "POST", данные: { "statusValue": statusValue}, DATATYPE: "JSON" }). Done (delayedRefresh()) ; } это будет частью моего сценария ???? –

+1

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

+0

и сэр, что я надену на URL? url: 'SignOff/StatusCmbChanged',? .... я просто не использую ajax всегда ...... спасибо –

Смежные вопросы