Embed a search box in the menu bar

6 posts, 0 answers
  1. Stephen Graham
    Stephen Graham avatar
    7 posts
    Member since:
    Sep 2012

    Posted 01 Nov 2012 Link to this post

    Hi,

    Has anybody managed to put a search box onto the main part of the menu bar? I can get it into a menu item, but not on the main bar.
    Is this possible?
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 06 Nov 2012 Link to this post

    Hi Stephen,

    You can take a look at the following example:

    http://jsfiddle.net/dimodi/wu5Wj/

    All the best,
    Dimo
    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. Stephen Graham
    Stephen Graham avatar
    7 posts
    Member since:
    Sep 2012

    Posted 06 Nov 2012 Link to this post

    Hi,

    sadly that won't work using the MVC helper.... is it possible from there?

    ie

    @(Html.Kendo().Menu()
          .Name("Menu")
          .Items(items =>
          {
              items.Add()
                  //I'd like an input in here....!
  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 08 Nov 2012 Link to this post

    Hi Stephen,

    I am sorry about the misunderstanding, however, please note that this is the non-MVC Kendo UI forum and you have not indicated that you are using the MVC helpers. Hence my reply was targeted at the pure client-side Menu widget.

    You can set Encoded(false) for the item and inject the desired HTML markup with Text().

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Karika
    Karika avatar
    1 posts
    Member since:
    Oct 2012

    Posted 20 Dec 2012 Link to this post

    How can you inject HTML code in .Text?
    e.g.
    items.Add().Text(@<text><input type="text" name="searchString" placeholder="Quick Search" title="Quick Search" id="quickSearchInput" class="k-textbox" spellcheck="true" autofocus="autofocus" autocomplete="on" /></text>).Encoded(false);
  7. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 21 Dec 2012 Link to this post

    Hello Karika,

    You can inject HTML code as an ordinary string.

    items.Add().Text("<input type='text' />").Encoded(false);

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready