Telerik Forums
UI for ASP.NET Core Forum
1 answer
12 views

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.

Stoyan
Telerik team
 answered on 28 Feb 2024
1 answer
35 views
I want the tree list to only expand the first entry on page load.  But it seams like m.Expanded only works with true / false (expand all or none)

Doing an expression doesn't seem to work.
EG
m.Expanded(f => f.ParentNodeNumber == null ? true : false);

None working code,  when the page loads none of the items are expanded
    @(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>

It loads like this:


if I click to expand,  the console log shows that ParentNodeNumber is null....


So how do I get it to expand the first item?

Alexander
Telerik team
 answered on 18 Oct 2023
1 answer
92 views

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:

  1. {Data: [{ObjectId: 1, ObjectName: "Object Name 1", ParentId: 0, ParentName: "Parent Name 0"},…],…}
    1. AggregateResults: {}
    2. Data: [{ObjectId: 1, ObjectName: "Object Name 1", ParentId: 0, ParentName: "Parent Name 0"},…]
      1. 0: {ObjectId: 1, ObjectName: "Object Name 1", ParentId: 0, ParentName: "Parent Name 0"}
      2. 1: {ObjectId: 2, ObjectName: "Object Name 2", ParentId: 1, ParentName: "Parent Name 1"}
      3. 2: {ObjectId: 3, ObjectName: "Object Name 3", ParentId: 2, ParentName: "Parent Name 2"}
      4. 3: {ObjectId: 4, ObjectName: "Object Name 4", ParentId: 3, ParentName: "Parent Name 3"}
      5. 4: {ObjectId: 5, ObjectName: "Object Name 5", ParentId: 4, ParentName: "Parent Name 4"}
      6. 5: {ObjectId: 6, ObjectName: "Object Name 6", ParentId: 5, ParentName: "Parent Name 5"}
      7. 6: {ObjectId: 7, ObjectName: "Object Name 7", ParentId: 6, ParentName: "Parent Name 6"}
      8. 7: {ObjectId: 8, ObjectName: "Object Name 8", ParentId: 7, ParentName: "Parent Name 7"}
      9. 8: {ObjectId: 9, ObjectName: "Object Name 9", ParentId: 8, ParentName: "Parent Name 8"}
      10. 9: {ObjectId: 10, ObjectName: "Object Name 10", ParentId: 9, ParentName: "Parent Name 9"}
    3. Errors: null
    4. Total: 10

 

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 ?

 

 

Mihaela
Telerik team
 answered on 12 May 2023
1 answer
183 views

Hi

After installing Telerik nuget package, my application stopped working.
I added lines to the csproj

<PackageReference Include="Microsoft.CodeAnalysis.CSharp.Workspaces" Version="4.5.0" />

<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 ?

 

Mihaela
Telerik team
 answered on 26 Apr 2023
1 answer
52 views

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

Alexander
Telerik team
 answered on 02 Dec 2022
1 answer
50 views

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

Stoyan
Telerik team
 updated answer on 19 Sep 2022
1 answer
74 views

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);

Tsvetomir
Telerik team
 answered on 04 May 2022
1 answer
226 views
I am using .NET Core and implementing a treelist with a custom row template.  Therefore, I have to use popup editing.  The window that pops up looks terrible and it contains many fields that I do NOT want to show.  How can I customize the window to use dropdowns, comboboxes etc and only display the fields that I want to edit?
Mihaela
Telerik team
 answered on 25 Mar 2022
1 answer
213 views

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:

Aleksandar
Telerik team
 answered on 18 Feb 2022
5 answers
681 views
I'm using the MVC extensions to setup my Tree List

@(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))

... and using Chrome Dev Tools > Network, I see the following data in the AJAX method SiteMapTree, but the Tree List says "No records to display":

{"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}

... and I am using ToTreeDataSourceResult() in the AJAX method to format the data (and ParentId of 1000 is the root of the tree).

What am I doing incorrectly?

FYI: I have set the AutoBind of the TreeList to false because I am calling dataSource.read(); when a dropdownlist item is selected. The Tree List has no context until the dropdown is selected.

Thanks,
--John
Vi
Top achievements
Rank 1
Iron
 answered on 17 Feb 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Bronze
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Bronze
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?