[Solved] clicking treeview node to display

[Howard]

Hi,

I am trying to pass partial view to display info when clicked to nodes in my treeview. Below is my code but i getting difficulty to do so, please need help.


<script type="text/javascript"> 
 function TreeView_check(e) {

 var treeview = $('#TreeView').data('tTreeView');

    $('<p>')

      url: "@Url.Action("Transmission", "ReferenceFiles")
     .prependTo('#Log')

     .show('slow');

  

    }

 </script>
<div style="width:10%;">
@(Html.Telerik().TreeView()

.Name(

"TreeView")

 .ClientEvents(events => events

 .OnSelect("TreeView_check"))

 .Items(item =>

     {

    item.Add()

        .Text("Home")
        .Items(subItem =>

     {

    subItem.Add()

       .Text("Account").Action("Transmission", "ReferenceFiles");

    subItem.Add()

       .Text("Product").Action("ProductItem", "ReferenceFiles");

    subItem.Add()

       .Text("Supplier").Action("SupplierItem", "ReferenceFiles");

    });

})

)

</div>
<div id="Log">

</div>

[Alex Gyoshev]

Hello Niroj,

The snippet in your message is invalid JavaScript. This forum is for component-related questions, not for general JavaScript help. You can refer to the jQuery documentation on how to perform AJAX requests to the server and render them on the page.

All the best,
Alex Gyoshev
the Telerik team

[Howard]

Hi Alex,

Ok thank you for letting me know.
Is there anyother way in telerik component, without using javascript, that i can load annother partial view onclick to the treeview nodes.

Help will be appriciated.
thanks,
Regards

[Atanas Korchev]

Hello, 

There are two ways to display a view when a tree node is clicked:

1. Set the Action of the node to specify the action which should be invoked when that node is clicked.  
2. Use the OnSelect event and JavaSript to load a partial view using ajax. The link provided in our previous reply is a good start.

If you don't want to use JavaScript then option 1) is the answer.

All the best,
Atanas Korchev
the Telerik team

[Howard]

Hi Atanas,

I did as you said but it didn't work. I got the error message and have attached the error message below.

In the error message if i click "ignore" than only it works. I have coded as below.

1. Controller
   

public ActionResult Transmission()

 { 

ReferencesFiles _ReferencesFiles = new ReferencesFiles();
var _transmission = _ReferencesFiles.Transmission().First();
return PartialView("_PFLTransmission", _transmission);

 }

[GridAction]

 public ActionResult _Transmission()

 {

 ReferencesFiles _ReferencesFiles = new ReferencesFiles();

 var _transmission = _ReferencesFiles.Transmission();

 return PartialView(new GridModel { Data = _transmission });

}

2. Partial view

 <script type="text/javascript">

 function TreeView_check(e) {

 var treeview = $('#TreeView').data('tTreeView');

 if(treeview.getItemText(e.item) == "Transmission"){

 $('#Log').load("@Url.Action("Transmission", "ReferenceFiles")");

}

  </script>

 <table style="width: 100%;">

 <tr>

 <td>

 @(Html.Telerik().TreeView()

.Name("TreeView") 
        .ClientEvents(events => events

        .OnSelect("TreeView_check") )

 .Items(item =>

{

item.Add()

.Text("Fleet")
.Items(subItem =>

{

subItem.Add()

    .Text("Transmission");

 subItem.Add()

    .Text("Locations");

 });

 })

)</td>

     <td id="Log" style="border:1px solid #333; width:90%;">

     </td>

 </tr>

</table>

 

 3. Partial view that i am trying to display when clicked to node "Transmission"

 

@(Html.Telerik().Grid<PFLTransmissionModel>()

 .Name("PFLTransmission")

 .Sortable(sorting => sorting.Enabled(true))

 .Pageable(paging => paging.Enabled(true).PageSize(10)) .Footer(true)

 .DataKeys(keys => keys.Add(t => t.TRANSMISSION_ID))

.DataBinding(dataBinding => dataBinding.Ajax().Select("_Transmission", "ReferenceFiles"))

 .Reorderable(reorder => reorder.Columns(true))

 .Columns(columns =>

{

columns.Bound(t => t.TRANSMISSION_USER_CODE).Title("Index");

columns.Bound(t => t.USER_CREATE).Title("Create user");

 columns.Bound(t => t.USER_LAST_UPDATE).Title("Create Date");

 columns.Bound(t => t.TIME_LAST_UPDATE).Title("Create User");

 

})

)

[Daniel]

Hi Niroj,

I tried reproducing the error you wrote about but everything works fine on my side.
I attached a project which loads a Partial View with a Grid when a TreeView node is clicked. Could you check it and see if missed something?


All the best,
Daniel
the Telerik team