Is this because I have an older version of Kendo? When were row templates added?
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);
}
});
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!
i am getting the error when i use @html.kendo()
it showing are you missing any directives
>please suggest any solution
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
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.
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"
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
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,
I am using Kendo for Asp.Net MVC in my application. Recently I upgraded to version 2021.2.616 After that the treelist stopped showing data. Only "No records available." is shown(see attached pic)
@(Html.Kendo().TreeList<Models.CategoryModel>()
.Name("treelist")
.HtmlAttributes(new { id = "itemtreelist" })
.Toolbar(toolbar =>
{
toolbar.Custom().Click("AddNewCategory_click").Text("Add New Item Category").Name("addNewCategory");
}
})
.Columns(columns =>
{
columns.Add().Field(e => e.Name).Width(200).Filterable(filterable => filterable.Ui("itemNameFilter"));
columns.Add().Field(e => e.Description).Width(300);
columns.Add().Field(e => e.IsActive).Template(
"#if(IsActive == true){#" +
Html.Kendo().CheckBox().Name("name#:IsActive#").HtmlAttributes(new { @class = "IsActive" }).Checked(true).ToHtmlString()
+"#}else{#" +
Html.Kendo().CheckBox().Name("name#:IsActive#").HtmlAttributes(new { @class = "IsActive" }).Checked(false).ToHtmlString()
+ "#}#"
).Width(75).Filterable(false) ;
columns.Add().Field(e => e.ImagePath).Title("Image").Filterable(false).Template(
"#if(ImagePath == null){#" +
"No Image"
+ "#}else{#" +
"<img src='#=ImagePath#' alt='#=Name#' Title='#=Name #' style='height:50px;' />"
+ "#}#"
);
columns.Add().Command(c =>
{
c.Custom().Click("EditCategory_click").Text("Edit").Name("editCategory");
}).Width(125);
columns.Add().Command(c =>
{
c.Destroy();
}).Width(125);
})
.Editable(e=>e.Mode("Inline"))
.Height(200)
.Filterable(filterable => filterable
.Extra(false))
.Sortable()
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetItemCategories", "Category"))
.Create(c => c.Action("CreateItemCategory", "Category"))
.Update(c => c.Action("UpdateItemCategory", "Category"))
.Destroy(c => c.Action("DestroyItemCategory", "Category"))
.Model(m => {
m.Id(f => f.Id);
m.ParentId(f => f.ParentCategoryId);
m.Expanded(true);
m.Field(f => f.Name);
m.Field(f => f.Description);
m.Field(f => f.IsActive);
})
)
.Height(600)
)
Few Notes:
1. There are no console errors
2. The data is coming from the server correctly. I checked and verified in developer console
3. Everything was working before upgrade (previously used 2019.x.xxx)
4. this is the part of the code (in action method) that returns the data for the treelist
IEnumerable<CategoryModel> result = ... linq query here ...;
return Json(result.ToTreeDataSourceResult(request,
e => e.Id,
e => e.ParentCategoryId,
e => e
));