How to pass additional parameter to server-side using addParams dynamically in Tree Grid

3 mins read

This Knowledge base explains how to pass additional parameter to server-side dynamically when using DataManager in Tree Grid

Solution: -

This can be achieved using addParams method of query property of Tree Grid component. In “actionBegin” event of Tree Grid we have passed the additional parameter value to the server side (Controller side) using addParams method of query property in dynamic way.

This is explained in the following sample code in which we have passed the selected value of ComboBox as parameter to server side.

Razor

<ejs-combobox id="games" dataSource="@ViewBag.data" placeholder="Select a game" index="2" popupHeight="230px" change="valueChange">
</ejs-combobox>
 
<ejs-treegrid id="TreeGrid" idMapping="TaskId" parentIdMapping="ParentId" hasChildMapping="isParent" treeColumnIndex="1" actionBegin="begin">
   <e-data-manager url="/Home/DataSource" adaptor="UrlAdaptor"></e-data-manager>
      <e-treegrid-columns>
            <e-treegrid-column field="TaskId" headerText="ID" isPrimaryKey="true" textAlign="Left" width="40"></e-treegrid-column>
            <e-treegrid-column field="TaskName" headerText="Name" textAlign="Left" width="95"></e-treegrid-column>
            <e-treegrid-column field="Duration" headerText="Tag Data" textAlign="Left" width="95"></e-treegrid-column>
        </e-treegrid-columns>
</ejs-treegrid>

MVC

@Html.EJS().ComboBox("games").Placeholder("Select a game").PopupHeight("230px").Index(2).Change("valueChange").DataSource((IEnumerable<object>)ViewBag.data).Render()
 
@(Html.EJS().TreeGrid("TreeGrid")
       .DataSource(dataManager => {            dataManager.Url("/Home/Datasource").Adaptor("UrlAdaptor"); })
      .HasChildMapping("isParent").IdMapping("TaskID").ParentIdMapping("ParentId")
      .Columns(col =>{
              col.Field("TaskId").HeaderText("ID").Width(40).TextAlign(TextAlign.Left).Add();
              col.Field("TaskName").HeaderText("Name").Width(95). TextAlign(TextAlign.Left).Add();
                col.Field("Duration").HeaderText("Tag Data").Width(95). TextAlign(TextAlign.Left).Add();
  })
 .TreeColumnIndex(1).ActionBegin("begin")
 .Render())

JS Code for change event

In the “change” event of ComboBox we have get the selected value and pass the value to actionBegin event. It hits to the server end while on updating new dataSource or performing any action.

<script>
    function valueChange(args) {
         value = args.value;   //pass the selected value as param 
           var grid = document.querySelector('#TreeGrid').ej2_instances[0];
             grid.dataSource = new ej.data.DataManager({
                url: "/Home/DataSource",
                adaptor: new ej.data.UrlAdaptor(),   
            });
        }
</script>

JS Code for action-begin event

In “actionBegin” event of grid we have passed the additional parameter value to the server side (Controller side) using addParams method from comboBox’s change event.

<script>
   var value;
    function begin(args) {
     if (!ej.base.isNullOrUndefined(value) && !ej.base.isNullOrUndefined(args.requestType)) {
             if (this.query.params.length > 1)
                this.query.params[1].value = value;   // If it is already present, replace with dynamic values
              else
               this.query.addParams("NewName", value);  // pass params through addParams method
           } 
        }
</script>

In server side we need to Inherit the DataManageRequest class and shown the additional parameter value in Syncfusion DataManager class itself.

CodeBehind for .NETCore

public class ExtendedDataManagerRequest : DataManagerRequest     
    {
       public string NewName { get; set; }             //inherit the class to show NewName as property of DataManager
    }

Bind the data manager value using the inherited class name “ExtendedDataManagerRequest”

    public class HomeController : Controller
    {
        public IActionResult Index()
        {
             ViewBag.data = new string[] { "Cricket", "Football" };  //bind dataSource for ComboBox
            return View();
        }
       public IActionResult DataSource([FromBody]ExtendedDataManagerRequest dm)
        {
            IEnumerable<TreeData> DataSource;
            if (dm.NewName == "Cricket") { 
               DataSource = TreeData.GetSelfData().Take(3);
            }
            else
              DataSource = TreeData.GetSelfData();
            DataOperations operation = new DataOperations();
            
            var count = TreeData.GetSelfData().Count();
            if (dm.Skip != 0)
            {
                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging
            }
            if (dm.Take != 0)
            {
                DataSource = operation.PerformTake(DataSource, dm.Take);
            }
 
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
 
        }
}

CodeBehind for .NETMVC

public class ExtendedDataManagerRequest : DataManagerRequest {  //inherit the class to show NewName as property of DataManager 
            public string NewName { get; set; }
}

 public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.data = new string[] { "Cricket", "Football" };
            return View();
        }     
         public ActionResult Datasource(ExtendedDataManagerRequest dm)
        {
            IEnumerable<TreeData> DataSource;
            if (dm.NewName == "Cricket")
            {
                DataSource = TreeData.GetSelfData().Take(3);
            }
            else
                DataSource = TreeData.GetSelfData();
 
            DataOperations operation = new DataOperations();
            
            var count = DataSource.ToList<TreeData>().Count();
            if (dm.Skip != 0)
            {
                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging
            }
            if (dm.Take != 0)
            {
                DataSource = operation.PerformTake(DataSource, dm.Take);
            }
 
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
       
      }  
}

Output :-

Pass parameter in dynamic way