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/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..475809b432 --- /dev/null +++ b/ej2-asp-core-mvc/treeview/how-to/assign-url-to-node.md @@ -0,0 +1,83 @@ +--- +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-asp-core-mvc +control: ej2-asp-core-mvc +documentation: ug +domainurl: ##DomainURL## +--- + +# Navigation in ##Platform_Name## TreeView Component + +{% if page.publishingplatform == "aspnet-core" %} + + +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" %} +{% 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" %} + +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" %} +{% 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 %} + + +## 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 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