Using Validation Rules with Dialog Template View

[Kavishka Subashana]

Hello,

I'm trying to do validations with template view and I couldn't find any samples. 

I'm having the Kanban Board like this way and I tried to implement validation rules like,

Is there a different way to validate when using the template view? 

Thank you

[Vinitha Jeyakumar]

Hi Kavishka,

You can add your own validation rules while defining the template in the ActionComplete event. Please check the below code and sample,

Code snippet:

<script type="text/template" id="template">

                <table cellspacing="10" style="border-spacing: 11px;">

                        <tr>

                            <td style="text-align: right;">Id

                            </td>

                            <td style="text-align: left">

                                <input id="Id" name="Id" value="{{: Id}}" class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 175px; height: 28px" disabled="disabled" />

                            </td>

                           

                        </tr>

                        <tr>

                            <td style="text-align: right;">Estimate

                            </td>

                            <td style="text-align: left">

                                <input type="text" id="Estimate" name="Estimate" value="{{:Estimate}}" />

                            </td>

                           

                        </tr>                      

                        <tr>

                            <td style="text-align: right;">Tags

                            </td>

                            <td style="text-align: left">

                                <input id="Tags" name="Tags" value="{{: Tags}}" class="e-field e-ejinputtext valid" style="width: 175px; height: 28px" />

                            </td>

                           

                        </tr>

                        <tr>

                            <td style="text-align: right;">Summary

                            </td>

                            <td style="text-align: left">

                                <textarea id="Summary" name="Summary" class="e-ejinputtext"  value="{{: Summary}}" style="width: 270px; height: 95px" required>{{: Summary}}</textarea>

                            </td>

                        </tr>

                    </table>                

            </script>

function complete(args) {

            if (args.requestType == "refresh" || args.requestType == "save") {

                $('#<%= KanbanBoard.ClientID %>').ejWaitingPopup("hide");

            }

            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") {

                $("#Estimate").ejNumericTextbox({

                    value: parseFloat($("#Estimate").val()), width: "175px", height: "34px", decimalPlaces: 2, validationRules: {

                        required: true

                    },

                    validationMessage: {

                        required: "Required numeric value"

                    } });              

               

                $(".e-field").css({ 'width': '175px', 'text-align': 'left' });

            }

           

        }

Documentation: https://help.syncfusion.com/js/validation

Regards,

Vinitha

Attachment: WebApplication2745056272_(1)_7b3475ee.zip