Produce another pop up based on selected dropdown

若如初见. 提交于 2019-12-13 09:04:31

问题


I am using Kendo UI pop up(template). I have dropdown here. In my demo, I already have the pop up 1. So, right now I want to make if test1 selected, should be other for popup for test1. Other than that, do not happen anything. Is it possible to do that? I'm really need help here. Thank you, please see my demo below.

My demo here using jsfiddle : http://jsfiddle.net/ak6hsdo8/2/

HTML

<div id="grid"></div>

<!-- Kendo popup template -->
<script type="text/x-kendo-template" id="popup_editor">
<p>This is a custom popup editor.</p>
<div class="k-edit-label">
    <label for="column1">Column 1</label>
</div>
<div data-container-for="applies_to" class="k-edit-field">
    <input type="text" class="k-input k-textbox" name="applies_to" data-bind="value:column1" />
</div>
<div class="k-edit-label">
    <label for="file_location">Column 2</label>
</div>
<div data-container-for="file_location" class="k-edit-field">
    <input type="text" class="k-input k-textbox" name="file_location" data-bind="value:column2" />
</div>
<div class="k-edit-label">
    <label for="type_name">Column 3</label>
</div>
<div data-container-for="type_name" class="k-edit-field">
    <select data-bind="value:column3" id="column3" />
</div>
</script>

JavaScript

//Generic data for the grid
var grid_data = [{id:1,"column1":"test1","column2":"test5","column3":"test1"},
            {id:2,"column1":"test2","column2":"test4","column3":"test2"},
            {id:3,"column1":"test3","column2":"test3","column3":"test3"},
            {id:4,"column1":"test4","column2":"test2","column3":"test1"},
            {id:5,"column1":"test5","column2":"test1","column3":"test2"}];
  //Generic data for column3 dropdown
 var column3_data = ["test1", "test2","test3"];

 //Creating Kendo Grid
   $("#grid").kendoGrid({
    dataSource: new kendo.data.DataSource({
    data: grid_data,
    schema: {
        model: {
            id: "id",
            fields: {
                column1: {
                    type: "string"
                },
                column2: {
                    type: "string"
                },
                column3: {
                    type: "string"
                }
            }
        }
    }
}),
columns: [
    "column1", "column2", "column3", {
    command: ["edit", "destroy"],
    title: "&nbsp;"
}],
toolbar: ["create"],
editable: {
    mode: "popup",
    template: kendo.template($("#popup_editor").html()),
    window: {
        title: "Custom Pop Up Editor"
    }
},
edit: function (e) {
    $("#column3").kendoDropDownList({
        dataSource: new kendo.data.DataSource({
            data: column3_data
        })
    });
}});

来源:https://stackoverflow.com/questions/58828997/produce-another-pop-up-based-on-selected-dropdown

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!