1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. child grid column as dropdown based on parent grid data.

child grid column as dropdown based on parent grid data.

I have Parent and child grid like this.. now what i want is based on parent grid's Min and max value column i want to create dropdown of values on Points column in child grid when add/edit. so suppose min and max values are 0 and 10 then dropdown should be values between 0 and 10 all values.

@{
    var childGridAnswers = new Syncfusion.EJ2.Grids.Grid()
    {
        DataSource = dataManager,
        QueryString = "StatusId",
        AllowFiltering = false,
        AllowPaging = false,
        AllowTextWrap = true,
        AllowSorting = false,
        Toolbar = !Model.IsHistory ? new List<string>() { "Add" } : new List<string>(),
        ActionComplete = "TestPage.questions.answersActionComplete",
        ActionFailure = "TestPage.questions.questionsActionFailure",
        ActionBegin = "TestPage.questions.answersActionBegin",
        TextWrapSettings= new Syncfusion.EJ2.Grids.GridTextWrapSettings() {  WrapMode=Syncfusion.EJ2.Grids.WrapMode.Content},
        SelectionSettings = new Syncfusion.EJ2.Grids.GridSelectionSettings() { EnableToggle = false, Mode = Syncfusion.EJ2.Grids.SelectionMode.Row, AllowColumnSelection = false, EnableSimpleMultiRowSelection = false },
        EditSettings = new Syncfusion.EJ2.Grids.GridEditSettings() { Mode = Syncfusion.EJ2.Grids.EditMode.Dialog, AllowAdding = Model.IsHistory ? false : true, AllowEditOnDblClick = false, AllowEditing = Model.IsHistory ? false : true, AllowDeleting = Model.IsHistory ? false : true },
        Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="Id", HeaderText="Id", IsPrimaryKey=true, Visible=false },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="QuestionsId", HeaderText="QuestionsId", Visible=false },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="Answer", Width="500", HeaderText="Answer",   ValidationRules=new { required=true,minLength =1, maxLength=500} },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="Points", HeaderText="Points",  ValidationRules=new { required=true},Edit= (new
                                               {
                                                   @params = new Syncfusion.EJ2.Inputs.NumericTextBox()
                                                   {
                                                       ValidateDecimalOnType = true,
                                                       Decimals = 0,
                                                       Format = "N"
                                                   }
                                               }),  EditType="numericedit", Width="100"},
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="DateCreated", HeaderText="Created", Format="dd-MMM-yyyy HH:mm", AllowEditing=false ,Width="160"},
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="DateUpdated", HeaderText="Updated", Format="dd-MMM-yyyy HH:mm", AllowEditing=false ,Width="160"},
            new Syncfusion.EJ2.Grids.GridColumn(){ HeaderText="Action", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Center,Template=Model.IsHistory?"":"#actionChildColumnTemplate", AllowEditing=false ,Width="150"}
        }

    };
}


     <ejs-grid id="Questions" toolbar="@(!Model.IsHistory?(new List<string>() { "Add" }):new List<string>())" allowSorting="true" allowTextWrap="true" allowFiltering="true" gridLines="Both" childGrid="childGridAnswers" allowPaging="false"
                  actionFailure="TestPage.questions.questionsActionFailure" actionComplete="TestPage.questions.questionsActionComplete" actionBegin="TestPage.questions.questionsActionBegin">
            <e-data-manager json="@Model.IR35Questions.ToArray()" adaptor="RemoteSaveAdaptor" insertUrl="/IR35/AddQuestion" updateUrl="/IR35/UpdateQuestion" removeUrl="/IR35/RemoveQuestion"></e-data-manager>
            <e-grid-editSettings allowEditOnDblClick="false" allowAdding="Model.IsHistory?false:true" allowDeleting="Model.IsHistory?false:true" allowEditing="Model.IsHistory?false:true" mode="Dialog"></e-grid-editSettings>
            <e-grid-selectionsettings allowColumnSelection="false" enableSimpleMultiRowSelection="false" enableToggle="false"></e-grid-selectionsettings>
            <e-grid-textwrapsettings wrapMode="Content"></e-grid-textwrapsettings>
            <e-grid-filtersettings type="Excel"></e-grid-filtersettings>
            <e-grid-columns>
                <e-grid-column field="Id" headerText="Id" isPrimaryKey="true" visible="false"></e-grid-column>
                <e-grid-column field="QuestionnaireId" headerText="QuestionnaireId" defaultValue="@Model.Id" visible="false"></e-grid-column>
                <e-grid-column field="StatusId" headerText="StatusId" visible="false"></e-grid-column>
                <e-grid-column field="Question" headerText="Question" width="500" minWidth="500" validationRules="@(new { required=true,minLength =1, maxLength=500})"></e-grid-column>
                <e-grid-column field="MinPoint" headerText="Min Point" width="150" defaultValue="0" edit="@(new
                                               {
                                                   @params = new Syncfusion.EJ2.Inputs.NumericTextBox()
                                                   {
                                                       ValidateDecimalOnType = true,
                                                       Decimals = 0,
                                                       Format = "N"
                                                   }
                                               })" editType="numericedit" validationRules="@(new { required=true})"></e-grid-column>
                <e-grid-column field="MaxPoint" headerText="Max Point" defaultValue="10" editType="numericedit" edit="@(new
                                               {
                                                   @params = new Syncfusion.EJ2.Inputs.NumericTextBox()
                                                   {
                                                       ValidateDecimalOnType = true,
                                                       Decimals = 0,
                                                       Format = "N"
                                                   }
                                               })" width="150" validationRules="@(new { required=true})"></e-grid-column>
                <e-grid-column field="DateCreated" headerText="Created" format="dd-MMM-yyyy HH:mm" allowEditing="false" width="160"></e-grid-column>
                <e-grid-column field="DateUpdated" headerText="Updated" format="dd-MMM-yyyy HH:mm" allowEditing="false" width="160"></e-grid-column>
                <e-grid-column headerText="Action" width="150" textAlign="Center" allowEditing="false" template="@(Model.IsHistory?"":"#actionColumnTemplate")"></e-grid-column>
            </e-grid-columns>
        </ejs-grid>


3 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team March 8, 2021 02:10 PM UTC

Hi Sandip, 
 
Thanks for contacting Syncfusion support.  
 
Query: I have Parent and child grid like this.. now what i want is based on parent grid's Min and max value column i want to create dropdown of values on Points column in child grid when add/edit. so suppose min and max values are 0 and 10 then dropdown should be values between 0 and 10 all values. 
 
We have validated your query and prepared a sample based on your requirement. 
 
In that sample, we used cellEditTemplate feature to rendered the dropdown control for editing the Freight column in the childGrid. In the write method, we get the parentrow data and generate the complex predicates based on the MaxPoint and MinPoint values. Using this predicates we applied the filter query in the dropdown control. Refer to the below code example and sample for more information. 
 
 
 
[index.cshtml] 
 
@{ 
 
    var ChildGrid = new Syncfusion.EJ2.Grids.Grid() 
    { 
        DataSource = (IEnumerable<object>)ViewBag.DataSource, 
        QueryString = "EmployeeID", 
 
        EditSettings = new Syncfusion.EJ2.Grids.GridEditSettings() { Mode = Syncfusion.EJ2.Grids.EditMode.Dialog, AllowAdding = true, AllowEditing = true, AllowDeleting = true }, 
        Columns = new List<Syncfusion.EJ2.Grids.GridColumn> { 
new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" }, 
new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right, Edit=new { create = "create", read = "read", destroy = "destroy", write = "write" }}, 
new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="150" }, 
}, 
    }; 
} 
 
<div class="control-section"> 
    <ejs-grid id="HierarchyPrint" dataSource="ViewBag.DataSource2" childGrid="ChildGrid" 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="UnitID" headerText="Unit ID" isPrimaryKey="true" textAlign="Right" width="125"></e-grid-column> 
            <e-grid-column field="MinPoint" headerText="MinPoint" textAlign="Right" width="125"></e-grid-column> 
            <e-grid-column field="MaxPoint" headerText="MaxPoint" width="135"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
 
<script> 
    var elem; 
    var dObj; 
    let sportsData = [ 
        { Freight: 1 }, 
        { Freight: 2 }, 
        { Freight: 3 }, 
        { Freight: 4 }, 
        { Freight: 5 }, 
        { Freight: 6 }, 
        { Freight: 7 }, 
        { Freight: 8 }, 
        { Freight: 9 }, 
        { Freight: 10 }, 
        { Freight: 11 }, 
        { Freight: 12 }, 
        { Freight: 13 }, 
        { Freight: 15 }, 
        { Freight: 16 }, 
        { Freight: 17 } 
    ]; 
    function create(args) { 
        elem = document.createElement('input'); 
        return elem; 
    } 
    function write(args) { 
// get the parent row element 
        var parentrow = document.querySelector("#" + args.element.id.split(args.column.field)[0]).closest('tr').previousElementSibling; 
// get the parent Grid instances 
        var parentGrid = document.getElementById('HierarchyPrint').ej2_instances[0]; 
// get the parent row data 
        parentRowData = parentGrid.getRowObjectFromUID(parentrow.getAttribute('data-uid')); 
// generate the predicates based on the MinPoint and MaxPoint 
        var predicate = new ej.data.Predicate('Freight', 'greaterthan', parentRowData.data.MinPoint); 
        predicate = predicate.and('Freight', 'lessthan', parentRowData.data.MaxPoint); 
        dObj = new ej.dropdowns.DropDownList({ 
            //set the data to dataSource property 
            dataSource: sportsData, 
            query: new ej.data.Query().where(predicate), // apply the filter query 
            // maps the appropriate column to fields property 
            fields: { value: 'Freight' }, 
        }); 
        dObj.appendTo(elem); 
    } 
 
    function destroy() { 
        dObj.destroy(); 
    } 
    function read(args) { 
        return dObj.value; 
    } 
</script> 
   
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


SA Sandip March 8, 2021 03:37 PM UTC

Thanks this is working fine but only one minor thing. if you see in dropdown there is not headers (like above one in answer there is label



RS Rajapandiyan Settu Syncfusion Team March 9, 2021 05:45 AM UTC

Hi Sandip, 

We are glad that the provided solution resolved your requirement. 

Query: Thanks this is working fine but only one minor thing. if you see in dropdown there is not headers 

We have validated your requirement and you can achieve this by using following properties (Placeholder & floatLabelType) of the dropdownlist component. 


    function write(args) { 
        ------ 
        dObj = new ej.dropdowns.DropDownList({ 
            //set the data to dataSource property 
            dataSource: sportsData, 
            placeholder: args.column.field, 
            floatLabelType: "Always",  
            query: new ej.data.Query().where(predicate), 
            // maps the appropriate column to fields property 
            fields: { value: 'Freight' }, 
        }); 
        dObj.appendTo(elem); 
    } 



Screenshot: 
 

Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S 


Marked as answer
Loader.
Up arrow icon