Child Grid Issues. (Urgent)

I have sent this to a rep as well as followed every step on your guide with no results.

My grid does not load child entries. I also need to be able to CRUD child entries from the grid.

  <ejs-grid id="HierarchyGrid" queryString="kitId" dataSource="ViewBag.Data" gridLines="Both" load="load" toolbar="@(new List<string>() { "Add", "Edit", "Delete"})" allowPaging="true" allowFiltering="true">

            <e-grid-pagesettings pageSizes="true">e-grid-pagesettings>

            <e-grid-filterSettings type="Excel">e-grid-filterSettings>

            <e-data-manager url="/Admin/UrlDatasource" updateUrl="/Admin/Update" insertUrl="/Admin/Insert" removeUrl="/Admin/Delete" adaptor="UrlAdaptor" crossdomain="true">e-data-manager>

            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" showConfirmDialog="true" mode="Dialog" showDeleteConfirmDialog="true">e-grid-editSettings>

            <e-grid-columns>

                <e-grid-column field="kitId"  headerText="KitId" isPrimaryKey="true" textAlign="Right" width="120">e-grid-column>

                <e-grid-column field="dateCreated" hidden="" defaultValue="@DateTime.Now" textAlign="Right" hideAtMedia="true" width="120">e-grid-column>

                <e-grid-column field="workOrderNumber" defaultValue="" headerText="Work Order #" width="150">e-grid-column>

                <e-grid-column field="partNumber" defaultValue="" headerText="Part Number" width="130">e-grid-column>

                <e-grid-column field="qtyIn" headerText="In Qty" defaultValue="" width="120">e-grid-column>

                <e-grid-column field="firstTimeBuild" type="boolean" displayAsCheckBox="true" defaultValue="" headerText="1st Time Build" width="140">e-grid-column>

                <e-grid-column field="isCompleted" type="boolean" displayAsCheckBox="true" defaultValue="" headerText="Completed?" width="140">e-grid-column>

                <e-grid-column field="processCount" defaultValue="" headerText="Process Count" allowEditing="false" width="140">e-grid-column>

            e-grid-columns>

        ejs-grid>

 

JS to load Children

<script>

            function load(args) {

                this.childGrid = {

                    dataSource: new ej.data.DataManager({

                        url: "/Process/ReturnProcess/",

                        adaptor: new ej.data.UrlAdaptor(),

                        crossDomain: true 

                    }),            

                    queryString: 'kitId',

                    columns: [

                        { field: 'kitId', headerText: 'KitId', width: 120 },

                        { field: 'processType', headerText: 'Process Name', width: 120 },

                        { field: 'isClosed', headerText: 'Closed', width: 120 }

                    ],

                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },

                    toolbar: ['Add', 'Delete']

                };

                console.log(args);

            }

        script>


Controller Logic 

public IActionResult ReturnProcess(Guid KitId)

        {

            return Json(_context.PROCESS_TBL.Where(x => x.KitId == KitId).ToList());

        }

This FAILS to return ANY entries. I have been reaching out for about 3-4 days now with no response. I have followed the guides to the T On the page. I'm not getting ANY ERRORS. Just no child entries showing up on my grid.

I've even returned ReturnProcess without the parameter of Guid. 
Will somebody please help me get this working?

I don't need an example project. I followed a previous example on here that was listed with the exact same code. Only difference was you were using ODataAdaptor with XML returning. 

I've tried UrlAdaptor,WebApiAdaptor,ODataAdaptor. Why is nothing working?
I've tried returning XML,
I've returned JSON.
I've changed the queryString multiple times. Upper and lowercase, I've also tried CamelCase.

Do you have a FUNCTIONAL Parent/Child grid with WebApiAdaptor? 

Thanks.

Attachment: ChildIssues_f8853e82.zip

12 Replies

BW Brandon Workman September 17, 2018 08:09 PM UTC

I'm very close to going in another direction because of the lack of support for issues that should not be having issues. This ticket has got one day or I'm done with Syncfusion.


HJ Hariharan J V Syncfusion Team September 18, 2018 11:21 AM UTC

Hi Brandon, 

Thanks for contacting Syncfusion support. 

By default, UrlAdaptor expects the response object as result and count pair set but in the provided information(ReturnProcess) does not contain result and count pair so that it display no records to display message in child grid.  

As per your requirement(child grid with urladaptor) we have created a sample for your reference. 

Kindly refer to the below code example and sample for more information. 

<div> 
    <ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Delete","Edit","Update", "Cancel" })" gridLines="Both" load="load" allowPaging="true"> 
        <e-data-manager url="/Home/EmployeeDatasource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete"></e-data-manager> 
        <e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true"></e-grid-editSettings> 
        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 
        <e-grid-columns> 
            <e-grid-column field="EmployeeID" headerText="EmployeeID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
     function load(args) { 
                this.childGrid = { 
                    dataSource: new ej.data.DataManager({ 
                        url: "Home/UrlDatasource", 
                        adaptor: new ej.data.UrlAdaptor(), 
                        crossDomain: true 
                    }), 
                    queryString: 'EmployeeID', 
                    columns: [ 
                        { field: 'EmployeeID', headerText: 'KitId', width: 120 }, 
                    ], 
                }; 
            } 
</script> 

   public IActionResult UrlDatasource([FromBody]Data dm) 
        { 
            var val = OrdersDetails.GetAllRecords(); 
            var Data = val.ToList(); 
            if (dm.Where != null) 
            { 
                Data = OrdersDetails.GetAllRecords().Where(or => or.EmployeeID == dm.Where[0].value).ToList();  fetch child grid data(filter child grid data based on parent) 
            } 
            int count = Data.Count(); 
            if (dm.skip != 0) 
                Data = Data.Skip(dm.skip).ToList(); 
            if (dm.take != 0) 
                Data = Data.Take(dm.take).ToList(); 
            return dm.requiresCounts ? Json(new { result = Data, count = count }) : Json(Data); 
        } 

 



Please get back to us if you need further assistance. 

Regards, 
Hariharan 



BW Brandon Workman September 18, 2018 06:57 PM UTC

Hello,

Thank you for the help you have provided. I currently have a few more questions.
I would like to get ProcessName as a list from a datasource..

IE 
ViewBag.Data = GetAllProcessNames().ToList();

The Process Name field would then give the values in the list.

My second issue is that is it required to show the primary keys in order to delete items? If I hide them it will not delete.

Same with adding items, when adding a child it requires me to find the parent Id and manually enter it in, is there a way around that?

My last question applies to checkboxes. Is there a way to have the input as a checkbox instead of typing true/false?

My code

 <script>
            function load() {
                this.childGrid = {
                    dataSource: new ej.data.DataManager({
                        url: "/Admin/Process/",
                        updateUrl: "/Admin/ChildUpdate/",     
                        insertUrl: "/Admin/ChildInsert/",     
                        adaptor: new ej.data.UrlAdaptor(),
                        crossDomain: true
                    }),
                    queryString: 'KitId',
                    columns: [
                        { field: 'Id', headerText: 'Id', visible: false, isPrimaryKey: true, width: 0,  },
                        { field: 'KitId', headerText: 'KitId', width: 50, editType: 'dropdownedit'  },
                        { field: 'ProcessType', headerText: 'Process Name', width: 120 },
                        { field: 'IsClosed', headerText: 'Closed', width: 120,  displayAsCheckBox: true, }
                    ],
                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
                    toolbar: ['Add','Edit','Delete']
                };

            }
        </script>

Thanks.

Attachment: OtherIssues_9c7891b.zip


HJ Hariharan J V Syncfusion Team September 19, 2018 12:02 PM UTC

Hi Brandon, 

Thanks for your update. 

Query1:  is it required to show the primary keys in order to delete items?  
 
No, There is no need to show the primary key columns in Grid. We have created a sample for your reference in the below sample we have set visible property as false for the primaryKey column and delete operations are working fine at our sample. Please refer to the below code example and sample for more information. 

<script> 
     function load(args) { 
                this.childGrid = { 
                    dataSource: new ej.data.DataManager({ 
                        url: "Home/UrlDatasource", 
                        . . . . 
                    }), 
                    queryString: 'EmployeeID', 
                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, 
                    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
                    columns: [ 
                        { field: 'OrderID', headerText: 'Order ID', width: 120, visible: false, isPrimaryKey: true}, 
                    ], 
                }; 
            } 
</script> 

  
Query2: when adding a child it requires me to find the parent Id and manually enter it in, is there a way around that? 
 
We have analyzed your requirement and you can achieve this by using the below way. In the below code example we have get the parent id value in actionBegin event and then applied the parent id for the child grid Employee field.  

Kindly refer to the below code example for more information  

<script> 
     function load(args) { 
                this.childGrid = { 
                    dataSource: new ej.data.DataManager({ 
                        url: "Home/UrlDatasource", 
                        . . . . 
                        adaptor: new ej.data.UrlAdaptor(), 
                        crossDomain: true 
                    }), 
                    queryString: 'EmployeeID', 
                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, 
                    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
                    columns: [ 
                        { field: 'EmployeeID', headerText: 'KitId', isIdendity: true}, 
                   ], 
                    actionBegin(args) { 
                        if (args.requestType === 'add') { 
                            // get the parentID value and assign to child grid field 
                            args.data.EmployeeID = this.parentDetails.parentKeyFieldValue;   
                        } 
                    } 
                }; 
            } 
</script> 
 

Query3: Is there a way to have the input as a checkbox instead of typing true/false? 
 
We have analyzed your requirement and you can achieve this by using the below way. In the below sample, we have applied editType as ‘booleanedit’ for the Verified columns in Grid so it display checkbox while perform the CRUD operation in  Grid. 

Kindly refer to the below code example for more information. 

<script> 
     function load(args) { 
                this.childGrid = { 
                    dataSource: new ej.data.DataManager({ 
                        url: "Home/UrlDatasource", 
                        . . . . 
                    }), 
                    queryString: 'EmployeeID', 
                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, 
                    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
                    columns: [ 
                        { field: 'Verified', headerText: 'Closed', width: 120, displayAsCheckBox: true, editType: 'booleanedit' } 
                    ], 
                }; 
            } 
</script> 

Regards, 
Hariharan 



BW Brandon Workman September 19, 2018 02:41 PM UTC

You missed one of my questions

I would like to get ProcessName as a list from a datasource..

IE 
ViewBag.Data = GetAllProcessNames().ToList();
{ field: 'ProcessType', headerText: 'Process Name', width: 120, editType: 'dropdownedit' },

A custom selectlist for my grid options.

Thanks


HJ Hariharan J V Syncfusion Team September 21, 2018 11:05 AM UTC

Hi Brandon, 
 
Query: I would like to get ProcessName as a list from a datasource.. 
 
We have validated your query and you can achieve your requirement by using below method. Here, we have assigned viewbag dataSource as a list to dropdown editing column. Please find the below code example and sample for your reference. 
 
[code example] [index.cshtml] 
<div> 
    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowResizing="true" allowPaging="true" allowSorting="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Cancel", "Update"})"> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column> 
            <e-grid-column field="EmployeeID" headerText="Employee ID" width="120"></e-grid-column> 
            <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column> 
            <e-grid-column field="ShipCity" headerText="Ship City" editType="dropdownedit" edit="new {@params = new { dataSource= ViewBag.DropdownData} }" width="120"></e-grid-column> 
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column> 
        </e-grid-columns> 
         
    </ejs-grid> 
</div> 
 
[HomeController.cs] 
... 
... 
namespace TestSample.Controllers 
{ 
 
    public class HomeController : Controller 
    { 
 
        public IActionResult Index() 
        { 
            ViewBag.DataSource = OrdersDetails.GetAllRecords().ToList(); 
            ViewBag.DropdownData = OrdersDetails1.GetAllRecords().ToList();    //dropdown data as a list 
            return View(); 
        } 
    } 
     public class OrdersDetails 
    { 
        ... 
} 
 
We have prepared a sample based on your requirement. Please find the sample in below link. 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Hariharan 



BW Brandon Workman September 21, 2018 01:21 PM UTC

I was looking to do this on my child grid with the JS solution you provided me. This syntax does not work in this situation.

Please look at my code. 


HJ Hariharan J V Syncfusion Team September 24, 2018 10:10 AM UTC

Hi Brandon, 

Thanks for your update. 

As per your suggestion we have provided the solution in JavaScript. In the below sample we have applied custom dataSource for DropDown by using the edit params property of columns in Grid. Kindly refer to the below code example and updated sample for more information. 

<div> 
    <ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Delete","Edit","Update", "Cancel" })" gridLines="Both" load="load" allowPaging="true"> 
        <e-grid-columns> 
            <e-grid-column field="EmployeeID" headerText="EmployeeID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
     function load() { 
                this.childGrid = { 
                    queryString: 'EmployeeID', 
                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, 
                    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
                    columns: [ 
                        { field: 'ShipCountry', headerText: 'ShipCountry', width: 120, editType: 'dropdownedit', edit: { params: {dataSource: @Html.Raw(Json.Serialize(@ViewBag.DropDownData)) } } }, 
                    ], 
                    } 
                }; 
            } 


Regards, 
Hariharan 



CC Chad Church Syncfusion Team September 28, 2018 08:28 PM UTC

Subject: RE: Update 

Yeah those are the only issues I’m having. Just getting those DropDowns to work properly in the JS code. Like I said I followed it to the T but it’s just giving me that empty list. For the most part I’m not having any other issues currently. 

I would like to speak to somebody about the last solution posted on the forum because it’s not working at all. 
 
  
{ field: 'ProcessType', headerText: 'ProcessType', width: 120, editType: 'dropdownedit', edit: { params: {dataSource: @Html.Raw(Json.Serialize(@ViewBag.d)), } } }, 
  
ViewBag.d = _context.ALL_PROCESSNAMES.ToList().Select(x => x.Name); 
  
I’ve tried this multiple ways including a static list and nothing will show up. 

  
  
Brandon S. Workman


MS Madhu Sudhanan P Syncfusion Team October 4, 2018 08:50 AM UTC

Hi Brandon, 

Thanks for your update. 

We have validated the provided information and we suggest you to use the below way to resolve the reported problem. In the below sample we have applied custom dataSource(static list) for dropdown in Grid. 

Please refer to the below code example and sample for more information. 

<div> 
    <ejs-grid id="Grid" gridLines="Both" load="load" allowPaging="true"> 
        <e-grid-columns> 
            <e-grid-column field="EmployeeID" headerText="EmployeeID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column> 
           . . . . 
       </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
    function load() { 
                this.childGrid = { 
                    queryString: 'EmployeeID', 
                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, 
                    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
                    columns: [ 
                        { field: 'EmployeeID', headerText: 'KitId', width: 120}, 
                        //its necessary to set empty query and return false in actionComplete event 
                        { field: 'ShipCountry', headerText: 'ShipCountry', width: 120, editType: 'dropdownedit', edit: { params: { dataSource: @Html.Raw(Json.Serialize(@ViewBag.DropDownData)), query: new ej.data.Query(), actionComplete: () => false } } }, 
                    ], 
               }; 

public IActionResult Index() 
        { 
            ViewBag.DropdownData = new string[] { "India", "UK", "USA" };  //dropdown data as a list  
            return View(); 
        } 


Regards, 
Madhu Sudhanan P 



BW Brandon Workman October 4, 2018 04:10 PM UTC

I'm having trouble using the regular code

   <e-grid-column field="Category" defaultValue="" textAlign="Center" headerText="Category" editType="dropdownedit" edit="new {@params = new { dataSource= ViewBag.DropDownData} }" width="120"></e-grid-column>

Is there a way I can use the code below to fix this? It's the same error as doing it with JS. 

That or is there a way to target the grid with JS and have the dropdown data pushed?
Thanks for your help so far.


MS Madhu Sudhanan P Syncfusion Team October 5, 2018 12:17 PM UTC

Hi Brandon Workman, 
 
We have checked your query and you can achieve your requirement by using EditType and its params. We have prepared a simple sample based on your query. Please refer the below example code, sample link and documentation link. 
 
[Index.cshtml] 
<div> 
    <ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Edit", "Update", "Cancel" })" allowPaging="true" allowFiltering="true"> 
        <e-datamanager url="/Home/UrlDatasource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update"></e-datamanager> 
         . . . . .  
        <e-grid-columns> 
             
            <e-grid-column field="ShipCity" headerText="Ship City" width="170" editType="dropdownedit" edit="@(new { @params = new Syncfusion.EJ2.DropDowns.DropDownList() { 
        DataSource = new List<object>() { new { ShipCity = "Brazil" }, new { ShipCity = "USA" }, new { ShipCity = "Germany" } }, 
        Query = "new ej.data.Query()", 
        Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Text = "ShipCity", Value = "ShipCity" } 
    } 
})"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
 
 
Regards, 
Madhu Sudhanan P 


Loader.
Up arrow icon