Category / Section
How to change the dataSource dynamically using web API?
1 min read
TreeGrid allows us to access the data source using Web API adaptor. To create the sample using Web API, we need to add the controller as “Web API” controller. Please refer the code snippet below.
C#
public class DefaultController : ApiController
{
// GET api/<controller>
public PageResult<Treegrid> Get(ODataQueryOptions opts)
{
TaskDetailsCollection TaskCollection = new TaskDetailsCollection();
List<Treegrid> emp = TaskCollection.GetDataSource();
return new PageResult<Treegrid>(opts.ApplyTo(emp.AsQueryable()) as IEnumerable<Treegrid>, null, emp.Count);
}
};
We can also change the Data source dynamically in “setModel” while accessing the data source using Web API, please refer the following code snippet
HTML
<div id="angulartreegrid" ej-treegrid
//…
></div>
<script>
var dataManager = ej.DataManager({ url: 'api/Default', adaptor: newej.WebApiAdaptor() });
var query = ej.Query().take(2);
var execute = dataManager.executeQuery(query) // executing query
.done(function (e) {
secondSource = e.result;
});
angular.module('listCtrl', ['ejangular'])
.controller('TreeGridCtrl', function ($scope) {
$scope.selectedRow = 1;
$scope.template = "descriptionTemplate";
$scope.data = dataManager;
$scope.columns = columns;
});
$("#datasource").click(function () {
var obj = $("#angulartreegrid").data("ejTreeGrid");
obj.option("dataSource", secondSource);
})
</script>
[Model.cs]
public class TaskDetailsCollection
{
public List<Treegrid> GetDataSource()
{
List<Treegrid> tasks = new List<Treegrid>();
tasks.Add(new Treegrid()
{
TaskID = 1,
TaskName = "Planning",
StartDate = "02/03/2014",
EndDate = "02/07/2014",
Priority = "Normal",
});
//…
}
}
A TreeGrid sample using web API adaptor is available in the following link,
