Questions on UI for ASP.NET MVC Forum

1 answer

16 views

Hi there,

In my grids, I have a column with a menu :

columns.Template(@<text></text>).Width(106).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
Html.Kendo().Menu().Direction(MenuDirection.Left)
.Name("menu_#=AccountId#")
.Items(its =>
{
its.Add().Text("Functions:").Items(nested =>
{
nested.Add().Text(importFilesText).Action(importFilesAction, "Accounts", new { id = "#=AccountId#", cid = Model.CompanyId, returnUrl = returnUrl});
});

})
.ToClientTemplate().ToHtmlString()
);
})

But in the TreeList there is no ClientTemplate

I tried using the TemplateId

And I can get the menu to display, but it is cut of inside the treelist.

In the old days with the grid we used to change the css of the parent with overflow-y:display !important; but that does not seem to work.

Any ways this can be accomplished in the treelist - next step is the items in the list are depending on the content of the row ...

Best regards,

- René

Menu

TreeList

answered on 17 Jun 2025

1 answer

76 views

TreeList RowTemplateId method not recognized

Is this because I have an older version of Kendo? When were row templates added?

TreeList

answered on 12 Feb 2024

1 answer

114 views

Copy row in kendo TreeList in ASP.NET MVC

Hi All,

We're using telerik kendo treelist for the application. we need functionality like if we click on Copy data button then it will clone the selected row along with data. We've tried to find copy functionality but we're not able to do it. so we have add custom button ("Copy Data").

Please let us know if there is any other way to achieve this functionality.

adding button "Copy Data" in toolbar:

.Toolbar(tb =>
    {     
            tb.Custom().Name("Copy").Text("Copy Data");        
    })

"Copy Data" button click event:

$('.k-button-text').click(function () {
        alert('clicked');
        debugger
        var treeList = $("#TeamTreeList").data("kendoTreeList");
        var row = treeList.select();
        if (row.length > 0) {
            var data = treeList.dataItem(row);
            console.log(data.RoleName); 
        }
    });

Button

TreeList

answered on 26 Jan 2024

1 answer

273 views

TreeList Add child node doesnt appear without refreshing page

Greetings,

I'm working on an issue with our Kendo UI...essentially i have a parent node and i want to add a child node and have the change show up immediately like it does in the Kendo UI example. Upon clicking Add for a new child node, i can enter my details and update the row.

In the example shown here: https://demos.telerik.com/aspnet-mvc/treelist/editing you'll see once the update button is clicked the row automatically updates and you can see the child node you've created.

My issue is that once i click the update button the row disappears and only a page refresh will show the new child node row.

The error i get when trying to update the row is a generic: POST http://localhost:16922/Rackhouses/RackhouseTreeList_Add 500 (Internal Server Error)

Here's my cshtml for the treelist:

@(Html.Kendo().TreeList<WhiskeySystems.ViewModels.RackhouseTreeListItemVM>
    ()
    .Name("treelist")
    .Toolbar(toolbar => toolbar.Create().Text("Add Rackhouse"))
    .Columns(columns =>
    {
        columns.Add().Field(e => e.Name).Title("Name").Width(220);
        columns.Add().Field(e => e.InMyBond).Title("In My Bond").Width(100).Template("<input type='checkbox' data-bind='checked: InMyBond' onclick='return false;'/>" );
        columns.Add().Field(e=> e.Tiers).Title("Tiers");
        columns.Add().Field(e => e.Rows).Title("Rows");
        columns.Add().Field(e => e.Capacity).Title("Capacity");
        columns.Add().Width(300).Command(c =>
        {
            c.Edit();
            c.Destroy();
            c.CreateChild().Text("Add Zone");
            c.Custom().Name("defaultZone").ClassName("zoneDefault").Click("setDefaultZone").Text("Set Default");
        });
    })
    .Editable(e=>e.Mode("inline"))
    .DataSource(dataSource => dataSource
    .Create(create => create.Action("RackhouseTreeList_Add", "Rackhouses"))
    .Read(read => read.Action("RackhouseTreeList_Read", "Rackhouses"))
    .Update(update => update.Action("RackhouseTreeList_Update", "Rackhouses"))
    .Destroy(delete => delete.Action("RackhouseTreeList_Delete", "Rackhouses"))
    .Events(e=> { e.Error("onError"); e.RequestEnd("requestEnd"); })
    .Model(m => {
        m.Id(f => f.Id);
        m.ParentId(f => f.ParentId);
        m.Expanded(true);
        m.Field(f => f.Capacity);
        m.Field(f => f.DistilleryId);
        m.Field(f => f.InMyBond);
        m.Field(f => f.InvTypeId);
        m.Field(f => f.Name);
        m.Field(f => f.Rows);
        m.Field(f => f.Tiers);
    })

    )
    .Events(e => { e.DataBound("OnDataBound"); e.Edit("OnEdit"); })

    )

Heres my TreeList Add code for the controller:

public JsonResult RTreeList_Add([DataSourceRequest] DataSourceRequest request, RTreeListItemVM VM)
        {
            using (var contextScope = _scope.Create())
            {
                try
                {

                    _RBS.AddRTreeListItemVM(VM);
                    contextScope.SaveChanges();
                    //Assign the new Id back to the VM after saving.
                    if (VM.ParentId.HasValue)
                    {
                        VM.Id = VM._zone.Id + 0.2m;
                    }
                    else
                    {
                        VM.Id = VM._r.Id + 0.1m;
                    }
                }
                catch (Exception ex)
                {
                    ModelState.AddModelError("Error", ex.Message);
                }

                return Json(new[] { VM }.ToTreeDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
            }
        }

I've done quite a bit of troubleshooting and cant seem to find anything that stands out. Made sure my scripts are running in the right order. Im new to kendo so still trying to ramp up my knowledge here. Thanks in advance!

TreeList

answered on 26 Jan 2023

0 answers

286 views

Kendo.Mvc.UI package not found

i am getting the error when i use @html.kendo()

it showing are you missing any directives

>please suggest any solution

Installer and VS Extensions

asked on 12 Sep 2022

1 answer

310 views

Uncaught ReferenceError when i deploy webapp in IIS

Hi, we're testing new upgrade versión from 2016 to 2022.

When i run debug in VS everything works fine, all component are loaded and works fine.

When i publish project in VS and deploy in our developtment IIS components like Grid and Treelist doesnt display.

I get this errors :

Uncaught ReferenceError: InitFilterTreeList is not defined
Uncaught ReferenceError: Grid_DataSourceErrorHandler is not defined

It seems that all js files are included in bundles, and in the right order :

bundles.BundleScript("~/bundles/vendorscripts", new string[]
                {
                            "~/Scripts/Vendor/Kendo/2022.1.119/jquery.min.js",
                            "~/Scripts/modernizr-*",
                            "~/Scripts/bootstrap.js",
                            "~/Scripts/autosize.min.js",
                            "~/Scripts/respond.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.all.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/jszip.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.core.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.data.odata.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.data.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.userevents.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.draganddrop.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.sortable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.binder.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.fx.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.view.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.button.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.color.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.popup.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.slider.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.colorpicker.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.list.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.combobox.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.calendar.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.datepicker.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.timepicker.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.datetimepicker.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.dropdownlist.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.selectable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.listview.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.upload.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.filebrowser.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.imagebrowser.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.resizable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.drawing.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.pdf.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.window.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.editor.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.numerictextbox.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.validator.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.editable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.filtermenu.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.menu.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.columnmenu.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.groupable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.autocomplete.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.filtercell.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.pager.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.reorderable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.scroller.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.view.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.loader.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.pane.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.popover.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.shim.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.actionsheet.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.ooxml.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.excel.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.progressbar.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.columnsorter.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.grid.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.maskedtextbox.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.virtuallist.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.multiselect.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.notification.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.tabstrip.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.toolbar.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.tooltip.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.treeview.draganddrop.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.dom.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.treelist.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.treeview.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.aspnetmvc.min.js"
                });

We're testing migration to new version with a trial licence, does it have any limitation about it?

if not Why does it display a message like that in IIS but not in VS?

Thanks in advance

General Discussions

Grid

TreeList

answered on 01 Apr 2022

1 answer

226 views

Kendo UI ASP.NET MVC TreeList InCell NumericTextBox Editor

The default NumericTextBox widget that is being generated when InCell editing a decimal field in a TreeList widget is constrained to 2 decimal precision. I want to achieve 3 decimal place precision. I have set the format as "{0:n3}" to force the value to be displayed as 3 decimal places, but the NumericTextBox editor is rounding to 2 decimal places. I want to override this but have not been successful. Is there a way to specify the default editor for a TreeList field? For the Grid widget, we can use the DefaultEditorTemplate but no such property seems to exist for TreeList fields. It would be great if I could simply use the editor templates found in ~/Views/Shared/EditorTemplates, but this does not appear to be the case as changes to these default editor template files is not reflected for the InCell editor.

TreeList

answered on 22 Dec 2021

0 answers

442 views

MVC TreeList inline dropdownlist example

Are there any online examples of where a dropdrownlist control is used inline as a column with the MVC TreeList?

I need the column to be active at all times,. We don't want to utilize the popup editor.

I tried adding a column with a template like this:

            @(Html.Kendo().TreeList<VendorPortalCatalogItem>()
                  .Name("myClassTreelist")
                  .Columns(columns =>
                  {
                      columns.Add().Field(e => e.Name).Width(220).TemplateId("name-template");
                      columns.Add().Field(e => e.DaysToShipId).TemplateId("dts-template");
                  })
                  .Filterable()
                  .Sortable()
                  .DataSource(dataSource => dataSource
                      .Read(read => read.Action("TreeList_LoadAll", "DaysToShip"))
                      .ServerOperation(false)
                      .Model(m =>
                      {
                          m.Id(f => f.Id);
                          m.ParentId(f => f.ParentId);
                          m.Field(f => f.Name);
                          m.Field(f => f.IconClass);
                      })
                  )
                  .Height(540)
                  )

And my template looks like this:

<script id="dts-template" type="text/x-kendo-template">

            @(Html.Kendo().DropDownList()
                  .Name("DaysToShipId")
                  .OptionLabel("Select days to ship...")
                  .HtmlAttributes(new { style = "width: 100%" })
                  .DataTextField("Text")
                  .DataValueField("Value")
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("ddlDaysToShip_Read", "DaysToShip");
                      });
                  })
                  .Height(400)
                  )

</script>

But all this does is throw console error "Uncaught error: Invalid template"

DropDownList

TreeList

asked on 01 Oct 2021

1 answer

457 views

Delete confirmation in TreeList

Hello,

Is there any way to have a delete confirmation popup or message when the Delete button is clicked in a TreeList?

I've tried using

events.Remove("onRemove");

as shown in the Events demo. I'm using a JavaScript confirm, but the row is still deleted when I click cancel.

Many thanks,

Richard

TreeList

updated answer on 30 Sep 2021

2 answers

120 views

TreeList drag&drop error when added Selectable column

Good morning,

I have an issue with TreeList component (in MVC) when I add the Selectable checkbox column (as first column) : in this configuration the drag & drop doesn't work correctly.

When I try to drag a row in another position the "after" behavior would never be applied. Only the "before" and "over" behaviors seems to work correctly. All the "after" are intended always as "before".
If I simply remove the Selectable checkbox column from the configuration, all start to works fine.

Could you kindly check or give me some tips on how to solve it?

Thanks and regards,

TreeList

answered on 20 Jul 2021