Conditional Validation for Same Row in Grid

[Matthew Hamlin]

Hello,

I have a question and answer system using cascading drop downs. There is also a summary text entry. I would like to make the summary required if the answer is negative. I have tried using action complete and the change function on the drop down. What ends up happening is it makes the summary required on the next row not the current one. I have attached a txt file with the code. Please help.

Thanks

PS. This is EJ2

Attachment: code_6742ed7b.7z

[Matthew Hamlin]

Sorry it attached an empty file. The corrected file is attached here

Attachment: code_d7e2b680.7z

[Balaji Sekar]

Hi Matthew, 

 

Greetings from the Syncfusion support. 

 

Before proceeding further, we clarify your requirement whether you want to show validation message on second column of cascading dropdown while first dropdown select negative value. If we misunderstood your requirement please share more details about your concern that will help to validate further. 

 

Regards, 

Balaji Sekar. 

[Matthew Hamlin]

Hello,

Yes that is correct, I need the validation message to show on a text entry when I select a certain item in the dropbox on the same row.

Thanks

[Balaji Sekar]

Hi Matthew, 

  

Thanks for your update, 

  

Based on your query, we have achieved the validation rule in first dropdown(CustomerID) of cascading dropdownlist using custom validation in the load event of Grid. Please refer the below code example and sample for more information. 

[index.cshtml] 

  

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.data).Load("GridLoad").Columns(col=> { 

  

    col.Field("OrderID").IsPrimaryKey(true).HeaderText("Order ID").Width("120").Add(); 

    col.Field("EmployeeID").HeaderText("Employee ID").Width("170").Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("170").Add(); 

    col.Field("ShipCity").HeaderText("Ship City").Edit(new { create = "create1", read = "read1", destroy = "destroy1", write = "write1" }).Width("170").Add(); 

  

  

  

}).AllowPaging().EditSettings(edit => edit.AllowAdding(true).AllowDeleting(true).AllowEditing(true)).Render() 

  

  

<script type="text/javascript"> 

  

    function GridLoad() { 

        this.getColumnByField("CustomerID").validationRules = { 

            required: [customFn.bind(), "Please enter validate customer"]  // define validation rule in customerID column 

        } 

    } 

  

    function customFn(args) { 

        if (args.value != "HANAR") { 

            return true; 

        } else { 

            return false; 

        } 

    } 

  

    var dropDownListObj; 

    var dropDownListObj1; 

    function create(args) { 

        elemCustomerID = document.createElement('input'); 

        return elemCustomerID; 

    } 

    function write(args) { 

        dropDownListObj = new ej.dropdowns.DropDownList({ 

            dataSource: document.getElementById('Grid')['ej2_instances'][0].dataSource, 

            fields: { text: 'CustomerID', value: 'CustomerID' }, 

            placeholder: 'Select an CustomerID', 

            allowFiltering:true, 

            change: function (args) { 

                console.log('called'); 

                dropDownListObj1.enabled = true;                 

                var tempQuery = new ej.data.Query().where('CustomerID', 'equal', dropDownListObj.value); 

                dropDownListObj1.query = tempQuery; 

                dropDownListObj1.text = null; 

                dropDownListObj1.dataBind(); 

  

            }, 

            popupHeight: '270px', 

            value: args.rowData.CustomerID 

        }); 

        dropDownListObj.appendTo(elemCustomerID); 

    } 

  

    function destroy() { 

        dropDownListObj.destroy(); 

    } 

    function read(args) { 

        return dropDownListObj.value 

  

    }  

  

    function create1(args) { 

        elemEmployeeID = document.createElement('input'); 

        return elemEmployeeID; 

    } 

    function write1(args) { 

        dropDownListObj1 = new ej.dropdowns.DropDownList({ 

            dataSource: document.getElementById('Grid')['ej2_instances'][0].dataSource, 

            fields: { text: 'ShipCity', value: 'ShipCity' }, 

            placeholder: 'Select an ShipCity', 

            change: function (args) { 

                console.log('called') 

            }, 

            popupHeight: '270px', 

            enabled:false, 

            value: args.rowData.ShipCity 

        }); 

        dropDownListObj1.appendTo(elemEmployeeID); 

    } 

  

    function destroy1() { 

        dropDownListObj1.destroy(); 

    } 

    function read1(args) { 

        return dropDownListObj1.value 

  

    } 

  

Sample link: https://www.syncfusion.com/downloads/support/forum/155276/ze/I219060-Grid-Cascading_sample1881474926.zip  

  

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

  

Regards, 

Balaji Sekar