Hello, I am currently evaluating the Telerik control sets for use in a large project to start soon. I have a requirement where we will be building a treeview in our ASP.NET MVC controller code using TreeViewItemModel list and passing to the view. In the view razor code and/or javascript, is there a way to access the TreeViewItemModel as a user is selecting different nodes in the tree? Specifically, when building the TreeViewItemModel, I populate the .Text and .Id properties and I need to access these values to post back to my controller code to handle the selection changes. Is this possible? I need to quickly mock something up to demonstrate this.
Controller code to build the treeview contents is here:
public List<TreeViewItemModel> BuildTreeContents()
{
List<TreeViewItemModel> tree = new List<TreeViewItemModel>();
IQueryable<SupplierModel> suppliers = GetSuppliers();
IQueryable<ManagedOrgModel> managedOrgs = null;
IQueryable<ManagedLocationModel> locations = null;
TreeViewItemModel node = null;
List<TreeViewItemModel> orgs = null;
List<TreeViewItemModel> locs = null;
foreach (SupplierModel supplier in suppliers)
{
node = new TreeViewItemModel();
node.Text = supplier.SupplierName;
node.Id = supplier.SupplierID;
managedOrgs = GetManagedOrgs(supplier.ClientID, supplier.SupplierID);
orgs = new List<TreeViewItemModel>();
foreach (ManagedOrgModel managedOrg in managedOrgs)
{
TreeViewItemModel orgNode = new TreeViewItemModel();
orgNode.Text = managedOrg.ManagedOrgName;
orgNode.Id = managedOrg.ManagedOrgID;
locations = GetLocations(managedOrg.ClientID, managedOrg.SupplierID, managedOrg.ManagedOrgID);
locs = new List<TreeViewItemModel>();
foreach (ManagedLocationModel location in locations)
{
TreeViewItemModel locationNode = new TreeViewItemModel();
locationNode.Text = location.ManagedLocationName;
locationNode.Id = location.ManagedLocationID;
locs.Add(locationNode);
}
orgNode.Items = locs;
orgNode.HasChildren = true;
orgs.Add(orgNode);
}
node.Items = orgs;
node.HasChildren = true;
tree.Add(node);
}
return tree;
Thanks,
Doug Matulis
So lets say I have a set of entities
ObjectModel1 - Id, Name, List<ObjectModel2> Children
ObjectModel2 - Id, Name, Note, DateModified, ModifiedBy
So now my dataset might return
ObjectModel1 om1a
ObjectModel2 om2a
ObjectModel2 om2b
ObjectModel1 om1b
ObjectModel2 om2c
ObjectModel2 om2d
This would come down as a List<ObjectModel1> object with the ObjectModel1 objects in the list having the ObjectModel2 objects as children.
I would like to display this so that each of the ObjectModel1 objects are displayed as separate trees with all of the data from each ObjectModel2 object being displayed when the ObjectModel1 trees are expanded.
So, first of all, is this possible with the Kendo treeview, and if not, what would we use? Second, even if it is possible, is there a better UI component to do the above?
Hello,
Would someone be able to offer the solution on how to get certain node's data which is dynamic loaded (load on demand)?
The case is that in my MVC project the top level node have already be loaded on TreeView . I need load second level to fourth level node based on every level's condition (on one button click). My problem is I cannot get second level's detail data (after the nodes appended to top level ) which third level depend on. When I do the debug the count of second level nodes showed correctly, but not detail data anywhere. Do you have some suggestions? Thanks in advance!
Something is not clicking for me on this, and I am not really sure where to start. I have what amounts to a directory structure I am sending from the server (see json below) and trying to load into the treeview. However, I am getting an error stating . Everything I have been able to find on that pretty much says that I need to define the schema. This is taking too long for me to figure out and any help would be appreciated.
01.
{
02.
"FolderId": 1,
03.
"Name": "root",
04.
"Description": "root description",
05.
"Note": "root note",
06.
"Parent": null,
07.
"Children": [
08.
{
09.
"$id": "1",
10.
"FolderId": 2,
11.
"Name": "Sub Level 1",
12.
"Description": "Sub Level 1 description",
13.
"Note": "Sub Level 1 note",
14.
"Children": [],
15.
"Documents": [
16.
{
17.
"$id": "2",
18.
"DocumentId": 2,
19.
"Name": "PepsiCo Medical Test Doc with picture.docx",
20.
"Note": "Copied from Document.Version 1.1",
21.
"Description": null,
22.
"DocType": 1,
23.
"Status": 3,
24.
"AllVersions": [],
25.
"DocumentHistories": [],
26.
"ViewingRoles": null,
27.
"CurrentUserId": "00000000-0000-0000-0000-000000000000",
28.
"Versions": [],
29.
"PublishedVersion": null,
30.
"LatestDraftVersion": null,
31.
"LatestVersion": null,
32.
"Disposed": false
33.
}
34.
],
35.
"Disposed": false
36.
},
37.
{
38.
"$id": "3",
39.
"FolderId": 3,
40.
"Name": "Sub Level 2",
41.
"Description": "Sub Level 2 description",
42.
"Note": "Sub Level 2 note",
43.
"Children": [
44.
{
45.
"$id": "4",
46.
"FolderId": 4,
47.
"Name": "Sub Level 2_1",
48.
"Description": "Sub Level 2_1 description",
49.
"Note": "Sub Level 2_1 note",
50.
"Children": [],
51.
"Documents": [
52.
{
53.
"$id": "5",
54.
"DocumentId": 1,
55.
"Name": "PepsiCo Medical Test Doc with picture.docx",
56.
"Note": null,
57.
"Description": null,
58.
"DocType": 1,
59.
"Status": 2,
60.
"AllVersions": [],
61.
"DocumentHistories": [],
62.
"ViewingRoles": null,
63.
"CurrentUserId": "00000000-0000-0000-0000-000000000000",
64.
"Versions": [],
65.
"PublishedVersion": null,
66.
"LatestDraftVersion": null,
67.
"LatestVersion": null,
68.
"Disposed": false
69.
}
70.
],
71.
"Disposed": false
72.
}
73.
],
74.
"Documents": [],
75.
"Disposed": false
76.
}
77.
],
78.
"Documents": [],
79.
"Disposed": false
80.
}
Hi
I have issue with Kendo treeview expanding in my MVC project. I try to expand treeview node (which have children nodes) at same time when I select it. The code went through in .js file without error. but node didn't expand. Could any one tell me what properly be wrong? below are piece of code. Thanks.
var
selectedNode = $("#treeView").data('kendoTreeView').dataItem(e.node);
// selectedNode have correct data after this.
var
treeView = $("#treeView").data('kendoTreeView');
treeView
.expand(selectedNode); //Code went through without error
Hi,
I've got a problem with kendo culture and treeView read action.
I've got bilingual application, with en-US and pl-PL culture, which I set like this:
Client side: (var culture = "pl-PL" or "en-US")
<
script
src
=
"@Url.Content("
~/Scripts/kendo/cultures/kendo.culture." + culture + ".min.js")"></
script
>
<
script
src
=
"@Url.Content("
~/Scripts/kendo/messages/kendo.messages." + culture + ".min.js")"></
script
>
<
script
>kendo.culture("@culture");</
script
>
Server side: (ex.: CultureInfo cultureInfo = new CultureInfo("pl-PL");)
Thread.CurrentThread.CurrentCulture = Thread.CurrentThread.CurrentUICulture = cultureInfo;
It seems to work well.
I've got a view with grid and treeView. Both has read action with additional data, getting like this:
.Read(read => read.Action(@"ReadOfertyTree", @"Oferty").Data(@"filterGrid")) <- treeView
(...)
.Read(read => read.Action(@"ReadOferty", @"Oferty").Data(@"filterGrid")) <- grid
(...)
function filterGrid() {
return {
dataOd: dataOd,
dataDo: dataDo,
klient: klient,
zamow: zamow
};
}
dataOd and dataDo both are read from kendoDatePicker. In both cases I can see in network in my browser, that date is sending in format dd.MM.yyy for pl culture and MM/dd/yyyy for en culture. In case of en, everything is allright BUT in pl case I faced with strange behaviour.
In controller's action read for grid I got dates:
1.11.2018 is read as 1st of november 2018
30.11.2018 is read as 30th of november 2018
BUT in treeView read action I've got:
1.11.2018 is read as 11th of january 2018
30.11.2018 is read as null
I don't set culture in any other places. Both controlls are in the same cshtml file and both read action in the same controller. What's wrong?
I'm trying to use the Telerik MVC TreeView control with checkboxes in a form. This form is use to create and modify my view Model to recover the user informations (in particular categories selection).
The treeview control shows two levels.
In case of creation, the treeview control must expand all levels.
In case of modify, the treeview control must shows the checkboxes populate in database.
How retrieve the selection of treewiew control in my view model ? I would like to retrieve the selection of treeview control in controller.
Do you have a sample code to explain that ? The demo of treewiew control doesn't explain this binding type of remote data. My treeview control is not make on demand.
My form looks like this :
@model DigitalVM
@using (Html.BeginForm("saveCampaign", "Digital", FormMethod.Post))
{
@Html.AntiForgeryToken()
<!-- Champs cachés -->
@Html.HiddenFor(model => Model.ID)
<
div
class
=
"row 1"
>
<
div
class
=
"form-group col-xs-12 col-md-6 Libelle"
>
@Html.LabelFor(model => model.Libelle)
<
div
>
@(Html.Kendo().TextBoxFor(model => model.Libelle)
.HtmlAttributes(new { style = "width:100%" })
)
@Html.ValidationMessageFor(model => model.Libelle, "", new { @class = "text-danger" })
</
div
>
</
div
>
<!-- Libelle -->
<
label
>Categories</
label
>
<
div
class
=
"form-group col-xs-12 col-md-6 Diffusion"
>
@(
Html.Kendo().TreeView()
.Name("Categories")
.Checkboxes(checkboxes => checkboxes
//.Name("IsChecked")
.CheckChildren(true)
)
.BindTo(Model.ModelTree, mappings =>
{
mappings.For<
ModelTree
>(binding => binding.ItemDataBound((item, modelItem) =>
{
item.Id = modelItem.id;
item.Text = modelItem.Name;
item.Expanded = modelItem.Expanded;
item.Checked = modelItem.Checked;
})
.Children(category => category.Children));
})
.Events(ev => ev.Check("onCheck"))
)
</
div
>
</
div
>
<!-- row 1 -->
<
div
style
=
"padding-top: 2em;"
>
<
h4
>Status</
h4
>
<
p
id
=
"result"
>No nodes checked.</
p
>
</
div
>
<
div
><
span
class
=
"icon icon-lock"
> @PortailMR.Resources.Shared.Shared.RequiredFields</
span
></
div
>
<
div
>@Html.ValidationMessage("CustomError", new { @class = "text-danger" })</
div
>
<
div
class
=
"form-group gbuttons"
>
<
div
class
=
"k-edit-buttons text-right"
>
@*<
input
type
=
"submit"
value
=
"@PortailMR.Resources.Shared.Shared.Buy.ToUpper()"
title
=
"Buy"
class
=
"icon icon-shopping-basket k-button"
/>*@
@(Html.Kendo().Button()
.Name("Commander")
.Content("Liste insertion")
.Icon("icon icon-next2")
.HtmlAttributes(new { @type = "submit", @onClick = "abortEvtUnload(true)" }))
@Html.ActionLink(" " + @PortailMR.Resources.Shared.Shared.Cancel, "Index", "Digital", null, new { @class = "k-button k-button-icontext k-grid-cancel", @onClick = "abortEvtUnload(true)" })
</
div
>
</
div
>
<!-- gbuttons -->
}
My Controller looks like this :
[Authorize]
[ValidateAntiForgeryToken]
[HttpPost]
//public ActionResult SendCommand(CommandeVM currentOffre) // OK
public
ActionResult saveCampaign(DigitalVM model)
{
try
{
if
(ModelState.IsValid)
{
writeLog(MethodBase.GetCurrentMethod(),
"Start"
,
"Info"
);
// SAVE Model in DATABASE
//var connectManager = ConnectManagers.FirstOrDefault(mng => mng.Product == model.Version);
return
View(
"index"
);
}
return
View(
"_TreeView"
, model);
}
catch
(BusinessException bex)
{
SetModelError(MethodBase.GetCurrentMethod(), bex);
return
View(
"ErrorBusiness"
,
"_Layout3"
,
new
HandleErrorInfo(bex,
"Offre"
,
"Index"
));
}
My View model looks like this :
public
class
ModelTree
{
public
string
id {
get
;
set
; }
public
string
Name {
get
;
set
; }
public
bool
Checked {
get
;
set
; }
public
bool
Expanded {
get
;
set
; }
public
IList<ModelTree> Children {
get
;
set
; }
public
ModelTree Parent {
get
;
set
; }
}
public
class
DigitalVM
{
public
int
ID {
get
;
set
; }
public
String Libelle {
get
;
set
; }
public
IEnumerable<ModelTree> ModelTree {
get
;
set
; }
}
Best regards,
Steph.
I noticed that the TreeView widget is behaving totally different when using BindTo(myViewModel.GroupList) versus using DataSource(<calling an action on a controller>). The problem: when using DataSource all additional fields like "Expanded" or "HtmlAttributes" are ignored by the TreeView widget so the TreeView looks different depending on which way I use it.
myViewModel.GroupList is a List<TreeViewItemModel>, the action on my Controller returns a JsonResult(List<TreeViewItemModel>,...). In fact both are exactly the same lists.
The code for DataSource is as follows:
.DataTextField(
"Text"
)
.DataSource(ds => ds
.Read(read => read.Url(SettingsManager.BaseServiceUrl +
"/groups/all/"
).Type(HttpVerbs.Get))
.Model(model =>
{
model.Id(
"Id"
);
model.Children(
"Items"
);
model.HasChildren(
"HasChildren"
);
})
)
Any idea why this happens?
Regards
Heiko