Menu with textboxes

9 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
    2875 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. Kendo UI is VS 2017 Ready
  4. 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
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 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!
  6. 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

  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 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!
  8. 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
  9. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 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!
  10. 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
Back to Top
Kendo UI is VS 2017 Ready