Regarding Multiselect combobox

5 posts, 0 answers
  1. SivaKumar
    SivaKumar avatar
    1 posts
    Member since:
    Jan 2012

    Posted 06 Feb 2012 Link to this post

    Hi,
        I made Multi select dropdown with check box using custom template. Following is the code for the same. Issue with this is that it allows multiple selection but displays only the last selected value.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default4.aspx.vb" Inherits="Default4" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
     <style >
                    #titles-list .k-item {
                        overflow: hidden; /* clear floated images */
                    }

                    #titles-list img {
                        box-shadow: 0 0 4px rgba(255,255,255,.7);
                        float: left;
                        margin: 5px;
                    }

                    #titles-list dl {
                        margin-left: 85px;
                    }

                    #titles-list dt,
                    #titles-list dd {
                        margin: 0;
                        padding: 0;
                    }

                    #titles-list dt {
                        font-weight: bold;
                        padding-top: .5em;
                    }

                    #titles-list dd {
                        padding-bottom: .3em;
                    }
                </style>
     <link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript" ></script>
        <script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js" type="text/javascript" ></script>
    <!-- Template -->
    <script id="scriptTemplate" type="text/x-kendo-template">
       <input type="checkbox" name="${ data.Name }" value="${ data.Name }" ${ data.IsSelected ?"checked" : "" } />
        <span>${ data.Name }</span>
    </script>
    <!-- ComboBox initialization -->
    <script>
        $(document).ready(function () {
            $("#comboBox").kendoComboBox({
                autoBind: false,
                dataTextField: "Name",
                dataValueField: "Id",
                template: $("#scriptTemplate").html(),
                dataSource: {
                    type: "odata",
                    serverFiltering: true,
                    serverPaging: true,
                    pageSize: 20,
                    transport: {
                        read: "http://odata.netflix.com/Catalog/Titles"
                    }
                }
            });
            var dropdownlist = $("#comboBox").data("kendoDropDownList");

          
        });
       
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
          <input id="comboBox" />
        </div>
        </form>
    </body>
    </html>
  2. Gary
    Gary avatar
    7 posts
    Member since:
    Jul 2007

    Posted 15 Feb 2012 Link to this post

    I would also like to do this with the DropDownList. Is it possible to customize the displayed text of the selected value? I would like to show something like "n selected", where n is the number of items checked in the dropdown.
  3. Kendo UI is VS 2017 Ready
  4. Gary
    Gary avatar
    7 posts
    Member since:
    Jul 2007

    Posted 15 Feb 2012 Link to this post

    I just came across this post, which seems to offer a solution:
    http://www.kendoui.com/forums/ui/dropdownlist/drop-down-display-text.aspx 
  5. Bruno
    Bruno avatar
    1 posts
    Member since:
    Mar 2012

    Posted 04 May 2012 Link to this post

    How do you retrieve the checked checkboxes?
  6. Bruno
    Bruno avatar
    1 posts
    Member since:
    Mar 2012

    Posted 04 May 2012 Link to this post

    And how can you keep the dropdown opened? when I click a checkbox it selects the line and close the dropdown list....
Back to Top
Kendo UI is VS 2017 Ready