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",
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.
What am I doing wrong? I have a kendo datasource setup as such
var sharedDataSource = new kendo.data.DataSource({
transport: {
read:
{
url: "/Home/ReadStarkArea",
dataType: "json"
},
update:
{
url: "/Home/UpdateStarkArea",
dataType: "json"
},
destroy:
{
url: "/Home/DeleteStarkArea/",
dataType: "json"
},
schema: {
model: {
id: "Id",
fields: {
id: { type: "number", editable: false },
ZipCode: { type: "string" },
CarrierRoute: { type: "string" }
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: sharedDataSource,
autoBind: true,
selectable: true,
toolbar: ["create"],
columns: [
{ field: "ZipCode", title: "Zipcode" },
{ field: "CarrierRoute", title: "Carrier Route" },
{ command: ["edit", "destroy"], title: " " }],
editable: "popup"
});
the URL's defined in the transport all point to methods in my controller. The read works fine but neither the update or destroy call the their methods. Furthermore, once I get the update and delete calling the correct methods, how do I know what data needs updating? does the transport pass a param with the changes?
I have a small requirement i.e initially i want to load the Local DataSource to DropDownList. while changing DropDownlist i want to load Server Side DataSource. If it is possible to do.
try this,
<div id='parentDiv'><div id='dropDown'></div></div>
<script type='text/javascript'>
$(document).ready(function() {
var data = [
{ text: "Black", value: "1" },
{ text: "Orange", value: "2" },
{ text: "Grey", value: "3" }
];
// create DropDownList from input HTML element
$("#dropDown").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
index: 0,
change: onChange
});
function onChange(e)
{
var serachActionUrl="url";
$.ajax({
url: serachActionUrl,
type: "POST",
data: { Id: Id},
traditional: true,
success: function (result) {
$('#dropDown').remove();
$("<div id='dropDown'/>").appendTo('#parentDiv').kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: result,
index: 0,
change: onChange
});
}
});
</script>
from the server sidesend the json data
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();