1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. When Adding a record set the value of a dropdown base on the value of the previous textbox.

When Adding a record set the value of a dropdown base on the value of the previous textbox.

When the user Adds a new test and the user enters a value of 60 or higher in the result numeric text box I want Status (The passed field) to automatically get set to true otherwise it should be set to false. I want the user to still be able to change the status value if they want.





2 Replies 1 reply marked as answer
DA Danyelle May 6, 2021 06:22 PM UTC

@{
    var cols = new List<object> { new { field = "Created", direction = "Descending" } };
    var valueAccessor = "valueAccessorFn";
    var percentAccessor = "percentAccessorFn";
    var date = DateTime.Now;
   

}


@if (Model.TestHistory != null)
{

    <div class="row mt-2">
        <ejs-grid id="Grid" height="510px" allowPaging="true" allowSorting="true" allowFiltering="true" allowGrouping="true" allowReordering="true" allowResizing="false" allowMultiSorting="true" allowPdfExport="true" allowExcelExport="true" toolbarClick="toolbarClick" actionComplete="actionComplete" actionBegin="actionBegin" toolbar="@(new List<string>() { "Add", "Edit", "Print", "PdfExport", "ExcelExport", "Search" })">
            <e-grid-filterSettings type="Excel"></e-grid-filterSettings>
            <e-grid-pagesettings pageCount="6" pageSize="16" pageSizes="@(new string[] {"5", "10", "16", "20", "All"})"></e-grid-pagesettings>
            <e-grid-sortsettings columns="cols"></e-grid-sortsettings>
            <e-grid-editSettings allowAdding="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>
            <e-data-manager json="@Model.TestHistory.ToArray()" insertUrl="/Home/InsertTest" updateUrl="/Home/UpdateTest" adaptor="RemoteSaveAdaptor"></e-data-manager>
            <e-grid-columns>
                <e-grid-column field="TestTransactionID" headerText="TestID" visible="false" isPrimaryKey="true"></e-grid-column>
                <e-grid-column field="ToolID" headerText="ToolID" defaultValue="@Model.ToolID" visible="false" allowEditing="false"></e-grid-column>
                <e-grid-column field="Created" headerText="Testing Date" defaultValue="date" customFormat="@(new {type = "date", format = "MM/dd/yyyy"})" editType="datepickeredit"></e-grid-column>
                <e-grid-column field="Description" headerText="Description" defaultValue="@Model.TestHistory.First().Description" allowEditing="false"></e-grid-column>
                <e-grid-column field="Tester.Name" headerText="Tester" defaultValue="@Model.TestHistory.First().Tester.Name" allowEditing="false"></e-grid-column>
                <e-grid-column field="Result" headerText="Results" valueAccessor="percentAccessor" editType="numericedit" validationRules=@(new { number=true, min = '0' }) ></e-grid-column>
                <e-grid-column field="Passed" headerText="Status" valueAccessor="valueAccessor" filter="@(new {itemTemplate = "#itemTemplate"})" editType="dropdownedit" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" validationRules="@(new {required = true})"></e-grid-column>
                <e-grid-column field="Note" headerText="Notes" validationRules="@(new {maxLength = 250})" editType="dropdownedit" edit="@(new {create = "createNote", read = "readNote", destroy = "destroyNote", write = "writeNote"})"></e-grid-column>
            </e-grid-columns>
        </ejs-grid>
    </div>

    <script id="itemTemplate" type="text/x-template">
        <div>
            ${if(Passed)}
            <span>Passed</span> ${else}
            <span>Failed</span>
            ${/if}
        </div>
    </script>

    <script>

        function toolbarClick(args) {

            var gridObj = document.getElementById("Grid").ej2_instances[0];
            if (args.item.id === 'Grid_pdfexport') {
                gridObj.pdfExport();
            }
            if (args.item.id === 'Grid_excelexport') {
                gridObj.excelExport();
            }
        }

        function actionBegin(args) {
            if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
                for (var i = 0; i < this.columns.length; i++) {
                    if (this.columns[i].field === "ToolID") {
                        this.columns[i].visible = true;
                    }
                }
            }
        }

        function actionComplete(args) {
            if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
                for (var i = 0; i < this.columns.length; i++) {
                    if (this.columns[i].field === "ToolID") {
                        this.columns[i].visible = false;
                    }
                }

                var dialog = args.dialog;
                // change the header of the dialog
                dialog.header = args.requestType === 'beginEdit' ? 'Edit Test' : 'Add New Test';
            }
           

            if (args.action === 'add') {
                document.getElementById("InsertAlert").style.display = "block";
                setTimeout(function () { hideAlert(); }, 5000);
            }
            if (args.action === 'edit') {
                document.getElementById("UpdateAlert").style.display = "block";
                setTimeout(function() { hideAlert(); }, 5000);
            }


        }

        function valueAccessorFn(field, data, column) {

            var value = data[field];
            if (value === null) {
                return "";
            } else if (value) {
                return "Passed";
            } else {
                return "Failed";
            }

        }


        function percentAccessorFn(field, data, column) {
            return data[field] + '%';
        }

      

        var elem;
        var statusObject;
        var ddData = [{ Passed: true }, { Passed: false }];

        function create() {
            //  create a input element
            return document.createElement('input');
        }

        function read(args) {
            // return the value which will be saved in the grid
            return statusObject.value;
        }

        function destroy() {
            // destroy the custom component.
            statusObject.destroy();
        }

        function write(args) {
            console.log(args);
            // create a dropdown control
            statusObject = new ej.dropdowns.DropDownList({
                dataSource: ddData,
                placeholder: args.column.headerText,
                floatLabelType: "Always",
                value: args.rowData[args.column.field],
                fields: { text: 'Passed', value: 'Passed' },
                itemTemplate: "<div>${if(Passed)}<span>Passed</span>${else}<span>Failed</span>${/if}<\div>",
                valueTemplate: "<div style='padding-top:5px; padding-left:8px;'>${if(Passed)}<span>Passed</span>${else}<span>Failed</span>${/if}</div>"
            });
            //render the component
            statusObject.appendTo(args.element);
        }



        function hideAlert() {
            document.getElementById("InsertAlert").style.display = "none";
            document.getElementById("UpdateAlert").style.display = "none";
        }


SK Sujith Kumar Rajkumar Syncfusion Team May 7, 2021 07:10 AM UTC

Hi Danyelle, 
 
Greetings from Syncfusion support. 
 
Based on the query we could understand that your requirement is to dynamically change a edit dropdown value(rendered using Grid columns cell edit template) based on another numeric edit column’s value. This can be achieved by binding change event to the numeric edit column using its edit params property and in that event update the edit dropdown value(using its instance created for rendering the edit dropdown) based on the numeric value. 
 
This is demonstrated in the below code snippet, 
 
@{ 
    var numerictextbox = new Syncfusion.EJ2.Inputs.TextBox() 
    { 
 
        Change = "onNumericChange" 
    }; 
} 
 
<div id="parent"> 
    <ejs-grid id="Grid" dataSource="@ViewBag.Data" ...> 
        <e-grid-columns> 
                 ... 
            <e-grid-column field="Result" headerText="Result" format="N" editType="numericedit" edit="new { @params = numerictextbox }" width="120"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
<script> 
var elem; 
var dropObj; 
 
function onNumericChange(args) { 
    var dropVal = (args.value >= 60) ? true : false; 
    // The cell edit dropdown value is updated using its instance 
    dropObj.text = dropVal; 
} 
</script> 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 


Marked as answer
Loader.
Up arrow icon