Adding checkboxes and select and displaying number of items selected

5 posts, 0 answers
  1. Steve
    Steve avatar
    41 posts
    Member since:
    Apr 2015

    Posted 25 Oct 2018 Link to this post

    Hi All,

    I have three questions for this requests.

    1. How could I keep the MultiColumnComboBox from closing after an item is selected?

    2. Could anyone provide an example of a MultiColumnComboBox with checkboxes (either the row is selected or checkbox is checked) based of 

    https://demos.telerik.com/kendo-ui/multicolumncombobox/index?

    2. How could I display the number of items that are selected in the placeholder?

     

    TIA,

    Steve

     

  2. Dimitar
    Admin
    Dimitar avatar
    685 posts

    Posted 29 Oct 2018 Link to this post

    Hello Steve,

    1) To keep the MultiColumnComboBox popup open after selection, you could utilize the widget's select and close events as follows:
    select: function(e) {
      e.sender.wrapper.addClass("selection");
    },
    close: function(e) {   
      var widgetWrapper = e.sender.wrapper;
                     
      if(widgetWrapper.hasClass("selection")) {
        widgetWrapper.removeClass("selection");
        e.preventDefault();
      }
                     
      widgetWrapper.removeClass("selection");
    }

    2) Due to the specific rendering of the MultiColumnComboBox it is currently not possible to specify an item template or inject custom HTML into the list options. In case you think that this will bring benefit to the widget, I would suggest sharing your idea in the official Kendo UI Feedback Portal.

    3) The MultiColumnComboBox allows only a single item to be selected, thus I am not quite sure that I understand the placeholder issue correctly. Could you elaborate a bit more on what is the exact use case?

    Regards,
    Dimitar
    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. Steve
    Steve avatar
    41 posts
    Member since:
    Apr 2015

    Posted 02 Nov 2018 in reply to Dimitar Link to this post

    Hello Dimitar,

    Thanks for the snippet code to prevent the MultiColumnComboBox from closing. 

    Reply to #3, it's related to question #2.   Supposed, we can select multiple rows using checkboxes, it's an ideal to display the number of items selected instead of showing individual names in the placeholder.  Please refer to my code below and see what I'm trying to do.

     

    <!DOCTYPE html>
    <html>
    <head>
    <base href="https://demos.telerik.com/kendo-ui/multicolumncombobox/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />

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

    <body>
    <script id="tagTemplate" type="text/x-kendo-template">    
      #if(data.values.length == 1){#
    <span> #: data.values[0]# </span>
      #} else{#
       <span>#: data.values.length # items are selected </span>
      #}#
    </script>

    <script id="checkTemplate" type="text/x-kendo-template">    
      <input id="#=data.something#" type="checkbox" class="k-checkbox" />
    </script>

    <div id="example">
    <div class="demo-section k-content">
    <h4>Test</h4>
    <input id="customers" style="width: 600px;" placeholder="# items are selected" />
    <div id="ItemsSelected"></div>
    </div>

    <script>

    var dataSource1= [
    { Id: 1, Description: "Qual_1", Number:"111", Name1:"AB", Name2:"YO" },
    { Id: 2, Description: "Qual_2", Number:"222", Name1:"SI", Name2:"KO" },
    { Id: 3, Description: "Qual_3", Number:"333", Name1:"PE", Name2:"MO" },
    { Id: 4, Description: "Qual_4", Number:"555", Name1:"WE", Name2:"DO" }];

    $(document).ready(function () {
    var checkInputs = function (elements) {
    elements.each(function () {
    var element = $(this);
    var input = element.children("input");

    input.prop("checked", element.hasClass("k-state-selected"));
    });
    };

    function UpdateSelected(items){
    var len = ($("input[class=cbx1]:checked").length);
    var total = items.length;
    var msg = len + " of " + items.length + " items are selected";
    $("#ItemsSelected").text(msg);

    if(len == total){
    $('#checkAllQualifier').prop('checked',true);
    }else{
    $('#checkAllQualifier').prop('checked', false);
    }
    }

    var multiSelector = $("#customers").kendoMultiColumnComboBox({
    dataSource: dataSource1,
    dataTextField: "Description",
    dataValueField: "Id",        
    height: 400,
    footerTemplate: 'Total <strong>#: instance.dataSource.total() #</strong> items found', 
    columns: [
    {
      resizable: true,
      headerTemplate: '<input type="checkbox" class="cbxAll" id="checkAllQualifier" />',
      template: '<input id="${data.uid}" value="${Id}" class="cbx1" type="checkbox" />',
      width: 50
    },
    { field: "Id", title: "Id", width: 50 },
    { field: "Description", title: "Description", width: 200 },
    { field: "Number", title: "Emp", width: 90 },
    { field: "Name1", title: "Abbrev1", width: 100 },
    { field: "Name2", title: "Abbrev2", width: 100 }
    ],
    close: function (e) {
    var widgetWrapper = e.sender.wrapper;

    if (widgetWrapper.hasClass("selection")) {
    widgetWrapper.removeClass("selection");
    e.preventDefault();
    }

    widgetWrapper.removeClass("selection");
    },
    select: function (elem) {
    elem.sender.wrapper.addClass("selection");
    var items = this.ul.find("li");
    checkInputs(items);
    UpdateSelected(items);
    }
    }).data("kendoMultiColumnComboBox");

    $("#checkAllQualifier").click(function(){
    var chkboxes = $("input.cbx1:checkbox");
    $('input:checkbox').not(this).prop('checked', this.checked);
    UpdateSelected(chkboxes);
    });
    });
    </script>
    </div>


    </body>
    </html>

    TIA,

    Steve

     

     

  4. Dimitar
    Admin
    Dimitar avatar
    685 posts

    Posted 05 Nov 2018 Link to this post

    Hello Steve,

    The MultiColumnComboBox extends the ComboBox widgets and allows only a single selection from the list of options. This is described in the following articles:


    I would suggest using the Kendo UI MultiSelect for scenarios where multiple selection is required:


    Regards,
    Dimitar
    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.
  5. Steve
    Steve avatar
    41 posts
    Member since:
    Apr 2015

    Posted 28 Nov 2018 in reply to Dimitar Link to this post

    Hi Dimitar,

     

    Sorry the late reply.   I ended up switching to MultiSelect as you suggested.

     

    Thanks

Back to Top