how can I load the datasource from an ajax method,?

Question

HII would like to know how can I load the datasource in a tree map from an ajax method,  I do not have a load method available or a method to create or pre-render.

Dharanidharan Dharmasivam · Answer

Hi Neider,

Greetings from Syncfusion.

We have analyzed your query and prepared sample based on your requirement. As of now, treemap is not having support for load event. In onchange event of checkbox or dropdown or button(click event) and load event of the page you can get the data from ajax method and bind this data as datasource for treemap. Please check the below code example.

<button onclick="getData()">Populate Treemap</button>

function getData() {

$.ajax({

url: '@Url.Action("GetTreemapData", "Home")',

content: 'text/html',

data: { },

success: function (result) {

var treemap = $("#treemap").ejTreeMap("instance");

treemap.model.dataSource = result;

treemap.refresh();

}

});

}

public ActionResult GetTreemapData()

{

List<TreeMapPopulationData> result = TreeMapPopulationData.GetData();

return Json(result, JsonRequestBehavior.AllowGet);

}

public class TreeMapPopulationData

{

public string Continent { get; set; }

public string Country { get; set; }

public int Growth { get; set; }

public long Population { get; set; }

public static List<TreeMapPopulationData> GetData()

{

List<TreeMapPopulationData> pop = new List<TreeMapPopulationData>();

pop.Add(new TreeMapPopulationData() { Continent = "Asia", Country = "Indonesia", Growth = 3, Population = 237641326 });

//....

return pop;

}

In the above code, we have called the “GetTreemapData” in the button click event using “ajax” postback. Data from ajax postback is assigned to treemap datasource and refreshed. Find the output while running the sample.

After clicking Populate Treemap button.

In the below link, we have attached sample for your reference.

Sample link: treemap-sample

Thanks,

Dharani.