I've implemented a column editor for a ComboBox in a Grid. The dropdown functionality is working but the filtering functionality is not. So if I type in the first 3 characters of a value in the data, it's displaying all entries instead of filtering the entries. The filterLocations function never gets called so I'm assuming I don't have the snytax correct but I can't find an example of this anywhere. Plenty of examples of a column editor for a DropDown but none with a ComboBox. Appreciate any help in correcting my syntax or pointing me towards a working demo.
Grid Column
<column field="LocationId" title="Location" template="#=locationTemplate(data)#" editor="locationEditor">
<filterable extra="false" enabled="false">
<cell show-operators="false"></cell>
</filterable>
</column>JavaScript
function locationEditor(container, options) {
$('<input required validationMessage="Please select a location." name="' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
autoBind: true,
dataTextField: "Text",
dataValueField: "Value",
placeholder: "- Select or Enter -",
filter: "contains",
minLength: 3,
dataSource: {
serverFiltering: true,
transport: {
read: "/ComboBox/LocationsRead",
data: "filterLocations"
}
}
});
}
function filterLocations() {
return {
locationFilter: $("#Input_LocationId").data("kendoComboBox").input.val()
};
}1 Answer, 1 is accepted
Hello John,
The reason the function that is supposed to return additional data is not called is an incorrect transport configuration. When configuring the transport.read option you can either pass a string or an object or a function. If the value of transport.read is a string, the data source uses this string as the URL of the remote service. So if you need to use additional configuration options pass an object with the desired options:
dataSource: {
serverFiltering: true,
transport: {
read:{
url: "/ComboBox/LocationsRead",
data: filterLocations
}
}
}function filterLocations() {
return {
locationFilter: $('[name="Input_LocationId"]').data("kendoComboBox").input.val()
};
}Regards,
Aleksandar
Progress Telerik
Rank 2
Iron
Iron
Iron
Appreciate the help with the transport syntax. I did have to change the selector to
locationFilter: $('[name="LocationId_input"]').val()