diff --git a/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/razor b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/razor new file mode 100644 index 0000000000..f0d8163710 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/razor @@ -0,0 +1,12 @@ +@model List + +@Html.EJS().TreeView("listdata").Fields(field=> + field.Id("id").ParentID("pid").Selected("selected"). + Expanded("expanded").Text("name").HasChildren("hasChild").HtmlAttributes("htmlAttributes") + .DataSource(Model)).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential-core.cs b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential-core.cs new file mode 100644 index 0000000000..63588978b1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential-core.cs @@ -0,0 +1,161 @@ + public IActionResult LocalData() + { + + List listdata = new List(); + listdata.Add(new + { + id = 1, + name = "Australia", + hasChild = true, + expanded = true + }); + listdata.Add(new + { + id = 2, + pid = 1, + name = "New South Wales", + + }); + listdata.Add(new + { + id = 3, + pid = 1, + name = "Victoria", + HtmlAttributes = new Dictionary + { + { "class", "child-node" } + } + }); + + listdata.Add(new + { + id = 4, + pid = 1, + name = "South Australia" + }); + listdata.Add(new + { + id = 6, + pid = 1, + name = "Western Australia", + + }); + listdata.Add(new + { + id = 7, + name = "Brazil", + hasChild = true + }); + listdata.Add(new + { + id = 8, + pid = 7, + name = "Paraná" + }); + listdata.Add(new + { + id = 9, + pid = 7, + name = "Ceará" + }); + listdata.Add(new + { + id = 10, + pid = 7, + name = "Acre" + }); + listdata.Add(new + { + id = 11, + name = "China", + hasChild = true + }); + listdata.Add(new + { + id = 12, + pid = 11, + name = "Guangzhou" + }); + listdata.Add(new + { + id = 13, + pid = 11, + name = "Shanghai" + }); + listdata.Add(new + { + id = 14, + pid = 11, + name = "Beijing" + }); + listdata.Add(new + { + id = 15, + pid = 11, + name = "Shantou" + + }); + listdata.Add(new + { + id = 16, + name = "France", + hasChild = true + + }); + listdata.Add(new + { + id = 17, + pid = 16, + name = "Pays de la Loire" + + }); + listdata.Add(new + { + id = 18, + pid = 16, + name = "Aquitaine" + + }); + listdata.Add(new + { + id = 19, + pid = 16, + name = "Brittany" + + }); + listdata.Add(new + { + id = 20, + pid = 16, + name = "Lorraine" + }); + listdata.Add(new + { + id = 21, + name = "India", + hasChild = true + + }); + listdata.Add(new + { + id = 22, + pid = 21, + name = "Assam" + + }); + listdata.Add(new + { + id = 23, + pid = 21, + name = "Bihar" + }); + listdata.Add(new + { + id = 24, + pid = 21, + name = "Tamil Nadu" + + }); + ViewBag.dataSource = listdata; + return View(); + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential-mvc.cs b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential-mvc.cs new file mode 100644 index 0000000000..f4f211dfbe --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential-mvc.cs @@ -0,0 +1,164 @@ + using Syncfusion.EJ2.Navigations; + + public IActionResult LocalData() + { + TreeViewFieldsSettings Listdata = new TreeViewFieldsSettings(); + List listdata = new List(); + listdata.Add(new + { + id = 1, + name = "Australia", + hasChild = true, + expanded = true + }); + listdata.Add(new + { + id = 2, + pid = 1, + name = "New South Wales", + + }); + listdata.Add(new + { + id = 3, + pid = 1, + name = "Victoria", + HtmlAttributes = new Dictionary + { + { "class", "child-node" } + } + }); + + listdata.Add(new + { + id = 4, + pid = 1, + name = "South Australia" + }); + listdata.Add(new + { + id = 6, + pid = 1, + name = "Western Australia", + + }); + listdata.Add(new + { + id = 7, + name = "Brazil", + hasChild = true + }); + listdata.Add(new + { + id = 8, + pid = 7, + name = "Paraná" + }); + listdata.Add(new + { + id = 9, + pid = 7, + name = "Ceará" + }); + listdata.Add(new + { + id = 10, + pid = 7, + name = "Acre" + }); + listdata.Add(new + { + id = 11, + name = "China", + hasChild = true + }); + listdata.Add(new + { + id = 12, + pid = 11, + name = "Guangzhou" + }); + listdata.Add(new + { + id = 13, + pid = 11, + name = "Shanghai" + }); + listdata.Add(new + { + id = 14, + pid = 11, + name = "Beijing" + }); + listdata.Add(new + { + id = 15, + pid = 11, + name = "Shantou" + }); + listdata.Add(new + { + id = 16, + name = "France", + hasChild = true + }); + listdata.Add(new + { + id = 17, + pid = 16, + name = "Pays de la Loire" + }); + listdata.Add(new + { + id = 18, + pid = 16, + name = "Aquitaine" + + }); + listdata.Add(new + { + id = 19, + pid = 16, + name = "Brittany" + + }); + listdata.Add(new + { + id = 20, + pid = 16, + name = "Lorraine" + }); + listdata.Add(new + { + id = 21, + name = "India", + hasChild = true + }); + listdata.Add(new + { + id = 22, + pid = 21, + name = "Assam" + + }); + listdata.Add(new + { + id = 23, + pid = 21, + name = "Bihar" + }); + listdata.Add(new + { + id = 24, + pid = 21, + name = "Tamil Nadu" + }); + Listdata.DataSource = listdata; + Listdata.Expanded = "expanded"; + Listdata.Id = "id"; + Listdata.ParentID = "pid"; + Listdata.Text = "name"; + Listdata.HasChildren = "hasChild"; + ViewBag.TreeViewFields = Listdata; + return View(); + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential.cs b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential.cs new file mode 100644 index 0000000000..63588978b1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/selfreferential.cs @@ -0,0 +1,161 @@ + public IActionResult LocalData() + { + + List listdata = new List(); + listdata.Add(new + { + id = 1, + name = "Australia", + hasChild = true, + expanded = true + }); + listdata.Add(new + { + id = 2, + pid = 1, + name = "New South Wales", + + }); + listdata.Add(new + { + id = 3, + pid = 1, + name = "Victoria", + HtmlAttributes = new Dictionary + { + { "class", "child-node" } + } + }); + + listdata.Add(new + { + id = 4, + pid = 1, + name = "South Australia" + }); + listdata.Add(new + { + id = 6, + pid = 1, + name = "Western Australia", + + }); + listdata.Add(new + { + id = 7, + name = "Brazil", + hasChild = true + }); + listdata.Add(new + { + id = 8, + pid = 7, + name = "Paraná" + }); + listdata.Add(new + { + id = 9, + pid = 7, + name = "Ceará" + }); + listdata.Add(new + { + id = 10, + pid = 7, + name = "Acre" + }); + listdata.Add(new + { + id = 11, + name = "China", + hasChild = true + }); + listdata.Add(new + { + id = 12, + pid = 11, + name = "Guangzhou" + }); + listdata.Add(new + { + id = 13, + pid = 11, + name = "Shanghai" + }); + listdata.Add(new + { + id = 14, + pid = 11, + name = "Beijing" + }); + listdata.Add(new + { + id = 15, + pid = 11, + name = "Shantou" + + }); + listdata.Add(new + { + id = 16, + name = "France", + hasChild = true + + }); + listdata.Add(new + { + id = 17, + pid = 16, + name = "Pays de la Loire" + + }); + listdata.Add(new + { + id = 18, + pid = 16, + name = "Aquitaine" + + }); + listdata.Add(new + { + id = 19, + pid = 16, + name = "Brittany" + + }); + listdata.Add(new + { + id = 20, + pid = 16, + name = "Lorraine" + }); + listdata.Add(new + { + id = 21, + name = "India", + hasChild = true + + }); + listdata.Add(new + { + id = 22, + pid = 21, + name = "Assam" + + }); + listdata.Add(new + { + id = 23, + pid = 21, + name = "Bihar" + }); + listdata.Add(new + { + id = 24, + pid = 21, + name = "Tamil Nadu" + + }); + ViewBag.dataSource = listdata; + return View(); + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/tagHelper b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/tagHelper new file mode 100644 index 0000000000..9d238a9beb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/customization/self-referential/tagHelper @@ -0,0 +1,42 @@ +@{ + ..... + List listdata = new List + { + new { id = 1, name = "Australia", hasChild = true, expanded = true }, + new { id = 2, pid = 1, name = "New South Wales" }, + new { id = 3, pid = 1, name = "Victoria", + htmlAttributes = new Dictionary { + { "class", "child-node" }, + }}, + new { id = 4, pid = 1, name = "South Australia" }, + new { id = 6, pid = 1, name = "Western Australia" }, + new { id = 7, name = "Brazil", hasChild = true }, + new { id = 8, pid = 7, name = "Paraná" }, + new { id = 9, pid = 7, name = "Ceará" }, + new { id = 10, pid = 7, name = "Acre" }, + new { id = 11, name = "China", hasChild = true }, + new { id = 12, pid = 11, name = "Guangzhou" }, + new { id = 13, pid = 11, name = "Shanghai" }, + new { id = 14, pid = 11, name = "Beijing" }, + new { id = 15, pid = 11, name = "Shantou" }, + new { id = 16, name = "France", hasChild = true }, + new { id = 17, pid = 16, name = "Pays de la Loire" }, + new { id = 18, pid = 16, name = "Aquitaine" }, + new { id = 19, pid = 16, name = "Brittany" }, + new { id = 20, pid = 16, name = "Lorraine" }, + new { id = 21, name = "India", hasChild = true }, + new { id = 22, pid = 21, name = "Assam" }, + new { id = 23, pid = 21, name = "Bihar" }, + new { id = 24, pid = 21, name = "Tamil Nadu" } + }; +} + + + + + + diff --git a/ej2-asp-core-mvc/treeview/style.md b/ej2-asp-core-mvc/treeview/style.md new file mode 100644 index 0000000000..f79e8265fc --- /dev/null +++ b/ej2-asp-core-mvc/treeview/style.md @@ -0,0 +1,118 @@ +--- +layout: post +title: Styles and Appearance in ##Platform_Name## TreeView component | Syncfusion +description: Checkout and learn here all about styles and appearance in Syncfusion ##Platform_Name# TreeView component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: TreeView +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Styles and Appearance in ##Platform_Name## TreeView Component + +The following content provides the exact CSS structure that can be used to modify the component's appearance based on the user preference. + +## Customizing the height of TreeView nodes + +Use the following CSS to customize the TreeView nodes. + +```css +.e-treeview .e-list-item { + line-height: 45px; +} +.e-treeview .e-fullrow { + height: 45px; +} +``` + +## Customizing the text of TreeView nodes + +Use the following CSS to customize the text of TreeView nodes. + +```css +.e-treeview .e-list-text { + font-weight: bold; + color:yellow !important; +} +``` + +## Customizing the TreeView expand and collapse icons + +Use the following CSS to customize the TreeView expand and collapse icons. + +```css +.e-treeview .e-icon-expandable { + color: red; +} +.e-treeview .e-icon-collapsible { + color: black; +} +``` + +## Customizing the TreeView checkboxes + +Use the following CSS to customize the TreeView checkboxes. + +```css +.e-checkbox-wrapper .e-frame { + border:aqua solid 2px !important; + border-radius: 50% !important; +} +.e-checkbox-wrapper:hover .e-frame{ + border:black solid 2px !important; + border-radius:50% !important; +} +``` +## Customizing the TreeView nodes based on levels + +Use the following CSS to customize the TreeView nodes based on levels. + +```css +.e-treeview .e-level-2 > .e-text-content { + border: 1px solid black; + background: #ffe800b5 !important; +} +``` + +## Customizing the TreeView using HtmlAttributes + +{% if page.publishingplatform == "aspnet-core" %} + +The [HtmlAttributes](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Navigations.TreeViewFieldsSettings.html#Syncfusion_EJ2_Navigations_TreeViewFieldsSettings_HtmlAttributes) property of the TreeView component allows you to define a mapping field for applying custom HTML attributes to individual TreeView nodes. + +By using attributes, you can customize specific nodes effectively. For instance, in the given example, a 'child-node' class is added to a specific node, allowing you to customize the corresponding node via CSS. + +```css +.child-node { + font-weight: bold; +} +``` + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/treeview/customization/self-referential/tagHelper %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + + +The [HtmlAttributes](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Navigations.TreeViewFieldsSettings.html#Syncfusion_EJ2_Navigations_TreeViewFieldsSettings_HtmlAttributes) property of the TreeView component allows you to define a mapping field for applying custom HTML attributes to individual TreeView nodes. + +By using attributes, you can customize specific nodes effectively. For instance, in the given example, a 'child-node' class is added to a specific node, allowing you to customize the corresponding node via CSS. + +```css +.child-node { + font-weight: bold; +} +``` + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/treeview/customization/self-referential/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Selfreferential.cs" %} +{% include code-snippet/treeview/customization/self-referential/selfreferential.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index a9cc6b426d..58d3a0e09f 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -3134,6 +3134,7 @@
  • Drag and Drop
  • Template
  • Accessibility
    • +
  • Styles and Appearance
  • How To