Space bar not working in multiselect

8 posts, 0 answers
  1. Ivett
    Ivett avatar
    4 posts
    Member since:
    Aug 2016

    Posted 01 Dec 2016 Link to this post

    I am currently using a multiselect for, which populates the list by means of a datasource.

    The problem is that when typing in the input is not taking empty spaces, even when typing the multiselect space bar does not take them, why could this happen?
  2. Ivett
    Ivett avatar
    4 posts
    Member since:
    Aug 2016

    Posted 01 Dec 2016 in reply to Ivett Link to this post

    In the demo I can use this functionality, and checked the elements that used does not make any difference

    http://demos.telerik.com/aspnet-mvc/multiselect/serverfiltering

     

  3. Anton
    Admin
    Anton avatar
    81 posts

    Posted 05 Dec 2016 Link to this post

    Hello Yazmin,

    Unfortunately I was not able to reproduce the problem I attached you the sample project I test with. As you can see on the video the multiselect values the 'space' upon typing. Is there anything else I should add in order to reproduce the problem?

    Regards,
    Anton
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  4. Alexander Jiménez
    Alexander Jiménez avatar
    8 posts
    Member since:
    Sep 2009

    Posted 13 Aug in reply to Anton Link to this post

    Hello i know this is an old thread. But I found that it occures when you are using boostrap. Check the image attached. 
  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1756 posts

    Posted 15 Aug Link to this post

    Hello,

    From the attached screenshot I can see you are nesting the MultiSelect in a form and I would assume it has the "form-control" class set through its HtmlAttributes configuration:
    <form action="">
        <div class="form-group">
            <label for="email">Email address:</label>
            @(Html.Kendo().MultiSelect()
                .Name("email")
                .HtmlAttributes(new { @class = "form-control" })
                //... additional configuration
            )

    I tested this scenario with bootstrap.min.js version 3.3.7 and 4.3.1, but was unable to reproduce the issue. Could you elaborate more on the bootstrap version you have noticed this behavior in, as well as the structure of the Html elements you nest the MutliSelect in.

    Regards,
    Ivan Danchev
    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.
  6. Alexander Jiménez
    Alexander Jiménez avatar
    8 posts
    Member since:
    Sep 2009

    Posted 15 Aug in reply to Ivan Danchev Link to this post

    Hello Ivan thanks for your replay, 

    Im using boostrap 3.3.7 and KendoUI 2019.02.619

    I create that form inside a KendoWindow, from a segment of HTML code.

    <div id="wndAdvancedFilters" style="display:none;">
    <div class="form-horizontal" id="frmAdvancedFilter">
    <fieldset>
    <div class="form-group">
    <label class="col-md-4 control-label" for="selIssuer">Emisor</label>
    <div class="col-md-8">
    <select id="IssuerName" name="IssuerName" multiple="multiple"></select>
    </div>
    </div>
    <div class="form-group">
    <label class="col-md-4 control-label" for="selReceiver">Receptor</label>
    <div class="col-md-8">
    <select id="ReceiverNameSearch" name="ReceiverNameSearch" multiple="multiple"></select>
    </div>
    </div>
    <div class="form-group">
    <label class="col-md-4 control-label">Números de Factura</label>
    <div class="col-md-8">                    
    <textarea class="form-control" id="txaInvoiceNumberList" type="text"></textarea>
    </div>
    </div>
    </fieldset>
    </div>
    </div>

    JavaScript code to create the window:

        var wndAdvancedFilters = $("#wndAdvancedFilters").kendoWindow({
                width: 600,
                height: 250,
                title: "Filtros avanzados de búsqueda de facturas",
                visible: false,
                actions: [
                    "Minimize",
                    "Maximize",
                    "Close"
                ]
            }).data("kendoWindow");


    JavaScript code to create the Multiselect:
    var RNS = $("#ReceiverNameSearch").kendoMultiSelect({
                minLength: 3,
                dataTextField: "Name",
                dataValueField: "pkReceiverId",
                autoBind: false,
                valuePrimitive: true,
                dataSource: {
                    serverFiltering: true,
                    transport: {
                        read: function (options) {
                            $.ajax({
                                url: "../api/ReceiverSearch/Get/" + encodeURIComponent(RNS.input[0].value),
                                dataType: "json",
                                success: function (result) {
                                    options.success(result);
                                },
                                error: function (result) {
                                    options.error(result);
                                }
                            });

                            options.success({
                                data: [],
                                total: 0
                            });
                        }
                    },
                    schema: {
                        data: "data",
                        total: "total"
                    }
                },
                select: function (e) {

                },
                change: function (e) {

                }
            }).data("kendoMultiSelect");

     

    Code created by Kendo:

    <div class="k-widget k-window" data-role="draggable" style="visibility: visible; display: flex; padding-top: 63px; min-width: 90px; min-height: 50px; width: 600px; height: 313px; top: 181px; left: 487px; z-index: 10004; opacity: 1;"><div class="k-window-titlebar k-header" style="margin-top: -63px;"><span class="k-window-title" id="wndAdvancedFilters_wnd_title">Filtros avanzados de búsqueda de facturas</span><div class="k-window-actions"><a role="button" href="#" class="k-button k-bare k-button-icon k-window-action" aria-label="window-Minimize"><span class="k-icon k-i-window-minimize"></span></a><a role="button" href="#" class="k-button k-bare k-button-icon k-window-action" aria-label="window-Maximize"><span class="k-icon k-i-window-maximize"></span></a><a role="button" href="#" class="k-button k-bare k-button-icon k-window-action" aria-label="Close"><span class="k-icon k-i-close"></span></a></div></div><div id="wndAdvancedFilters" style="" data-role="window" class="k-window-content k-content" tabindex="0" role="dialog" aria-labelledby="wndAdvancedFilters_wnd_title">
        <div class="form-horizontal" id="frmAdvancedFilter">
            <fieldset>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="selIssuer">Emisor</label>
                    <div class="col-md-8">
                        <div class="k-widget k-multiselect k-multiselect-clearable k-state-hover" unselectable="on" title="" style=""><div class="k-multiselect-wrap k-floatwrap" role="listbox" unselectable="on"><ul unselectable="on" class="k-reset" id="IssuerName_taglist"></ul><input class="k-input k-readonly" style="width: 41px;" accesskey="" autocomplete="disabled" role="listbox" title="" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" tabindex="0" aria-describedby="IssuerName_taglist" aria-disabled="false" aria-busy="false"><span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span><span class="k-icon k-i-loading k-hidden"></span><span style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 20px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span></div><select id="IssuerName" name="IssuerName" multiple="multiple" data-role="multiselect" aria-disabled="false" style="display: none;"><option value="979fa93e-ddc5-440f-97ba-0ad6171b2c53">Ariel Josue Gutierrez Roque(116040799)</option><option value="2bcacdc5-529d-4023-b62f-23fa9657ab5d">Groupware Technology Consulting S.A.(3101257545)</option><option value="0a26f238-a0b8-4337-b84b-42341815ecb9">Genesis Leiyann Araya Solis(116410572)</option><option value="b20a2b14-ce30-42b6-885d-439af66395f8">TeleCable S.A.(3101336262)</option><option value="e42aa3b7-8ad5-4d10-ae42-4c10ddc7afc1">Marco Jimenez(901060696)</option><option value="15802cb3-a844-41a6-bc7c-6794defce1fd">Solution M y T SA(310168187_)</option><option value="41090bdd-4f53-4ca0-8ded-776bb74f64fd">Alexander Jimenez(112630859)</option><option value="6d847964-c5ac-434c-8593-85b6d3fbe9d8">444444444444444(777777775)</option><option value="8d77e7b1-69b6-4a13-81f1-ab5d55eaaf84">3-102-523627 Ltda.(3102523627)</option><option value="db661f7e-b632-4fe6-a0a7-b0748bc0828d">Jonathan Solis Pereira(109520265)</option><option value="6509fcc2-ead8-4fe5-921f-b4a87d8e48bc">Juancito(112630857)</option><option value="88532828-b65e-414d-8d14-c97efe2fd9f7">Mario Sanchez Suarez(205460793)</option><option value="6c1256f4-5b1c-466c-96df-ccaafd903a0a">Margarita Gutierrez(502880060)</option><option value="78958b05-c177-47f1-9d3f-e65d878d9e15">Juancito(112630585)</option></select></div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="selReceiver">Receptor</label>
                    <div class="col-md-8">
                        <div class="k-widget k-multiselect k-multiselect-clearable" unselectable="on" title="" style=""><div class="k-multiselect-wrap k-floatwrap" role="listbox" unselectable="on"><ul unselectable="on" class="k-reset" id="ReceiverNameSearch_taglist"></ul><input class="k-input k-readonly" style="width: 41px;" accesskey="" autocomplete="disabled" role="listbox" title="" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" tabindex="0" aria-describedby="ReceiverNameSearch_taglist" aria-disabled="false"><span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span><span class="k-icon k-i-loading k-hidden"></span><span style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 20px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span></div><select id="ReceiverNameSearch" name="ReceiverNameSearch" multiple="multiple" data-role="multiselect" aria-disabled="false" style="display: none;"></select></div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label">Números de Factura</label>
                    <div class="col-md-8">                    
                        <textarea class="form-control" id="txaInvoiceNumberList" type="text"></textarea>
                    </div>
                </div>
            </fieldset>
        </div>
    </div><div class="k-resize-handle k-resize-n" style="display: flex;"></div><div class="k-resize-handle k-resize-e" style="display: flex;"></div><div class="k-resize-handle k-resize-s" style="display: flex;"></div><div class="k-resize-handle k-resize-w" style="display: flex;"></div><div class="k-resize-handle k-resize-se" style="display: flex;"></div><div class="k-resize-handle k-resize-sw" style="display: flex;"></div><div class="k-resize-handle k-resize-ne" style="display: flex;"></div><div class="k-resize-handle k-resize-nw" style="display: flex;"></div></div>

     

  7. Alexander Jiménez
    Alexander Jiménez avatar
    8 posts
    Member since:
    Sep 2009

    Posted 15 Aug in reply to Alexander Jiménez Link to this post

    I correction: I'm using boostrap 3.4.1 
  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1756 posts

    Posted 19 Aug Link to this post

    Alexander,

    I added the Window's Html, the Window and the MultiSelect's initialization scripts to this dojo example and also the Kendo UI CSS files, which were missing from the attached page:

    The MultiSelect is bound to our sample demos service.

    At my end entering "space" works as expected. For example, if you enter "Aniseed Syrup", the MultiSelect is properly filtered.

    In the page you attached there are additional CSS and js files referenced, which I don't have access to, so this is one place you could look at. Remove any third party CSS and js, as in the dojo example I linked above, leaving only Kendo UI and Bootstrap's CSS and js. This could help in identifying what is interfering with the expected behavior of the widget.

    Regards,
    Ivan Danchev
    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.
Back to Top