The code below gets my list of categories and displays them. However, when I uncomment the middle line of code to add an "All Categories" entry then all the other categories go away and it only displays the inserted "All Categories" entry.
var categoryDataSource = new kendo.data.DataSource({
transport: { read: resolveUrl('~/Catalog/Categories') },
});
//categoryDataSource.insert({ "Title": "All Categories", "OID": "0" }, 0);
$("#categoriesDropDown").kendoDropDownList({
dataTextField: "Title",
dataValueField: "OID",
dataSource: categoryDataSource
});
What am I doing wrong here?
I believe the problem is because the dataSource hasn't done a fetch of the data, it doesn't have a set of records to insert into. So when you insert one, it trounces all over what is going to be used as the data set.
I can reproduce the behavior using a local array (http://jsbin.com/xaruka/1/edit?html,js,output).
I think you do a read once the dataSource is setup, it will have its internal list of items to insert into.
var categoryDataSource = new kendo.data.DataSource({
transport: { read: resolveUrl('~/Catalog/Categories') },
});
categoryDataSource.read();
categoryDataSource.insert(0, { "Title": "All Categories", "OID": "0" });
$("#categoriesDropDown").kendoDropDownList({
dataTextField: "Title",
dataValueField: "OID",
dataSource: categoryDataSource
});
Working sample http://jsbin.com/xaruka/2/edit?html,js,output
Related
I am using Kendo multiselect. I am facing issue while removing selected items using cross icon which are coming in kendo multi select at right hand side as shown in image below,
as per above image it is showing 8 item selected in drop down so to remove selected items when I click on highlighted cross icon it is removing item one by one but it should clear all selection when click on highlighted cross icon.
below is my code that I have written for drop down.
<select id="RegionDDL" kendo-multi-select="" k-options="RegionOptions" k-ng-delay="RegionOptions"
k-ng-model="CommonFilter.Regions"></select>
$scope.RegionOptions = {
autoBind: false,
placeholder: "Select All",
dataTextField: "Text",
dataValueField: "ID",
filter: "contains",
tagMode: "single",
change: OnRegionChange,
// ************ Below commented to remove cascading functionality *************
//filtering: function (e) { $scope.callDataBoundFn = false; },
dataBound: function (e) {
current = this.value();
this._savedOld = current.slice(0);
// handle the event
},
dataSource: $scope.RegionDataSource
};
$scope.RegionDataSource = {
transport: {
read: {
url: window.versionType + "api/GetRegions",
headers: {
"Authorization": "Bearer " + sessionStorage["accessToken"],
"coreInfo": JSON.stringify(coreInfo)
},
dataType: "json",
}
}
};
Please help.
I'm fairly new to Kendo UI and got the basics for my code here : http://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist
I got 2 api calls, where the first take no parameters and return a list if items (Id, Name)
The second api call take in an Id, and return a seconds list of items (also just an object with Id and Name)
From this I want to have 2 cascading kendo dropdowns.
However my problem is the second one's url always have the id being null or empty, and I cannot figure out what is the right syntax:
// First dropdown, all good
var controllers = $("#Controller").kendoDropDownList({
optionLabel: "Select controller...",
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
serverFiltering: true,
transport: {
read: "/SharedData/GetControllers/"
}
}
}).data("kendoDropDownList");
// second dropdown, always hit the api method with the id being null or empty (depending on syntax for url)
var actions = $("#Action").kendoDropDownList({
autoBind: true,
cascadeFrom: "controllers",
cascadeFromField: "Id",
optionLabel: "Select Action...",
dataTextField: "Id",
dataValueField: "Name",
dataSource: {
serverFiltering: true,
transport: {
// HELP: need pass id to this route (which is id of selected controller)
read: "/SharedData/GetControllerActions/id=" + $("#Controller").data("kendoDropDownList").text()
}
}
}).data("kendoDropDownList");
I believe the problem is that your datasource only gets set one time - at the time of initialization - and at this time the value of the dropdown is null. What i would do is add a change event on the first dropdown like this:
var controllers = $("#Controller").kendoDropDownList({
optionLabel: "Select controller...",
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
serverFiltering: true,
transport: {
read: "/SharedData/GetControllers/"
}
},
change: function(e) {
setSecondDS();
}
}).data("kendoDropDownList");
var setSecondDS = function() {
//initialize your new kendo datasource here
var dataSource = new kendo.data.DataSource({
//your stuff here
transport:
serverFiltering:
});
$("#Action").data("kendoDropDownList").setDataSource(dataSource);
}
I have a Kendo UI combobox object something like this :
widget: "kendoComboBox",
options: {
dataTextField: "#:userFirstName# #:userLastName#",
dataValueField: "userId",
template: "#:userFirstName# #:userLastName#",
change: function (e) {
that.model.fn.bringUserData();
}
}
I can arrange the template, but i cannot dataTextField value depends on that template. It is possible to make it "userId" etc. But seems not possible to set selected value as #:userFirstName# #:userLastName#. (dataTextFieldTemplate doesn't work.)
Could you help me to solve this?
Correct, you cannot make it a composition of two fields. It needs to be a field per se. What you can do is when reading data from the DataSource create an additional field that is the concatenation of those two fields. You can add to you DataSource definition something like this:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "..."
}
},
schema: {
parse: function(response) {
$.each(response, function(idx, elem) {
elem.fullName = elem.firstName + " " + elem.lastName;
});
return response;
}
}
});
Then the options for the combobox are simply:
options: {
dataTextField: "fullName",
dataValueField: "userId",
...
}
See it in action here : http://jsfiddle.net/OnaBai/12hpLeux/1/
Basically I have a Kendo UI Dropdownlist as my first grid column called "instrumentName"
In popup EDIT mode, I can see the correct instrumentName in the dropdown but there's one problem when I change the value:
As soon as I select a new instrument - the instrument ID shows up on the grid (in the background). The updated INSTRUMENT NAME should appear on the grid.
And once I click UPDATE, it does NOT show the instrument NAME, but rather the instrument ID (which is a number).
Some code snippets:
instrDropDown.value(e.model.instrumentId);
nodeGrid = $("#curvesGrid").kendoGrid({
dataSource: new kendo.data.DataSource({ ... });
columns: [
{
field: "instrumentName",
editor: instrumentsDropDownEditor, template: "#=instrumentName#"
},
{
field: "instrumentTypeName"
},
edit: function(e){
var instrDropDown = $('#instrumentName').data("kendoDropDownList");
instrDropDown.list.width(350); // widen the INSTRUMENT dropdown list
if (!e.model.isNew()) {
instrDropDown.value(e.model.instrumentId);
}
}
});
and here's my template editor for that Dropdown :
function instrumentsDropDownEditor(container, options) {
// INIT INSTRUMENT DROPDOWN !
var dropDown = $('<input id="instrumentName" name="instrumentName">');
dropDown.appendTo(container);
dropDown.kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
dataSource: {
type: "json",
transport: {
read: "/api/breeze/GetInstruments"
},
},
pageSize: 6,
//select: onSelect,
change: function () { },
close: function (e) {
},
optionLabel: "Choose an instrument"
}).appendTo(container);
}
Do I need to do anything special on change of the Dropdown ?
thanks.
Bob
dataFieldValue is what is going to be saved as value of the DropDownList. If you want name to be saved then you should define dataValueField as name.
Regarding the background update that's the default behavior since this is an ObservableObject and as consequence changes are automatically propagated. If you don't want this you should probably try using a fake variable for the drop-down and in the save event copy it to the actual field. Do you really need this?
I am working with KendoUI, I created drop down list with Json data by using below code..
$("#locationdropdownList").kendoDropDownList({
dataTextField: "LocationDescription",
dataValueField: "LocationName",
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: "******my url******",
dataType: "json"
},
}
})
});
It's working fine..But, my requirement is.. I want to show my custom value as the default one of drop down list(i.e my custom value will be appear on the top of the drop down list view, remain json data will display after custom one).
How can I do this.. Please give me solution for this..
Thanks in Advance..
Lokesh, you can use optionLabel property of the kendo ddl :
$("#locationdropdownList").kendoDropDownList({
dataTextField: "LocationDescription",
dataValueField: "LocationName",
optionLabel: " my custom value ...."