2014-01-16 84 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總是......謝謝 –