Multiselect in kendoDialog clear issue.

3 posts, 1 answers
  1. deva subramanian
    deva subramanian avatar
    16 posts
    Member since:
    Jun 2012

    Posted 11 Oct 2018 Link to this post

    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. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    994 posts

    Posted 15 Oct 2018 Link to this post

    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.
  3. deva subramanian
    deva subramanian avatar
    16 posts
    Member since:
    Jun 2012

    Posted 18 Oct 2018 in reply to Veselin Tsvetanov Link to this post

    thanks it worked.
Back to Top