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 ...."
Related
I am binding the Combobox to a complex Object, the binding is such that ID field is available as a direct property on this object but the Text Property is coming from a child objects property.
I have been able to configure it show the values correctly, but running into problem to specify the optionLabel saying "select" not able to specify Parent.Childproperty getting runtime error (Uncaught TypeError: Cannot read property 'Childproperty' of undefined )
How can i specify Complex Objects in the Model defination and below for the empty selection ?
$('<input id="DegreeDDL" name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
autoBind: true,
serverFiltering: true,
optionLabel: {
'Parent.Childproperty': "--- Select ---",
ABCD_PK: null
},
dataSource: {
transport: {
read: {
url: function (e) {
return "api/Org/XXXXXXXX?abcdPK=" + efgh;
},
dataType: "json" // <-- The default was "jsonp"
}
},
},
dataTextField: "Parent.ChildProperty",
dataValueField: "ABCD_PK"
});
Also running into similar propblem when defining model for the grid
var model = {
id: "ABCD_PK",
fields: {
Parent.Child.ChilProperty:
}
}
To answer your first question: use optionLabel as string if creating object here causes errors:
optionLabel: "--- Select ---",
Here is working JSFiddle: http://jsfiddle.net/a6Ek2/11/
To answer your second question just use dataSource.schema to parse your json for non complex object. More in this topic: How can I use nested Json to populate Kendo UI grid?. Grid official do not working with complex data objects. But if you wanna give a try you delclare only parent object in model eg:
fields: {
ABCD_PK: { editable: false },
Parent: { editable: true },
}
If you still got problem with this just update this JSFiddle and show exacly where this is. I'll try improve my answers then.
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?
Can someone tell me how to bind kendo grid based on previous control selection?
Ex: I've placed one dropdown list and grid in a page. Now I wanted to populate data in grid based on dropdown selected value.
Can someone help me to do this. I'm working with MVC.
try this :
$("#dept").kendoComboBox({
filter: "contains",
index: 0,
dataTextField: "Name",
dataValueField: "ID",
dataSource: data,
select: onSelect
});
//Dropdown change event
function onSelect(e) {
var dataItem = this.dataItem(e.item.index());
UpdateUPGridSource(dataItem.value);
}
//Refresh Datasource by Role wise
function UpdateGridSource(DropdownValue) {
var grd = $("#users").data("kendoGrid");
//Set url property of the grid data source
grd.dataSource.transport.options.read.url = '/Controller/JSONMethodName?ParameterName='+ RoleID;
//Read data source to update
grd.dataSource.read();
}
Maybe you can do this as follow:
$("#dept").kendoComboBox({
filter: "contains",
suggest: true,
index: 0,
dataTextField: "Name",
dataValueField: "ID",
dataSource: data,
change: function(e){
grid.data("kendoGrid").dataSource.filter({
field: "someField",
operator: "eq|etc.",
value: this.value()
});
}
});
grid is the object you defined by kendoGrid() method.
hope it will help you.
I Have problem with my kendoAutoComplete i want to bind two fields to kendoAutoComplete, now I can bind one field name to dataTextField but for another field like id i dont have any other option, Following is my code
var alld="";
function getData(req) {
$.ajax({
url: 'BookingCity.asmx/GetAllCityBus',
contentType: 'application/json; charset=utf-8',
type: 'POST',
dataType: 'json',
minLength: 1,
async: false,
cache: false,
data: "{'prefixText':'" + req + "'}",
success: function(response) {
alld = response.d;
},
error: function(xhr, status) {
alert("error");
}
});
}
$("#totext").kendoAutoComplete({
dataSource: {
read: getData($("#totext").attr("value")),
data: alld
},
minLength: 2,
placeholder: "Select city...",
dataTextField: "Name",
dataTextField:"Id"
});
You can use template to achieve this:
$("#totext").kendoAutoComplete({
template: "#=Name# #=Adress#",
//.. rest of the options
I think you might be looking for dataValueField:"Id"
NOTE:
dataValueField is not used in kendoAutoComplete (my apologies). It was on the demo page on the Kendo UI website by mistake. It seems a dropdownlist or combobox can be used instead.
This is assuming you need to return a value that corresponds with the dataTextField (like the Id).
You can read more about it on the Kendo UI Forums - DataValueField does exist ?
or see this relevant excerpt:
The autocomplete UI widget persists only the selected text. Actually the you can post only the content of the input element. This is the expected behavior. As to the demos, the "dataValueField" is left by mistake and we will fix that for the next release of KendoUI.
In order to achieve your goal, you will need to use dropdownlist or combobox, which persist the selected id.
Regards,
Georgi Krustev
the Telerik team
Why do you want to do this? You can only bind one field to the dataTextField property, so if you want to show two, just add an additional calculated field to your datasource that contains the concatenated values of both fields and bind to that.
I need to append record based on Autocomplete when the button click :
The Autocomplete bind to wcf in remote database. What i need to do is append the record to local database and sync. Please advise what i need proceed. Thank you
$(document).ready(function () {
$("#search").kendoAutoComplete({
minLength: 3,
dataTextField: "SDesc",
dataValueField: "RefID",
template: '${ data.SDesc } ' + '(' + '${ data.SDate }' + ')',
dataSource: {
type: "odata",
serverFiltering: true,
serverPaging: true,
pageSize: 20,
transport: {
read: "http://localhost:54329/HH_WcfDataService.svc/Product"
}
}
});
$('#btnSelect').click(function (e){
var value = $("#search").data("kendoAutoComplete").value();
});
});
Actually only the Autocomplete dataTextField is posted to the server when the AutoComplete is positioned inside of a form element (just like a normal input). For your case the AutoComplete text will be posted using the search name.
If you want to send the underlying dataValueField (which is actually never used by the AutoComplete widget) you should use the ComboBox widget.