Hey all I am very new to Kendo UI but am trying to remake the layout of my companies listbox over to treeview so that I will be able to categorize the items coming in from the api call.
The current code is this:
01.@(Html.Kendo().ListBox()02. .Name("lbAvailableSocialMediaSources")03. .Toolbar(tb =>04. {05. tb.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);06. tb.Tools(tools => tools07. .TransferTo()08. .TransferFrom()09. .TransferAllTo()10. .TransferAllFrom());11. })12. .ConnectWith("Sources")13. .HtmlAttributes(new {style="width:44%"})14. .Draggable(true)15. .DropSources("Sources")16. .DataSource(ds => ds.Read(r => r.Url("/api/sources" + (!string.IsNullOrWhiteSpace(Model.Providers) ? "?providerId="+ Model.Providers :"")).Type(HttpVerbs.Get)))17. .DataTextField("Name")18. .DataValueField("Id")19. .Events(e=>e.DataBound("sourcesViewModel.dataBound").Add("sourcesViewModel.add")))20. @(Html.Kendo().ListBox()21. .Name("Sources")22. .HtmlAttributes(new { style = "width:44%" })23. .DataTextField("Name")24. .DataValueField("Id")25. .Draggable(true)26. .DropSources("lbAvailableSocialMediaSources")27. .BindTo(new List<SocialMediaSource>())28. .Selectable(ListBoxSelectable.Multiple))The above produces the attached image screenshot.95.png.
All that works just fine. I am able to drag over any item and also use the buttons to do the same.
Now here is the problem and where I am currently stuck at not knowing how to go about doing it.
I am wanting to use the treeview with checkboxes so that i am able to put items that are currenbtly in the list into items under their category name.
The api json looks like this:
{ "meta": { "total_results": 193, "offset": 0, "total_pages": 1 }, "object_list": [{ "name": "GitHubCommits", "cat":"Git Hub", "guid": "6b69875a84017a3704dec1b3843f761a41c8044d654bf3f0450ddb56fa3ff9fa", "sub_types": [{ "name": "Keyword", "key": "keyword" } ] }, { "name": "GitLab", "cat":"Git Hub" "guid": "1ff8683f7579baa702fafiuiurehgyu87t5ius3tiiud2de6e17cc1bea3e8e0db647b9c9", "sub_types": [{ "name": "Keyword", "key": "keyword" } ] }, { "name": "facebook", "cat":"Social Media" "guid": "1ff8683f7579baa702faf987654fho865fks3tiiud2de6e17cc1bea3e8e0db647b9c9", "sub_types": [{ "name": "Keyword", "key": "keyword" } ] }, { ....ETC....
Taken the json above I am having a hard time trying to produce a treeview with that kind of data structure. Most all the examples I've seen for the treeview have all been static adding it to the treeview or dynamic with a structure that I am not able to put my json data into:root.Add().Text("Kendo UI Project").Id("2") .Expanded(true) .SpriteCssClasses("folder") .Items(project =>{ project.Add().Text("about.html").Id("3").SpriteCssClasses("html"); project.Add().Text("index.html").Id("4").SpriteCssClasses("html"); project.Add().Text("logo.png").Id("5").SpriteCssClasses("image");});root.Add().Text("New Web Site").Id("6") .Expanded(true) .SpriteCssClasses("folder") .Items(item => { item.Add().Text("mockup.jpg").Id("7").SpriteCssClasses("image"); item.Add().Text("Research.pdf").Id("8").SpriteCssClasses("pdf"); }); ...ETC...
and also
@(Html.Kendo().TreeView().Name("treeview-telerik").TemplateId("treeview").Checkboxes(true).DragAndDrop(true).Items(treeview =>{ treeview.Add().Text("My Documents") .Expanded(true) .Items(root => { root.Add().Text("New Web Site") .Expanded(true) .Items(images => { images.Add().Text("mockup.pdf"); images.Add().Text("Research.pdf"); }); ..ETC..I don't know how you would go about looping it this way using my json data:
treeview.add().Text("Categories")
.Expanded(True)
.Items( root.add().Text("Git Hub")=> { images.Add().Text("GitHubCommits"); images.Add().Text("GitLab"); });
root.add().Text("Social Networks")=> {
images.Add().Text("facebook");
});
...ETC...What I am looking to accomplish is seen here https://demos.telerik.com/aspnet-mvc/treeview/checkboxes but again, I do not know how to go about making the needed structure with the json I have to work with so that it knows what data to pull.
My attempt at the treeview code has not gone so well. Just producing undefined for all 192 items (image screenshot.96.png) when just trying to output the Name as it is in the listview..
So to recap, I am wanting to produce a treeview from my current json data so that I am able to categorize everything in a neater, more user friendly design/look.

Hi
I'm trying to set up group management in a grid.
In my case, I'm
grid.DataSource(dataSource => dataSource
.Custom()
.Type("aspnetmvc-ajax")
.Transport(t => t.Read(read => read.Action("ReadData", "Grid").Type(HttpVerbs.Post)))
.GroupPaging(true)
.Batch(false)
.AutoSync(true)
.PageSize(10)
.Schema(s => s.Data("Data").Total("Total").Model(model => ...))
.ServerFiltering(true)
.ServerGrouping(true)
.ServerPaging(true)
.ServerSorting(true)
I read the following thread which looks a bit like my problem:
https://www.telerik.com/forums/how-do-i-perform-server-side-grouping-and-aggregating
and the answer :
https://demos.telerik.com/aspnet-mvc/grid/customajaxbinding
I was inspired by this to make a POC.
In my grid/ReadData(request), I have something like that
DataSourceResult result = <get data>;
if (!request.Groups.Any()) return result; // No Group
// One group
return newDataSourceResult{
Data=new List<AggregateFunctionsGroup>{
new AggregateFunctionsGroup
{
Key = "Value", Member = request.Groups[0].Member, Items = result.Data
}},
Total=result.Total;
}
Of course, in my test, all rows have the value "Value" in the grouping column.
At runtime, the first time, without group, everything is OK : I have my first 10 records from the table (which has several thousand records)
I drag and drop the column in the grouping bar, and it's ok too : I have my accordion bar with the good column/value
But, when I open the accordion, I have an issue :
Uncaught TypeError: Cannot read property 'notFetched' of undefined
kendo.all.js:8374 if (lastItem.notFetched) {
I tried again by not returning the Items in AggregateFunctionsGroup
On open, I receive a readata with a filter corresponding to my column / value and I return my data
(the same as during the first execution because all my rows have the same value in the grouping column)
And I have the same issue.
At start, I was with Kendo 2021 R2. But as I saw that there was a fix on this subject, I preferred to install the latest version (R3),
but of course with the same result.
Can you tell me if I am returning bad Data (or Total ?), or if the bug (of R1) is still there?
Unless groups don't work with grid<dynamic>?
Maybe it is necessary to return all the records in the "Item", and not just the first 10? (in my case, several thousand)
Regards

Hi,
How can I achieve calling a custom javascript post call (jQuery) when a user enters the Enter key ? (actually independent of which field has the focus at that moment).
Just like with a classic button submit button, but instead calling a custom js function.
Martin

Hi,
I get a error message 'The field StartDate must be a date.' when I try to set the DatePicker dateformat, like this:
It seems something goes wrong by validating the date value, because of the format.
My code snippet:
items.Add()
.Field(propInfo.Name)
.Label(propInfo.Label)
.Editor(e =>
{
e.DatePicker().Format("dd-MM-yyyy");
});
How can I solve this easily, on the server side (preferably not jQuery / javascript fix).
Is there a way to detect when multiple files were uploaded(via upload dialog or drag/drop) vs when a single file is uploaded? We are trying to run different logic on the files depending on if it was multiple files or a single file that was uploaded.
Thanks,
-Carlos
Hi,
Im am working on a grid with some Integer data columns in it (like customer Id), including filtering in the top row of the grid (thus with.Filterable(ftb => ftb.Mode(GridFilterMode.Row)); )
By default, I see decimals in the filter textbox, like 16.00.
How can I remove those decimals (just plain int) ? So that I see just 16 instead of 16.00.
I tried a lot. Like setting format to "#", "N0", "n0", "0:N0", "0:n0", etc. Also a suggestion about a javascript function coupled. But nothing seems to work.
My code is now something like this:
columns.Bound(colInfo.Name)
.Title(colInfo.Title)
.Width(colInfo.PixelWidth)
.Format(colInfo.DataFormat)
;
best regards,
Martin

Hi,
How can I get a vertical scrollbar in the Form component ?
I mean, the form area excl. the buttons.
I'd prefer to achieve this without having to add a css style on the page, but instead achieve this with a simple piece of (serverside) code.
In html/css I can see the following structure
- html form
- div formlayout
- fieldset
- fieldset
I would like to have a vertical scrollbar on the div formlayout I guess. Buttons shouldnt scroll, but stay visible.
In my scenario I have only 1 column of fields, but should work for any amount of columns in layout.
Martin
Hi
I'm searching example to save data from Kendo grid in mode batch and Edit in GridEditMode.InCell
I need call a Controler MVC send data grid with other data for example textarea without grid and other information.
I only find examples save with grid events.
Thanks
Rose
Hi.
I need display content in a ClientTemplate with contain two DropDownList and one input.
columns.Bound(m => m.ComposicioMix).ClientTemplate("#= prueba(ComposicioMix)#").EditorTemplateName("ComposicioMix").Width(300).Title("Composició/Mix");
In EditorTemplateName i've build the next Template ComposicioMix and this model
public class ComposicioMix_VM
{
//datos de 2 desplegables y numerico del porcentaje
public PaisosListItem PaisMix { get; set; }
public AgenteListItem AgenteMix { get; set; }
public int Porcentaje { get; set; }
}
public class PaisosListItem
{
public int OBJECTID { get; set; }
public string Nom { get; set; }
}
public class AgenteListItem
{
public int OBJECTID { get; set; }
public string DESCRIPCIO { get; set; }
}
@model DGMAS.Data.ViewModels.FluxosREN.ComposicioMix_VM
<table>
<tr>
<td>
<label>Pais/Agent</label>
</td>
<td>
@(Html.Kendo().DropDownListFor(m => m.PaisMix.OBJECTID)
.Name("PAIS1")
.DataValueField("OBJECTID")
.DataTextField("Nom")
.BindTo((System.Collections.IEnumerable)ViewData["PAIS"])
)
</td>
<td>
@(Html.Kendo().DropDownListFor(m => m.AgenteMix.OBJECTID)
.Name("AGENTE1")
.DataValueField("OBJECTID")
.DataTextField("DESCRIPCIO")
.BindTo((System.Collections.IEnumerable)ViewData["AGENTE"])
)
</td>
<td>
<input id="porcentaje1" type="text" size="2" />
<span>%</span>
</td>
</tr>
<tr></tr>
</table>
I have a problem with ClientTemplate I can't display it
<script id="responsive-column-template-ComposicioMix" type="text/x-kendo-template">
<div class="responsiveGridCssAnchor">
<div class="titleRowMobile">Pais/Agent</div>
<p class="col-template-val textMobileCell">#= data.PaisMix.Nom #</p>
<p class="col-template-val textMobileCell">#= data.AgenteMix.DESCRIPCIO #</p>
<p class="col-template-val textMobileCell">#= data.Porcentaje #</p>
</div>
</script>
var prueba = kendo.template($("#responsive-column-template-ComposicioMix").html());
I need help to get contain to display in kendo-template
Regards,
Rose
Hi,
How can I get a textbox in the form fields with 0 decimals ?
There are always 2 decimals now.
Is teher a simple way to do it ? Preferably serverside.
Martin