Custom validator with two values in batch mode

[Silvia]

Hi,

i am trying to implement a custom validator to check between two values in batch mode to implement a basic survey with yes/no answer in the field RISPOSTA and, if the answer is NO the user must fill the field NOTE.

If i use the selectedrecords properties i found that i only get the value of the field already written in the datasource.

So i tried to get the value from batchChanges but i found that the value goes inside the array only after the completion of the editing.

Here is my code:

JS

$(function () {

$.validator.addMethod("customCompare", function (value, element, params) {

var obj = $("#MainContent_grdMySurvey").ejGrid("instance");

//retrieve only the values of the dataset

//var risp = obj.getSelectedRecords()[0].answer;

//var note = obj.getSelectedRecords()[0].note;

var numVariate = obj.batchChanges.changed.length;

var rispB;

var noteB;

var i = 1;

while (i <= numVariate && numVariate>0)

{

rispB = obj.batchChanges.changed[i-1].answer;

noteB = obj.batchChanges.changed[i-1].note;

if (rispB == 1 && (noteB == ""||noteB==null))

{

return false;

}

i++;

}

return true;

}, "Se la risposta è no è obbligatorio inserire le note");

});

ASP.NET

ForeignKeyField="AnswerID"

ForeignKeyValue="AnswerValue" TextAlign="Left">

The required behaviour is simple... The NOTE column have to be required if the column RISPOSTA is setted with the value NO.

The values of the column RISPOSTA are 0 for NO and 1 for YES

Thanks

SIGN IN To post a reply.

[Farveen Sulthana Thameeztheen Basha]

Hi Silvia, 

Thanks for contacting Syncfusion Support. 

Query#:- The NOTE column have to be required if the column RISPOSTA is setted with the value NO. 

The values of the column RISPOSTA are 0 for NO and 1 for YES 

  

To achieve this requirement(Show Custom Validator Note column), we can get the corresponding row details using getDataByIndex by passing the Index from using getIndexByRow. From the data from Form, you can check and show validation required for Notes column(based on YES/No value of RISPOSTA column). 

Refer to the code below:- 

 

Default.aspx 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowGrouping="True" AllowFiltering="True"> 

        <Columns> 

                .      .    . 

            <ej:Column Field="AnswerID" HeaderText="RISPOSTA" ForeignKeyField="AnswerID" 

                    ForeignKeyValue="AnswerValue" TextAlign="Left" Width="90"  /> 

             <ej:Column Field="Note" HeaderText="Note" TextAlign="Right" Width="75" > 

                    <ValidationRule> 

                     <ej:KeyValue Key="customCompare" Value="value"/>   //assign custom validator function for Notes column    

                   </ValidationRule> 

 

                </ej:Column> 

            </Columns> 

  </ej:Grid> 

 

<script type="text/javascript"> 

 

    $.validator.addMethod("customCompare", function (value, element, params) { 

        var gridObj = $("#OrdersGrid").ejGrid('instance'); 

        var inx = gridObj.getIndexByRow($(this.currentForm).closest("tr"));  //you can get the row with getIndexByRow 

        var data = gridObj.getDataByIndex(inx);      //you can get the row Data using getDataByIndex 

        if (data.AnswerID)  

            return true; 

        return false;                             

 

    }, "Note required"); 

</script> 

Screenshot:- 

 

Please refer to API Link:- 

https://help.syncfusion.com/api/js/ejgrid#methods:getdatabyindex 

https://help.syncfusion.com/api/js/ejgrid#methods:getrowbyindex 

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

Regards, 

Farveen sulthana T 

[Silvia]

It doesn't work.

Maybe i didn't explain the desired behaviour.

Below i reported all the possible case and the only case not admitted:

If the value inserted in the RISPOSTA column is NO and the NOTE column is blank it isn't validated.

I tryed to use: if (data.answer == 0 && (data.note == null || data.note =="")) instead of your : if (data.AnswerID)  

Debugging the script i got the desired behaviour but when I type something in the note editbox the value of data.note remain blank so i can't pass the validation though i typed something in the note cell.

So how can I catch the text typed in the inputbox?

Moreover i would like the inputbox of note to be 100% width of the cell and multiline; how can i do it?

Thanks in advance

[Farveen Sulthana Thameeztheen Basha]

Hi Silvia, 

Query#:- So how can I catch the text typed in the inputbox? 

We have checked your query and you can get the required value of Note using value params from Custom Validator function as like below:- 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True"AllowGrouping="True" AllowFiltering="True">  

        <Columns>  

                .      .    .  

            <ej:Column Field="AnswerID" HeaderText="RISPOSTA"ForeignKeyField="AnswerID"  

                    ForeignKeyValue="AnswerValue" TextAlign="Left"Width="90"  />  

             <ej:Column Field="Note" HeaderText="Note" TextAlign="Right"Width="75" >  

                    <ValidationRule>  

                     <ej:KeyValue Key="customCompare" Value="value"/>  //assign custom validator function for Notes column     

                   </ValidationRule>  

  

                </ej:Column>  

            </Columns>  

  </ej:Grid>  

 

<script type="text/javascript"> 

 

        $.validator.addMethod("customCompare", function (value, element, params) { 

            var gridObj = $("#OrdersGrid").ejGrid('instance'); 

            var inx = gridObj.getIndexByRow($(this.currentForm).closest("tr")); 

            var data = gridObj.getDataByIndex(inx); 

            if ((data.AnswerID === 0) && (value != null && value != ""))   //Here get the required value of Note using value 

                    return true; 

            else if (data.AnswerID === 0) 

                return false;    

            else 

                return true;  

 

        }, "Note required"); 

         

 

    </script> 

         

Query#:- i would like the inputbox of note to be 100% width of the cell and multiline; how can i do it? 

We have already discussed about “How to use TextArea in Grid EditForm” in our Syncfusion knowledge Base. Refer to the below KB link:- 

Refer to the KB link:- https://www.syncfusion.com/kb/8648/how-to-use-textarea-in-grid-edit-form 

Regards, 

Farveen sulthana T 

[Silvia]

It partially works because:

• if i set the NO value and click in another row the validation doesn't trigger
• if i press the update button of the toolbar the validation doesn't trigger and i can save the values of all the fields either if i didn't fill the NOTE field in the case of NO value for field ANSWER.

Can you help?

[Farveen Sulthana Thameeztheen Basha]

Hi Silvia, 

From your query we understand that you need to perform Validation for RISPOSTA column also. If you want to perform validation for specific cell you need to enable Validation Rules for that Column also.  

To achieve this requirement, we suggest you to enable Validation for RISPOSTA Column(i.e AnswerID column). Based on this we can choose value for AnswerID column as “NO” only after filling the Note Column. Otherwise it will throw validation message. 

Refer to the code below:- 

Default.aspx:- 

 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowGrouping="True" AllowFiltering="True"> 

    <Columns> 

        .      .    . 

        <ej:Column Field="AnswerID" HeaderText="RISPOSTA" ForeignKeyField="AnswerID" 

                   ForeignKeyValue="AnswerValue" TextAlign="Left" Width="90"> 

            <ValidationRule> 

                <ej:KeyValue Key="customRegex" Value="value" />  // enable Validation for ForeignKey column 

            </ValidationRule> 

            </ej:Column> 

        <ej:Column Field="Note" HeaderText="Note" TextAlign="Right" Width="75"> 

             <ValidationRule> 

                 <ej:KeyValue Key="customCompare" Value="value" />   

             </ValidationRule> 

 

    </ej:Column> 

</Columns> 

 

 

<script type="text/javascript"> 

 

    $.validator.addMethod("customRegex", function (value, element, params) { 

        var val = parseInt(value); 

        var gridObj = $("#OrdersGrid").ejGrid('instance'); 

        var inx = gridObj.getIndexByRow($(this.currentForm).closest("tr")); 

        var data = gridObj.getDataByIndex(inx); 

        if (val == 1) 

            return true  

        else if ((val == 0) && (data.Note != null && data.Note != ""))     // We can only set No when Note column is filled 

            return true 

        else 

            return false 

    }, "Please fill Note and then to change it into No"); 

 

    </script> 

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

Regards, 

Farveen sulthana

[Silvia]

It is not possible to check all the validation when the user press the update button?

With your solution i have to set the NOTE column and after i have to set the ANSWER column with the value NO.

The use case of the desired behaviour is:

• the user set the NO answer in the colum ANSWER 
• until the user set some text in the column NOTE the row is locked and i can't lost the focus of it

Thanks in advance

[Farveen Sulthana Thameeztheen Basha]

Hi Silvia, 

From your query we understood that you need to show validation only for RISPOSTA column while pressing save button.To achieve this, we have now set the validation only to the Note column and when RISPOSTA column is changed to NO and note field is also blank, the save operation will be cancelled in the BeforeBatchSave and shown alert message.  

Refer to the code below:- 

Default.aspx:- 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowGrouping="True" AllowFiltering="True"> 

    <ClientSideEvents BeforeBatchSave="beforeBatchSave" /> 

    <Columns> 

        .      .    . 

        <ej:Column Field="AnswerID" HeaderText="RISPOSTA" ForeignKeyField="AnswerID" 

                   ForeignKeyValue="AnswerValue" TextAlign="Left" Width="90"> 

         </ej:Column> 

 

        <ej:Column Field="Note" HeaderText="Note" TextAlign="Right" Width="75"> 

            <ValidationRule> 

                <ej:KeyValue Key="customCompare" Value="value" /> 

            </ValidationRule> 

 

        </ej:Column> 

</Columns> 

 

<script type="text/javascript"> 

 

        function beforeBatchSave(args) { 

            args.batchChanges.changed.map(data => { 

                if ((data.AnswerID === 0) && (data.Note == null || data.Note == "")) { 

                    alert('cannot save this record, please add note.') 

                    args.cancel = true 

                } 

            }) 

        } 

 

    </script> 

If your requirement is different from above, please get back to us with further details. 

Regards, 

Farveen sulthana T 

[Silvia]

I tried your solution and it works but i have as many alert as many errors i have in the grid.

Is it possible to have just one alert or better a DIALOG with all the errors in the grid?

Thanks for your support

[Farveen Sulthana Thameeztheen Basha]

Hi Silvia, 

Thanks for your feedback. 

Query#:- Is it possible to have just one alert or better a DIALOG with all the errors in the grid? 

 

We have checked your query and achieved the same using BeforeBatchSave event of the Grid. In this event, we have push error messages for all edited cells and shown single alert message. 

Refer to the code below:- 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowGrouping="True" AllowFiltering="True"> 

    <ClientSideEvents BeforeBatchSave="beforeBatchSave" /> 

    <Columns> 

        .      .    . 

        <ej:Column Field="AnswerID" HeaderText="RISPOSTA" ForeignKeyField="AnswerID" 

                   ForeignKeyValue="AnswerValue" TextAlign="Left" Width="90"> 

        </ej:Column> 

 

        <ej:Column Field="Note" HeaderText="Note" TextAlign="Right" Width="75"> 

            <ValidationRule> 

                <ej:KeyValue Key="customCompare" Value="value" /> 

            </ValidationRule> 

 

        </ej:Column> 

    </Columns> 

 

    <script type="text/javascript"> 

 

       function beforeBatchSave(args) { 

            var err = []; 

            args.batchChanges.changed.map(data => { 

                if ((data.Verified === 0) && (data.EmployeeID == null || data.EmployeeID == "")) { 

                    var id = data.OrderID; 

                    err.push("Cannot save record please add not", id);   //push the errors in the array and shown in one alert message 

                    args.cancel = true 

                } 

            }) 

            alert(err) 

         } 

 

    </script> 

Screenshot:- 

 

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

 

Regards, 

Farveen sulthana T 

[Silvia]

Thanks but it is possible to use a modal dialog instead of the alert?

[Farveen Sulthana Thameeztheen Basha]

Hi Silvia, 

 Query#:- Thanks but it is possible to use a modal dialog instead of the alert? 

We have checked your query and we have achieved your requirement “shown Customized Dialog” with the help of ejDialog of Syncfusion. In the BeforeBatchSave event of the Grid, we have rendered the ejDialog instead of alert. You can also use your own customized Dialog to show the Alert message. 

 Refer to the code below:- 

Default.aspx:- 

 

<div id="confirmationDialog" style="display:none">     //Initialize Dialog 

</div> 

 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowGrouping="True" AllowFiltering="True"> 

    <ClientSideEvents BeforeBatchSave="beforeBatchSave" /> 

    <Columns> 

        .      .    . 

        <ej:Column Field="AnswerID" HeaderText="RISPOSTA" ForeignKeyField="AnswerID" 

                   ForeignKeyValue="AnswerValue" TextAlign="Left" Width="90"> 

        </ej:Column> 

 

        <ej:Column Field="Note" HeaderText="Note" TextAlign="Right" Width="75"> 

            <ValidationRule> 

                <ej:KeyValue Key="customCompare" Value="value" /> 

            </ValidationRule> 

 

        </ej:Column> 

    </Columns> 

 

    <script type="text/javascript"> 

 

        function beforeBatchSave(args) { 

            var err = []; 

            args.batchChanges.changed.map(data => { 

                if ((data.Verified === 0) && (data.EmployeeID == null || data.EmployeeID == "")) { 

                    var id = data.OrderID; 

                    err.push("Cannot save record please add not", id); 

                    args.cancel = true 

                } 

            }) 

            $("#confirmationDialog").ejDialog({ enableModal: true, width: 300, minHeight: 100, title: "AlertDialog" });   //Render Dialog (use proper Dialog id in the place of confirmationDialog) 

            $("#confirmationDialog").ejDialog("open");   //Open the Dialog using method 

            $("#confirmationDialog").ejDialog("setContent", err);    //Set Alert content for Dialog 

        } 

 

    </script> 

Note:- Use proper ID for rendering ejDialog(which we have Initialised) 

 

Screenshot:- 

 

 

Documentation and Demo Links:- 

https://help.syncfusion.com/js/dialog/overview 

https://help.syncfusion.com/api/js/ejdialog#methods:setcontent 

https://js.syncfusion.com/demos/jquery/#!/bootstrap/dialog/defaultfunctionalities   

Refer to the below KB Link:- 

https://www.syncfusion.com/kb/9044/how-to-show-the-confirmation-dialog-box-while-save-the-records-in-normal-editmode 

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

Regards, 

Farveen sulthana T 

[Silvia]

thanks a lot

[Farveen Sulthana Thameeztheen Basha]

Hi Silvia, 

Thanks for your update. Please get back to us if you need any further assistance. We are happy to assist you. 

Regards, 

Farveen sulthana T