Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Multiselect in kendoDialog clear issue.

2 Answers 1411 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
deva subramanian
Top achievements
Rank 1
deva subramanian asked on 11 Oct 2018, 07:26 AM
multiselect.jpg
Hi,

I am using the multiselect in the popup.dojo here:http://dojo.telerik.com/UXIMEwOR/2

The problem is to clear the kendomultiselect when ever the popup is opened after the selection.

steps: 1. click the button to open the popup

2. select the options in the multiselect

3.click ok to close

Again open the popup the selected values are remains. I want to clear the datasource assigned and the values.

I tried few options  $("#cboMappingTable").kendoMultiSelect().data("kendoMultiSelect").value([]); but its creating one more element show in attached image

I think the div" dialog" is retaining the controls..not sure how to fix this . let me know your thoughts.

code below:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
 
 
<body>
  <div id="dialog" class="demo-section k-content" style="display:none">
    <select id='cboMappingTable'  style="width:348px !important;"></select>
    <button id='btnCancel' style='height:27px;width:90px'><span>OK</button>
  </div>
  <input type="button" value="Click" id='btnclick'/>
  <script type="text/javascript" >
    var cboData = [
    { text: "Test1", value: "Test1" },
    { text: "Test2", value: "Test2" },
    { text: "Test3", value: "Test3" }
];
     
  $(document).ready(function () {
     
      $("#cboMappingTable").kendoMultiSelect({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: cboData
 
    });
     
  });
     
    $("#btnclick").click(function(){
        $("#dialog").css({ display: "block" });
     var dialog = $('#dialog');
            dialog.kendoDialog({
                width: "460px",
                title: "test"
            });
       dialog.data("kendoDialog").open();
     
    });
 
$("#btnCancel").click(function (){
    $("#dialog").data("kendoDialog").close();
 
});
 
  </script>
</body>
</html>

Thanks

Dev

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 15 Oct 2018, 06:09 AM
Hello Dev,

Here is how you should clear the selection in the MultiSelect widget upon window opening:
$("#cboMappingTable").data("kendoMultiSelect").value([]);

In case you want to alter the widget DataSource too, you should use the setDataSource() method of the widget:
$("#cboMappingTable").data("kendoMultiSelect").setDataSource(new kendo.data.DataSource({
  data: [
    { text: "Test5", value: "Test5" },
    { text: "Test6", value: "Test6" },
    { text: "Test7", value: "Test7" }
  ]
}));

Here you will find a modified version of the Dojo sent implementing the above suggestions.

Regards,
Veselin Tsvetanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
deva subramanian
Top achievements
Rank 1
answered on 18 Oct 2018, 12:52 PM
thanks it worked.
Tags
MultiSelect
Asked by
deva subramanian
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
deva subramanian
Top achievements
Rank 1
Share this question
or