We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. Hierarchical Grid Bind Issue

Hierarchical Grid Bind Issue

Hey Guys,

I am using javascript syncfusion controls in MVC VS2015, I have started with ejGrid cotrol. I am able to bind static data as I saw. While I am trying the real scenario which i am having is binding with the model data like example 1. How I can pass model (var dataManager = ej.DataManager({ Model });)data into the dataSource, please refer example 3.

When I am trying to use model data which is on the view page available, I am not able to get those model value and bind into the dataSource. How I can convert those Model data to bind into dataSource of ejGrid. Please help me out.

example 2.
<div id='Grid'></div>

<script type="text/javascript">
$(function () {
var dataManager = ej.DataManager({ @model List <FATODemoModels.ItemHistoryModel>});

$('#Grid').ejGrid({
dataSource: dataManager,
allowPaging: true,
columns:     [
{ field: 'BCN', headerText: "BCN" },
{ field: 'Item_Serial_No', headerText: "Serial No" }
]
                });
});

example:1
On the cshtml page on the top most side declare as model value-
@model List <FATODemoModels.ItemHistoryModel>

Thanks,
Sanjay




15 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team May 4, 2017 11:25 AM UTC

Hi Sanjay,  
 
Thanks for contacting Syncfusion Support.  
 
We could see you would like to bind a Model data to the JavaScript. Grid and DataManager will accept datasource as a JSON Array. So we suggest to serialize them before binding them to the Grid. Refer to the following code example.  
 
<div id='Grid'></div> 
 
 
 
<script type="text/javascript"> 
    var json = @Html.Raw(Json.Encode(Model)); 
 
    $(function () { 
        var dataManager = ej.DataManager(json); 
 
        $('#Grid').ejGrid({ 
            dataSource: dataManager, 
            allowPaging: true, 
            columns: [ 
                { field: 'OrderID', headerText: "BCN" }, 
                { field: 'EmployeeID', headerText: "Serial No" } 
            ] 
        }); 
    }); 
</script> 
 
Datasource to the DataManager can be assigned in the following way also.  
 

 
        var dataManager = ej.DataManager({json: json}); 

 
Regards,  
Seeni Sakthi Kumar S. 


SA sanjay May 4, 2017 07:40 PM UTC

Hi Seeni,

Thanks for help!

I can bind the data into ejGrid. Now my problem is I need format with the data. Please see the Example below table:
Suppose I have 4 columns which is coming from database that is : FirstName,LastName,Descripiton and Empid
1. I need to combine 2 columns in a single header like Name : Sanjay Kumar
2. Also I need to pass some static value with result which is displaying like Description is SSE and TL, I have added static prefix as DES and EMPID for them. also I can pass html tag like <b>DES</b> or <br/>.

Name Description
First Name + Last Name DES: SSE
EmpId : 0001

Currently I am trying as below given, but didn't worked for me.

 $('#ejItemHistoryGrid').ejGrid({
            dataSource: dataManager,   
            allowPaging: true,
            
            columns: [
                {field: 'FirstName' + 'LastName' , headerText: "BCN" },
                { field: "DES:" + 'Descripiton ' + <BR /> "empid:"+ 'empid', headerText: "Descripiton " }
            ]
        });

Please help.

Thanks,
Sanjay


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team May 5, 2017 08:45 AM UTC

Hi Sanjay,  
 
We can achieve your requirement using the column template feature of the Grid. Using this feature, we can place the template as per our wish for the cell. Refer to the Sample demo and Help Documents.  
 
 
Refer to the following code example for your requirement “To concatenate and tabulate different columns in a single cell”. 
 
<script type="text/x-jsrender" id="NameTemplate"> 
    <span>{{: FirstName }} &nbsp; {{: LastName }}</span> 
</script> 
<script type="text/x-jsrender" id="DescTemplate"> 
    <table> 
        <tr><td>Desc:</td><td>{{: Title }}</td></tr> 
        <tr><td>EmpID:</td><td>{{: EmployeeID }}</td></tr> 
    </table> 
</script> 
<div id="Grid"></div> 
<script type="text/javascript"> 
    $(function () { 
        $("#Grid").ejGrid({ 
            dataSource: window.employeeView, 
            allowPaging: true, 
            pageSettings: { pageSize: 4 }, 
            columns: [ 
               { headerText: "Name", template: "#NameTemplate" }, 
               { headerText: "Description", template: "#DescTemplate" } 
            ] 
        }); 
    }); 
</script> 
 
We have prepared a sample that can be referred from the following jsPlayground.  
 
 
Regards,  
Seeni Sakthi Kumar S. 


SA sanjay May 6, 2017 01:21 AM UTC

Hi Seeni,

Now I can change the data format according to my requirement of ejGrid data, as per you guidelines, and thanks for support. I moved into next level of using ejGrid control,
I need to display parent-child type grid and As I see your examples it is Hierarchical bindings. I followed the same, but when I click on expand button then command gets fired and it goes to the controller method to get relevant records but the issue is it is not sending the queryString value. When I checked querystring value it is showing null for action_id which is passed as querystring and for this reason data is not getting for child grid. Data for parent grid is showing to me including the action_id. Please check the code which is below and suggest how I can pass the querystring value to the calling child method.

The cshtml code which I am using is :

<script type="text/javascript">
    $(function () {
        var json = @Html.Raw(Json.Encode(Model));
        var dataManager = ej.DataManager(json);

        var URL = '@Url.Content("~/")' + 'FATOPoC/ComponentsByAction';
        var componentData = ej.DataManager(URL);

      //  alert(componentData);
        $('#ejItemHistoryDefEcoGrid').ejGrid({
            dataSource: dataManager,
            childGrid: {
                dataSource: componentData,
                queryString: "Action_Id",
                allowPaging: true,
                pageSettings: {
                    pageSize: 5
                },
                columns: [
              
              { field: "Issued_Removed",headerText: 'Issue Removed', textAlign: ej.TextAlign.Left,width: 100},
              { field: "Part_Number", headerText: 'Part Number',  textAlign: ej.TextAlign.Left,width: 120},
              { field: "Part_Desc", headerText: 'Part Description', textAlign: ej.TextAlign.Left, width: 100 },
              { field: "Manufacturer_PartNumber", headerText: 'Manufacturer Part no', textAlign: ej.TextAlign.Left, width: 100 },
               { field: "Serial_Number", headerText: 'Serial No', textAlign: ej.TextAlign.Left, width: 100 },
                { field: "Location", headerText: 'Location', textAlign: ej.TextAlign.Left, width: 100 }
                ]
            },


            columns:
                [
                { field: "Action_Id", headerText: 'Action', textAlign: ej.TextAlign.Right, width: 85 },
                    {template: "#DefectTemplate" , headerText: "Defect/Action Detail"},{ field: 'Defect_Note',headerText: "Defect/ECO Note"},
                {template: "#ActionTemplate" , headerText: "Action Detail"},{ field: 'Action_Note',headerText: "Action Note"}
                ],
            allowPaging: true


        });
    });
</script>   

Controller method is:

 public JsonResult ComponentsByAction(string Actionid)
        {
            JsonResult result = new JsonResult();
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            var mUserInfo = Session["UserInfoModel"] as UserInfoModel;
            if (mUserInfo == null || string.IsNullOrEmpty(mUserInfo.UserName))
            {
                return null;
            }
            SubPageViewModel vm = new SubPageViewModel();
            Int32 actionid = Convert.ToInt32(Actionid);
            string UserName = mUserInfo.UserName;

            var CompByAction = FATODEMODAL.DAL.GetAllComponentsByAction(actionid, UserName);
            vm.vmItemHistoryDefectEcoPartDesc = CompByAction;
            result.Data = CompByAction;
            return result;
        }       

Thanks,
Sanjay

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team May 8, 2017 08:43 AM UTC

Hi Sanjay,  
 
We could see you would like to bind data for the Child Grid from the controller action. By default, Grid provides an option to bind the data from the controller action. UrlAdaptor of the DataManager helpful to bind the retrieve the data from the controller. Refer to the following Help Document.  
 
 
To perform various data operations like filtering, sorting and paging at the server end, DataManager provides DataOperations class from the Syncfusion.EJ libraries. Refer to the following KB for various supporting Data Operaions.  
 
 
Using these, we will retrieve the query string in the server-end and based on that data can be filtered. Refer to the following code example and output. 
 
<div id="Grid"></div> 
<script type="text/javascript"> 
    $(function () { 
        var gridData = @Html.Raw(Json.Encode(Model)); 
        var dataManger = ej.DataManager({ 
            url: "/Home/DataSource", 
            adaptor: new ej.UrlAdaptor() 
        }); 
        $("#Grid").ejGrid({ 
            dataSource: gridData, 
              .. . 
                     . . . 
            childGrid: { 
                dataSource: dataManger, 
                allowPaging: true, 
                pageSettings: { 
                    pageSize: 5 
                }, 
                queryString: "EmployeeID", 
                       .. . 
                            . .. 
            }, 
 
        }); 
    }); 
</script> 
 
        public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm) 
        { 
            IEnumerable datasource = new NorthwindDataContext().OrdersViews.ToList(); 
            DataOperations operation = new DataOperations(); 
            if (dm.Where != null) 
            { 
                datasource = operation.PerformWhereFilter(datasource, dm.Where, dm.Where[0].Condition); 
            } 
            int count = datasource.AsQueryable().Count(); ; 
            if (dm.Skip >= 0)//for paging 
                datasource = operation.PerformSkip(datasource, dm.Skip); 
            if (dm.Take > 0)//for paging 
                datasource = operation.PerformTake(datasource, dm.Take); 
            return Json(new { result = datasource, count = count }, JsonRequestBehavior.AllowGet); 
        } 
 
Please make a note that the resultant object of the URL Action method must be wrapped with the text/value pair as shown in the code example. 
 
 
 
 
 
We have also prepared a sample for your reference that can be downloaded from the following location.  
 
 
If you would not like to perform the server-side actions for sorting/grouping/paging, you can populate all the records at the initial render of the Grid by setting the offline as true for the DataManager. In this case, you can return the records alone from the server as follows. In this method, Grid will send the POST for the child Grid at the initial render of the Parent Grid to collect all the records from the server.  
 
        public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm) 
        { 
            IEnumerable datasource = new NorthwindDataContext().ToList(); 
            return Json(datasource, JsonRequestBehavior.AllowGet); 
        } 
 
<div id="Grid"></div> 
<script type="text/javascript"> 
    $(function () { 
        var gridData = @Html.Raw(Json.Encode(Model)); 
        var dataManger = ej.DataManager({ 
            url: "/Home/DataSource", 
            offline: true, 
            adaptor: new ej.UrlAdaptor() 
        }); 
        $("#Grid").ejGrid({ 
            dataSource: gridData, 
                    . ..  
                            . .  
            childGrid: { 
                dataSource: dataManger, 
                queryString: "EmployeeID", 
                    . . . . 
                             . . . 
            }, 
 
        }); 
    }); 
 
</script> 
 
 
 
 
However, if you would like to continue with the load on demand concept, you must return the object as result/count pair. 
 
Regards,  
Seeni Sakthi Kumar S. 


SA sanjay May 8, 2017 02:51 PM UTC

Hi Seeni,

Thanks for help!

I have tried the code you suggested for child grid, but still the querystring value is not able to pass to the controller method. As you suggested,this is mvc server controls bindings but we are not using any sycfusion mvc server side controls, yea I am not sure but when I tried to use  this line (Syncfusion.JavaScript.DataManager dm), it is not showing recognised code for me, may be some reference needs to be add. 

you suggested like :-
Public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm) 
        { 
            IEnumerable datasource = new NorthwindDataContext().OrdersViews.ToList(); 
            DataOperations operation = new DataOperations(); 
            if (dm.Where != null) 
            { 
                datasource = operation.PerformWhereFilter(datasource, dm.Where, dm.Where[0].Condition); 
            } 
            int count = datasource.AsQueryable().Count(); ; 
            if (dm.Skip >= 0)//for paging 
                datasource = operation.PerformSkip(datasource, dm.Skip); 
            if (dm.Take > 0)//for paging 
                datasource = operation.PerformTake(datasource, dm.Take); 
            return Json(new { result = datasource, count = count }, JsonRequestBehavior.AllowGet); 
}

My method in controller is: 
 public JsonResult ComponentsByAction(string Actionid)
        {
            JsonResult result = new JsonResult();
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            var mUserInfo = Session["UserInfoModel"] as UserInfoModel;
            if (mUserInfo == null || string.IsNullOrEmpty(mUserInfo.UserName))
            {
                return null;
            }
            //var mUnitInfoDetails = Session["UnitInfoDetailsModel"] as UnitInfoDetailsModel;
            SubPageViewModel vm = new SubPageViewModel();
            Int32 actionid = Convert.ToInt32(Actionid);
            string UserName = mUserInfo.UserName;
            //var m = FATODEMODAL.DAL.GetAllItemHistory(itemid, UserName);
            //vm.vmItemHistory=m;
            //Session["ItemHistory"] = m;
            var CompByAction = FATODEMODAL.DAL.GetAllComponentsByAction(actionid, UserName);
            vm.vmItemHistoryDefectEcoPartDesc = CompByAction;
            result.Data = CompByAction;
            return result;
            //return PartialView("GetComponentsByAction", vm.vmItemHistoryDefectEcoPartDesc);
        }

Code for cshtml is :

<script>
 $(function () {
    var json = @Html.Raw(Json.Encode(Model));
    var dataManager = ej.DataManager(json);

    var URL = '@Url.Content("~/")' + 'FATOPoC/ComponentsByAction/';
    var componentData = ej.DataManager({url: URL
    });

    $('#ejItemHistoryDefEcoGrid').ejGrid({
        dataSource: dataManager,
        childGrid: {
            dataSource: componentData,
            queryString: "Action_Id",
            columns: [
          { field: "Issued_Removed",headerText: 'Issue Removed', textAlign: ej.TextAlign.Left,width: 100},
          { field: "Part_Number", headerText: 'Part Number',  textAlign: ej.TextAlign.Left,width: 120},
          { field: "Part_Desc", headerText: 'Part Description', textAlign: ej.TextAlign.Left, width: 100 },
          { field: "Manufacturer_PartNumber", headerText: 'Manufacturer Part no', textAlign: ej.TextAlign.Left, width: 100 },
           { field: "Serial_Number", headerText: 'Serial No', textAlign: ej.TextAlign.Left, width: 100 },
            { field: "Location", headerText: 'Location', textAlign: ej.TextAlign.Left, width: 100 }
            ]
        },


        columns:
            [
            { field: "Action_Id", headerText: 'Action', textAlign: ej.TextAlign.Right, width: 85 },
                {template: "#DefectTemplate" , headerText: "Defect/Action Detail"},{ field: 'Defect_Note',headerText: "Defect/ECO Note"},
            {template: "#ActionTemplate" , headerText: "Action Detail"},{ field: 'Action_Note',headerText: "Action Note"}
            ],
        allowPaging: true


    });
    });
</script>

When I saw the traces in network-hearders-request URL, It is showing like this. It added some different parameters as well with Action_Id. you can see it below. 
http://localhost:11952/FATOPoC/ComponentsByAction/?$inlinecount=allpages&$filter=tolower(Action_Id)%20eq%20%27426723489%27&params=[object%20Object]

I need when click on expand button for child grid, the value of querystring will pass to calling method only, currently it adds some other things as well. Please suggest how i can use this using javascript controls and bindings not from the mvc server side controls.

Thanks,
Sanjay


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 9, 2017 05:04 PM UTC

Hi Sanjay, 

If you want to perform server side operations using DataManager, you need to refer our following  “Syncfusion dlls” to work it properly.  So we suggested you to use our mentioned assemblies available from the following  build location. 

Eg : C:\Program Files (x86)\Syncfusion\Essential Studio\15.1.0.41\ precompiledassemblies\15.1.0.41\ 4.0 
  Syncfusion.EJ 
 Syncfusion.Linq.Base 

Refer to the following link:- 

 
As per previous update, Grid provides an option to bind the data from the controller action. UrlAdaptor of the DataManager helpful to bind the retrieve the data from the controller. So we suggested you to use Adaptor for server side operations. If you are using any other adaptors, please get back to us with further details. 

 
Regards, 

Farveen sulthana T

SA sanjay May 9, 2017 05:32 PM UTC

Hi Farveen,

Thanks!
I am looking for use the client side grid control that is ejGrid control, As you suggested earlier. That grid is working fine with one grid but when I am using parent and child grid functionality then child grid is not able to get the data due to querystring value is null. When I saw the Network traces, the URL looks like as below.


Basically it adds few extra things with URL, I want to go only with the querystring val to the controller. My code is as below-

My method in controller is: 
 public JsonResult ComponentsByAction(string Actionid)
        {
            JsonResult result = new JsonResult();
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            var mUserInfo = Session["UserInfoModel"] as UserInfoModel;
            if (mUserInfo == null || string.IsNullOrEmpty(mUserInfo.UserName))
            {
                return null;
            }
            //var mUnitInfoDetails = Session["UnitInfoDetailsModel"] as UnitInfoDetailsModel;
            SubPageViewModel vm = new SubPageViewModel();
            Int32 actionid = Convert.ToInt32(Actionid);
            string UserName = mUserInfo.UserName;
            //var m = FATODEMODAL.DAL.GetAllItemHistory(itemid, UserName);
            //vm.vmItemHistory=m;
            //Session["ItemHistory"] = m;
            var CompByAction = FATODEMODAL.DAL.GetAllComponentsByAction(actionid, UserName);
            vm.vmItemHistoryDefectEcoPartDesc = CompByAction;
            result.Data = CompByAction;
            return result;
            //return PartialView("GetComponentsByAction", vm.vmItemHistoryDefectEcoPartDesc);
        }

Code for cshtml is :

<script>
 $(function () {
    var json = @Html.Raw(Json.Encode(Model));
    var dataManager = ej.DataManager(json);

    var URL = '@Url.Content("~/")' + 'FATOPoC/ComponentsByAction/';
    var componentData = ej.DataManager({url: URL
    });

    $('#ejItemHistoryDefEcoGrid').ejGrid({
        dataSource: dataManager,
        childGrid: {
            dataSource: componentData,
            queryString: "Action_Id",
            columns: [
          { field: "Issued_Removed",headerText: 'Issue Removed', textAlign: ej.TextAlign.Left,width: 100},
          { field: "Part_Number", headerText: 'Part Number',  textAlign: ej.TextAlign.Left,width: 120},
          { field: "Part_Desc", headerText: 'Part Description', textAlign: ej.TextAlign.Left, width: 100 },
          { field: "Manufacturer_PartNumber", headerText: 'Manufacturer Part no', textAlign: ej.TextAlign.Left, width: 100 },
           { field: "Serial_Number", headerText: 'Serial No', textAlign: ej.TextAlign.Left, width: 100 },
            { field: "Location", headerText: 'Location', textAlign: ej.TextAlign.Left, width: 100 }
            ]
        },


        columns:
            [
            { field: "Action_Id", headerText: 'Action', textAlign: ej.TextAlign.Right, width: 85 },
                {template: "#DefectTemplate" , headerText: "Defect/Action Detail"},{ field: 'Defect_Note',headerText: "Defect/ECO Note"},
            {template: "#ActionTemplate" , headerText: "Action Detail"},{ field: 'Action_Note',headerText: "Action Note"}
            ],
        allowPaging: true


    });
    });
</script>

Please suggest me the way to bind child grid as per my cshtml and controller above mentioned.

Thanks,
Sanjay

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team May 10, 2017 09:13 AM UTC

Hi Sanjay, 
 
Since you are using the controller action to bind dataSource to the Grid, we recommended to use the UrlAdaptor in the Grid. So, kindly change datataSource of the Child Grid as follows which is also been posted in our earlier updates.  
 
Mention the adaptor type as the UrlAdaptor in the DataManager that bound to the Child Grid’s dataSource. Otherwise, it will never consider them as controller action. So, recommended to change the code as follows.  
 
<div id="Grid"></div> 
<script type="text/javascript"> 
    $(function () { 
        var gridData = @Html.Raw(Json.Encode(Model)); 
        var dataManger = ej.DataManager({ 
            url: "/Home/DataSource", 
            adaptor: new ej.UrlAdaptor() 
        }); 
        $("#Grid").ejGrid({ 
            dataSource: gridData, 
                   . . . 
                           . . . 
            childGrid: { 
                dataSource: dataManger, 
                allowPaging: true, 
                queryString: "EmployeeID", 
                  . . . 
            }, 
 
        }); 
    }); 
 
</script> 
 
Even, in the controller end, replace the string ActionID as the DataManger instance which can be found from the Syncfusion.EJ libraries. To collect these classes, you must refer the Syncfusion.EJ assemblies in your application.  
 
 
 
        public JsonResult DataSource(Syncfusion.JavaScript.DataManager dm) 
        { 
            IEnumerable datasource = new NorthwindDataContext().OrdersViews.ToList(); 
            DataOperations operation = new DataOperations(); 
            if (dm.Where != null) 
            { 
                datasource = operation.PerformWhereFilter(datasource, dm.Where, dm.Where[0].Condition); 
            } 
            int count = datasource.AsQueryable().Count(); ; 
            if (dm.Skip >= 0)//for paging  
                datasource = operation.PerformSkip(datasource, dm.Skip); 
            if (dm.Take > 0)//for paging  
                datasource = operation.PerformTake(datasource, dm.Take); 
            return Json(new { result = datasource, count = count }, JsonRequestBehavior.AllowGet);  
        } 
 
Since the Grid has been bound with the DataManager, it will send the query string value to the server. It can be collected from the DataManger instance as shown in the above code example. In this, you can see Where property provides the value to be filtered for the Child Grid. Using this, you can filter the data need for the child Grid.  
 
Request to the Server end to bind the Child Grid must be like the image shown below. This can be achieved only by UrlAdaptor. So, recommend to update the necessary changes to the cshtml and code behind. 
 
 
 
 
 
Here, EmployeeID is the query string and its corresponding value has been available from the DataManager instance as shown in the following screenshot.  
 
 
 
 
Regards,  
Seeni Sakthi Kumar S. 


SA sanjay May 11, 2017 06:46 AM UTC

Hi Seeni,

Thanks for Help !

I understand your last reply about the child grid issue. My problem is, How I can send single/multiple values from parent grid to child grid ?

I have already shared the controller and cshtml code. I am not able to change the controller method as you suggested, because my datasource records for child grid depends upon the values which I am sending from parent grid. So please suggest me how I can pass the value from parent grid to child grid, and also how I can get those value in the child grid controller method.

---cshtml :---

<script>

$(function () {

    var json = @Html.Raw(Json.Encode(Model));

    var dataManager = ej.DataManager(json);

    var URL = '@Url.Content("~/")' + 'FATOPoC/ComponentsByAction/';

    var componentData = ej.DataManager({url: URL

    });

    $('#ejItemHistoryDefEcoGrid').ejGrid({

        dataSource: dataManager,

        childGrid: {

            dataSource: componentData,

            adaptor: new ej.UrlAdaptor(),

            queryString: "Action_Id",

            columns: [

          { field: "Issued_Removed",headerText: 'Issue Removed', textAlign: ej.TextAlign.Left,width: 100},

          { field: "Part_Number", headerText: 'Part Number',  textAlign: ej.TextAlign.Left,width: 120},

          { field: "Part_Desc", headerText: 'Part Description', textAlign: ej.TextAlign.Left, width: 100 },

          { field: "Manufacturer_PartNumber", headerText: 'Manufacturer Part no', textAlign: ej.TextAlign.Left, width: 100 },

           { field: "Serial_Number", headerText: 'Serial No', textAlign: ej.TextAlign.Left, width: 100 },

            { field: "Location", headerText: 'Location', textAlign: ej.TextAlign.Left, width: 100 }

            ]

        },

        columns:

            [

            { field: "Action_Id", headerText: 'Action', textAlign: ej.TextAlign.Right, width: 85 },

                {template: "#DefectTemplate" , headerText: "Defect/Action Detail"},{ field: 'Defect_Note',headerText: "Defect/ECO Note"},

            {template: "#ActionTemplate" , headerText: "Action Detail"},{ field: 'Action_Note',headerText: "Action Note"}

            ],

        allowPaging: true

    });

    });

</script>

---Controller:----

 public JsonResult ComponentsByAction(string Actionid)
        {
            JsonResult result = new JsonResult();
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            var mUserInfo = Session["UserInfoModel"] as UserInfoModel;

            SubPageViewModel vm = new SubPageViewModel();
            Int32 actionid = Convert.ToInt32(Actionid);
            string UserName = mUserInfo.UserName;
            var CompByAction = FATODEMODAL.DAL.GetAllComponentsByAction(actionid, UserName);
            vm.vmItemHistoryDefectEcoPartDesc = CompByAction;
            result.Data = CompByAction;
            return result;

        }

-----DAL----

static public List<ItemHistoryDefectEcoPartDescModel> GetAllComponentsByAction(Int32 actionId, string username)

        {

            List<ItemHistoryDefectEcoPartDescModel> ret = new List<ItemHistoryDefectEcoPartDescModel>();

            OracleParameter[] myParams = new OracleParameter[3];

            try

            {

                myParams[0] = new OracleParameter("actionId", OracleDbType.Int32, ParameterDirection.Input);


                myParams[0].Value = Convert.ToInt32(actionId);


                myParams[1] = new OracleParameter("userName", OracleDbType.Varchar2, ParameterDirection.Input);


                myParams[1].Value = Convert.ToString(userName);


                myParams[2] = new OracleParameter("o_cursor", OracleDbType.RefCursor, ParameterDirection.Output);

                DataSet dsReturnData = ODPNETHelper.ExecuteDataset(DBConnectionString, CommandType.StoredProcedure, "ITEMHISTORY_PKG.GetAllComponentsByAction", myParams);


                foreach (DataRow row in dsReturnData.Tables[0].Rows)

                {

                    ret.Add(new ItemHistoryDefectEcoPartDescModel()

                    {

                        Issued_Removed = row[0].ToString(),

                        Part_Number = row[1].ToString(),

                        Part_Desc = row[2].ToString(),

                        Manufacturer_PartNumber = row[3].ToString(),

                        Serial_Number = row[4].ToString(),

                        Location = row[5].ToString()

                    });

                }

            }

            catch (Exception ex)

            {

                throw ex;

            }

            finally

            {

                myParams = null

            }

            return ret;

        }

Please suggest me according.

Thanks,

Sanjay













SA sanjay May 11, 2017 04:50 PM UTC

Hi Seeni,

Thanks for support !
We are trying to use Hierarchical Bindings to create Grid with parent and child relation. We are using remote JSON data and added chilldGrid.queryString as shown below. Web request going out to get data for child grid has oData query in the URL query string. Is it possible to create web request without oData query and just plan query string as below:

Here is the default URL for child grid data : http://localhost:2857/Home/ChildData/?$inlinecount=allpages&$filter=tolower(ID)%20eq%20%271%27

We like to change it to :  http://localhost:2857/Home/ChildData/1

Second question, it is possible to pass more than one parameter. Something like this : http://localhost:2857/Home/ChildData/1/One

 Our client side script :

var url = '@Url.Content("~/")' + 'Home/MasterData/1';

        var dm = ej.DataManager(url);

        var url2 = '@Url.Content("~/")' + 'Home/ChildData';

        var dm2 = ej.DataManager(url2);

        $('#Grid2').ejGrid({

            dataSource: dm,

            columns: ["ID", "Name", "Value"],

            childGrid:

                {

                    dataSource: dm2,

                    queryString: "ID",

                    columns: ["ID", "Name", "Value"]

                }

        });

 Our server side code (ASP.NET MVC) is below :

 public JsonResult MasterData(int id)

        {

            List<MasterModel> x = new List<Models.MasterModel>()

            {

                new Models.MasterModel() { ID = "1", Name = "One", Value=$"One_1_{id}" },

                new Models.MasterModel() { ID = "2", Name = "Two", Value=$"Two_2_{id}" },

                new Models.MasterModel() { ID = "3", Name = "Two", Value=$"Two_3_{id}" }

            };

            return new JsonResult() { Data =  new { result = x }, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

        }

    public JsonResult ChildData(string id)

        {

            List<MasterModel> x = new List<Models.MasterModel>()

            {

                new Models.MasterModel() { ID = "11", Name = "One_One", Value=$"One_One_1_{id}" },

                new Models.MasterModel() { ID = "12", Name = "One_Two", Value=$"One_Two_2_{id}" },

                new Models.MasterModel() { ID = "13", Name = "One_Two", Value=$"One_Two_3_{id}" }

            };

            return new JsonResult() { Data = new { result = x }, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

        }

Thanks,

Sanjay


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 12, 2017 12:55 PM UTC

Hi Sanjay, 

As per our previous update while you are using the controller action to bind dataSource to the Grid, we recommended to use the UrlAdaptor in the Grid. So, kindly change dataSource of the Child Grid into UrlAdaptor.  UrlAdaptor  interacts with server-side for all DataManager Queries and CRUD operations. For binding the remoteData to the grid, you can use service data as an instance of ejDataManager to the “dataSource” property.  
 
Please refer to the code example:- 
 
<script type="text/javascript">  
    $(function () {  
        var gridData = @Html.Raw(Json.Encode(Model));  
        var dataManger = ej.DataManager({  
            url: "/Home/DataSource",  
                adaptor: new ej.UrlAdaptor()  
        });  
        $("#Grid").ejGrid({  
            dataSource: gridData,  
                    . ..   
                            . .   
            childGrid: {  
                dataSource: dataManger,  
                queryString: "EmployeeID",  
                    . . . .  
                             . . .  
            },  
  
        });  
    });  
  
</script>  
 
 
 
Please refer to the Help Document for URL adaptor. 
 

Second question, it is possible to pass more than one parameter. Something like this : http://localhost:2857/Home/ChildData/1/One 

Yes you can pass the additional parameter to the server side like this http://localhost:2857/Home/ChildData/1/One while using Url adaptor. When you see the Network tab, the additional parameter you have passed also will be reflected as per in below screenshot. 

 


Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 


SA sanjay May 15, 2017 02:29 PM UTC

Hi Seeni,

Thanks for help!

You have not sent anything about the controller method which I am using. You have suggested me "Syncfusion.JavaScript.DataManager dm" for the child controller method but that didn't worked for me. Is any other method, which I can use to get the value from parent grid ? While I am using javascript.DataManager, I am not able to manage the child controller method because the value I will get from this I will use this to get data from database for child grid bind. Please suggest me accordingly.

Our client side script :

var url = '@Url.Content("~/")' + 'Home/MasterData/1';

        var dm = ej.DataManager(url);

        var url2 = '@Url.Content("~/")' + 'Home/ChildData';

        var dm2 = ej.DataManager(url2);

        $('#Grid2').ejGrid({

            dataSource: dm,

            columns: ["ID", "Name", "Value"],

            childGrid:

                {

                    dataSource: dm2,

                    queryString: "ID",

                    columns: ["ID", "Name", "Value"]

                }

        });

 Our server side code (ASP.NET MVC) is below :

 public JsonResult MasterData(int id)

        {

            List<MasterModel> x = new List<Models.MasterModel>()

            {

                new Models.MasterModel() { ID = "1", Name = "One", Value=$"One_1_{id}" },

                new Models.MasterModel() { ID = "2", Name = "Two", Value=$"Two_2_{id}" },

                new Models.MasterModel() { ID = "3", Name = "Two", Value=$"Two_3_{id}" }

            };

            return new JsonResult() { Data =  new { result = x }, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

        }

    public JsonResult ChildData(string id)

        {

            List<MasterModel> x = new List<Models.MasterModel>()

            {

                new Models.MasterModel() { ID = "11", Name = "One_One", Value=$"One_One_1_{id}" },

                new Models.MasterModel() { ID = "12", Name = "One_Two", Value=$"One_Two_2_{id}" },

                new Models.MasterModel() { ID = "13", Name = "One_Two", Value=$"One_Two_3_{id}" }

            };

            return new JsonResult() { Data = new { result = x }, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

        }

Thanks,

Sanjay


SA sanjay May 17, 2017 05:23 PM UTC

Hi Seeni,

Once again Thanks for the support !

We are on the same place where in last week, yea you  guys have supported me a lot but about the Hierarchical Bindings to Grid with parent and child relation is not resolved yet. Last few times, you have suggested me with the same set of solutions and unfortunately that did not work for me. So please if possible, can we have web calls like through Skype? So we can understand the problem in better way and get the solution. If yes then please send me your convenient date and time. My skype Id is sanjay.kumar2@iqor.com. Waiting your response.

Thanks,
Sanjay

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team May 18, 2017 11:46 AM UTC

Hi Sanjay,  
 
We have created a new support incident under your account. Please login to the below site to track these solution details.  
 
 
Regards,  
Seeni Sakthi Kumar S. 


Loader.
Live Chat Icon For mobile
Up arrow icon