Menu with textboxes

14 posts, 1 answers
  1. Alberto
    Alberto avatar
    71 posts
    Member since:
    May 2012

    Posted 05 Apr 2013 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2883 posts

    Posted 09 Apr 2013 Link to this post

    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!
  3. Alberto
    Alberto avatar
    71 posts
    Member since:
    May 2012

    Posted 09 Apr 2013 Link to this post

    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
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2883 posts

    Posted 11 Apr 2013 Link to this post

    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!
  5. Alberto
    Alberto avatar
    71 posts
    Member since:
    May 2012

    Posted 11 Apr 2013 Link to this post

    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

  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2883 posts

    Posted 15 Apr 2013 Link to this post

    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!
  7. Alberto
    Alberto avatar
    71 posts
    Member since:
    May 2012

    Posted 17 Apr 2013 Link to this post

    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
  8. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2883 posts

    Posted 19 Apr 2013 Link to this post

    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!
  9. Alberto
    Alberto avatar
    71 posts
    Member since:
    May 2012

    Posted 23 Apr 2013 Link to this post

    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
  10. Paul
    Paul avatar
    7 posts
    Member since:
    Mar 2012

    Posted 12 Jan Link to this post

    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.

  11. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2883 posts

    Posted 16 Jan Link to this post

    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.
  12. Paul
    Paul avatar
    7 posts
    Member since:
    Mar 2012

    Posted 16 Jan in reply to Alexander Valchev Link to this post

    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

     

  13. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2883 posts

    Posted 3 days and 23 hours ago Link to this post

    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.
  14. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2883 posts

    Posted 3 days and 3 hours ago Link to this post

    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.
Back to Top