TreeView in PartialView

[Andrea Perazzolo]

Hi,

I have the necessity to load the tree via Ajax inside a PartialView with a call like this

<div id="treeContainer">
 
</div>

function btnClick(e) {
    var wp = $("#target").data("ejWaitingPopup");
 
 
    wp.show();
 
    var ddlBudget = $("#ddlBudget").data("ejDropDownList");
    var curBudgetId = ddlBudget.getSelectedValue();
 
 
    $("#treeContainer").load('@Url.Action("LoadCpmsBudget")', { idBudget: curBudgetId },completeLoadBudget );
 
    //setTimeout(success, 5000);
 
}

In the Partial view File I have put only the TreeView Object

The result is that there aren't on the <li> nodes the styles that are needed to render the tree correctly 

File

• New
• Open
• Save
• Save As
• Print Preview
• Print
• Close

If I put the same Call inside the Main View, the tree is rendered correctly.

I need anything else in the PartialView

I really need to load the Tree in this way, and not put inside the Main View.

Or maybe there is an alternative?

  Thanks

Andrea Perazzolo

[Andrea Perazzolo]

Sorry I posted in the Wrong forum, in ASP NET instead of MVC.

Could you please move?

I have been able to show the correct styles doing an explicit call to the

$("#tree").ejTreeView()

after loading the partial View html

This works when I have defined the items directly in the EJ().TreeView Helper

If I use the DataSource with local data in the Partial View, it will not build (There is only the container div)

The same line, putted directly in the main View Works correctly.

As I asked before: am I missing any step? Need to call some explicit javascript when rendered in Partial View?

[Harikrishnan P]

Hi Andrea,

Thanks for using Syncfusion products.

Query: This works when I have defined the items directly in the EJ().TreeView Helper. If I use the DataSource with local data in the Partial View, it will not build (There is only the container div)

While using AJAX or dynamic page updates, the HTML element will not automatically converted into JS components. So, we need to re-init the container in which we are going to load the component. Please refer the below code,

 

<script>

    function load() {

        $("#treeContainer").load('@Url.Action("Music")', function () {

            ej.widget.init($("#treeContainer"));

        });

    }

</script>

 

 

Also, we have prepared a sample to showcase your requirement. Please download the sample from the following location

http://www.syncfusion.com/downloads/support/directtrac/131251/WebApplication61695399235.zip

To know more about the unobtrusive support, and AJAX/dynamic page updates please refer the below link

http://help.syncfusion.com/ug/js/documents/ajaxdynamicpageupdat.htm

You can find the getting started documentations for MVC components and the “concepts and features” of each components from the following link

http://help.syncfusion.com/web

Also, we have moved this forum thread under ASP.NET MVC platform.

Please let us know if you have further queries.

Regards,

HariKrishnan

[Andrea Perazzolo]

Hi Andrea,

Thanks for using Syncfusion products.

Query: This works when I have defined the items directly in the EJ().TreeView Helper. If I use the DataSource with local data in the Partial View, it will not build (There is only the container div)

While using AJAX or dynamic page updates, the HTML element will not automatically converted into JS components. So, we need to re-init the container in which we are going to load the component. Please refer the below code,

 

<script>

    function load() {

        $("#treeContainer").load('@Url.Action("Music")', function () {

            ej.widget.init($("#treeContainer"));

        });

    }

</script>

 

 

Also, we have prepared a sample to showcase your requirement. Please download the sample from the following location

http://www.syncfusion.com/downloads/support/directtrac/131251/WebApplication61695399235.zip

To know more about the unobtrusive support, and AJAX/dynamic page updates please refer the below link

http://help.syncfusion.com/ug/js/documents/ajaxdynamicpageupdat.htm

You can find the getting started documentations for MVC components and the “concepts and features” of each components from the following link

http://help.syncfusion.com/web

Also, we have moved this forum thread under ASP.NET MVC platform.

Please let us know if you have further queries.

Regards,

HariKrishnan

Hi,

Thanks for the reply.

I was able to make work your example in my code.

I had turned unobtrusive  support off because it was specified in the documentation for the projects that contains Maps

I turned on the support to make the Tree reload work, but now I have the following error in a page that contains a Map:

Unhandled exception at line 10, column 3429 in http://localhost:10355/Scripts/ej/ej.unobtrusive.min.js

0x800a03f1 - Errore di run-time di JavaScript: Previsto '}'

Are there workarounds for this problem?

   Thanks

   Andrea Perazzolo

[Andrea Perazzolo]

Hi,

I resolved my problem with Unobtrusive support.

The problem was that I had a corrupt WorldMap.json file.

In the non Obtrusive mode, the data was read even if the file was corrupt, in the other there was a javascript error because the data is merged with code.

   Thanks for all

[Andrea Perazzolo]

After investigating further I noticed that in the WorldMap.json file that not worked there is "Ivory Coast" with "name": "Côte d'Ivoire"

The ' character make the unobtrusive inclusion not working.

[Mohana V]

Hi Andrea,

 

Thanks for your update.

 

We have analyzed the above query and found that in Unobstrusive mode special characters(') will not parse properly causing error in sample.

 

So, we have modified WorldMap.json file in order to render WorldMap data without any error.

 

Please find the modified WorldMap.json file

 

WorldMap.zip

 

Please let us know in case of any queries.

 

Regards,

Mohana V