问题
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" />
<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
回答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.
回答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
来源：https://stackoverflow.com/questions/21154244/how-can-i-make-my-kendo-dropdown-list-live