This is a migrated thread and some comments may be shown as answers.

Multiselect in kendoDialog clear issue.

2 Answers 2022 Views

MultiSelect

This is a migrated thread and some comments may be shown as answers.

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>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.default.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.911/js/angular.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.911/js/jszip.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script></head>

<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

Accepted

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.