This is a migrated thread and some comments may be shown as answers.

Menu with textboxes

13 Answers 110 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Gaetano
Top achievements
Rank 1
Gaetano asked on 05 Apr 2013, 08:05 AM
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

13 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 09 Apr 2013, 08:12 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gaetano
Top achievements
Rank 1
answered on 09 Apr 2013, 08:36 AM
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
0
Alexander Valchev
Telerik team
answered on 11 Apr 2013, 08:44 AM
Hello Fabio,

I updated sample page, but did not manage to reproduce the behaviour the problem with "disabled textbox".
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gaetano
Top achievements
Rank 1
answered on 11 Apr 2013, 09:44 AM
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

0
Alexander Valchev
Telerik team
answered on 15 Apr 2013, 08:46 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gaetano
Top achievements
Rank 1
answered on 17 Apr 2013, 10:24 AM
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
0
Accepted
Alexander Valchev
Telerik team
answered on 19 Apr 2013, 08:21 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gaetano
Top achievements
Rank 1
answered on 23 Apr 2013, 09:46 AM
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
0
Paul
Top achievements
Rank 1
answered on 12 Jan 2017, 04:00 PM

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.

0
Alexander Valchev
Telerik team
answered on 16 Jan 2017, 11:27 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Paul
Top achievements
Rank 1
answered on 16 Jan 2017, 12:51 PM

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

 

0
Alexander Valchev
Telerik team
answered on 18 Jan 2017, 05:50 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Alexander Valchev
Telerik team
answered on 19 Jan 2017, 01:07 PM
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.

Regards,
Alexander Valchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Menu
Asked by
Gaetano
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Gaetano
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Share this question
or