[CLOSED] multicombo move "check all" and "uncheck all" triggers inside the dropdown

  1. #1

    [CLOSED] multicombo move "check all" and "uncheck all" triggers inside the dropdown

    Hi,

    Because of UI requirements, I've been asked to have the "check all" and "uncheck all" triggers inside the dropdown options, basically, what the jquery guys have made available: http://www.erichynds.com/examples/jq...-widget/demos/

    Is there a way to achieve this with Ext.Net? I've been through the examples and search about this, but couldn't find any ideas how to solve this.
    Last edited by fabricio.murta; Sep 17, 2016 at 1:47 AM. Reason: no user feedback for 7+ days
  2. #2
    Hello!

    Sure, you can customize a lot of the combo box's drop menu! See these examples:
    - Form Fields - Combo box - Custom drop down list.
    - Form Fields - Combo box - Two columns.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks Fabricio!

    I have a working example with the desired functionality. However, the moment I added a template, the checkboxes are no longer available. How can I have them back? Please interact with the provided example to find out what I mean.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
    
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                var dumbData = TestData.GetData();
                
                this.uiControlx.GetStore().DataSource = dumbData;
                this.uiControlx.DataBind();
                this.uiControlx.SetValueAndFireSelect(dumbData.Select(x => x.Id).ToArray());            
            }
    
            public class TestData
            {
    
                public static List<TestData> GetData()
                {
                    List<TestData> data = new List<TestData>();
                    for(int i=111;i<116;i++)
                    {
                        data.Add(new TestData() { Id = i, Name = "option " + i });
                    }
                    return data;
                }
    
                public int Id { get; set; }
                public string Name { get; set; }
            }
        </script>
    
        <script type="text/javascript">
    
            var myGetDisplayValue = function () {
                var value;
    
                if (this.valueCollection.length == this.getStore().totalCount) {
                    value = "«All»";
                } else if (this.valueCollection.length > 1) {
                    value = "Multi-Selection";
                } else if (this.valueCollection.length == 1) {
                    value = this.displayTpl.apply(this.displayTplData);
                } else {
                    value = "No Selection!";
                }
    
                return this.wrapBySquareBrackets ? "[" + value + "]" : value;
            };
    
            function checkAll() {            
                Ext.getCmp("uiControlx").selectAll();
            }
    
            function uncheckAll() {            
                Ext.getCmp("uiControlx").clearValue();
            }
    
            
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" Theme="Crisp" />
            
        <form runat="server">
            <ext:MultiCombo ID="uiControlx" runat="server" Editable="false" FieldLabel="bunch of options" InputWidth="70" MatchFieldWidth="false" LabelWidth="150" DisplayField="Name" ValueField="Id">
                <CustomConfig>
                    <ext:ConfigItem Name="getDisplayValue" Value="myGetDisplayValue" Mode="Raw" />
                </CustomConfig>
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Id" />
                                    <ext:ModelField Name="Name" />                                
                                </Fields>
                            </ext:Model>
                        </Model>            
                    </ext:Store>
                </Store>                                    
                 <ListConfig ItemSelector=".x-boundlist-item">
                    <Tpl runat="server">
                        <Html>
                            <div>
                                <button type="button" class="btn btn-warning btn-xs" onclick="checkAll()">
                                  <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Check All
                                </button>
                                <button type="button" class="btn btn-warning btn-xs" onclick="uncheckAll()">
                                  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Uncheck All
                                </button>
                            </div>
                            <tpl for=".">                                                                                    
                                <div class="x-boundlist-item">{Name}</div>                                                        
                            </tpl>
                        </html>                
                    </Tpl>
                </ListConfig>            
    		</ext:MultiCombo> 
        </form>   
    </body>
    </html>
  4. #4
    Hello! You should get the items' template as close as possible from the current version's template. To have an idea of how it should look like, just disable/comment your ListConfig block and search for one of the combo boxes options in your browser debugger's DOM Viewer.

    While this is functional, it is still far from perfect, if you compare the current template for list items -- which includes record index (position in the list) and ID (effective unique ID) -- if you get problems with this approach, you might inspect combo box's template for the correct placeholders to replace in your custom template:

    <ListConfig ItemSelector=".x-boundlist-item">
        <Tpl runat="server">
            <Html>
                <div>
                    <button type="button" class="btn btn-warning btn-xs" onclick="checkAll()">
                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Check All
                    </button>
                    <button type="button" class="btn btn-warning btn-xs" onclick="uncheckAll()">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Uncheck All
                    </button>
                </div>
                <ul class="x-list-plain" data-ref="listEl">
                    <tpl for=".">
                        <li class="x-boundlist-item" role="option" unselectable="on">
                            <div class="x-combo-list-item {[this.getItemClass(values)]}">
                                <div class="x-mcombo-text">{Name}</div>
                            </div>
                        </li>
                    </tpl>
                </ul>
            </html>
        </Tpl>
    </ListConfig>
    Just replace this block with your code's and you should see it works now. Checkboxes responding to their selected or not status.

    Using ResourceManager's ScriptMode="Debug" and SourceFormatting="true" is advised for debugging and developing custom behaviors like that. :)

    I hope this helps!
  5. #5
    Hello! We didn't hear back from your for days now, did the above help you or not?
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Apr 06, 2016, 1:05 PM
  2. Replies: 3
    Last Post: Jan 28, 2016, 7:13 PM
  3. Replies: 0
    Last Post: Nov 15, 2013, 10:32 AM
  4. Replies: 5
    Last Post: May 02, 2012, 6:37 PM
  5. Replies: 4
    Last Post: Oct 11, 2011, 3:42 AM

Tags for this Thread

Posting Permissions