jquerykendo-uikendo-dropdown
how can i make my kendo dropdown list live ? ?_?
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
Solution
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.
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices