Telerik Forums
UI for ASP.NET MVC Forum
1 answer
198 views
How can i binding treeview from datatable?? Please help!
Dimitar
Telerik team
 answered on 27 Feb 2019
11 answers
583 views

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

Dimitar
Telerik team
 answered on 21 Feb 2019
1 answer
188 views
     Is it possible to have a checkbox treeview within a listbox and have it so that when a parent item is checked, the parent and all of its children can be moved to a selected side of the listbox?
Ivan Danchev
Telerik team
 answered on 06 Feb 2019
1 answer
170 views

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?   

Ivan Danchev
Telerik team
 answered on 25 Jan 2019
7 answers
1.0K+ views

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!

Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
 answered on 18 Jan 2019
3 answers
86 views

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.}
Veselin Tsvetanov
Telerik team
 answered on 18 Jan 2019
1 answer
317 views

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

 

 

Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
 answered on 28 Dec 2018
4 answers
65 views

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?

 

Veselin Tsvetanov
Telerik team
 answered on 12 Dec 2018
1 answer
253 views

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.

Veselin Tsvetanov
Telerik team
 answered on 30 Nov 2018
3 answers
665 views

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

Ivan Danchev
Telerik team
 answered on 23 Aug 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?