Dojo demonstrating the issue: https://dojo.telerik.com/@ian+telerik@ocucom.com/EBeDE
When using a HierarchicalDataSource bound to a viewModel, using any method to insert a new row in a child datasource results in a duplicate top-level item in the bound HTML view, until the "change" event is manually triggered on the parent.
My goal is putting together a hierarchical product editor (for, say, departments and employees; some hierarchy where the children are of differing object types to the parent).

If I have a node in a HierarchicalDataSource, and I want to sync changes to it, I assume I should call
node.parentNode().children.sync()
When I call this, the resulting data packet contains, as its 'id' property, the id of the parentNode, not of the child.
This seems to be due to the fact that kendo.data.Node's _initChildren function indiscriminately applies the parent's identity to the request's data object.
Clearly, that makes no sense for update/delete actions, where some other property would make more sense, or the ability to include or not include the parent property.
Arguably, the entire path should be available, for situations where a node can exist in multiple places in the tree.
I suppose I could overcome this with the data: property being a function, but I think the basic assumption is mistaken.

Hi there,
I have a textbox where the user can enter multiple partnumbers (as comma separated) and the partnumber should have the autocomplete feature enabled for every selection. This was possible with the kendo autocomplete feature easily. But in my case, there were around 2 lakh partnumbers in the DB and so, the page was stuck up, when it tries to load the data. So, instead we wanted to only pull the top 20 matching partnumbers in the autocomplete functionality.
With this being said, we should be making Server Filtering instead of getting all the data in one shot. I did see multiple similar examples, but nothing was working in my case, as I was trying to fetch the data from the DB using stored procedure call. Below is my code.
$("#txtPartNumbers").kendoAutoComplete({
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: ApiBaseUrl.val + 'mycontroller/getParts',
type: "get",
dataType: "json",
data: { partNumber: 200, maxCount = 20}
}
}
},
filter: "startswith",
placeholder: "Select Inventory Parts..",
minLength: 3,
separator: ", "
});
partNumber (is the search text) and maxCount(20 in my case) are the parameters that I used to pass to the controller method and then to the stored procedure.
Appreciate your help on this.
Thanks!
Regards
Neelima
For those who're wondering how to catch KendoUI autocomplete filter on server side webapi2 controller without having to deal with filter.filters[0] query string prarameters.
This is how I've solved it:
JS:
$("#values").kendoAutoComplete({ minLength: 3, enforceMinLength: true, dataTextField: "value", dataValueField: "id", dataSource: { type: "json", severFiltering: true, serverPaging: true, transport: { read: "/api/values", parameterMap: function (data, type) { return { filter: $('#values').val() }; } } }, filtering: function (e) { if (!e.filter.value) { e.preventDefault(); } }});
The trick here is to use parameterMap to change request url.
WebApi2:
public class ValuesController : ApiController{ // GET api/values [HttpGet] [Route("api/values", Name = "r2", Order = 2)] public IEnumerable<ValueModel> Get() { //var filters = new AutoCompleteFilters(Request.GetQueryNameValuePairs()); return new List<ValueModel>() { new ValueModel() { id = 1, value = "item 1" }, new ValueModel() { id = 2, value = "item 2" }, new ValueModel() { id = 3, value = "item 3" }, }; } //GET api/values?filter=item //GET api/values/ite [HttpGet] [Route("api/values/{filter?}", Name = "r1", Order = 1)] public IEnumerable<ValueModel> Get(string filter) { return new List<ValueModel>() { new ValueModel() { id=1, value="item 1" }, new ValueModel() { id=2, value="item 2" }, new ValueModel() { id=3, value="item 3" }, }.Where(m => m.value.StartsWith(filter, StringComparison.CurrentCultureIgnoreCase)); }}The trick on WebApi2 is to use "named" Route attributes with optional {filter?} parameter
This solution allows either :
http://localhost:11989/api/values?filter=itemor
http://localhost:11989/api/values/iteWhat is cool in case your api is exposed to third-party applications.
Happy coding!

Hi,
I'm having an issue with a hierarchical grid using ASP.NET MVC5 where I can't seem to access the child grid data in any client templates.
My overall goal is to be able to put an aggregated max value in the ClientFooterTemplate of the first column.
Here's my cut down grid code:
01.@(Html.Kendo().Grid<XXViewModel>()02. .Name("XXGrid")03. .EnableCustomBinding(true)04. .AutoBind(true)05. .DataSource(ds => ds06. .Ajax()07. .Read(r => r.Action("XX_Read", "XX")08. .ServerOperation(true)09. )10. .Events(ev =>11. {12. ev.DetailExpand("detailExpand");13. ev.DetailCollapse("detailCollapse");14. })15. .Columns(c =>16. {17. c.Bound(m => m.XXId);18. c.Bound(m => m.FirstName);19. c.Bound(m => m.Surname);20. })21. .ClientDetailTemplateId("xx-detail-template")22.)23. 24.<script id="xx-detail-template" type="text/x-kendo-template">25. <div class="xx-detail-template">26. <div class="xx-detail-child-grid" style="width: 1140px">27. @(Html.Kendo().Grid<YYViewModel>()28. .Name("ChildGrid_#=XXId#")29. .Columns(c =>30. {31. c.Bound(m => m.Channel)32. .Title("Channel")33. .ClientFooterTemplate("Last refreshed: #=data.ImportedDate.max#")34. .Width(140);35. c.Bound(m => m.SentDate)36. .Title("Sent")37. .Format("{0:yyyy/MM/dd HH:mm}")38. .Width(140);39. })40. .DataSource(ds => ds41. .Ajax()42. .Read(r => r.Action("XXChild_Read", "XX", new {attendeeId = "#=XXId#"}))43. .Aggregates(a => a.Add(m => m.ImportedDate).Max())44. .Sort(s => s.Add(m => m.SentDate).Descending()))45. .ToClientTemplate()46. )47. </div>48. </div>49.</script>
A javascript error is being raised from line 33 of the above snippet: data.ImportedDate is undefined. Upon inspection I can see that data is referencing the datasource of the parent grid. How do I access the child grid's datasource in the client templates?


I have trouble with kendo chart's setOptions method, which randomly inject data into my chart's series data array.
I our app, we have a grid, on selecting a row in the grid, a chart is plotted below. However, we are finding the chart plotting random points where value should be null (see attached image). I find if I comment out calls to setOptions method, the problem disappears. Similarly, if I change kendo to an older version (2016.~) this problem goes away as well.

I am trying to use KendoDataSource with datatype webapi.
Create request post DataSourceRequest and viewmodel to server but datasource request property not bind, viewmodel data passed
I can normally move the DataSourceRequest and viewmodel like this to the ajax call with type: "aspnetmvc-ajax" but when type:"webapi" not bind request property bind
Thanks a lot.
<a href="https://ibb.co/j5FT5w" rel="nofollow noreferrer">SS</a>
var dataSourceExperiences = new kendo.data.DataSource({ type: "webapi", serverPaging: true, serverFiltering: true, serverSorting: true, page: 1, pageSize: 7, schema: { data: "Data", total: "Total", model: { id: "Id", fields: { CompanyName: { type: "string" }, Description: { type: "string" }, WorkTypeName: { type: "string" }, PositionHeldId: { type: "number" }, PositionHeldName: { type: "string" }, WorkTypeId: { type: "number" }, StartDate: { type: "date" }, EndDate: { type: "date" }, Explanation: { type: "string" }, CountryId: { type: "number" }, CountryName: { type: "string" }, CityId: { type: "number" }, CityName: { type: "string" }, EmployeeId: { type: "number" }, } } }, transport: { read: { url: baseApiUrl + 'api/Experience/ReadExperience', type: "GET", beforeSend: function (req) { req.setRequestHeader("Authorization", "Bearer " + '@Model'); }, }, create: { url: baseApiUrl + "api/Experience/CreateExperience", type: "GET", beforeSend: function (req) { req.setRequestHeader("Authorization", "Bearer " + '@Model'); }, } }, }); var dataGrid = $("#dataGrid").kendoGrid({ dataSource: dataSourceExperiences, autoBind: false, sortable: true, scrollable: true, columns: [ { field: "PositionHeldName", title:"PositionHeldName", filterable: true }, { field: "CompanyName", title: "CompanyName" }, { field: "WorkTypeName", title: "WorkTypeName" }, { field: "CountryName", title: "CountryName" }, { field: "CityName", title: "CityName" }, ], selectable: "row" }).data("kendoGrid");
I am adding a click function to a column containing a button like so
.Columns(columns =>
{
columns.Command(command =>
{
command.Custom("customedit").Click("openScanLines").Text("").HtmlAttributes(new { title = "View Scan Details"});
}).Width(75);
})
We have an option to save the grid options to be loaded a later point. So we use $("MyGrid").data("kendoGrid").getOptions() to get the options on the grid, Stringify it, and save it to a database Then we pull that JSON string from the database and use $("MyGrid").data("kendoGrid").setOptions(options) to load them. The problem is the "Click" function is always missing from the $("MyGrid").data("kendoGrid").getOptions(), resulting in the Click function no longer working when the option are then set. What's the deal? How can I retain the click function for these columns?
