Hi,
[BUG REPORT]
After updating to 2024 Q1 TreeList Component expand arrow button stopped working in BatchEdit InCell mode.
Try to expand and the cell goes to edit mode and not expanding .
you can see in your Live Demo.
Thanks.
@(Html.Kendo().TreeList<MyModel>()
.Name("GridBuildInfo")
.Toolbar(toolbar =>
{
toolbar.Search();
})
.Columns(columns =>
{
columns.Add().Selectable(true).Width("35px");
columns.Add().Field(p => p.ComponentItemId).Title("Item Id").Width(300);
columns.Add().Field(p => p.ComponentItemDescriptionFriendly).Title("Item Description");
columns.Add().Field(p => p.ComponentSerialNumber).Title("Serial #");
})
.Resizable(true)
.Height(540)
.Filterable()
.DataSource(dataSource => dataSource
.ServerOperation(false)
.Sort(s => s.Add(a => a.HasFieldServiceableChildItems).Descending())
.Read(read => read.Url("/GetData/TestTree"))
.Model(m =>
{
m.Id(f => f.NodeNumber);
m.ParentId(f => f.ParentNodeNumber);
m.Field(f => f.HasChildItems);
//want to expand only the first row.
m.Expanded(f => f.ParentNodeNumber == null ? true : false);
})
).Events(events =>
{
events.Expand("onExpand");
})
)
<script>
function onExpand(arg) {
console.log(arg);
}
</script>
Hi Telerik Team
I’m using ASP.NET CORE (.NET7) with
Telerik.UI.for.AspNet.Core Version="2023.1.425"
I'm trying to use TreeView and it always displays text: No records to display
My Code:
I configured json options
--- Program.cs --------------------------------------------------------------------------------------------
builder.Services.AddControllersWithViews()
.AddJsonOptions(options => {
options.JsonSerializerOptions.PropertyNamingPolicy = null;
});
----- Controller -------------------------------------------------------------------------------------------
public JsonResult GetTestTreeViewData([DataSourceRequest] DataSourceRequest request)
{
var result = GetDirectory().ToTreeDataSourceResult(request,
e => e.ObjectId,
e => e.ParentId,
e => e
);
return Json(result);
}
private IEnumerable<TreeViewTest> GetDirectory()
{
return Enumerable.Range(start: 1, count: 10).Select(i => new TreeViewTest
{
ObjectId = i,
ObjectName = "Object Name " + i,
ParentId = i - 1,
ParentName = "Parent Name " + (i - 1)
});
}
--- View -------------------------------------------------------------------------------------------
@using Kendo.Mvc.UI
@using MwTech.Domain.Entities;
@(Html.Kendo().TreeList<TreeViewTest>()
.Name("treelist")
.Columns(columns =>
{
columns.Add().Field(e => e.ObjectName).Width(200);
columns.Add().Field(e => e.ObjectId).Width(100);
columns.Add().Field(e => e.ParentName).Width(200);
columns.Add().Field(e => e.ParentId).Width(100);
})
.Filterable()
.Sortable()
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetTestTreeViewData", "Bom"))
.ServerOperation(false)
.Model(m =>
{
m.Id(f => f.ObjectId);
m.ParentId(f => f.ParentId);
m.Expanded(true);
m.Field(f => f.ObjectName);
m.Field(f => f.ParentName);
})
)
.Height(540)
)
In DevTools I can see json object:
but TreeView displays no data.
I ran a similar application in asp.net mvc
(the same view and the same controller)and it worked fine
Whatam I doing wrong ?
Hi
After installing Telerik nuget package, my application stopped working.
I added lines to the csproj
<PackageReference Include="Microsoft.CodeAnalysis.VisualBasic.Workspaces" Version="4.5.0" />
<PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2023.1.314" />
When I run my application, I get log file looks like that:
2023-04-21 14:49:05.5881 INFO DEVELOPMENT Mode
2023-04-21 14:49:05.7374 INFO User profile is available. Using 'C:\Users\mariuszw\AppData\Local\ASP.NET\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at rest.
2023-04-21 14:49:06.3588 INFO Now listening on: https://localhost:7040
2023-04-21 14:49:06.3588 INFO Now listening on: http://localhost:5041
2023-04-21 14:49:06.3588 INFO Application started. Press Ctrl+C to shut down.
2023-04-21 14:49:06.3588 INFO Hosting environment: Development
2023-04-21 14:49:06.3588 INFO Content root path: C:\vs\WebApp\ASP.NET_CORE_CQRS\MwTechCqrs\MwTech.UI
2023-04-21 14:49:07.7292 INFO Request starting HTTP/2 GET https://localhost:7040/ - -
2023-04-21 14:49:07.8831 INFO Request finished HTTP/2 GET https://localhost:7040/ - - - 404 0 - 148.1378ms
Did i do something wrong ?
Hi all,
is it possible so search a treelist and show not only the parents but also the children (subitems) of the items?
thanks
Sebastian
Hey all,
Using Telerik UI for ASP.NET Core, I've added a TreeList widget. I'm trying to get it to display a DropDownList for what amounts to, in "Grid-speak", a Foreign Key column.
The method I found somewhere in my searches appears to be "working", in that when I enter inline edit mode on the row, the column is showing as a DropDownList and is rendering correctly showing the DataTextField (as shown in the attached Edit.png), but when in display mode on the row, it is only showing the DataValueField (as shown in the attached Display.png).
How do I get the display mode on the row to show the DataTextField from the drop down for the column?
Widget code in /Pages/ProposalVersions/details.cshtml Razor page (removed fields irrelevant to the question for conciseness):
@(Html.Kendo().TreeList<ProposalVersionLineItem>()
.Name("proposalVersionLineItemTreeList")
.Columns(columns => {
columns.Add().Field(column => column.name).Width(200);
columns.Add().Field(column => column.ProductID).Template("#=ProductID#").Sortable(false).Width(100);
columns.Add().Width(300).Command(c =>
{
c.CreateChild().Text("Add child");
c.Edit();
c.Destroy();
});
})
.Editable(e => e.Move(move => move.Reorderable(true)))
.Filterable()
.Sortable()
.DataSource(ds => ds
.Read(r => r.Url("/ProposalVersions/Details?handler=ReadProposalVersionLineItemForTreeList").Data("forgeryToken"))
.Model(m =>
{
m.Id(f => f.ProposalVersionLineItemID);
m.ParentId(f => f.ParentProposalVersionLineItemID).Nullable(true);
m.Field(f => f.name);
m.Field(f => f.ProductID);
})
)
)
Editor Template at /Shared/EditorTemplates/ProductID.cshtml:
@(Html.Kendo().DropDownListFor(m => m) .DataValueField("ProductID") .DataTextField("name") .BindTo((System.Collections.IEnumerable)ViewData["products"]) )
Code Behind populating ViewData in /Pages/ProposalVersions/details.cshtml.cs:
ViewData["products"] = _context.Products .Select(s => new { s.ProductID, s.name });
From /Models/ProposalVersionLineItem.cs Class:
[Display(Name = "Product")] [UIHint("ProductID")] public int ProductID { get; set; }
I feel like this is working "as expected" as it is effectively rendering a custom Editor Template, but I can't figure out how to get it to render a custom "Display Template" for the field... any insight would be appreciated!
Thanks!
Nick
Instead of showing as much name as can fit into the field, my field shows an ellipsis. How can I get it to show as much as is possible instead of not even trying.
My template with an icon and the Text Name:
<script id="icon-template" type="text/x-kendo-template">
<div class='group-icon'
style='background-image: url(@Url.Content("#: ImageUrl #"));'></div>
<div class='group-name'
style='overflow: hidden; white-space: nowrap;'>#: Name #</div>
</script>
My column:
columns.Add().Field(e => e.Name).TemplateId("icon-template").Width(Glossary.Portal.ButtonWidthExtraWide);
Template code:
@(Html.Kendo().TreeList<EmployeeDirectoryModel>()
.Name("treelist")
.Toolbar(toolbar => toolbar.Create())
.Columns(columns =>
{
columns.Add().Field(e => e.FirstName).Title("First Name").Width(220);
columns.Add().Field(e => e.LastName).Title("Last Name").Width(200);
columns.Add().Field(e => e.Position);
columns.Add().Field(e => e.HireDate).Format("{0:MMMM d, yyyy}");
columns.Add().Width(350).Command(c =>
{
c.CreateChild().Text("Add child");
c.Edit();
c.Destroy();
})
.HtmlAttributes(new
{
style = "text-align: center;"
});
})
.Editable()
.DataSource(dataSource => dataSource
.Read(r => r.Url("/Employees/Index?handler=Read").Data("forgeryToken")) // Specify the url to the OnPostRead method.
.Update(u => u.Url("/Employees/Index?handler=Update").Data("forgeryToken"))
.Create(c => c.Url("/Employees/Index?handler=Create").Data("forgeryToken"))
.Destroy(d => d.Url("/Employees/Index?handler=Destroy").Data("forgeryToken"))
.Model(m =>
{
m.Id(f => f.EmployeeId); // Provide the Id property of the model.
m.ParentId(f => f.ReportsTo); // Provide the Child Id property of the model.
m.Expanded(false); // Set to true if you want the TreeList to be expanded by default.
m.Field(f => f.FirstName);
m.Field(f => f.LastName);
m.Field(f => f.ReportsTo);
m.Field(f => f.HireDate);
m.Field(f => f.Position);
})
)
.Height(540)
)
Headers request:
Response:
{
"data": [
{
"employeeId": 1,
"firstName": "Daryl",
"lastName": "Sweeney",
"reportsTo": null,
"position": "CEO",
"hasChildren": false,
"hireDate": "2022-02-19T14:02:27.590078+07:00"
},
{
"employeeId": 2,
"firstName": "Guy",
"lastName": "Wooten",
"reportsTo": 1,
"position": "Chief Technical Officer",
"hasChildren": false,
"hireDate": "2022-02-20T14:02:27.590084+07:00"
},
{
"employeeId": 3,
"firstName": "Buffy",
"lastName": "Weber",
"reportsTo": 2,
"position": "VP, Engineering",
"hasChildren": false,
"hireDate": "2022-02-21T14:02:27.5900853+07:00"
},
{
"employeeId": 4,
"firstName": "Hyacinth",
"lastName": "Hood",
"reportsTo": 3,
"position": "Team Lead",
"hasChildren": false,
"hireDate": "2022-02-22T14:02:27.5900856+07:00"
},
{
"employeeId": 5,
"firstName": "Akeem",
"lastName": "Carr",
"reportsTo": 4,
"position": "Junior Software Developer",
"hasChildren": false,
"hireDate": "2022-02-23T14:02:27.590086+07:00"
},
{
"employeeId": 6,
"firstName": "Rinah",
"lastName": "Simon",
"reportsTo": null,
"position": "Software Developer",
"hasChildren": false,
"hireDate": "2022-02-24T14:02:27.5900865+07:00"
},
{
"employeeId": 7,
"firstName": "Gage",
"lastName": "Daniels",
"reportsTo": 6,
"position": "Software Architect",
"hasChildren": false,
"hireDate": "2022-02-25T14:02:27.5900868+07:00"
},
{
"employeeId": 8,
"firstName": "Constance",
"lastName": "Vazquez",
"reportsTo": 6,
"position": "Director, Engineering",
"hasChildren": false,
"hireDate": "2022-02-26T14:02:27.5900871+07:00"
},
{
"employeeId": 9,
"firstName": "Darrel",
"lastName": "Solis",
"reportsTo": 8,
"position": "Team Lead",
"hasChildren": false,
"hireDate": "2022-02-27T14:02:27.5900874+07:00"
},
{
"employeeId": 10,
"firstName": "Brian",
"lastName": "Yang",
"reportsTo": 9,
"position": "Senior Software Developer",
"hasChildren": false,
"hireDate": "2022-02-28T14:02:27.5900878+07:00"
},
{
"employeeId": 11,
"firstName": "Lillian",
"lastName": "Bradshaw",
"reportsTo": 9,
"position": "Software Developer",
"hasChildren": false,
"hireDate": "2022-03-01T14:02:27.5900882+07:00"
}
],
"total": 11,
"aggregateResults": {},
"errors": null
}
UI result:
@(Html.Kendo().TreeList<SiteMapTreeModel>()
.Name(
"treelist"
)
.Columns(columns =>
{
columns.Add().Field(c => c.Title).Title(
"Title"
).Width(250);
columns.Add().Field(c => c.Url).Title(
"URL"
);
})
.DataSource(dataSource => dataSource
.Read(read => read.Action(
"SiteMapTree"
,
"HomeAjax"
).Data(
"getServiceAndLocale"
))
.Model(model =>
{
model.Id(m => m.Id);
model.ParentId(m => m.ParentId);
model.Field(m => m.Title);
model.Field(m => m.Url);
})
)
.AutoBind(
false
)
.Selectable(
true
)
.Deferred()
.Height(540))
{
"Data"
:[{
"Id"
:1602,
"ParentId"
:1000,
"Title"
:
"Dashboard"
,
"Url"
:
"~/Dashboard/Start"
,
"hasChildren"
:
true
},{
"Id"
:22,
"ParentId"
:1000,
"Title"
:
"Rules"
,
"Url"
:
"~/Rules/Start"
,
"hasChildren"
:
true
},{
"Id"
:1,
"ParentId"
:1000,
"Title"
:
"Administration"
,
"Url"
:
"~/Admin/Start"
,
"hasChildren"
:
true
}],
"AggregateResults"
:{},
"Errors"
:
null
}