My requirements are such that on initial load, the tree is empty and a user can do a search which would then load the results into the treeview. Once the view is loaded, the user will navigate the tree with the expand functions. It's possible that the user searches for a result that is at an arbitrary depth in the tree (not a top-level node) so I query all nodes from the root down to the search result. I need help figuring out how to set this hierarchy of nodes into the tree correctly. Currently, only the top-level node displays with no expander.
The object to be displayed in tree:
public class LocationModel { public string Id { get; set; } public string ParentId { get; set; } public string Name { get; set; } public List<LocationModel> Children { get; set; } = new List<LocationModel>(); public bool HasChildren => true; }
The controller:
public JsonResult GetLocationHierarchy(string locationId){ if (string.IsNullOrEmpty(locationId)) return new JsonResult(); //string id; var results = new List<LocationModel>(); using (var ctx = _docStore.OpenSession()) { // recursively step up the tree, adding each node to the list while (!string.IsNullOrWhiteSpace(locationId)) { var thisNode = (from l in ctx.Query<Location>() where l.Id.Equals(locationId) select new LocationModel { Id = l.Id, Name = l.FriendlyName, ParentId = l.ParentId }).SingleOrDefault(); if (thisNode != null) { results.Add(thisNode); locationId = thisNode.ParentId; } else locationId = string.Empty; } } // set the children on the nodes foreach (var node in results) node.Children = results.Where(x => x.ParentId == node.Id).ToList(); //return only the top level node (hierachy is in place) return Json(results.Where(x=> x.ParentId == string.Empty).ToList(), JsonRequestBehavior.AllowGet);
The tree view:
<div id="treeview"> <div class="demo-section k-content"> @(Html.Kendo().TreeView() .Name("treeView") .LoadOnDemand(true) .DataTextField("Name") .Events(events => events .Select("onSelect") .Expand("onExpand") ) .DataSource(dataSource => dataSource .Model(m => { m.Id("Id"); m.Field("Name", typeof(string)); m.Children("Children"); m.HasChildren("HasChildren"); }) .Read(read => read .Action("GetLocationChildren", "Home", new { locationId = Model.SelectedLocation.Id }) ) ) ) </div> </div>
The search button method:
function onSearchButtonClick(e) { if ($("#SelectedLocation_Name").val() == "") { console.log("No SelectedLocation Name"); return; } var u = '@Url.Action("GetLocationHierarchy")'; $.post(u, { locationId: $("#SelectedLocation_Id").val() }, function (data) { console.log("onSearchButtonClick returned..."); var treeView = $("#treeView").data("kendoTreeView"); if (treeView == null) { console.log("treeView is null!"); return; } console.log(e); treeView.setDataSource(data); }); }
Is it possible to limits the columns in a list view? Or is that done purely with css height and width?
Thanks
I have developed a tri-state checkbox (supports indeterminate) and was wondering if there is any community interest in this functionality, help to improve the implementation, or support to have it incorporated into the UI.
Hi
I am using the @Html.Kendo.DropDownList in a MVC application (.NET Core). The code works perfectly. I have a weird request though. I get my data from a backend system which cannot filter any fields that are less than 1001 entries long (long story but unfortunately true) - so this is what happens: the page loads and then calls source.read to get the first 1001 entries - this works perfectly each time. If the user then does as typeahead search in a field that is < 1001 entries the search does not work i.e. the DB returns all the entries again. If there are more that 1001 entries all is well. My question is this: is there a way for me to change the
.ServerFiltering(true);
to
.ServerFiltering(false);
at runtime?
My idea is that once the initial data has been loaded I check how many entries have been received and then set the .ServerFiltering flag appropriately.
Alternatively I could load all the dropdown first (before showing the page) and then have an if statement on the .cshtml file => this would/has worked but it experience is worse for the users - using ServerFiltering (true) loads the page and the users see the spinning blue thingy and know that data is being loaded (I can have up to 100 dropdown on the page (the users decide how many per page themselves)), otherwise, once they have pressed open they need to wait while the dropdown are being loaded.
Thank you in advance for any help given.
Ursus
@(Html.Kendo().DropDownList()
.Name(kendoFieldName)
.MinLength(3)
.Value(Model.Fields[i].Values[j])
.HtmlAttributes(new {style = "width: 100%"})
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("TypeAhead", "Document", new
{
docId = Model.DocId,
docType = Model.DocType,
fieldNumber = Model.Fields[i].FieldIndex,
row = j
});
})
.ServerFiltering(true);
})
)
I'm having an issue styling a custom editor template.
I want to resize the button bar section at the bottom of the view, so that it better fits / aligns with the rest of the view controls. All of my attempts to do so thus far have resulted in various issues with the layout of the other controls.
I've read through the documentation, but haven't been able to find a solution.
The view is fairly simple, and I'm using an internal style section until I get the design firmed up.
I've attached a copy of the custom Donor view, as well as a screen shot.
Any feedback/advice would be greatly appreciated.
I've just started a project using the R3 2019 version of Kendo UI for MVC, with the bootstrap v4 theme.
I've got a grid inside a bootstrap card, but setting the font style on the div that contains the grid, doesn't affect the grid font-size, where it has using past framework version using the original bootstrap theme.
What's the easiest way to reduce a specific grids font size on a page?
Thanks
I alert taking "Cannot read property 'uid' of undefined" when Cancel Button click. I am using .Editable(editable => editable.Mode(GridEditMode.PopUp).
This error's detailed exist images belows
I waiting your reply/solve short time,
thanks telerik group.

So I've made a hundred Kendo Grids with MVC so far and I have zero success with globalization and validation. To give a little bit more details: If we look at the demo presented here https://demos.telerik.com/aspnet-core/grid/globalization and the "Unit Price" column. You can clearly enter only numerics with only 1 delimiter depending on the culture. If you try to enter any non-numerical letter, it doesn't let you. Neither does it let you insert more than 1 delimiter (",,,,,,") or the wrong delimiter. So there's some kind of "on the fly validation" going on.
My grids don't have this. For example I have decimal columns and I can enter all letters, even non-numerics. I can type "03,,.awd923..." in a decimal column within the grid. What I have tho is culture. I think the culture I have set up works properly because when I check the kendo.cultures within JS console I can see all the info of the current culture (check image in attachments for more info).
Here's an example of one of my grids:
@(Html.Kendo().Grid<PromoComboItemGridModel>() .Name("ItemGrid") .AutoBind(false) .Pageable(pager => pager.Refresh(false)) .Filterable(filterable => filterable.Enabled(true)) .Sortable(sortable => sortable.Enabled(true)) .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple)) .AllowCopy(true) .Scrollable(a => a.Height("auto")) .Resizable(resize => resize.Columns(true)) .Navigatable() .NoRecords(t.GetString("No records in table")) .Mobile(MobileMode.Auto) .Editable(editable => editable.Mode(GridEditMode.InCell).Enabled(true).DisplayDeleteConfirmation(false)) .Events(events => events.Edit("onEdit")) .ToolBar(toolbar => { toolbar.Template(@<text><span id="addItem" onclick="addItem('ItemGrid')"style='float:left' class='btn btn-xs btn-default'> <span class='k-icon k-add'></span>@t.GetString("Add new item") </span></text>); } ) .Columns(columns => { columns.Bound(p => p.No); columns.ForeignKey(p => p.Type, (System.Collections.IEnumerable)ViewData["FItemTypeEnum"], "IDForSysClient", "Name").EditorTemplateName("FItemTypeEnumDropDown"); columns.Bound(c => c.Val).Visible(false); columns.Bound(c => c.MaterialString).Title(t.GetString("Value")).Width(200); columns.Bound(c => c.Quantity); columns.ForeignKey(p => p.RewardType, (System.Collections.IEnumerable)ViewData["GPriceTypeEnum"], "IDForSysClient", "Name").EditorTemplateName("GPriceTypeEnumDropDown"); columns.Bound(c => c.RewardVal); columns.Command(commands => { commands.Destroy().Text(t.GetString("Delete")).HtmlAttributes(new { @class = "btn btn-xs btn-danger" }); }).Title(t.GetString("Commands")).Width(110); }) .DataSource(dataSource => dataSource.Ajax() .ServerOperation(false) .Batch(false) .PageSize(3) .Model(model => { model.Id(gridMainAlias => gridMainAlias.No); model.Field(gridMainAlias => gridMainAlias.No).Editable(false); model.Field(gridMainAlias => gridMainAlias.Type); model.Field(gridMainAlias => gridMainAlias.Val); }) .Events(events => { events.Change("ItemGridChange"); }) ))I am having some problems with the Kendo Window and getting the content of the window being read by a screen reader (testing on NVDA).
The contents of the window is from a partial view and the window is created via jquery. The code is:
<div id="TopNavKendoWindow" style='display:none'></div>
$("#TopNavKendoWindow").kendoWindow();var testWindow = $("#TopNavKendoWindow").data("kendoWindow");testWindow.setOptions({ content: {url:'@Url.Action("ReportIssue", "Support", new { area = "Hub" })'}, title: 'Window Title Here', height: '300px', width: '300px'});testWindow.center().refresh().open();
When testing with a screenreader, the reader will read out the title of the window but not the content of it.
If I change the div to have the content in it and not pass through the 'content' to setOptions, then the screenreader will readout the title and the content successfully.
<div id="TopNavKendoWindow" style='display:none'>this is a test</div>
$("#TopNavKendoWindow").kendoWindow();var testWindow = $("#TopNavKendoWindow").data("kendoWindow");testWindow.setOptions({ title: 'Window Title Here', height: '300px', width: '300px'});testWindow.center().refresh().open();
Is anyone able to help me so that I can use the content url of setOptions and get the screenreader to read out the dynamic content?
Thanks
