Using jQuery in Kendo Templates

11 posts, 0 answers
  1. Jesse
    Jesse avatar
    11 posts
    Member since:
    Sep 2012

    Posted 28 Apr 2014 Link to this post

    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("(999) 999-9999");#
                    });
                #<\/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>
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 Apr 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Jesse
    Jesse avatar
    11 posts
    Member since:
    Sep 2012

    Posted 29 Apr 2014 in reply to Alexander Valchev Link to this post

    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.  :)
  5. Jesse
    Jesse avatar
    11 posts
    Member since:
    Sep 2012

    Posted 03 May 2014 Link to this post

    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.
  6. Jesse
    Jesse avatar
    11 posts
    Member since:
    Sep 2012

    Posted 03 May 2014 Link to this post

    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("(999) 999-9999");
        });
        kendo.init("#container");
    </script>
  7. Jesse
    Jesse avatar
    11 posts
    Member since:
    Sep 2012

    Posted 04 May 2014 Link to this post

    Can anyone help me?  I am trying to get this project wrapped up as soon as possible.  Thanks.
  8. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 06 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Jesse
    Jesse avatar
    11 posts
    Member since:
    Sep 2012

    Posted 07 May 2014 Link to this post

    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: "(999) 999-9999",
                                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("(999) 999-9999");
                    });
                    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

  10. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 07 May 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Jesse
    Jesse avatar
    11 posts
    Member since:
    Sep 2012

    Posted 07 May 2014 in reply to Atanas Korchev Link to this post

    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.
  12. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 08 May 2014 Link to this post

    Hello Jesse,

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

    Regards,
    Atanas Korchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready