Using jQuery in Kendo Templates

[Jesse]

I am trying to use a Masked Input in a Kendo Template.  Can I do so, or do I need it outside of the template?  How do I do this?  Thanks.

<script id="popup_editor" type="text/x-kendo-template">
                <div class="k-edit-label">
                <label for="EmpID">Employee ID</label>
            </div>

            <input type="text" name="EmployeeID" data-type="number" data-bind="value:EmpID" data-role="numerictextbox" />

            <div class="k-edit-label">
                <label for="FirstName">First Name</label>
            </div>

                <input type="text" class="k-input k-textbox" name="FirstName" data-bind="value:FirstName">
            <!-- drop down list editor for field: "FirstName" -->


            <div class="k-edit-label">
                <label for="LastName">Last Name</label>
            </div>
            <!-- textbox editor for field: "LastName" -->
            <!-- field: "LastName" is not included as a grid column -->
            <input type="text" class="k-input k-textbox" name="LastName" data-bind="value:LastName">

            <div class="k-edit-label">
                <label for="DOB">DOB</label>
            </div>
            <!-- datepicker editor for field: "DOB" -->
            <input type="text"
                name="DOB"
                data-type="date"
                data-bind="value:DOB"
                data-role="datepicker" />

            <div class="k-edit-label">
                <label for="Phone">Phone</label>
            </div>
            <!-- numeric textbox editor for field: "Age" -->
            <input type="text" class="k-input k-textbox" name="Phone" data-bind="value:Phone">
            </input>
            #<script type="text/javascript">#
            #    jQuery(function () {#
            #        $("#Phone").mask("[phone]");#
                });
            #<\/script>#


            <div class="k-edit-label">
                <label for="LocationPicker">Locations</label>
            </div>


            <input name="LocationPicker"
            data-bind="value:LocID"
            data-value-field="Value"
            data-text-field="LocID"
            data-source="filteredLocationDataSource"
            data-role="dropdownlist" />

            <!--textarea id="editor" rows="10" cols="30" data-bind="value:Comments"></textarea>
            <input type="text" name="Comments" data-bind="value:Comments" />-->

    <div class="k-edit-label">
                <label for="Modified">Modified</label>
            </div>
            <!-- datepicker editor for field: "DOB" -->
            <input type="text"
                name="Modified"
                data-type="date"
                data-bind="value:Modified"
                data-role="datepicker" />

    <div class="k-edit-label">
                <label for="ModifiedBy">Modified By</label>
            </div>
            <!-- datepicker editor for field: "Modified By" -->
            <input type="text" name="ModifiedBy" data-type="number" data-bind="value:ModifiedBy" data-role="numerictextbox" />
        </script>

[Alexander Valchev]

Hi Jesse,

The initialization approach which you are currently trying to use is not supported.
Where this template is used? If it is a Grid popup editor template you can initialize the widgets inside it via data attributes. This approach is actually valid for each scenario where the template is bound to a ViewModel via Kendo MVVM.

Regards,
Alexander Valchev
Telerik

 

 

[Jesse]

Yes, I am definitely using it in a Popup Editing Window.  Thank you for the information about the data attributes.  I will look into that.  Thanks.  :)

[Jesse]

I can't seem to get the jQuery mask to show up on the input in the Editor Template.  Any ideas on how to attach the data attribute?  Is each attribute attached to a different event?  Thanks.

[Jesse]

This is what I would be trying to do.  The jQuery mask needs to be attached to the Phone textarea.  Thanks.

<script id="popup_editor" type="text/x-kendo-template">
                <div class="k-edit-label">
                <label for="EmpID">Employee ID</label>
            </div>

            <input type="text" name="EmployeeID" data-type="number" data-bind="value:EmpID" data-role="numerictextbox" />

            <div class="k-edit-label">
                <label for="FirstName">First Name</label>
            </div>

                <input type="text" class="k-input k-textbox" name="FirstName" data-bind="value:FirstName">
            <!-- drop down list editor for field: "FirstName" -->


            <div class="k-edit-label">
                <label for="LastName">Last Name</label>
            </div>
            <!-- textbox editor for field: "LastName" -->
            <!-- field: "LastName" is not included as a grid column -->
            <input type="text" class="k-input k-textbox" name="LastName" data-bind="value:LastName">

            <div class="k-edit-label">
                <label for="DOB">DOB</label>
            </div>
            <!-- datepicker editor for field: "DOB" -->
            <input type="text"
                name="DOB"
                data-type="date"
                data-bind="value:DOB"
                data-role="datepicker" />

            <div class="k-edit-label">
                <label for="Phone">Phone</label>
            </div>
            <!-- numeric textbox editor for field: "Age" -->
    <div id="container">
            <input type="text" name="Phone" data-type="string" data-bind="value:Phone" data-init="phoneMask">
            </input>
    </div>
            <div class="k-edit-label">
                <label for="LocationPicker">Locations</label>
            </div>


            <input name="LocationPicker"
            data-bind="value:LocID"
            data-value-field="Value"
            data-text-field="LocID"
            data-source="filteredLocationDataSource"
            data-role="dropdownlist" />

            <!--textarea id="editor" rows="10" cols="30" data-bind="value:Comments"></textarea>
            <input type="text" name="Comments" data-bind="value:Comments" />-->

    <div class="k-edit-label">
                <label for="Modified">Modified</label>
            </div>
            <!-- datepicker editor for field: "DOB" -->
            <input type="text"
                name="Modified"
                data-type="date"
                data-bind="value:Modified"
                data-role="datepicker" />

    <div class="k-edit-label">
                <label for="ModifiedBy">Modified By</label>
            </div>
            <!-- datepicker editor for field: "Modified By" -->
            <input type="text" name="ModifiedBy" data-type="number" data-bind="value:ModifiedBy" data-role="numerictextbox" />
        </script>
            <!-- </div>-->
<script type="text/javascript">
    var phoneMask = jQuery(function ($) {
        $("#Phone").mask("[phone]");
    });
    kendo.init("#container");
</script>

[Jesse]

Can anyone help me?  I am trying to get this project wrapped up as soon as possible.  Thanks.

[Atanas Korchev]

Hello Jesse,

You cannot have nested script tags - this isn't valid HTML. Remove the nested script element from your template.

To initialize the jquery mask you need to handle the edit event of the grid:

function onEdit(e) {
   e.container.find("#Phone").mask();
}

Also make sure you have set the id attribute of the phone input otherwise $("#Phone") will not find anything:

<input type="text" id="Phone" name="Phone" data-type="string" data-bind="value:Phone" data-init="phoneMask">

Regards,
Atanas Korchev
Telerik

 

 

[Jesse]

Okay, I have this now and the Edit Template doesn't work now.  The Update and Cancel buttons don't work anymore.  I also tried without the jQuery script that you see in the code:

    var templateHTML = $("#popup_editor").html();

    $(document).ready(function () {
        $.when(getLocationsAsync(), getLocationsFilteredAsync()/*, getNoteCountAsync()*/).done(function (locations, filteredLocations/*, noteCountRollup*/) {
            var filteredLocationDataSource = new kendo.data.DataSource({
                data: filteredLocations,
                schema: {
                    model: {
                        fields: {
                            Value: { type: "number" },
                            Text: { type: "string" },
                        }
                    }
                }
            });

            $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                serverFiltering: true,
                serverPaging: true,
                serverSorting: true,
                pageSize: 10,
                transport: {
                    read: {
                        url: "http://localhost/EmployeeDataService.svc/Employees"//,
                        //dataType: "json"
                    },
                    create: {
                        url: "http://localhost/EmployeeDataService.svc/Employees",
                        type: "POST",
                        dataType: "json"
                    },
                    update: {
                        url: function (data) {
                            return "http://localhost/EmployeeDataService.svc/Employees(" + data.EmpID + ")";
                        },
                        type: "PUT",
                        dataType: "json"
                    },
                    destroy: {
                        url: function (data) {
                            return "http://localhost/EmployeeDataService.svc/Employees(" + data.EmpID + ")";
                        },
                        type: "DELETE",
                        dataType: "json"
                    }
                },
                model: empModel,
                schema:
                    {
                        model: empModel
                    }
            },
            edit: onEdit,
            editable: {
                confirmation: true,
                mode: "popup",
                template: templateHTML
            },
            filterable: true,
            pageable: true,
            sortable: true,
            height: 365,
            toolbar: ["create"],
            detailInit: detailInit,
            dataBound: function () {
                this.expandRow(this.tbody.find("tr.k-master-row").first());
            },
            columns:
                [
                {
                    field: "EmpID",
                    filterable: false
                },
                {
                    field: "LastName",
                    title: "Last Name"
                },
                {
                    field: "FirstName",
                    title: "First Name",
                    attributes: { style: "text-align:left;" }
                },
                {
                    field: "LocID",
                    title: "Location Name",
                    attributes: { style: "text-align:left;" },
                    values: locations
                },
                {
                    field: "NoteID", title: "Note Count", attributes: { style: "text-align:center;" }, template: "#:noteCount(EmpID,uid)#"
                },
                //{
                //    field: "NoteCount",
                //    title: "Note Count",
                //    template: noteCountTemplateHTML
                //},
                //{
                //    field: "EmpID",
                //    title: "Note Count",
                //    attributes: { style: "text-align:center;" },
                //    values: noteCountRollup
                //},
                {
                    field: "DOB", title: "DOB", attributes: { style: "text-align:right;" }, template: '#= kendo.toString(DOB,"MM/dd/yyyy") #'//template: function (dataItem) {
                        //return kendo.htmlEncode(kendo.format("{0:MM/dd/yyyy}", new Date(parseInt(dataItem.DOB.substring(6, 19)))));
                    //}
                },
                {
                    field: "Phone",
                    hidden: true
                },
                {
                    field: "Modified",
                    hidden: true
                },
                {
                    field: "ModifiedBy",
                    hidden: true
                },
                {
                    command: [{
                        name: "edit",
                        text: "Edit"
                    }, {
                        name: "destroy",
                        text: "Delete"
                    }]
                }
                ]
            }

        );
        });
    });

    function onEdit(e) {
        e.container.find("#Phone").mask();
        kendo.init("#container");
    }

        var getLocationsAsync = function () {
            var deferred = $.Deferred(),

                loadLocations = function () {
                    new kendo.data.DataSource({
                        type: "odata",
                        serverPaging: false,
                        transport: {
                            read: {
                                url: "http://localhost/EmployeeDataService.svc/Locations?$select=LocID,Name"
                            }
                        }
                    }).fetch(function (data) {
                        deferred.resolve($.map(data.items, function (item) {
                            return {
                                value: item.LocID,
                                text: item.Name
                            };
                        }));
                    });
                };

            window.setTimeout(loadLocations, 1);
            return deferred.promise();
        };

        var getLocationsFilteredAsync = function () {
            var filteredDeferred = $.Deferred(),

                loadFilteredLocations = function () {
                    new kendo.data.DataSource({
                        type: "odata",
                        serverPaging: false,
                        transport: {
                            read: {
                                url: "http://localhost/EmployeeDataService.svc/Locations?$select=LocID,Name"
                            }
                        },
                        filter: { field: "Enabled", operator: "eq", value: true }
                    }).fetch(function (data) {
                        filteredDeferred.resolve($.map(data.items, function (item) {
                            return {
                                value: item.LocID,
                                text: item.Name
                            };
                        }));
                    });
                };

            window.setTimeout(loadFilteredLocations, 1);
            return filteredDeferred.promise();
        };

        var empModel = {
            id: "EmpID",
            fields:
                {
                    EmpID:
                        {
                            type: "number",
                            defaultValue: 0
                        },
                    FirstName:
                        {
                            type: "string"
                        },
                    LastName:
                        {
                            type: "string"
                        },
                    LocID:
                        {
                            type: "number"
                        },
                    //NoteID:
                    //    {
                    //        type: "number",
                    //        editable: false,
                    //        hidden: true
                    //    },
                    DOB:
                        {
                            type: "date"
                        },
                    Phone:
                        {
                            defaultValue: "[phone]",
                            type: "string"
                        },
                    Modified:
                        {
                            type: "date"
                        },
                    ModifiedBy:
                        {
                            type: "number",
                            defaultValue: 0
                        }
                }
        };

        function noteCount(employeeID, uid) {
            new kendo.data.DataSource({
                type: "odata",
                transport: {
                    read: {
                        url: "http://localhost/EmployeeDataService.svc/Notes"
                    }
                },
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                pageSize: 1,
                filter: { field: "EnteredBy", operator: "eq", value: employeeID },
                change: function ()
                {
                    $("#grid").find("[data-uid=" + uid + "]").children().eq(5).html(this.total());
                }
            }).read();
        }

        function detailInit(e) {
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: {
                            url: "http://localhost/EmployeeDataService.svc/Notes"
                        }
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 5,
                    filter: { field: "EnteredBy", operator: "eq", value: e.data.EmpID }
                },
                scrollable: false,
                sortable: true,
                pageable: true,
                filterable: true,
                columns: [
                    { field: "NoteID", title: "NoteID", style: "text-align: right;" },
                    {
                        field: "Details", title: "Details", attributes: { style: "text-align:left;" }, template: function (dataItem) {
                            return kendo.htmlEncode(dataItem.Details.substring(0, 50));
                        }
                    },
                    {
                        field: "Entered", title: "Entered", attributes: { style: "text-align: right;" }, template: function (dataItem) {
                            return kendo.htmlEncode(kendo.format("{0:MM/dd/yyyy hh:mm tt}", new Date(parseInt(dataItem.Entered.substring(6, 19)))));
                        }
                    },
                    {
                        command: [{ "name": "ViewDetails", "buttonType": "ImageAndText", "text": "View Details", "click": showDetails }]
                    }
                ]
            });
        }



                 //$("#grid").kendoGrid().dataSource.fetch();
            //});
    //})(window, jQuery, kendo)

</script>
<!--<div id="container">-->
<script id="popup_editor" type="text/x-kendo-template">
    <div id="container">
                <div class="k-edit-label">
                <label for="EmpID">Employee ID</label>
            </div>

            <input type="text" name="EmployeeID" data-type="number" data-bind="value:EmpID" data-role="numerictextbox" />

            <div class="k-edit-label">
                <label for="FirstName">First Name</label>
            </div>

                <input type="text" class="k-input k-textbox" name="FirstName" data-bind="value:FirstName">
            <!-- drop down list editor for field: "FirstName" -->


            <div class="k-edit-label">
                <label for="LastName">Last Name</label>
            </div>
            <!-- textbox editor for field: "LastName" -->
            <!-- field: "LastName" is not included as a grid column -->
            <input type="text" class="k-input k-textbox" name="LastName" data-bind="value:LastName">

            <div class="k-edit-label">
                <label for="DOB">DOB</label>
            </div>
            <!-- datepicker editor for field: "DOB" -->
            <input type="text"
                name="DOB"
                data-type="date"
                data-bind="value:DOB"
                data-role="datepicker" />

            <div class="k-edit-label">
                <label for="Phone">Phone</label>
            </div>
            <!-- numeric textbox editor for field: "Age" -->

                    <input type="text" id="Phone" name="Phone" data-type="string" data-bind="value:Phone" data-change="phoneMask">
                    </input>

            <div class="k-edit-label">
                <label for="LocationPicker">Locations</label>
            </div>


            <input name="LocationPicker"
            data-bind="value:LocID"
            data-value-field="Value"
            data-text-field="LocID"
            data-source="filteredLocationDataSource"
            data-role="dropdownlist" />

            <!--textarea id="editor" rows="10" cols="30" data-bind="value:Comments"></textarea>
            <input type="text" name="Comments" data-bind="value:Comments" />-->

    <div class="k-edit-label">
                <label for="Modified">Modified</label>
            </div>
            <!-- datepicker editor for field: "DOB" -->
            <input type="text"
                name="Modified"
                data-type="date"
                data-bind="value:Modified"
                data-role="datepicker" />

    <div class="k-edit-label">
                <label for="ModifiedBy">Modified By</label>
            </div>
            <!-- datepicker editor for field: "Modified By" -->
            <input type="text" name="ModifiedBy" data-type="number" data-bind="value:ModifiedBy" data-role="numerictextbox" />
    </div>
        </script>
            <script>
                var phoneMask = jQuery(function ($) {
                    $("#Phone").mask("[phone]");
                });
                kendo.init("#container");
            </script>

Thank you for all of your help, and keeping trying to help me.  I appreciate all of it.  This is truly the last part of the project I have to complete.  Thanks.  :)

Sincerely,
Jesse Kircher

[Atanas Korchev]

Hello Jesse,

Unfortunately I can't determine the cause of the problem. Perhaps it is due to some JavaScript error. Do you see any errors in your browser developer tools? Can you reproduce the issue in a demo? You can create such a demo in http://trykendoui.telerik.com

Regards,
Atanas Korchev
Telerik

 

 

[Jesse]

Yes, you are right.  There IS a problem wioth the javascript.  Apparently, it is actually executing the Mask function, but due to the template or field, the field doesn't have a length property.  Is there some data attribute I need to add into the template to make sure that the input field has a Length?  I have attached the screenshot.  Thanks.

[Atanas Korchev]

Hello Jesse,

I am afraid I am not sure what the problem is and can't help without a reproduction.

Regards,
Atanas Korchev
Telerik