Template multiple date pickers

3 posts, 0 answers
  1. Todd
    Todd avatar
    5 posts
    Member since:
    Jan 2016

    Posted 26 Apr 2016 Link to this post

     

    So I edited the demo to reproduce the issue I am having. When there are 2 date pickers in the same template and they are both grabbing their data from the given object the second datepicker is not rendered. Am I doing something incorrectly here?

    Important Stuff:

    <div>
        <h4>Choose a date</h4>
        <div data-template="date-control-template" data-bind="source: Data"></div>
    </div>
     
    <script id="date-control-template" type="text/x-kendo-template">
        <input data-role="datepicker"
               data-bind="value: selectedDate"
               style="width: 100%">
        <input data-role="datepicker"
               data-bind="value: selectedDate2"
               style="width: 100%">
    </script>
     
    <script>
        var viewModel = kendo.observable({
            Data:{
                selectedDate: null,
                selectedDate2: null
            },
            isEnabled: true,
            isVisible: true,
            onChange: function() {
                kendoConsole.log("event :: change (" + kendo.toString(this.get("selectedDate"), "D") + ")");
            }
        });
        kendo.bind($("#example"), viewModel);
    </script>

    Full Page:

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.metro.min.css" />
     
        <script src="//kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
        <script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
        <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
        <script src="../content/shared/js/console.js"></script>
    </head>
    <body>
    <div id="example">
        <div class="demo-section k-content">
            <div>
                <h4>Choose a date</h4>
                <div data-template="date-control-template" data-bind="source: Data"></div>
            </div>
             
            <div style="padding-top: 2em;">
                <h4>Console</h4>
                <div class="console"></div>
            </div>
        </div>
        <div class="box">
            <div class="box-col">
                <h4>Configuration</h4>
                <div>
                    <label><input type="checkbox" data-bind="checked: isEnabled">Enable</label>
                </div>
                <div>
                    <label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
                </div>
            </div>
            <div class="box-col">
                <h4>Information</h4>
                Kendo UI DatePicker supports the
                <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
            </div>
        </div>
      <script id="date-control-template" type="text/x-kendo-template">
                <input data-role="datepicker"
                       data-bind="value: selectedDate"
                       style="width: 100%">
                <input data-role="datepicker"
                       data-bind="value: selectedDate2"
                       style="width: 100%">
      </script>
    <script>
        var viewModel = kendo.observable({
            Data:{
                selectedDate: null,
                selectedDate2: null
            },
            isEnabled: true,
            isVisible: true,
            onChange: function() {
                kendoConsole.log("event :: change (" + kendo.toString(this.get("selectedDate"), "D") + ")");
            }
        });
        kendo.bind($("#example"), viewModel);
    </script>
    </div>
     
     
    </body>
    </html>

     

  2. Todd
    Todd avatar
    5 posts
    Member since:
    Jan 2016

    Posted 26 Apr 2016 in reply to Todd Link to this post

    So I nailed it down as to what was the issue. The template must be wrapped in a single element.
    <script id="date-control-template" type="text/x-kendo-template">
      <div>
                <input data-role="datepicker"
                       data-bind="value: selectedDate"
                       style="width: 100%">
                <input data-role="datepicker"
                       data-bind="value: selectedDate2"
                       style="width: 100%">
      </div>
    </script>
  3. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 28 Apr 2016 Link to this post

    Hello Todd,

    The Kendo UI Templates rely on the fact that a single element is bound, so it can correctly propagate its bindings. I am happy to hear that the issue is resolved - in case you have any further questions do not hesitate to contact us.


    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top