Menu with textboxes

[Gaetano]

Hi guys,
I'm trying to develop a custom kendo menu with some objects inside of it!

I have some button representing objects and a textbox (to filter them)..
buttons are correctly clickable while I'm able to select the textbox...It seems like it's disabled..
If I check on demo page I see that, for example, I'm not able to select any text inside a menu item..
Is there any way to work around this issue?

Thanks
Fabio

[Alexander Valchev]

Hello Fabio,

I tested a similar scenario in this sample page but was not able to reproduce the behaviour.
Could you please check my sample and let me know what I am missing? Can you reproduce the behaviour in my sample page and send me back a link so I can examine your configuration?
Thank you in advance for your time and cooperation.

Kind regards,
Alexander Valchev
the Telerik team

[Gaetano]

Hi Alexander,
My text box isn't in the menu header..it's inside the menu item!

I attached a screenshot of my case.

Thanks
Fabio

[Alexander Valchev]

Hello Fabio,

I updated sample page, but did not manage to reproduce the behaviour the problem with "disabled textbox".

• http://jsbin.com/egemix/12

Am I missing something? Could you please explain the problem in more details:

• does it occurs in a specific browser only?
• does the issue is related to the style of the input or with its functionality (e.g. not able to enter text, focus, etc)?
• can you provide a runnable jsBin sample that isolates the case?

In this way I would be able to examine your exact scenario and assist you further.
Thank you in advance for the cooperation.

Regards,
Alexander Valchev
the Telerik team

[Gaetano]

Hi Alexander, thanks for your reply,
I would be hard to prepare a runnable code because my data source is a private rest service; but I can give you some more detail.

the issue presents itself on every browser and it is functional!
I can't write any text inside the textbox..
It receives focus because its border gets darker on mousover, but on click I'm not allowed to write any text.

the main difference from your code is that I use a template..
Here is my code

<div id="ucUser">

    <div id="listViewUser"></div>

    <div id="pagerUser" class="k-pager-wrap"></div>
...
</div>

then I append to listViewUtenti some <A> tags (styled like checked button)

var dataSource = new kendo.data.DataSource({ data: userList, pageSize: 5 });

$("#listViewUser").kendoListView({
    dataSource: dataSource,
    template: kendo.template($("#scriptTemplateUser").html())
});

and this is my template

<script id="scriptTemplateser" type="text/x-kendo-template">
    <div class="usersTemplate" id="user_${Key.IdUtente}">
        <div class="imageContainer">
            <img src="./Images/user.png"/>
        </div>
        <div class="anagraficaContainer">
            <div class="name">${Key.Alias}</div>
            <div class="email">${Key.Email}</div>
        </div>
        <div class="roleContainer">
            <div>
                <ul id="userMenu_${Key.IdUtente}">
                    <li><span class="permessiHeader">${Key.Privilegio.Nome}</span></li>
                    <li class="impiantiHeader">IMPIANTI ASSOCIATI: <span id="countImpianti_${Key.IdUtente}">0</span>
                        <ul>
                            <li>
                                <div class="impiantiTemplate" style="padding: 10px;">

                                <div class="filterImpianti">
                                    <label>Filtra impianti</label>
                                    <input type="text" class="k-textbox"/>
                                </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                <ul>
            </div>
            <div>
                <span class="descrPrivilegio">
                    ${Key.Privilegio.Descrizione}
                </span>
            </div>
        </div>
    </div>
</script>

Hope this can help.
Thanks

Fabio

[Alexander Valchev]

Hello Fabio,

Your scenario is unclear - it seems that you are using the Menu component inside a ListView widget, but cannot see when and how the menu is initialized. Also the ID of the template element does not match the ID used in ListView's configuration.

<script id="scriptTemplateser" type="text/x-kendo-template">
template: kendo.template($("#scriptTemplateUser").html())

This typo should cause JavaScript error and the widget should not be initialized at all.

I do not believe that the problem is connected with the data. Could you please send me a small but runnable HTML page that isolates the issue using mock data. You may use this one as a base: http://jsbin.com/uyoged/2/edit

Kind regards,
Alexander Valchev
the Telerik team

[Gaetano]

Hi alexander..

here you can find a working example..
http://jsbin.com/uyoged/30/edit

the typo was only on my post..and yes I use a menu inside a list view..

the problem now is that the code i provided you works correctly...
and I don't know what could cause this issue..
if I change input type from text to button, I'm able to click it
there are no css that could edit textboxes here..

please, try to have a look to my code and tell me if you find something that could produce that issue

thanks 
Fabio

[Alexander Valchev]

Hello Fabio,

I am not sure what exactly might be going wrong in your case, as you said the example works correctly.
As an assumption, the issue might be connected with Kendo UI version that you use in your project. jsBin sample works with latest official release v2013.1.319.

Kind regards,
Alexander Valchev
the Telerik team

[Gaetano]

Hi Alexander, 
I just Updated kendo to the latest version and now my textbox works fine!!
(unfortunately, I can't update easily whenever a new version comes out; I hope to see a localized version of kendo web in the very next future!)


thanks for your help
Fabio

[Paul]

Hi, I'm having this same issue with this version of Kendo: 2015.2.805 

It doesn't happen with the jsbin that you posted earlier: 2013.1.319

http://output.jsbin.com/egemix/12

It also appears to not be working with the newest version: 2016.3.1028 

 http://jsbin.com/xugabiliqa/edit?html,output

This is a Chrome only issue. Hover over the input box and the menu closes right away. 

Help is greatly appreciated! Thanks.

[Alexander Valchev]

Hello Paul,

I tested the jsBin example that you provided but did not manage to reproduce the issue on my end.
Could you please check it and let me know what I am missing?

• https://screencast.com/t/ep2ca7O36

Regards,
Alexander Valchev
Telerik by Progress

[Paul]

My apologies, I set the openOnClick to true at the last minute. Can you try it again. If I change it to this:

        $("#menu").kendoMenu({ openOnClick:false});

it doesn't work. The only way I could "fix" it for the customer was to set openOnClick to true. 

Thanks for taking a look at this again with the openOnClick set to false.

http://jsbin.com/casetinade/edit?html,output

 

[Alexander Valchev]

Hello Paul,

We will need more time to investigate the scenario. I will mark this thread as requires additional answer and will get back to you tomorrow.

Regards,
Alexander Valchev
Telerik by Progress

[Alexander Valchev]

Hi Paul,

The issue is fixed in the Q1 2017 release that was published yesterday.

Here is a working example with the Q1 2017 release.

• http://dojo.telerik.com/ubUca

Regards,
Alexander Valchev
Telerik by Progress