Telerik Forums
UI for ASP.NET Core Forum
or
Ask question
All Questions
Unanswered
Answered
61 questions
1 answer
12 views
Drag and Drop from a Treeview to a Grid
I am trying to perform like this drag item from kendo Treelist to Drop in Kendo grid but not working in .net code using 
But when I doing drag from treelist to grid I am not event getitng debug 
Please help me asap if anyone has solution 
Razor page code:

<div style="height: 100%;">
    <!-- Parent Grid -->
    <div style="width: 60%; height: 100%; float: left;">
        <h2>{_ParentItem_}s</h2>
        @(Html.Kendo().TreeList<ParentChildModel>()
            .Name("ParentGrid")
            .Columns(columns =>
            {
                columns.Add().Field(p => p.Id).Width(80).Hidden(false);
                columns.Add().Field(p => p.ItemId).Width(80).Hidden(true);
                columns.Add().Field(c => c.Name).Title("Name").Width(140).Template("#= getIndentedName(Name, Id) #");
                columns.Add().Field(e => e.AssetCode).Title("{_AssetCode_}").Width(60);
                columns.Add().Field(e => e.Weight).Title("Weight").Format("{0:n3}").Width(40).Hidden(false);
                columns.Add().Field(e => e.Dimension).Title("Dimension").Width(100).Hidden(false);
                columns.Add().Command(c => 
                { 
                    c.Edit().Text("Edit").ClassName("k-grid-edit");
                    c.Destroy().Text("Delete").ClassName("k-grid-delete");
                }).Title("Actions").Width(80);
            })
            .Editable(editable => editable.Move(move => move.Reorderable(true)).Mode(TreeListEditMode.PopUp)
                .TemplateName("ParentPopupEditor"))
            .Toolbar(toolbar =>
            {
                toolbar.Create().Text("Add New {_ParentItem_}");
                toolbar.Custom().Template(
                    "<div>" +
                    "<input id='toolbarComboBox' style='width: 300px;' />" +
                    "</div>"
                );
                toolbar.Search();
            })
            .DataSource(dataSource => dataSource
                .Read(read => read.Action("GetParentAndChildItems", "ParentChild").Data("parentSearchData"))
                .Create(update => update.Action("AddNewRecord", "ParentChild").Type(HttpVerbs.Post))
                .Update(u => u.Action("UpdateRecord", "ParentChild").Type(HttpVerbs.Post))  //.Data("saveFormData"))
                .Destroy(update => update.Action("DeleteRecord", "ParentChild"))
                .ServerOperation(false)
                .PageSize(20)
                .Model(m =>
                {
                    m.Id(f => f.Id);
                    m.ParentId(f => f.ParentId);
                    m.Expanded(true);
                    m.Field(f => f.ItemId);
                    m.Field(f => f.AssetName);
                    m.Field(f => f.AssetCode);
                    m.Field(f => f.Weight);
                    m.Field(f => f.Dimension);
                })
            )
            .Pageable(x => x.PageSizes(new int[] { 20, 50, 100, 200, 500 }).Refresh(true).Input(true))
            .Sortable()
            .Selectable()
            .Events(e => e.DataBound("dataBound").Save("onEditorDataSave").DragEnd("onDragEnd"))//.DragStart("onDragStart").DragEnd("onDragEnd")
        )
    </div>

    <!-- Assignable Assets -->
    <div style="width: 40%; height: 100%; float: right;">
        <h2>Assignable {_Asset_}s</h2>
        @(Html.Kendo().Grid<ItemDto>()
            .Name("AssetGrid")
            .HtmlAttributes(new { style = "height:100%; width:100%;" })
            .Columns(columns =>
            {
                //columns.Template(@<text> </text>).Draggable(true).Width(30);
                columns.Template("").Draggable(true);
                columns.Bound(a => a.Id).Title("Id").Width(60).HtmlAttributes(new { @class = "idColStyle" });
                columns.Bound(a => a.Title).Title("{_AssetName_}").Width(150);
                columns.Bound(a => a.ItemTypeName).Title("{_AssetType_}").Width(100);
                columns.Bound(a => a.LocationName).Title("Destination {_Location_}").Width(110);
            })
            .ToolBar(toolbar =>
            {
                toolbar.Custom().ClientTemplate(Html.Kendo().Template().AddComponent(c => c
                    .TextBox().Name("toolbarTextBox")
                    .Placeholder("Filter by {_AssetName_}/{_AssetType_}...")
                    .HtmlAttributes(new { style = "float: right; width: 300px;" })
                    .Events(ev => ev.Change("toolbarTextBoxChanged"))
                ));
                toolbar.Search();
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .ServerOperation(false)
                .Model(m => m.Id("Id")) //Ensure that the Model identifier ("Id") is defined.
                .Read(read => read.Action("GetAssignableAssets", "ParentChild").Data("childrenSearchData"))
            )
            .Pageable()
            .Sortable()
            .Selectable()
            )
    </div>
</div>


JS Code:

$(document).ready(function () {
    var treeList = $("#ParentGrid").data("kendoTreeList");
    if (treeList) {
        treeList.dataSource.bind("requestEnd", function (e) {
            if (e.response) {
                if (e.type === "create") {
                    console.log("call requestEnd type: create");
                    treeList.dataSource.read(); // Refresh immediately
                } else if (e.type === "update") {
                    console.log("call requestEnd type: update");
                    setTimeout(function () {
                        treeList.dataSource.read(); // Refresh after 1 second
                    }, 200); // 1000 milliseconds = 1 second
                }
            }
        });
    }
});

function onDragEnd(e) {
    var draggedItem = e.source;         // The dragged item
    var newParent = e.destination;      // The new parent (if changed)
    var newOrder = e.position;  // The new order in the parent

    // Prepare data for backend
    var updateData = {
        sourceId: draggedItem.id,
        destId: newParent ? newParent.id : null,
        destParentId: newParent ? newParent.id : null,
        //sourceItemId = draggedItem.ItemId,
        //destItemId = newParent ? newParent.ItemId : null,
        order: newOrder
    };

    // Make an AJAX call to update the hierarchy/order in the backend
    $.ajax({
        url: "/ParentChild/Reorder", //"/ParentChild/Reorder",
        type: "POST",
        data: {           //{destId: updateData.destId, sourceId: updateData.sourceId, order: updateData.order},
            destId: e.destination.Id,
            sourceId: e.source.Id,
            destParentItemId: e.destination.ParentItemId,
            order: e.position
        },
        //contentType: "application/json",
        success: function () {
            // Optionally refresh the TreeList
            $("#ParentGrid").data("kendoTreeList").dataSource.read();
        },
        error: function () {
            $("#ParentGrid").data("kendoTreeList").dataSource.read();
            alert("Reorder failed (Can't make child asset as parent)");
        }
    });
    console.log("Drag operation ended!", e);
}

// Initialize ParentGrid rows as drop targets
window.initializeDropTargets = function () {
    var draggedItem = null;

    // Make Rows Draggable
    $("#AssetGrid").on("mousedown", "tr", function () {
        var grid = $("#AssetGrid").data("kendoGrid");
        var dataItem = grid.dataItem($(this));
        draggedItem = dataItem; // Track the dragged item's data
        console.log("AssetGrid -> mousedown", draggedItem);
    });

    // Track dragged item from ParentGrid
    $("#ParentGrid").on("mousedown", "tr", function () {
        var parentGrid = $("#ParentGrid").data("kendoTreeList");
        draggedItem = parentGrid.dataItem($(this));
        console.log("ParentGrid -> mousedown", draggedItem);
    });

    $("#ParentGrid").kendoDropTargetArea({
        filter: "tbody tr",
        group: "assetGroup", // Match the draggable group
        drop: function (e) {
            var parentGrid = $("#ParentGrid").data("kendoTreeList"); // Get the Kendo Grid instance
            var dropTargetRow = $(e.dropTarget);    //.closest("#ParentGrid tr.k-table-row.k-master-row"); // The row where the item was dropped
            var targetItem = parentGrid.dataItem(dropTargetRow); // Target row data

            console.log("Dragged Item:", draggedItem.Id);
            console.log("Drop Target:", e.dropTarget);
            console.log("Drop Target Row:", dropTargetRow);
            console.log("Target Item:", targetItem.Id);

            if (targetItem && draggedItem) {
                //alert("Item '" + draggedItem.Title + "' dropped on Parent '" + targetItem.Name + "'");

                // Add AJAX call here to save assignment in the database
                $.ajax({
                    url: "/ParentChild/AssignAsset",
                    method: "POST",
                    data: { parentId: targetItem.Id, itemId: draggedItem.Id, parentItemId: targetItem.ParentItemId },
                    success: function (response) {
                        parentGrid.dataSource.read();
                        $("#AssetGrid").data("kendoGrid").dataSource.read();
                        console.log("AssignAsset ended from kendoDropTargetArea -> drop");
                        //parentGrid.refresh();
                        //alert("Assignment successful!");
                    },
                    error: function () {
                        alert("Error while assigning asset (Can't assign children to child asset).");
                    }
                });
            }
        },
        dragend: function (e) {
            var draggedItem = e.source; // The dragged item
            var newParent = e.destination; // The new parent (if changed)
            var newOrder = e.destinationIndex; // The new order in the parent

            // Prepare data for backend
            var updateData = {
                id: draggedItem.id,
                parentId: newParent ? newParent.id : null,
                order: newOrder
            };

            // Make an AJAX call to update the hierarchy/order in the backend
            $.ajax({
                url: "/ParentChild/Reorder",
                type: "POST",
                data: JSON.stringify(updateData),
                contentType: "application/json",
                success: function () {
                    // Optionally refresh the TreeList
                    $("#TreeList").data("kendoTreeList").dataSource.read();
                    console.log("AssignAsset ended from kendoDropTargetArea -> dragend -> Reorder");
                },
                error: function () {
                    alert("Reorder failed");
                }
            });
        }
    });

    $("#AssetGrid").kendoDropTarget({
        filter: "tbody tr",
        group: "gridGroup", // Match the draggable group
        drop: function (e) {
            var parentGrid = $("#ParentGrid").data("kendoTreeList"); // Get the Kendo Grid instance
            var dropTargetRow = $(e.dropTarget);    //.closest("#ParentGrid tr.k-table-row.k-master-row"); // The row where the item was dropped
            var targetItem = parentGrid.dataItem(dropTargetRow); // Target row data

            console.log("Dragged Item:", draggedItem.Id);
            console.log("Drop Target:", e.dropTarget);
            console.log("Drop Target Row:", dropTargetRow);
            console.log("Target Item:", targetItem.Id);

            if (targetItem && draggedItem) {
                //alert("Item '" + draggedItem.Title + "' dropped on Parent '" + targetItem.Name + "'");

                // Add AJAX call here to save assignment in the database
                $.ajax({
                    url: "/ParentChild/UnAssignAsset",
                    method: "POST",
                    data: { parentId: targetItem.Id, itemId: draggedItem.Id, parentItemId: targetItem.ParentItemId },
                    success: function (response) {
                        parentGrid.dataSource.read();
                        $("#AssetGrid").data("kendoGrid").dataSource.read();
                        console.log("AssignAsset ended from kendoDropTargetArea -> drop");
                        //parentGrid.refresh();
                        //alert("Assignment successful!");
                    },
                    error: function () {
                        alert("Error while assigning asset (Can't assign children to child asset).");
                    }
                });
            }
        }
    });
};


$(document).ready(function () {
    // Make rows in the AssetGrid draggable
    $("#AssetGrid").kendoDraggable({
        filter: "tbody > tr", // Target rows in the grid
        hint: function (element) {
            return $("<div class='k-card k-card-type'><b>" + $(element).find("td:nth-child(2)").text() + "</b></div>");
        },
        group: "assetGroup"
    });

    var treeList = $("#ParentGrid").data("kendoTreeList");
    // Configure drag-and-drop from TreeList to Grid
    treeList.wrapper.kendoDraggable({
        filter: "tr",
        hint: function (element) {
            var item = treeList.dataItem(element);
            console.log("treeList.wrapper.kendoDraggable -> ", item);
            return element;
        },
        group: "gridGroup"         
    });
    window.initializeDropTargets();
});

Grid
TreeList
Ivaylo
Telerik team
 answered on 16 Jun 2025
1 answer
15 views
Tree List Inline Edit

Hi Team,

I am using the Kendo TreeList with inline edit mode.

I have implemented the remove event to display a confirmation popup when the delete button is clicked. The confirmation box appears correctly, but after clicking "Confirm," the record is not being deleted.

Is there an alternative solution to achieve this functionality?

Thank you.

//// I have provided code for reference

@(Html.Kendo().TreeList<RVNLMIS.Models.DMS.FolderSettingModel>()
.Name("FolderTreeList")
.Toolbar(toolbar => toolbar.Create())
.Columns(columns =>
{
    columns.Add().Field(e => e.FolderName).HtmlAttributes(new { style = "text-align:left" })
    .HeaderAttributes(new { style = "text-align:left" }).Title("Folder Name").Width(400);

    columns.Add().Field(e => e.Level).HeaderAttributes(new { style = "text-align:left"})
    .HtmlAttributes(new { style = "text-align:right"}).Title("Level").Width(30);

    columns.Add().Title("Action").Width(300).Command(c =>
    {
        c.CreateChild().Text("Add child");
        c.Edit();
        c.Destroy();
        //c.Custom().Text("<i class='btn btn-xs btn-danger fa fa-trash'></i>")
        //.Click("showDeleteConfirmation");
    });
})
.Editable(e=>e.Mode("inline"))
.DataSource(dataSource => dataSource
    .Create(create => create.Action("Create", "DMSFolderSetting"))
    .Read(read => read.Action("FolderSettingDetails", "DMSFolderSetting"))
    .Update(update => update.Action("Update", "DMSFolderSetting"))
    .Destroy(delete => delete.Action("Destroy", "DMSFolderSetting"))
    .Model(m => {
        m.Id(f => f.FolderId);
        m.ParentId(f => f.ParentFolderId);
        m.Expanded(true);
        m.Field(f => f.FolderName);
        m.Field(f => f.Level);
    })
    .ServerOperation(false)
)
.Events(e=>e.Save("OnSaveRecord"))
.Events(e=>e.Remove("onDeleteConfirm"))
.Height(700)
)

//// Java script code

function showDeleteConfirmation(e) {
    e.preventDefault(); // Stop the default delete behavior

    var treeList = $("#FolderTreeList").data("kendoTreeList");
    rowToDelete = $(e.row).closest("tr");
    var dataItem = treeList.dataItem(rowToDelete);

    //console.log(e);
    //console.log(dataItem);

    // Store the row and update modal info
    $("#deleteModal").data("row", rowToDelete); // store row
    $("#folderName").text(dataItem.FolderName);

    $("#deleteModal").modal("show");
}

function confirmDelete() {
    var treeList = $("#FolderTreeList").data("kendoTreeList");
    var row = $("#deleteModal").data("row");

    if (treeList && row) {
        treeList.removeRow(row);
    }

    $("#deleteModal").modal("hide");
}

 

/// Confirmation Modal

<div id="deleteModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Deletion</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this folder name?</p>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-primary" onclick="confirmDelete()">Yes</button>
                <button type="button" class="btn" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>
TreeList
Mihaela
Telerik team
 answered on 16 May 2025
1 answer
169 views
TypeError: data.slice is not a function

Hi Team,

After upgraded kendo components and using bootstrap 5 as shown below:

"@progress/kendo-theme-bootstrap": "^8.0.1",
"@progress/kendo-ui": "^2024.2.514",
"@types/esprima": "^4.0.5",
"@types/he": "^1.2.2",
"@types/kendo-ui": "^2023.2.5",
  "bootstrap": "^5.2.1",

The export Excel in kendo TreeList triggering an error:

TypeError: data.slice is not a function
    at init.success (kendo.data.js:3858:1)
    at success (kendo.data.js:3748:1)
    at options.success (kendo.data.js:2219:1)
    at fire (jquery.js:3496:1)
    at Object.fireWith [as resolveWith] (jquery.js:3626:1)
    at done (jquery.js:9786:1)
    at XMLHttpRequest.<anonymous> (jquery.js:10047:1)

Here is the code I am using, the exporting Excel is not working, could someone please help ?

@(
Html.Kendo().TreeList<DevelopmentEmployeeDirectoryRemoteModel>()
    .Name("development-tree-list-basic")
    .DataSource(dataSource => dataSource
    .Read(read => read.Url($"{Url.Content("~")}/Development?handler=KendoTreeListDataSourceRead").Data("forgeryToken"))
    .Model(m =>
    {
        m.Id(f => f.EmployeeId);
        m.ParentId(f => f.ReportsTo).Nullable(true);
        m.Field(f => f.FirstName);
        m.Field(f => f.LastName);
        m.Field(f => f.ReportsTo);

    })
    .ServerOperation(false))
    .Columns(columns =>
        {
            columns.Add().Field(f => f.FirstName).Width(250);
            columns.Add().Field(e => e.LastName);
            columns.Add().Field(e => e.Position);
            columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}");
        })
    .Toolbar(tools => {                                            
        tools.Pdf();
        tools.Excel();
        tools.Spacer();
        tools.Search();
    })    
    .Excel(excel => excel.FileName("Kendo UI TreeList Export.xlsx").ProxyURL(Url.Action("Excel_Export_Save", "Development")))
    .Pdf(pdf => pdf.FileName("Kendo UI TreeList Export.pdf")
               .AllPages()               
               .PaperSize("A4")
               .Margin("2cm", "1cm", "1cm", "1cm")
               .Landscape(true))
    //.ColumnMenu()
    .Filterable()    
    .Selectable(true)
    .Scrollable(false)
    .Sortable()
    .Resizable(true)
    .Reorderable(true)
    .Deferred(true)
)


 

TreeList
Anton Mironov
Telerik team
 answered on 28 Aug 2024
2 answers
91 views
Disabling editing at a certain level of the tree list

Hi Team,

Is it possible to deactivate the editing buttons (create, edit, delete) from a certain level of the node tree, e.g. deactivating the Create button in case of an ending node (leave) where child elements are not allowed.

Here's the code:

        @(Html.Kendo().TreeList<Node>()
            .Name("treelist")
             .Toolbar(toolbar => toolbar.Create().Text("Add new Node"))
            .Toolbar(toolbar =>
            {
                toolbar.Search();
            })
            .Toolbar(tools => tools.Excel())
                .Excel(excel => excel.FileName("Export.xlsx").ProxyURL(Url.Action("ExportToExcel")))
            .Columns(columns =>
            {
                columns.Add().Field(f => f.ElementId).Width(250);
                columns.Add().Field(e => e.Name);
                columns.Add().Width(400).Command(c =>
                {
                    c.CreateChild().Text("Add child");
                    c.Edit().Text("Edit");
                    c.Destroy().Text("Deactivate");
                })
                    .HtmlAttributes(new
                    {
                        style = "text-align: center;"
                    });
            })
            .Filterable()
            .Sortable()
            .DataSource(dataSource => dataSource
                .Create(create => create.Action("Create", "TreeHandler"))
                .Read(read => read.Action("GetData", "TreeHandler"))
                .Update(update => update.Action("Update", "TreeHandler"))
                .Destroy(delete => delete.Action("Destroy", "TreeHandler"))
                .ServerOperation(true)
                .Model(m =>
                {
                    m.Id(f => f.ElementId);
                    m.ParentId(f => f.ParentId);
                    m.Expanded(true);
                    m.Field(f => f.Name);
                    m.Field(f => f.ElementType);
                    m.Field(f => f.ParentId);
                })
            ).Height(540).Pageable(p=>p.PageSize(15).PageSizes(true))
            )

Code is taken from Tutorial: Editing in ASP.NET Core TreeList Component Demo | Telerik UI for ASP.NET Core

Kind regards,

Mario

TreeList
Mario
Top achievements
Rank 1
Iron
Iron
 updated answer on 06 Aug 2024
1 answer
73 views
TreeList Expand Childs Issue After Latest Update 2024 Q1

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.

TreeList
Stoyan
Telerik team
 answered on 28 Feb 2024
1 answer
115 views
Expand only the first item on page load
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?

TreeList
Alexander
Telerik team
 answered on 18 Oct 2023
1 answer
281 views
Tree View No records to display

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 ?

 

 

Grid
TreeList
Mihaela
Telerik team
 answered on 12 May 2023
1 answer
320 views
Problem with Telerik nuget for Asp.Net Core

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 ?

 

TreeList
Mihaela
Telerik team
 answered on 26 Apr 2023
1 answer
113 views
Treelist Search Children(Subitems)

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

TreeList
Alexander
Telerik team
 answered on 02 Dec 2022
1 answer
105 views
TreeList DropDownListFor Display Value

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

DropDownList
TreeList
Stoyan
Telerik team
 updated answer on 19 Sep 2022
Narrow your results
Done
Selected tags
TreeList
Tags
Grid
General Discussions
DropDownList
Chart
Editor
Scheduler
Form
Upload
Installer and VS Extensions
Date/Time Pickers
TabStrip
Spreadsheet
ListView
MultiSelect
Menu
ComboBox
Window
Filter
PDFViewer
TreeView
Toolbar
AutoComplete
TextBox
Wizard
Button
ListBox
NumericTextBox
Checkbox
DropDownTree
Styling
FileManager
PanelBar
TileLayout
DateRangePicker
PivotGrid
Template
Timeline
Dialog
Gantt
Calendar
ImageEditor
Localization
Security
ToolTip
OrgChart
Pager
Splitter
Switch
Accessibility
Breadcrumb
Drawer
MaskedTextBox
MultiColumnComboBox
Notification
RadioGroup
ScrollView
TaskBoard
Gauge
Loader
TextArea
Popover
Card
Chat
CheckBoxGroup
ColorPicker
DateInput
Diagram
ExpansionPanel
Licensing
Stepper
Barcode
ResponsivePanel
Sortable
GridLayout
AppBar
FloatingActionButton
ProgressBar
QRCode
Captcha
Avatar
DockManager
VS Code Extension
Badge
MultiViewCalendar
Rating
Slider
ActionSheet
SkeletonContainer
ColorGradient
DropDownButton
Signature
ChipList
BottomNavigation
BulletGraph
Collapsible
RadioButton
Ripple
Sparkline
TreeMap
CircularGauge
HeatMap
PivotGridV2
FlatColorPicker
CircularProgressBar
ColorPalette
SplitButton
StackLayout
TimeDurationPicker
Chip
ToggleButton
AIPrompt
PropertyGrid
Sankey
OTPInput
ChartWizard
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
1
2 3 4 5
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how