combobox with button in items

Page 1 of 2 12 LastLast
  1. #1

    combobox with button in items

    Hi all,
    I have a combobox for search based on http://mvc.ext.net/#/Form_ComboBox/Custom_Search/
    I need to add button with menu in items for call direct methods, redirect to actions or some refreshes in page.
    But i couldnt achieve to render button in ItemTpl.
    Could you please guide me how to add button in ItemTpl or suggest me another way

    Thanks
  2. #2
    Hi @unicorn64,

    A ComponentView plugin might help. Please look at the ComboBox at very bottom in this example:
    https://examples3.ext.net/#/DataView...tView/Overview
  3. #3
    thank you @Daniil, it works great, i can add button in list items,

    but i have another issue now,

    i added button with menu (text=test), which has button also (text=test2), and when i click test button, combobox items hidden and test2 button stays on view lonely,
    how can i achieve nothing is happen just test2 button visible as a menu expected

    @(
      X.ComboBox().ID("SearchCombo").DisplayField("Name").ValueField("Id")
        .TypeAhead(true).Flex(1).EmptyText("Seach by name, surname or IDNum")
        .PageSize(10).Border(false).FieldCls("searchCombo").HideBaseTrigger(true)
        .MinChars(1).TriggerAction(TriggerAction.Query)
        .ListConfig(
            X.BoundList().LoadingText("searching...")
              .ItemTpl(
                  X.XTemplate()
                    .Html(@<text>
                                  <div class="search-item">
                                     <div>{Id} {Name} {Surname}</div>
                                       <div>
                                          <a href="javascript:void(0)" onclick="showPersonnelInfo('{Id}');">Personnel Info</a>&nbsp;&nbsp;&nbsp;
                                          <a href="javascript:void(0)" onclick="showPersonnelAction('{Id}');">Actions</a>
                                        </div> 
                                        <div class="search-menu"></div>
                                   </div>
                                </text>
                     )
               )
               .Plugins(
                    X.ComponentView()
                      .Items(i=>  
                                i.Add(
                                   X.ViewItem()
                                    .Selector("div.search-menu")
                                    .Component(c=>
                                          c.Add(
                                              X.Button().Text("Test")
                                                .Menu(
                                                   X.Menu()
                                                     .Items(
                                                           X.Button().Text("Test2")
                                                     )
                                                )
                                          )
                                     )
                                )
                      )
                )
         )
         .Store(
                  X.Store().AutoLoad(false)
                    .Proxy(
                             X.AjaxProxy()
                               .Url(Url.Action("_SearchPartial", "Common"))
                               .ActionMethods(am => am.Read = HttpMethod.POST)
                               .Reader(X.JsonReader().RootProperty("data"))
                  )
                  .Model(
                             X.Model()
                               .Fields(
                                         X.ModelField().Name("Id"),
                                         X.ModelField().Name("Name"),
                                         X.ModelField().Name("Surname")
                               )
                  )
        )                                   
     )
    Last edited by unicorn64; Apr 25, 2015 at 1:13 PM.
  4. #4
    any ideas?
  5. #5
    I am not sure what is going on. If you provide a full runnable test case, I could look at.
  6. #6
    Hi again,
    I prepare a test model and action, view part is on my previous post,

    when i search for personnel and click test button to show menu details on a personnel, found personnel list disappears, test2 button shown below combobox, and combobox text set to name of personnel, so it behaves like i select the personnel record

    public class Personnel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Surname { get; set; }
    
        public static List<Personnel> GetAll()
        {
            List<Personnel> personnels = new List<Personnel>()
            {  
               new Personnel() { Id = 1, Name = "Giuseppe", Surname = "Twitchell"},
               new Personnel() { Id = 2, Name = "Roberta", Surname = "Duplessis"},
               new Personnel() { Id = 3, Name = "Isabel", Surname = "Deshong"},
               new Personnel() { Id = 4, Name = "Tena", Surname = "Riss"},
               new Personnel() { Id = 5, Name = "Ali", Surname = "Can"},
               new Personnel() { Id = 6, Name = "Minh", Surname = "Salgado"},
               new Personnel() { Id = 7, Name = "Alisia", Surname = "Macintyre"}
            };
            return personnels;
        }
    }
    public ActionResult _SearchPartial(int start, int limit, int page, string query)
    {
        query = query.ToLower();
        var data = Personnel.GetAll().Where(p => ((p.Id.ToString() == query) || p.Name.ToLower().Contains(query) || p.Surname.ToLower().Contains(query)));
        return this.Store(data);
    }
  7. #7
    Thank you, I've reproduced. After investigating I can say that, unfortunately, such a configuration - an inner menu - is not supported.

    You could try to put several buttons into a Container and then put that Container into a ViewItem's Component. Theoretically.
  8. #8
    thank you for your reply Daniil,
    its's so bad... actually if combobox could be configured to not select when click, it is done...
    when i set selectable to false, it disables item..
  9. #9
    if combobox could be configured to not select when click, it is done...
    Please clarify you don't need the ComboBox's items to be able selected at all?
  10. #10
    in this case, when i click Test button, as it is just a menu of a category, it should show submenus only and not select the item, also when i click Test2 button it should fire Test2 click listener and not select the item.

    You can see links in item template on my previous post. actually i want use javascript functions in this menu like,


    //...
    //...
    
    .ListConfig(
            X.BoundList().LoadingText("searching...")
             .ItemTpl(
                  X.XTemplate()
                   .Html(@<text>
                               <div class="search-item">
                                  <div>{Id} {Name} {Surname}</div>
                                  <div class="search-menu"></div>
                                </div>
                             </text>
                    )
               )
               .Plugins(
                    X.ComponentView()
                    .Items(i=>  
                            i.Add(
                               X.ViewItem()
                                .Selector("div.search-menu")
                                .Component(c=>
                                      c.Add(
                                          X.Container()
                                           .Items( 
                                               X.Button().Text("Personnel Info")
                                                 .Menu(
                                                     X.Menu()
                                                       .Items(
                                                             X.Button().Text("Show in this page")
                                                               .Listeners(ls=>ls.Click.Handler="showPersonnelInfo();"),
                                                             X.Button().Text("Show in new page")
                                                               .Listeners(ls=>ls.Click.Handler="showPersonnelInfoInNewPage();")
                                                       )
                                                 ),
                                               X.Button().Text("Actions")
                                                 .Menu(
                                                     X.Menu()
                                                      .Items(
                                                            X.Button().Text("Action1")
                                                              .Listeners(ls=>ls.Click.Handler="showAction1();"),
                                                            X.Button().Text("Action2")
                                                             .Listeners(ls=>ls.Click.Handler="showAction2();")
                                                     )
                                                )
                                           )
                                       )
                               )
                            )
                   )
             )
         )
      //...
      //...
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 4
    Last Post: Jul 15, 2014, 10:59 AM
  2. Select Gridpanel Items on a button click event
    By nagamalli in forum 2.x Help
    Replies: 5
    Last Post: Jul 26, 2013, 11:46 AM
  3. Replies: 5
    Last Post: Mar 15, 2013, 4:24 AM
  4. [CLOSED] [MVC] How to disable button menu items using model
    By lawdhavmercy in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 19, 2013, 5:05 AM
  5. [CLOSED] Combobox: How to remove the duplicate items in the combobox?
    By csssi_coolite in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 09, 2011, 9:34 AM

Tags for this Thread

Posting Permissions