How to show dynamic controls at runtime in edit template?

3 posts, 1 answers
  1. Saravanan
    Saravanan avatar
    4 posts
    Member since:
    Dec 2012

    Posted 13 Jan 2014 Link to this post

    Related to this question, I want to achieve the same behavior inside the ListView instead of a kendo Grid. My attempt is here. The edit template switches to different controls based on the value in the model at the beginning of the edit. But the problem is that I can't find a way to switch the 2nd field based on the user selection in the first field.  Also if I change the first field to an 'AutoComplete' list, can I still follow the same pattern?  One answer to this question didn't solve the proper data binding.  I appreciate any help to solve this.

    Thank you

    Code:

    <div class="row">
    <div class="col-xs-6 col-md-4">
    <!-- Inputs -->
    <div class="demo-section">
    <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>
    </div>

    <div id="listView"></div>

    <script type="text/x-kendo-tmpl" id="template">
    <div class="product-view k-widget">
    <div class="edit-buttons">
    <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
    <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"> </span></a>
    </div>
    <dl>
    <dt>Type</dt>
    <dd> #: typeTitle# </dd>
    <dt>Value</dt>
    <dd>
    # if (typeTitle === "DateTime") { #
    #: kendo.toString(name, "MM/dd/yyyy hh:mm")#
    #} else { #
    #:name #
    # } #
    </dd>
    </dl>
    </div>
    </script>

    <script type="text/x-kendo-tmpl" id="editTemplate">
    <div class="product-view k-widget">
    <div class="edit-buttons">
    <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
    <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
    </div>
    <dl>
    <dt>Key</dt>
    <dd>
    <select data-role="dropdownlist"
    data-text-field="title"
    data-value-field="id"
    data-source="_typeDataSource"
    data-bind="value: typeTitle"
    name="InputType"
    data-change="dropdownlist_change"
    required="required"
    validationmessage="required"></select>
    <span data-for="InputType" class="k-invalid-msg"></span>
    </dd>
    <dt>Value</dt>
    <dd>
    <div id="divInputType">
    # if (typeTitle === "DateTime") { #
    <input data-role="datetimepicker" type="text" data-bind="value: name" data-format="MM/dd/yyyy hh:mm" name="InputValue" required="required" validationmessage="required" />
    #} else { #
    <input type="text" data-bind="value: name" name="InputValue" required="required" validationmessage="required" />
    # } #
    <span data-for="name" class="k-invalid-msg"></span>
    </div>
    </dd>
    </dl>
    </div>
    </script>

    </div>
    <div class="col-sm-6 col-md-8">
    <!-- Data -->
    Diagnostics Data will be shown here.
    </div>
    </div>

    <script>
    _typeDataSource = new kendo.data.DataSource({
    data: [{
    id: 1,
    title: "String"
    }, {
    id: 2,
    title: "Number"
    }, {
    id: 3,
    title: "DateTime"
    }]
    });

    _peopleDataSource = new kendo.data.DataSource({
    data: [{
    id: 1,
    name: "John",
    typeId: 1,
    typeTitle: "String"
    }, {
    id: 2,
    name: "12345",
    typeId: 2,
    typeTitle: "Number"
    }, {
    id: 3,
    name: "12/20/2013",
    typeId: 3,
    typeTitle: "DateTime"
    }],
    schema: {
    model: {
    id: "id",
    fields: {
    id: {
    editable: false,
    nullable: true
    },
    name: {
    validation: {
    required: true
    }
    },
    typeTitle: "typeTitle"
    }
    }
    }
    });

    listView = $("#listView").kendoListView({
    dataSource: _peopleDataSource,
    template: kendo.template($("#template").html()),
    editTemplate: kendo.template($("#editTemplate").html())
    }).delegate(".k-edit-button", "click", function (e) {
    listView.edit($(this).closest(".product-view"));
    e.preventDefault();
    }).delegate(".k-delete-button", "click", function (e) {
    listView.remove($(this).closest(".product-view"));
    e.preventDefault();
    }).delegate(".k-update-button", "click", function (e) {
    listView.save();
    e.preventDefault();
    }).delegate(".k-cancel-button", "click", function (e) {
    listView.cancel();
    e.preventDefault();
    }).data("kendoListView");

    $(".k-add-button").click(function (e) {
    listView.add();
    e.preventDefault();
    });

    function dropdownlist_change(e) {
    var value = this.value();
    // Use the value of the widget

    console.log(value);
    //if (value == 2) {
    // console.log('here');

    // var secondColumn = $('#divInputType');
    // secondColumn.empty();
    // //var model = grid._modelForContainer(secondColumn);

    // $("<input data-bind='value: Value '/>").appendTo(secondColumn).kendoDateTimePicker();
    // kendo.bind(secondColumn, model);
    //}
    }
    </script>
  2. Answer
    Saravanan
    Saravanan avatar
    4 posts
    Member since:
    Dec 2012

    Posted 15 Jan 2014 Link to this post

    Hello Saravanan,

    I updated your fiddle to what I think you are trying to achieve.

    http://jsfiddle.net/UwGfg/3/

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Saravanan
    Saravanan avatar
    4 posts
    Member since:
    Dec 2012

    Posted 16 Jan 2014 Link to this post

    Thank you Peter.  This looks like working.  I yet to validate all the events.  I'll reply back if I find any problems.  Thanks again :)
Back to Top