What's New?

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

  1. #1
    Aug 10, 2016, 4:27 PM

    [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 12:47 AM. Reason: no user feedback for 7+ days
  2. #2
    Aug 12, 2016, 3:09 AM
    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
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Aug 12, 2016, 9:43 PM
    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
    Aug 13, 2016, 5:39 PM
    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
    Sep 02, 2016, 8:01 PM
    Hello! We didn't hear back from your for days now, did the above help you or not?
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. Ext Grid Component Column on Popup giving "me is not defined" and "find exact of Null"
    By PriceRightHTML5team in forum 2.x Help
    Replies: 1
    Last Post: Apr 06, 2016, 12:05 PM
  2. [CLOSED] "TextArea" inside a Panel, calling "setHeight" on the client side does not resize the control on IE
    By adrianot in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 28, 2016, 6:13 PM
  3. A string [","","] display at top left when created FieldTrigger inside FieldSet
    By Aod47 in forum 1.x Help
    Replies: 0
    Last Post: Nov 15, 2013, 9:32 AM
  4. [CLOSED] Ext.net v2 Beta release: Panel collapsed with CollapseMode="Mini" and Split="true"
    By supera in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  5. [CLOSED] GridPanel: ServerSide Code Equivalent for "getSelectionModel().selectRow(0)" and "getView().focusRow(0)"
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM

Tags for this Thread

Posting Permissions