2X faster development
The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
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, |
2X faster development
The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.