From ad99825962b4d07a6c78eeacd89ee4afcb10a047 Mon Sep 17 00:00:00 2001 From: Saravanan-sf4375 <154953221+Saravanan-sf4375@users.noreply.github.com> Date: Mon, 14 Jul 2025 17:19:47 +0530 Subject: [PATCH 1/3] 911643: Added UG documentation for node navigation in Treeview component --- .../navigate-url-node-cs1/node-url-core.cs | 52 ++++++++++++++++++ .../navigate-url-node-cs1/node-url-mvc.cs | 54 +++++++++++++++++++ .../how-to/navigate-url-node-cs1/razor | 3 ++ .../how-to/navigate-url-node-cs1/tagHelper | 3 ++ .../treeview/how-to/assign-url-to-node.md | 38 +++++++++++++ ej2-asp-core-toc.html | 1 + ej2-asp-mvc-toc.html | 1 + 7 files changed, 152 insertions(+) create mode 100644 ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/node-url-core.cs create mode 100644 ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/node-url-mvc.cs create mode 100644 ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/razor create mode 100644 ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/tagHelper create mode 100644 ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md diff --git a/ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/node-url-core.cs b/ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/node-url-core.cs new file mode 100644 index 0000000000..b3c161cbad --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/node-url-core.cs @@ -0,0 +1,52 @@ +public IActionResult CheckBox() + { + List treedata = new List(); + treedata.Add(new + { + Id = 1, + Name = "Vue", + HasChild = true, + Expanded = true, + NavigateUrl: 'https://ej2.syncfusion.com/vue/documentation/treeview/getting-started' + }); + treedata.Add(new + { + Id = 2, + Pid = 1, + Name = "JavaScript", + NavigateUrl: 'https://ej2.syncfusion.com/javascript/documentation/treeview/es5-getting-started' + + }); + treedata.Add(new + { + Id = 3, + Pid = 1, + Name = "ASP.NET Core", + NavigateUrl: 'https://ej2.syncfusion.com/aspnetcore/documentation/treeview/getting-started', + }); + + treedata.Add(new + { + Id = 4, + Name: 'Angular', + HasChild: true, + NavigateUrl: 'https://ej2.syncfusion.com/angular/documentation/treeview/getting-started', + }); + treedata.Add(new + { + Id: 5, + Pid: 4, + Name: 'Blazor', + NavigateUrl: 'https://blazor.syncfusion.com/documentation/treeview/getting-started-webapp', + + }); + treedata.Add(new + { + Id: 6, + Pid: 4, + Name: 'React', + NavigateUrl:'https://ej2.syncfusion.com/react/documentation/treeview/getting-started', + }); + ViewBag.dataSource = treedata; + return View(); + } diff --git a/ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/node-url-mvc.cs b/ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/node-url-mvc.cs new file mode 100644 index 0000000000..175e507000 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/node-url-mvc.cs @@ -0,0 +1,54 @@ +using Syncfusion.EJ2.Navigations; + +public ActionResult CheckBox() +{ + List treedata = new List(); + treedata.Add(new + { + Id = 1, + Name = "Vue", + HasChild = true, + Expanded = true, + NavigateUrl: 'https://ej2.syncfusion.com/vue/documentation/treeview/getting-started' + }); + treedata.Add(new + { + Id = 2, + Pid = 1, + Name = "JavaScript", + NavigateUrl: 'https://ej2.syncfusion.com/javascript/documentation/treeview/es5-getting-started' + + }); + treedata.Add(new + { + Id = 3, + Pid = 1, + Name = "ASP.NET Core", + NavigateUrl: 'https://ej2.syncfusion.com/aspnetcore/documentation/treeview/getting-started', + }); + + treedata.Add(new + { + Id = 4, + Name: 'Angular', + HasChild: true, + NavigateUrl: 'https://ej2.syncfusion.com/angular/documentation/treeview/getting-started', + }); + treedata.Add(new + { + Id: 5, + Pid: 4, + Name: 'Blazor', + NavigateUrl: 'https://blazor.syncfusion.com/documentation/treeview/getting-started-webapp', + + }); + treedata.Add(new + { + Id: 6, + Pid: 4, + Name: 'React', + NavigateUrl:'https://ej2.syncfusion.com/react/documentation/treeview/getting-started', + }); + ViewBag.dataSource = treedata; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/razor b/ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/razor new file mode 100644 index 0000000000..e36b18b275 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/razor @@ -0,0 +1,3 @@ +@Html.EJS().TreeView("treedata").Fields(field=> + field.Id("Id").ParentID("Pid").Text("Name").HasChildren("HasChild").Expanded("Expanded").NavigateUrl("NavigateUrl") + .DataSource(ViewBag.dataSource)).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/tagHelper new file mode 100644 index 0000000000..4f634931eb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/how-to/navigate-url-node-cs1/tagHelper @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md b/ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md new file mode 100644 index 0000000000..93d6f401ae --- /dev/null +++ b/ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md @@ -0,0 +1,38 @@ +--- +layout: post +title: How to Assign URLs to TreeView Nodes in ##Platform_Name## TreeView component | Syncfusion +description: Learn here all about Assign URLs to specific nodes in Syncfusion ##Platform_Name## TreeView component of Syncfusion Essential JS 2 and more. +platform: ej2-vue +control: ej2-asp-core-mvc +documentation: ug +domainurl: ##DomainURL## +--- + +# How to Assign URLs to TreeView Nodes in TreeView component + +{% if page.publishingplatform == "aspnet-core" %} + +You can able to assign url to the nodes of TreeView by using [NavigateUrl](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Navigations.TreeViewFieldsSettings.html#Syncfusion_EJ2_Navigations_TreeViewFieldsSettings_NavigateUrl) in field property. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/treeview/how-to/navigate-url-node-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Nodecheck.cs" %} +{% include code-snippet/treeview/how-to/navigate-url-node-cs1/node-url-core.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +You can able to assign url to the nodes of TreeView by using [NavigateUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Navigations.TreeViewFieldsSettings.html#Syncfusion_EJ2_Navigations_TreeViewFieldsSettings_NavigateUrl) in field property. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/treeview/how-to/navigate-url-node-cs1/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Nodecheck.cs" %} +{% include code-snippet/treeview/how-to/navigate-url-node-cs1/node-url-mvc.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index f802400187..2bd04db4cb 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -3142,6 +3142,7 @@
  • Customize The Tree Nodes Based On Levels
  • Restrict The Drag-and-Drop For Particular Tree Nodes
  • Nodes manipulation
    • +
  • Assign navigate URL to nodes
  • Migration From Essential JS 1
    • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index fb6818fd8c..19be69b913 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -3109,6 +3109,7 @@
  • Customize The Tree Nodes Based On Levels
  • Restrict The Drag-and-Drop For Particular Tree Nodes
  • Nodes manipulation
    • +
  • Assign navigate URL to nodes
  • Migration From Essential JS 1
    • From b010185c33374b1baa1c7bf03d31922f0f730716 Mon Sep 17 00:00:00 2001 From: Saravanan-sf4375 <154953221+Saravanan-sf4375@users.noreply.github.com> Date: Mon, 14 Jul 2025 17:20:50 +0530 Subject: [PATCH 2/3] 911643: Added UG documentation for node navigation in Treeview component --- ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md b/ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md index 93d6f401ae..09487d52f1 100644 --- a/ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md +++ b/ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md @@ -1,6 +1,6 @@ --- layout: post -title: How to Assign URLs to TreeView Nodes in ##Platform_Name## TreeView component | Syncfusion +title: Assign URLs to Nodes in ##Platform_Name## TreeView component | Syncfusion description: Learn here all about Assign URLs to specific nodes in Syncfusion ##Platform_Name## TreeView component of Syncfusion Essential JS 2 and more. platform: ej2-vue control: ej2-asp-core-mvc From 6a11c73d4b9aac78edaefb0f2450e378a231d426 Mon Sep 17 00:00:00 2001 From: Saravanan-sf4375 <154953221+Saravanan-sf4375@users.noreply.github.com> Date: Wed, 30 Jul 2025 20:55:05 +0530 Subject: [PATCH 3/3] 911643: Added UG for full row navigation --- .../node-url-core.cs | 52 ++++++++++++++++++ .../node-url-mvc.cs | 54 +++++++++++++++++++ .../how-to/fullrownavigate-url-node-cs1/razor | 3 ++ .../fullrownavigate-url-node-cs1/tagHelper | 3 ++ .../treeview/how-to/assign-url-to-node.md | 53 ++++++++++++++++-- 5 files changed, 161 insertions(+), 4 deletions(-) create mode 100644 ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/node-url-core.cs create mode 100644 ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/node-url-mvc.cs create mode 100644 ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/razor create mode 100644 ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/node-url-core.cs b/ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/node-url-core.cs new file mode 100644 index 0000000000..b3c161cbad --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/node-url-core.cs @@ -0,0 +1,52 @@ +public IActionResult CheckBox() + { + List treedata = new List(); + treedata.Add(new + { + Id = 1, + Name = "Vue", + HasChild = true, + Expanded = true, + NavigateUrl: 'https://ej2.syncfusion.com/vue/documentation/treeview/getting-started' + }); + treedata.Add(new + { + Id = 2, + Pid = 1, + Name = "JavaScript", + NavigateUrl: 'https://ej2.syncfusion.com/javascript/documentation/treeview/es5-getting-started' + + }); + treedata.Add(new + { + Id = 3, + Pid = 1, + Name = "ASP.NET Core", + NavigateUrl: 'https://ej2.syncfusion.com/aspnetcore/documentation/treeview/getting-started', + }); + + treedata.Add(new + { + Id = 4, + Name: 'Angular', + HasChild: true, + NavigateUrl: 'https://ej2.syncfusion.com/angular/documentation/treeview/getting-started', + }); + treedata.Add(new + { + Id: 5, + Pid: 4, + Name: 'Blazor', + NavigateUrl: 'https://blazor.syncfusion.com/documentation/treeview/getting-started-webapp', + + }); + treedata.Add(new + { + Id: 6, + Pid: 4, + Name: 'React', + NavigateUrl:'https://ej2.syncfusion.com/react/documentation/treeview/getting-started', + }); + ViewBag.dataSource = treedata; + return View(); + } diff --git a/ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/node-url-mvc.cs b/ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/node-url-mvc.cs new file mode 100644 index 0000000000..175e507000 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/node-url-mvc.cs @@ -0,0 +1,54 @@ +using Syncfusion.EJ2.Navigations; + +public ActionResult CheckBox() +{ + List treedata = new List(); + treedata.Add(new + { + Id = 1, + Name = "Vue", + HasChild = true, + Expanded = true, + NavigateUrl: 'https://ej2.syncfusion.com/vue/documentation/treeview/getting-started' + }); + treedata.Add(new + { + Id = 2, + Pid = 1, + Name = "JavaScript", + NavigateUrl: 'https://ej2.syncfusion.com/javascript/documentation/treeview/es5-getting-started' + + }); + treedata.Add(new + { + Id = 3, + Pid = 1, + Name = "ASP.NET Core", + NavigateUrl: 'https://ej2.syncfusion.com/aspnetcore/documentation/treeview/getting-started', + }); + + treedata.Add(new + { + Id = 4, + Name: 'Angular', + HasChild: true, + NavigateUrl: 'https://ej2.syncfusion.com/angular/documentation/treeview/getting-started', + }); + treedata.Add(new + { + Id: 5, + Pid: 4, + Name: 'Blazor', + NavigateUrl: 'https://blazor.syncfusion.com/documentation/treeview/getting-started-webapp', + + }); + treedata.Add(new + { + Id: 6, + Pid: 4, + Name: 'React', + NavigateUrl:'https://ej2.syncfusion.com/react/documentation/treeview/getting-started', + }); + ViewBag.dataSource = treedata; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/razor b/ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/razor new file mode 100644 index 0000000000..267681098c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/razor @@ -0,0 +1,3 @@ +@Html.EJS().TreeView("treedata").Fields(field=> + field.Id("Id").ParentID("Pid").Text("Name").HasChildren("HasChild").Expanded("Expanded").NavigateUrl("NavigateUrl") + .DataSource(ViewBag.dataSource)).FullRowNavigable(true).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/tagHelper new file mode 100644 index 0000000000..c96d17206a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/tagHelper @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md b/ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md index 09487d52f1..475809b432 100644 --- a/ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md +++ b/ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md @@ -2,17 +2,25 @@ layout: post title: Assign URLs to Nodes in ##Platform_Name## TreeView component | Syncfusion description: Learn here all about Assign URLs to specific nodes in Syncfusion ##Platform_Name## TreeView component of Syncfusion Essential JS 2 and more. -platform: ej2-vue +platform: ej2-asp-core-mvc control: ej2-asp-core-mvc documentation: ug domainurl: ##DomainURL## --- -# How to Assign URLs to TreeView Nodes in TreeView component +# Navigation in ##Platform_Name## TreeView Component {% if page.publishingplatform == "aspnet-core" %} -You can able to assign url to the nodes of TreeView by using [NavigateUrl](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Navigations.TreeViewFieldsSettings.html#Syncfusion_EJ2_Navigations_TreeViewFieldsSettings_NavigateUrl) in field property. + +Using the [`NavigateUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Navigations.TreeViewFieldsSettings.html#Syncfusion_EJ2_Navigations_TreeViewFieldsSettings_NavigateUrl) of the TreeView component, you can navigate from one page to another based on the node selection and link provided in the corresponding nodes. + +To perform navigation in the TreeView component, use and map the `NavigateUrl` field in the data source. + +## Navigation URL binding in ##Platform_Name## TreeView Component + +In the TreeView component, use the [`NavigateUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Navigations.TreeViewFieldsSettings.html#Syncfusion_EJ2_Navigations_TreeViewFieldsSettings_NavigateUrl) property to specify the URL to navigate to when the tree node is selected. + {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -25,7 +33,14 @@ You can able to assign url to the nodes of TreeView by using [NavigateUrl](https {% elsif page.publishingplatform == "aspnet-mvc" %} -You can able to assign url to the nodes of TreeView by using [NavigateUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Navigations.TreeViewFieldsSettings.html#Syncfusion_EJ2_Navigations_TreeViewFieldsSettings_NavigateUrl) in field property. +Using the [`NavigateUrl`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Navigations.TreeViewFieldsSettings.html#Syncfusion_EJ2_Navigations_TreeViewFieldsSettings_NavigateUrl) of the TreeView component, you can navigate from one page to another based on the node selection and link provided in the corresponding nodes. + +To perform navigation in the TreeView component, use and map the `NavigateUrl` field in the data source. + +## Navigation URL binding in ##Platform_Name## TreeView Component + +In the TreeView component, use the [`NavigateUrl`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Navigations.TreeViewFieldsSettings.html#Syncfusion_EJ2_Navigations_TreeViewFieldsSettings_NavigateUrl) property to specify the URL to navigate to when the tree node is selected. + {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -36,3 +51,33 @@ You can able to assign url to the nodes of TreeView by using [NavigateUrl](https {% endhighlight %} {% endtabs %} {% endif %} + + +## Full row navigation in ##Platform_Name## TreeView Component + +{% if page.publishingplatform == "aspnet-core" %} + +The TreeView [`FullRowNavigable`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Navigations.TreeView.html#Syncfusion_EJ2_Navigations_TreeView_FullRowNavigable) property is used to make the entire TreeView node navigable instead of text element in the TreeView component. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Nodecheck.cs" %} +{% include code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/node-url-core.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +The TreeView [`FullRowNavigable`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Navigations.TreeView.html#Syncfusion_EJ2_Navigations_TreeView_FullRowNavigable) property is used to make the entire TreeView node navigable instead of text element in the TreeView component. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Nodecheck.cs" %} +{% include code-snippet/treeview/how-to/fullrownavigate-url-node-cs1/node-url-mvc.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file