Template multiple date pickers

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

    Posted 26 Apr 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 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. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 28 Apr 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