2014-01-16 45 views
1

我有一个kendo下拉列表它的工作,但我需要使它成为一个没有按钮的活的一个...每当我在下拉列表中选择一个项目时,它会自动更新我的网格内的内容或我选择的网格上的查询在下拉列表中。如何让我的剑道下拉列表生活? ?_?

这里是我的代码:

@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

是的先生.....对不起,如果我的解释不清楚..但是先生..我想选择一个值在剑道下拉,它会更新数据在剑道网格 –

回答

1

这里是剑道的DropDownList的工作副本将改变Kendo Grid的价值。

我的HTML:我已经链接kendo和一般标记的必要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

是的,先生它工作时,我尝试它先生..但我怎么能应用这种方式的绑定在我的网格?因为我有我的网格控制器上的不同方式..我编辑我的代码包括网格控制器..但你的方式是伟大的,只是问我是否仍然可以使用我现有的网格控制器...谢谢先生... –

+0

@marlonies:我用Datatable使其变得简单。如果你用Javascript绑定数据,准备一切并发送Json数据,只需使用JsonConvert.SerializeObject将其转换为JSon。对于Json数据,Kendo Grid总是遵循这种格式[{name1:value1 ,name2:value2},{name *:value *,..}, {}]。应该没问题。如果您认为解决方案是被接受的答案,请投票。 – Mahib

1

据我了解,你想要在Kendo Dropdow中选择一个值nlist并且应该根据选择更新Kendo Grid中的数据。

首先,在下拉列表中,您应该绑定事件,最终在服务器端发出请求并将其保存在会话中或其他任何地方。

$("#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()为kendo网格保存的值。一些检查,如您的下拉值是否存在。如果存在,则对所选值进行查询,否则查询所有值。

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

保存并在几秒后返回。

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

它会触发并告诉您的网格重新载入其数据。下面要说的是你的剑道电网在服务器端读取功能(说这击中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

+0

先生这部分代码 函数onDDLSelect (){ var statusValue = $(“#ddlWorker”)。val(); $就({ URL: '签收/ StatusCmbChanged', 类型: “POST”, 数据:{ “statusValue”:statusValue}, 数据类型: “JSON” })。DONE(delayedRefresh()) ; } 这是我的脚本的一部分吗? –

+1

你可以在事件绑定中从字面上做任何你想做的事......我假设你的网格是从服务器端获取数据的..对吗?所以我发布的下拉列表选择到服务器端.. – Mahib

+0

和先生,我会把什么我的网址? url:'SignOff/StatusCmbChanged',?....我只是不使用ajax总是......谢谢 –