This is a migrated thread and some comments may be shown as answers.
Space bar not working in multiselect
7 Answers 8 Views
This is a migrated thread and some comments may be shown as answers.
Ivett
Top achievements
Rank 1
Ivett asked on 01 Dec 2016, 02:31 PM
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?

7 Answers, 1 is accepted

Sort by
0
Ivett
Top achievements
Rank 1
answered on 01 Dec 2016, 02:33 PM

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

 

0
Anton
Telerik team
answered on 05 Dec 2016, 08:05 AM
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.
0
Alexander Jiménez
Top achievements
Rank 1
answered on 13 Aug 2019, 07:25 PM
Hello i know this is an old thread. But I found that it occures when you are using boostrap. Check the image attached. 
0
Ivan Danchev
Telerik team
answered on 15 Aug 2019, 02:05 PM
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.
0
Alexander Jiménez
Top achievements
Rank 1
answered on 15 Aug 2019, 08:27 PM

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>

 

0
Alexander Jiménez
Top achievements
Rank 1
answered on 15 Aug 2019, 08:32 PM
I correction: I'm using boostrap 3.4.1 
0
Ivan Danchev
Telerik team
answered on 19 Aug 2019, 02:17 PM
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.
Asked by
Ivett
Top achievements
Rank 1
Answers by
Ivett
Top achievements
Rank 1
Anton
Telerik team
Alexander Jiménez
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or