We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Using Validation Rules with Dialog Template View

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


1 Reply

VJ Vinitha Jeyakumar Syncfusion Team February 27, 2023 07:37 AM UTC

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' });
            }
           
        }