I'm trying to get a Kendo UI combo box to load data from the server as I type. #Client is an Input box. I need the id of the item in the textbox saved, which is why I am using a combo box instead of autocomplete. When I type into the combo box it always sends the string that is 1 keypress behind the data in the input box. I assume this happens because the "shadowed" Kendo UI input box doesn't update the original input box until after the call to the server is already made.
Also, If I don't use the parameterMap code, nothing that is typed in the input box is sent to the server. And, I would expect that the filter condition would be sent too. I have looked at the examples on Telriks site and they show to use the filters from the request parameters to see the data, but when I use fiddler or any other tracing tool, I can see that nothing is sent in the request that has anything to do with the data from the Kendo UI server call. This should be a relativity easy thing to do, but I'm stumped.
EDIT: I changed it to a kendoAutoComplete and everything works as I would expect an AutoComplete to work. It shouldn't be any different than the ComboBox for implementation other than the return for the dataValueField.
$("#Client").kendoComboBox({
dataTextField: "label",
displayValueField: "id",
suggest: true,
autoBind: false,
minLength: 1,
highlightFirst: true,
filter: "contains",
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: { url: "/search/client", dataType: "json", type: "POST" },
parameterMap: function (data) {
return { search: $("#Client").val() }
}
}
})
});
$("#Client").kendoComboBox({
dataTextField: "label",
displayValueField: "id",
suggest: true,
autoBind: false,
minLength: 1,
highlightFirst: true,
filter: "contains",
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: "/search/client",
dataType: "json",
type: "GET",
data: function () {
return { search: $("#Client").val() }
}
}
}
})
});
Related
I've been working on this for days and finally have a partially working solution, but it doesnt feel quite right. In fact, i'm not sure any of this is right.
My problem is three fold:
generating the filter value in the read function doesnt seem right. I feel like i should be able to bind the multiselects text value or something and use that in the function,
the filter stops processing if i keep typing characters beyond the minLength setting. If i type "cha" the ds fetches "Charles" and "Chad". But if i continue typing and enter "chad", the filter still shows "Charles".
names already selected in the "value" property continue to display in subsequent searches. So if i select "Charles", then i select "Tim", then i type "cha", "Charles" will show up on the list again. But because he's already selected he should not appear on the list.
I'm using the kendo-knockout js, here's what i have so far:
<select data-bind="kendoMultiSelect: { dataSource: ds, autoBind: false, change:'filterTypeOnChanged', search: relatesSearch, minLength: 3, filter:'contains', value: selectedPersons, dataTextField:'PersonName'}"></select>
And here's the datasource (ds) that i'm binding to. (it's in typescript, so hopefully that wont hang anybody up).
ds = new kendo.data.DataSource({
serverFiltering: true
, type: 'json'
, transport: {
read: (options) => {
var srch: string;
debugger;
if (options.data[0] != undefined)
srch = options.data[0].value;
else
srch = options.data.filter.filters[0].value;
jQuery.ajax({
url: "/Person/GetPersons",
cache: false,
dataType: "json",
async: true,
data: JSON.stringify({ textToBeSearched: srch }),
type: "POST",
contentType: 'application/json, charset=utf-8',
processData: false,
success: result => {
options.success(result.data);
},
error: function (e) {
debugger;
console.log(e);
}
});
}
}
});
I'm trying to understand how Kendo UI grid works. This the example for the Kendo website.
Somewhere one can find this configuration lines:
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
And this is the line that fetch the data
transport: {
read: "http://demos.telerik.com/kendo- ui/service/Northwind.svc/Orders"
},
I wonder whether the above parameters are being sent to the server, i.e. a server side method should like this?
public list<type> MyServerSideMethod(inr pageSize, bool serverPaging,
bool serverFiltering, boll serverSorting)
{
}
In fact, I've applied the configuration, but the pager on my grid is still not working. That why I'm wondering whether the method in the server is expecting those values.
Thank for helping
Define your read as a function and manipulate the parameters send to server
transport: {
read: function (options) {
console.log(JSON.stringify(options)); // You can see what parameters send : check your console on paging
var commandOBJ=[{
Page: 1, // Once the first 20 item is loaded and you click for the next page you will have the page in "options" (should be like options.page)
PageSize:20
}];
$.ajax({
url:"http://demos.telerik.com/kendo- ui/service/Northwind.svc/Orders",
data: { }, // send your page info here
dataType: "json", // your data return type
cache: false,
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
}
}
I am having a small issue that I just can't seem to figure out. I am trying to make a simple SharePoint 2013 demo app that gets a few fields from a list on the parent site and binds to a kendo grid.
Due to the new nature of SP2013, app's get created in their own local site which makes these calls cross domain. When I make the call, no data is pulled back. When I compare a working call vs the call being made by the app, I can see that a cookie is not present in the call that is failing (which is why no data is being pulled back). If anyone could offer any hints or suggestions on things to try, I would appreciate it.
The List I am trying to call is called KendoGridList and I am trying to pull back the first and last name and bind to the grid. Below is my code:
EDIT: After looking into the code a little deeper, it looks like a cookie is not getting passed in the call to the service. If I take the cookie from a normal rest call to the service which works and add it to the composer in fiddler the call goes through and returns data.
$(document).ready(function () {
$("#grid").empty();
var siteUrl = "site url placed here";
var url = siteUrl + "/_vti_bin/Listdata.svc/KendoGridList/?$select=FirstName,LastName";
grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: url,
dataType: "json",
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json;odata=verbose");
}
}
},
schema: {
type: "json",
model: {
fields: {
FirstName: "FirstName",
LastName: "LastName"
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
change: function (e) { // data load completed for grid
},
},
filterable: false,
sortable: true,
pageable: true,
scrollable: false,
//groupable: true,
columns: [{
field: "FirstName",
title: "First Name",
width: 50
}, {
field: "LastName",
title: "Last Name",
width: 50
}
]
});
});
I've also tried using:
read: {
url: url,
type: "GET",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
},
If you are using a provider-hosted app you should try using the SP cross-domain library. I think your best bet is to retrieve the data using the library and then bind the resulting info to the grid.
http://blogs.msdn.com/b/officeapps/archive/2012/11/29/solving-cross-domain-problems-in-apps-for-sharepoint.aspx
Environment:
kendo version: 2013.1.319
dataSource:
productsDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "http://www.mydomain.com/odata.svc/products",
dataType: "json",
contentType: "application/json"
}
schema: {
type: "json",
data: function(data){
return data.value;
},
total: function(data){
return data['odata.count'];
},
model: product
},
pageSize: 50,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
Get data:
productsDataSource.filter([{ field: "Id", operator: "eq", value: 5 }]); //this will send an httprequest
productsDataSource.fetch(function (e) {
tempDataStorage = e.items;
//more logic to dealing with the data;
});
problems:
need to use the fetch method of the dataSource for data processing(widgets initialization, data binding...etc);
avoid sending two httprequests when setting filters before fetch;
the filter condition need to be changed at runtime.
productsDataSource._filter = { logic: 'and', filters: [
{ field: "Id", operator: "eq", value: 5 }]};
I've found this to work. Set the internal property to a full filter object. You can then call fetch afterwards. I've not yet found a way to change the page size without triggering a fetch however.
You can user filter in the DataSource configuration. This should issue only one request with the filtering conditions that you specify in the DataSource configuration.
Set the _filter field in the dataSource using productsDataSource._filter = [{ field: "Id", operator: "eq", value: 5 }]; and then manually initiate the request for remote data when you are ready using productsDataSource.read();
Even though it is an old question, it comes in google results. So even though I don't know if it is valid for kendo version: 2013.1.319, but there is currently a method
dataSource.query({
sort: { field: "ProductName", dir: "desc" },
page: 3,
pageSize: 20
});
This can set multiple options like sort, filter paging etc in a single call and returns a promise.
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-query
Bind event listener to datasource which initializes widget and then use filter method.
datasource.one('requestEnd', function(){
// initialize or/and bind widget
});
datasource.filter({ /*your filter*/ })
So I have a really strange problem with the kendo web combobox with odata with serverFiltering: true
If I use it on a localhost server, it requests odata format and works great. Doesn't matter if it's pointing to an external server for the data (using CORS) or not. Either way it works great and gets data back the way it's supposed to etc.
However, as soon as I put it on a public domain, using the same browser it fails. And it fails in a most bizzare way:
It stops passing the $filter property. AND it stops calling the scheme.data function to parse the result properly (it successfully calls and gets ALL of the resultset because of no filter).
Further, it doesn't apply the results to the drop down, so it stays empty.
Absolutely no javascript errors are thrown. Putting breakpoints on the function for schema.data results in it never getting hit in IE or chrome. Same goes for change event and error events. Nothing.
Here's the data source:
dsContacts = new kendo.data.DataSource({
type: "odata",
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 20,
transport: {
read: {
url: User.serviceUrl + "/contact/list"
}
},
schema: {
data: function (data) {
if(dsLinks.selectedItem().LinkedToContactID() && dsLinks.selectedItem().LinkedToContact()) {
data.results.push({
ID: dsLinks.selectedItem().LinkedToContactID(),
Name: dsLinks.selectedItem().LinkedToContact()
});
}
return data.results;
}
},
error: function (e) {
tradepointUtilities.ShowErrorAlert("Contact List Get", e);
}
});
And the combo is defined as:
$("#cbo").kendoComboBox({
dataTextField: "ID",
dataValueField: "Name",
suggest: true,
datasource: dsContacts,
filter: "contains",
autoBind: false,
delay: 300,
minLength: 3
});
Again, works perfectly on localhost, fails in all browsers exactly the same way in production without any errors.
Ideas?