Im trying to do a simple cascading dropdownist but for some reason the 3 drop down list isnt cascading correctly. Is cascading the engineType from the previous dropdownlist nut not taking into count the make.
for example select make->Audi, then EngineType->Deisel. the 3 dropdownlist should show 'A4'. but it shows all Deisel engines.
any help would be great on this.
$(document).ready(function () {
var makes = $("#makes").kendoDropDownList({
autoBind: true,
optionLabel: "Select",
dataTextField: "make",
dataValueField: "make",
dataSource: [
{ make: "Audi"},
{ make: "BMW" },
{ make: "Saab"}
]
}).data("kendoDropDownList");
var engineType = $("#engineTypes").kendoDropDownList({
autoBind: false,
cascadeFrom: "makes",
optionLabel: "Select",
dataTextField: "engineType",
dataValueField: "engineType",
dataSource: [
{ make: "Audi", engineType: "Deisel"},
{ make: "Audi", engineType: "Petrol"},
{ make: "BMW", engineType: "Deisel"},
{ make: "Saab", engineType: "Deisel"}
]
}).data("kendoDropDownList");
var models = $("#models").kendoDropDownList({
autoBind: false,
cascadeFrom: "engineTypes",
optionLabel: "Select",
dataTextField: "chose",
dataValueField: "chose",
dataSource: [
{ make: "Audi", engineType: "Deisel", chose: "A4"},
{ make: "Audi", engineType: "Petrol", chose: "A5"},
{ make: "BMW", engineType: "Deisel", chose: "3 Series"},
{ make: "Saab", engineType: "Deisel", chose: "900"}
]
}).data("kendoDropDownList");
});
The problem is caused because the second dropdownlist (engine types) contains duplicate values. You need to give each item some unique value. Something like this:
var engineType = $("#engineTypes").kendoDropDownList({
autoBind: false,
cascadeFrom: "makes",
optionLabel: "Select",
dataTextField: "engineType",
dataValueField: "value",
dataSource: [
{ make: "Audi", engineType: "Deisel", value: 1 },
{ make: "Audi", engineType: "Petrol", value: 2 },
{ make: "BMW", engineType: "Deisel", value: 3 },
{ make: "Saab", engineType: "Deisel", value: 4}
]
}).data("kendoDropDownList");
var models = $("#models").kendoDropDownList({
autoBind: false,
cascadeFrom: "engineTypes",
optionLabel: "Select",
dataTextField: "chose",
dataValueField: "chose",
dataSource: [
{ make: "Audi", value: 1, chose: "A4"},
{ make: "Audi", value: 2, chose: "A5"},
{ make: "BMW", value: 3, chose: "3 Series"},
{ make: "Saab", value: 4, chose: "900"}
]
}).data("kendoDropDownList");
Here is a live demo: http://jsbin.com/izahAWi/1/edit
Related
I am making a game, and have a specific requirement where players pick a playable character race, and then I want a second drop down list to show the list of available genders for that race. I thought this would be easy to do using the Cascade property of the kendo.ui.DropDownListOptions... like this.
var racesOptions = {
index: -1,
valuePrimitive: true,
dataTextField: "Name",
dataValueField: "Name",
dataSource: {
transport: {
read: {
dataType: 'json',
url: '/api/races/list',
type: 'GET'
}
}
}
};
var genderOptions = {
index: -1,
valuePrimitive: true,
cascadeFrom: 'race',
cascadeFromField: 'Genders'
};
The shape of data coming in from /api/races/list looks like this;
[{
"Name": "race1",
// ... other data ... //
"Genders": [ "Male", "Female", "Other" ]
}, {
"Name": "race2",
// ... other data ... //
"Genders" : ["Female"]
}, {
"Name": "race3",
// ... other data ... //
"Genders": ["Male"]
}]
I thought this was going to be a no-brainer. The second drop down cascades from the first; When the first has a value, I figured the second would get the CascadeFromFieldvalue. But that's not happening... In fact, the only way I've been able to accomplish this is with the following code in the #race widget's change event.
change: function (e) {
// the specific race entity selected
var entity = e.sender.dataItem().toJSON();
// set the selected race's genders
var genders = $('#genders').data('kendoDropDownList');
genders.destroy();
genders = $('#genders').kendoDropDownList({
index: -1,
valuePrimitive: true,
dataSource: {
data: entity.Genders
}
}).data('kendoDropDownList');
genders.select(-1);
genders.trigger('change');
}
That change event does work, but it's messy and kind of obtuse. Is there another way I can get the Cascading to work as I'm expecting?
The value for cascadeFromField: needs to point to the parent ID field. In your case the ID field in the Races datasource.
Here's a small example that should help.
<h4>Race:</h4>
<input id="race" />
<h4>Gender:</h4>
<input id="gender" />
<script>
$("#race").kendoDropDownList({
optionLabel: "Select race...",
dataTextField: "raceName",
dataValueField: "raceID",
dataSource: [
{ raceName: "Race1", raceID: 1 },
{ raceName: "Race2", raceID: 2 },
{ raceName: "Race3", raceID: 3 }
]
});
$("#gender").kendoDropDownList({
optionLabel: "Select gender...",
cascadeFrom: "race",
cascadeFromField: "raceID",
dataTextField: "genderName",
dataValueField: "genderID",
dataSource: [
{ genderName: "Male", genderID: 1, raceID: 1 },
{ genderName: "Female", genderID: 2, raceID: 1 },
{ genderName: "Other", genderID: 3, raceID: 1 },
{ genderName: "Female", genderID: 4, raceID: 2 },
{ genderName: "Male", genderID: 4, raceID: 3 }
]
});
</script>
You can check out this demo using the above code.
I'm working with kendo Multiselect and I would like to find a way to search in multiple fields of my data source.
Here is my actual code. but it works only for one field:
`
$scope.dataList = new kendo.data.DataSource({
data:[{id: "1",name: "Doe, John",email: "John.Doe#example.com"}],
});
$scope.customOption = {
dataSource: $scope.dataList,
dataTextField: "name",
dataValueField: "id",
filter: "contains",
itemTemplate: '<span>#=id#</span>#=name#<i> #=email#</i>',
}
`
As you see I'm also using AngularJS, I try to search for names and emails.
$("#id").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "name",
dataValueField: "id",
autoBind: false,
filtering: function (e) {
if (e.filter) {
var value = e.filter.value
var newFilter = {
filters: [
{ field: "id", operator: "contains", value: value },
{ field: "name", operator: "contains", value: value },
{ field: "email", operator: "contains", value: value }
],
logic: "or"
}
e.sender.dataSource.filter(newFilter)
e.preventDefault()
}
e.preventDefault()
},
dataSource: {
data:[
{id: "1",name: "Doe, John",email: "John.Doe#example.com"},
{id: "2",name: "sss, John",email: "sss.Doe#example.com"},
{id: "3",name: "fff, John",email: "fff.Doe#example.com"},
{id: "4",name: "ccc, John",email: "ccc.Doe#example.com"}
],
},
value: [
{id: "1",name: "Doe, John"},
]
});
Refer to API Documentation of Kendo DataSource and MultiSelect. hope it helps.
I am one day old into Kendo, so I believe, I'm missing the obvious.
The grid seems to get stuck when tried to filter with Enum values set. Test Link
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{
field: "category",
values: [{text: "Beverages", value: 1 }, {text: "Food", value: 2 }],
filterable: { mode: "row", cell: { showOperators: false, operator: "eq" } }
}
],
dataSource: [{ category: 1 }, { category: 2 } ],
filterable: {mode: "row"}
});
</script>
worked it out finally, missing type was all it seems needed. Demo Link
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{
field: "category", type: "number",
values: [{text: "Beverages", value: 1 }, {text: "Food", value: 2 }],
filterable: { mode: "row", cell: { showOperators: false, operator: "eq" } }
}
],
dataSource: [{ category: 1 }, { category: 2 } ],
filterable: {mode: "row"}
});
</script>
I can able to filer the matched data using filter button.How to get the popup window if there is no matched data after clicking the filter data.Present If there is no matched data the table is showing empty instead of that how to rise a pop to tell no matched data to filter
// Set up information window
$("#filter-msg").kendoWindow({
modal: true,
visible: false
});
// Set up date pickers
$("#datetimepicker1").kendoDatePicker({});
$("#datetimepicker2").kendoDatePicker({});
// Set up DDL
var categories = $("#categories").kendoDropDownList({
optionLabel: "Select category...",
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
}
}
}).data("kendoDropDownList");
var products = $("#products").kendoDropDownList({
autoBind: false,
cascadeFrom: "categories",
optionLabel: "Select product...",
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
}
}
}).data("kendoDropDownList");
var orders = $("#orders").kendoDropDownList({
autoBind: false,
cascadeFrom: "products",
optionLabel: "Select order...",
dataTextField: "Order.ShipCity",
dataValueField: "OrderID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
}
}
}).data("kendoDropDownList");
// Bind "click" event on button "Filter"
$("#filter").on("click", function () {
var mindate = $('#datetimepicker1').data("kendoDatePicker").value();
var maxdate = $('#datetimepicker2').data("kendoDatePicker").value();
var product = $("#products").data("kendoDropDownList").value();
var order = $("#orders").data("kendoDropDownList").value();
if (!mindate || !maxdate || !product || !order) {
var content = "";
if (!mindate)
content += "<div class=\"k-error-colored\">mindate is not defined!</div>";
if (!maxdate)
content += "<div class=\"k-error-colored\">maxdate is not defined!</div>";
if (!product)
content += "<div class=\"k-error-colored\">product is not defined!</div>";
if (!order)
content += "<div class=\"k-error-colored\">order is not defined!</div>";
$("#filter-msg").data("kendoWindow")
.content(content)
.center()
.open();
return false;
}
var condition = {
logic: "and",
filters: [{
field: "OrderDate",
operator: "ge",
value: mindate
}, {
field: "OrderDate",
operator: "le",
value: maxdate
}]
};
grid.dataSource.filter(condition);
});
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: {
type: "number"
},
Freight: {
type: "number"
},
ShipName: {
type: "string"
},
OrderDate: {
type: "date"
},
ShipCity: {
type: "string"
}
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight", {
field: "OrderDate",
title: "Order Date",
width: 100,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 200
}, {
field: "ShipCity",
title: "Ship City"
}]
}).data("kendoGrid");
Here is the js fiddle: http://jsfiddle.net/XHW3w/1/
Done, you can check using length property of dataSource.data
Here is the updated jsfiddle
grid.dataSource.filter(condition);
console.log(grid.dataSource.data.length);
if(grid.dataSource.data.length <= 1)
$("#filter-msg").data("kendoWindow")
.content("<div class=\"k-error-colored\">No record found!</div>")
.center()
.open();
Im trying to use an existing data file to populate a kendo drop down list.The field im interested in populating my drop down list is the "make" field which basically displays a list or car manufacturers.
this works fine...
var makes = $("#makes").kendoDropDownList({
optionLabel: "Select make...",
dataTextField: "make",
dataValueField: "make",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "data.php",
}
},
schema: {
data: "data"
}
}
}).data("kendoDropDownList");
However there are many makes repeated as its a list of car specs so i want to be able to group the data by make to hide the repetitions. As soon as i add this line the dropdowlist options become undefined.
group: { field: "make" }
Code after i added group
var makes = $("#makes").kendoDropDownList({
optionLabel: "Select make...",
dataTextField: "make",
dataValueField: "make",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "data.php",
}
},
schema: {
data: "data"
},
group: { field: "make" }
}
}).data("kendoDropDownList");
Any idea's guys
thanks
UPDATE!!
Using this below i can now group the data but the cascading isnt working
var data = [
{"make": "Audi", "model": "A1"},
{"make": "Audi", "model": "A2"},
{"make": "Audi", "model": "A3"},
{"make": "Audi", "model": "A4"},
{"make": "Saab", "model": "S500"}
];
$(document).ready(function () {
var makesDatasource = new kendo.data.DataSource({
data: data,
group: { field: "make", value: "make"}
});
var makes = $("#makes").kendoDropDownList({
optionLabel: "Select make...",
dataTextField: "value",
dataValueField: "value",
dataSource: makesDatasource
}).data("kendoDropDownList");
var modelsDatasource = new kendo.data.DataSource({
data: data,
group: { field: "model", value: "model"}
});
var models = $("#models").kendoDropDownList({
autoBind: false,
cascadeFrom: "makes",
optionLabel: "Select model...",
dataTextField: "value",
dataValueField: "value",
dataSource: modelsDatasource
}).data("kendoDropDownList");
});
Grouped data looks like:
[
{ field: "make", value: "Make 1", items: [...]},
...
]
so try changing to:
dataTextField: "value",
dataValueField: "value",