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.
Related
How to load kendo grid data with ajax call using dataSource.data method. I have tried following but it is not working. $('#AAMaintenance').data('kendoGrid').dataSource.data(result);
function filterOnSubmit() {
var data = {};
data["ExaminerNo"] = $("#txtExaminerNo").val();
data["ExaminerName"] = $("#txtExaminerName").val();
$.ajax(
{
type: 'POST',
url: '#Url.Action("GetFilteredAAMaintenanceDetails", "AAMaintenance")',
contentType: "application/json",
dataType: 'json',
data: JSON.stringify({ aaMaintenanceFilter: data }),
success: function (result) {
$('#AAMaintenance').data('kendoGrid').dataSource.data(result);
$('#AAMaintenance').data('kendoGrid').refresh();
}
});
}
Assuming that the dataSource hasn't been setup for the Kendo grid control prior to the ajax call to retrieve the data, you should instantiate this before setting it as the datasource:
var ds = new kendo.data.DataSource({
data: result
});
$("#AAMaintenance").data("kendoGrid").setDataSource(ds);
A few notes aside from this, and based on Telerik documentation:
If the result returned from the server is a complex object (unknown currently), you may need to look into schema.model.
Ensure that the column declaration field attributes match the names assigned to the object attributes you wish to display, for example note in this example how the field: "name" column matches the name attribute being added to the dataSource.
I have a Kendo Grid where I am filtering one of the columns with a MultiSelect control. When I click the "Filter" button it sends [object Object] to the server as the filter value. How can I fix it so it sends the values of the selected item(s). Note, I am server filtering the grid not the multi select control.
Initialization of the multiselect
var regionddl = element.kendoMultiSelect({
dataTextField: "Value",
dataValueField: "Value",
optionLabel: "Select One...",
dataSource: {
transport: {
read: {
data: "",
dataFilter: function (data) {
var msg = eval('(' + data + ')');
if (msg.hasOwnProperty('d'))
return msg.d;
else
return msg;
},
contentType: "application/json; charset=utf-8",
type: "POST",
url: "SearchSites.aspx/GetRegions"
}
}
}
}).data("kendoMultiSelect");
Here is the JSON that Kendo is sending to the server. Notice there are two object Object items because I selected two items in the filter.
[{\\\"field\\\":\\\"Region\\\",\\\"operator\\\":\\\"eq\\\",\\\"value\\\":\\\"[object Object],[object Object]\\\"}]
If you want to see an example of what multiselect filtering looks like in a grid, you can see this jsbin
http://jsbin.com/upEPEqU/3/edit
To change this you need to set the valuePrimitive option to true.
I have an observableArray of options that gets bound to the following:
<select data-bind="options: lookupData.options, optionsText: 'DisplayName', optionsValue: 'Id', value: optionId" />
When I first apply bindings, the options() observable array is empty - an async AJAX call is sent to retrieve these options.
Most of the time, this works perfectly. But if I display the view very quickly, before the AJAX call returns, the dropdown displays with a default option selected, but the options become available. The selected option isn't updated though.
In other words - if I have 'Blue' as the currently selected option, but the select markup is displayed before the AJAX call completes, 'Blue' doesn't get selected after the observableArray of options is populated.
Am I missing some syntax to make this work?
Code:
// getLookupData()
var lookupData = {};
lookupData.colors = ko.observableArray();
$.ajax({
type: "POST",
url: getAllergyRelationshipListUrl.url,
async: true,
data: new Object(),
dataType: "json",
contentType: "application/json"
}).done(function(data, textStatus, jqXhr) {
lookupData.colors(data.Data);
});
return lookupData;
// colorVm
if (vm.colorLookupData == null) {
vm.colorLookupData = getLookupData();
}
ko.applyBindings(vm);
It's a known problem on knockout select. Before your ajax finishes, the value does not exist in options, the options binding enforced your value to be one of options.
This is solved in knockout since version 3.1 with introduction of valueAllowUnset.
Update your binding to:
<select data-bind="valueAllowUnset: true, options: lookupData.options, optionsText: 'DisplayName', optionsValue: 'Id', value: optionId" />
You can read here http://knockoutjs.com/documentation/value-binding.html#using-valueallowunset-with-select-elements
I want to merge two plugins together.
I am using jquery autocomplete for zipcode field.
Now I want to add multiple entries for zipcode field so I found jQuery tags input plugin.
So I wnat to use jQueryUI autocomplete with jQuery tags input plugin.
I tried myself on JSfiddle but not working. link :-http://jsfiddle.net/7aDak/1719/
Can anyone help me for this functionality.
You met two problems here:
default param name used by autocomplete is "term" - no changeable by simple param, you need to do it by "source" function
result needs two fields: "label" and "value" with is not provided by your provider - need response remap.
Code below is good for startpoint for you:
$('#tag1').tagsInput({
autocomplete_url:'http://ws.geonames.org/postalCodeSearchJSON',
autocomplete:{
source: function(request, response) {
$.ajax({
url: "http://ws.geonames.org/postalCodeSearchJSON",
dataType: "json",
data: {
postalcode_startsWith: request.term
},
success: function(data) {
response( $.map( data.postalCodes, function( item ) {
return {
label: item.countryCode + "-" + item.placeName,
value: item.postalCode
}
}));
}
})
}}});
http://jsfiddle.net/YGm89/
I want to add about 150 element from a xml file to a select control that is inside a jqGrid cell. I was thinking of doing this in two ways:
1.Using the editoptions value:
{ name: 'language', width: 100, sortable: false, editable: true, edittype: 'select', editoptions: { value: languageElem()} }
using data received from the method:
function languageElem() {
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'jqService.asmx/GetLanguages',
data: {},
dataType: "json",
success: function (data) {
alert("success");
}
});}
But I'm having trouble forwarding the data from the ajax part.
2.Simply accessing the select control inside the jqGrid cell and manually adding the options whenever the edit button is pressed.
The problem over here is that I have no idea how to access the control itself.
The code I used over here is:
function startEdit() {
if (selRow > -1) {
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'jqService.asmx/GetLanguages',
data: {},
dataType: "json",
success: function (data) {
var cell = jQuery("#MainContent_list").getCell(selRow, "language");
cell.options.length = 0;
for (var i=0;i<data.d.length;i++)
{
}
}
});
jQuery("#MainContent_list").jqGrid('restoreRow', selRow);
jQuery("#MainContent_list").jqGrid('editRow', selRow);
}
My questions are:
1.Related to the first idea, what should I do to fix the method so that the control will receive it's needed values?
2.Related to the second idea, how could I access the control inside the row?
Thanks, Catalin
Instead of value property (editoptions: { value: languageElem()}) you should use dataUrl and buildSelect (see the documentation). Because it's difficult to return from ASMX HTML fragment <select><option>...</option></select> you can provide the list serialized as JSON and convert the server response to HTML fragment using buildSelect. In the answer and in this one you will find additional information. If you would search for dataUrl and buildSelect you will find more information and code example which you could use.