[CLOSED] ComboBox PagingToolbar for large dataset

  1. #1

    [CLOSED] ComboBox PagingToolbar for large dataset

    Hi, we're trying to add a PagingToolbar ability our combobox, so users can find their values more easily in the case of large datasets.

    This is similar in concept to the example here:
    https://examples4.ext.net/#/Form/Com...Custom_Search/

    However, we don't want to have the refresh icon in the paging toolbar show up.
    And we don't want the "Page" label to appear in front of the paging index.
    What is the best way to accomplish this?

    Our approach here is hitting a few roadblocks. Thanks

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.CustomizedPagingCB_Store.DataSource = new object[]
            {
                new object[] { "Store_IDValue_0", "Store_Display_Verbiage0"},
                new object[] { "Store_IDValue_1", "Store_Display_Verbiage1"},
                new object[] { "Store_IDValue_2", "Store_Display_Verbiage2"},
                new object[] { "Store_IDValue_3", "Store_Display_Verbiage3"},
                new object[] { "Store_IDValue_4", "Store_Display_Verbiage4"},
                new object[] { "Store_IDValue_5", "Store_Display_Verbiage5"},
                new object[] { "Store_IDValue_6", "Store_Display_Verbiage6"},
                new object[] { "Store_IDValue_7", "Store_Display_Verbiage7"},
                new object[] { "Store_IDValue_8", "Store_Display_Verbiage8"},
                new object[] { "Store_IDValue_9", "Store_Display_Verbiage9"},
                new object[] { "Store_IDValue_10", "Store_Display_Verbiage10"},
                new object[] { "Store_IDValue_11", "Store_Display_Verbiage11"},
                new object[] { "Store_IDValue_12", "Store_Display_Verbiage12"},
                new object[] { "Store_IDValue_13", "Store_Display_Verbiage13"},
                new object[] { "Store_IDValue_14", "Store_Display_Verbiage14"},
                new object[] { "Store_IDValue_15", "Store_Display_Verbiage15"},
                new object[] { "Store_IDValue_16", "Store_Display_Verbiage16"},
                new object[] { "Store_IDValue_17", "Store_Display_Verbiage17"},
                new object[] { "Store_IDValue_18", "Store_Display_Verbiage18"},
                new object[] { "Store_IDValue_19", "Store_Display_Verbiage19"},
            };         
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>ComboBox with customized PagingToolbar</title>    
        <script>
            Ext.define("MinimalizedBoundList", {
                extend: "Ext.view.BoundList",
                alias: "widget.MinimalizedBoundList"
                ,
                createPagingToolbar: function () {
                    return Ext.widget("pagingtoolbar", {
                        id: this.id + "-paging-toolbar",
                        pageSize: this.pageSize,     //Q2a: this doesn't seem to be working; is not inheriting pg size of 5 from by the combo box
                        //pageSize: 5,              //Q2b: this also isn't working; explicitly setting is not forcing the page size either. So unable to activate the paging toolbaar
                        store: this.store,
                        border: false
                        , beforePageText: ""			//NOTE: must hide default text that prefixes the page index to help us conserve screen real estate
                        , afterPageText: 'of {0}'
                        , listeners: {
                            beforerender: {
                                fn: function () {
                                    this.getComponent('refresh').hidden = true;	//NOTE: must hide the refresh icon on the far right of the paging toolbar that renders by default; is confusing for our use-case
                                }
                            }
                        }
                    });
                }
            });
        </script>
        
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />        
    
            <p>
                We want to customize the paging toolbar of our comboboxes as follows:           
            </p>
    
            <ol>
                <li>
                    hide the default text that prefixes the page index to help us conserve screen real estate
                </li>
                <li>
                    ensure that the paging toolbar and dropdown menu stays open when we try to click the page index field to change our viewing scope
                </li>
                <li>
                    hide the refresh icon on the far right of the paging toolbar that renders by default; is confusing for our use-case
                </li>
                <li>
                    ensure that the paging toolbar renders with the minimum width necessary to accomodate both
                </li>                            	            
            </ol>
    
            <ul>
                <li>
                    the text in the combo box	            
                </li>
                <li>
                    all elements in the paging toolbar
                </li>
            </ul>
    
            <!--customized to render paging navigation-->
            <!--Q1: how can we have the paging navigation fully render? -->
            <ext:ComboBox ID="CustomizedPagingCB"
                runat="server" 
                TypeAhead="true"
    		    DisplayField="Store_Display_Field"
    		    ValueField="Store_Value_Field"                       		    
    		    QueryMode="Remote"
                PageSize="5" 
                >            
    		    <ListConfig>
    			    <CustomConfig> 
    				    <ext:ConfigItem Name="xtype" Value="MinimalizedBoundList" Mode="Value" /> 
    			    </CustomConfig> 
    		    </ListConfig>
    		    <Store>
    			    <ext:Store ID="CustomizedPagingCB_Store" runat="server" RemoteFilter="true" RemoteSort="true" AutoLoad="false">
    				    <Model>
    					    <ext:Model ID="StoreModel" runat="server">
    						    <Fields>
    							    <ext:ModelField Name="Store_Display_Field"/>
    							    <ext:ModelField Name="Store_Value_Field"/>
    						    </Fields>
    					    </ext:Model>
    				    </Model>				
    			    </ext:Store>
    		    </Store>
    	    </ext:ComboBox>                            
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Feb 21, 2018 at 10:13 PM.
  2. #2
    Hello @Caleb!

    I believe the information you need to attain your objective can be summarized in two topics:

    - HideRefresh from Toolbar (exclusive Ext.NET feature to easily hide the button, you can just use 'hideRefresh' from client side). Here's an example using it: DataView > Basic > With Paging (you can run the example and look at the generated javascript to see how it should look like)
    - Hide arbitrary parts of the paging toolbar: Hide paging toolbar buttons. The 'page' item probably is under index 3 of the paging toolbar items list. This, of course, can also be used to hide the refresh button.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Mauricio, that does seem very promising, and tried it per the code below.


    But can't really tell if this is working as expected. The combobox's rendering doesn't automatically expand the width of the drop-down portion to fit in the paging toolbar.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.CustomizedPagingCB_Store.DataSource = new object[]
            {
                new object[] { "Store_IDValue_0", "Store_Display_Verbiage0"},
                new object[] { "Store_IDValue_1", "Store_Display_Verbiage1"},
                new object[] { "Store_IDValue_2", "Store_Display_Verbiage2"},
                new object[] { "Store_IDValue_3", "Store_Display_Verbiage3"},
                new object[] { "Store_IDValue_4", "Store_Display_Verbiage4"},
                new object[] { "Store_IDValue_5", "Store_Display_Verbiage5"},
                new object[] { "Store_IDValue_6", "Store_Display_Verbiage6"},
                new object[] { "Store_IDValue_7", "Store_Display_Verbiage7"},
                new object[] { "Store_IDValue_8", "Store_Display_Verbiage8"},
                new object[] { "Store_IDValue_9", "Store_Display_Verbiage9"},
                new object[] { "Store_IDValue_10", "Store_Display_Verbiage10"},
                new object[] { "Store_IDValue_11", "Store_Display_Verbiage11"},
                new object[] { "Store_IDValue_12", "Store_Display_Verbiage12"},
                new object[] { "Store_IDValue_13", "Store_Display_Verbiage13"},
                new object[] { "Store_IDValue_14", "Store_Display_Verbiage14"},
                new object[] { "Store_IDValue_15", "Store_Display_Verbiage15"},
                new object[] { "Store_IDValue_16", "Store_Display_Verbiage16"},
                new object[] { "Store_IDValue_17", "Store_Display_Verbiage17"},
                new object[] { "Store_IDValue_18", "Store_Display_Verbiage18"},
                new object[] { "Store_IDValue_19", "Store_Display_Verbiage19"},
            };         
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>ComboBox with customized PagingToolbar</title>    
        <script>
            Ext.define("MinimalizedBoundList", {
                extend: "Ext.view.BoundList",
                alias: "widget.MinimalizedBoundList"
                ,
                createPagingToolbar: function () {
                    return Ext.widget("pagingtoolbar", {
                        id: this.id + "-paging-toolbar"
                        ,pageSize: this.pageSize     //Q2a: this doesn't seem to be working; is not inheriting pg size of 5 from by the combo box
                        //pageSize: 5,              //Q2b: this also isn't working; explicitly setting is not forcing the page size either. So unable to activate the paging toolbaar
                        ,store: this.store
                        ,border: false
                        , beforePageText: ""			//NOTE: must hide default text that prefixes the page index to help us conserve screen real estate
                        , afterPageText: 'of {0}'
                        , HideRefresh:true  //special ext.net property
    
                    });
                }
            });
        </script>
        
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />        
    
            <p>
                We want to customize the paging toolbar of our comboboxes as follows:           
            </p>
    
            <ol>
                <li>
                    hide the default text that prefixes the page index to help us conserve screen real estate
                </li>
                <li>
                    ensure that the paging toolbar and dropdown menu stays open when we try to click the page index field to change our viewing scope
                </li>
                <li>
                    hide the refresh icon on the far right of the paging toolbar that renders by default; is confusing for our use-case
                </li>
                <li>
                    ensure that the paging toolbar renders with the minimum width necessary to accomodate both
                </li>                            	            
            </ol>
    
            <ul>
                <li>
                    the text in the combo box	            
                </li>
                <li>
                    all elements in the paging toolbar
                </li>
            </ul>
    
            <!--customized to render paging navigation-->
            <!--Q1: how can we have the paging navigation fully render? -->
            <ext:ComboBox ID="CustomizedPagingCB"
                runat="server" 
                TypeAhead="true"
    		    DisplayField="Store_Display_Field"
    		    ValueField="Store_Value_Field"                       		    
    		    QueryMode="Remote"
                PageSize="5" 
                >            
    		    <ListConfig>
    			    <CustomConfig> 
    				    <ext:ConfigItem Name="xtype" Value="MinimalizedBoundList" Mode="Value" /> 
    			    </CustomConfig> 
    		    </ListConfig>
    		    <Store>
    			    <ext:Store ID="CustomizedPagingCB_Store" runat="server" RemoteFilter="true" RemoteSort="true" AutoLoad="false">
    				    <Model>
    					    <ext:Model ID="StoreModel" runat="server">
    						    <Fields>
    							    <ext:ModelField Name="Store_Display_Field"/>
    							    <ext:ModelField Name="Store_Value_Field"/>
    						    </Fields>
    					    </ext:Model>
    				    </Model>				
    			    </ext:Store>
    		    </Store>
    	    </ext:ComboBox>                            
        </form>
    </body>
    </html>
  4. #4
    Hello @Caleb!

    I modified the sample you provided, changing the approach to the one suggested in the thread linked above: handling the pager during render to hide the undesired entries:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] { "Store_IDValue_0", "Store_Display_Verbiage0"},
                new object[] { "Store_IDValue_1", "Store_Display_Verbiage1"},
                new object[] { "Store_IDValue_2", "Store_Display_Verbiage2"},
                new object[] { "Store_IDValue_3", "Store_Display_Verbiage3"},
                new object[] { "Store_IDValue_4", "Store_Display_Verbiage4"},
                new object[] { "Store_IDValue_5", "Store_Display_Verbiage5"},
                new object[] { "Store_IDValue_6", "Store_Display_Verbiage6"},
                new object[] { "Store_IDValue_7", "Store_Display_Verbiage7"},
                new object[] { "Store_IDValue_8", "Store_Display_Verbiage8"},
                new object[] { "Store_IDValue_9", "Store_Display_Verbiage9"},
                new object[] { "Store_IDValue_10", "Store_Display_Verbiage10"},
                new object[] { "Store_IDValue_11", "Store_Display_Verbiage11"},
                new object[] { "Store_IDValue_12", "Store_Display_Verbiage12"},
                new object[] { "Store_IDValue_13", "Store_Display_Verbiage13"},
                new object[] { "Store_IDValue_14", "Store_Display_Verbiage14"},
                new object[] { "Store_IDValue_15", "Store_Display_Verbiage15"},
                new object[] { "Store_IDValue_16", "Store_Display_Verbiage16"},
                new object[] { "Store_IDValue_17", "Store_Display_Verbiage17"},
                new object[] { "Store_IDValue_18", "Store_Display_Verbiage18"},
                new object[] { "Store_IDValue_19", "Store_Display_Verbiage19"},
            };
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>ComboBox with customized PagingToolbar</title>
        <script>
            // This will handle customizing the paging toolbar as soon as it is about to be
            // rendered. At this point, it won't be rendered yet (pagingToolbar.rendered == false)
            var handlePickerRender = function (picker) {
                var pagingToolbar = picker.pagingToolbar;
    
                // will do for the 'page' label, a separator and the refresh button
                var items = [3, 9, 10];
                for (var i = 0; i < items.length; i++) {
                    pagingToolbar.items.get(items[i]).hide();
                }
            }
        </script>
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <p>
                We want to customize the paging toolbar of our comboboxes as follows:
            </p>
    
            <ol>
                <li>hide the default text that prefixes the page index to help us conserve screen real estate
                </li>
                <li>ensure that the paging toolbar and dropdown menu stays open when we try to click the page index field to change our viewing scope
                </li>
                <li>hide the refresh icon on the far right of the paging toolbar that renders by default; is confusing for our use-case
                </li>
                <li>ensure that the paging toolbar renders with the minimum width necessary to accomodate both
                </li>
            </ol>
    
            <ul>
                <li>the text in the combo box	
                </li>
                <li>all elements in the paging toolbar
                </li>
            </ul>
    
            <ext:ComboBox ID="cb1"
                runat="server"
                TypeAhead="true"
                DisplayField="dField"
                ValueField="vField"
                PageSize="5"
                Width="500">
                <ListConfig>
                    <Listeners>
                        <%-- Tap into the rendering process and handle the paging toolbar --%>
                        <BeforeRender Fn="handlePickerRender" />
                    </Listeners>
                </ListConfig>
                <Store>
                    <ext:Store
                        ID="Store1"
                        runat="server"
                        IsPagingStore="true"
                        PageSize="5">
                        <Model>
                            <ext:Model ID="StoreModel" runat="server">
                                <Fields>
                                    <ext:ModelField Name="dField" />
                                    <ext:ModelField Name="vField" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
            </ext:ComboBox>
        </form>
    </body>
    </html>
    As for the width, it can't be helped, you'll have to restyle the buttons and their padding, and so on, you can do that during the render, or just override the paging toolbar's CSS rules. Or just set the MinWidth config to the combo box, so that it fits the paging toolbar (not the other way around). A good value for the default, Triton theme, is 280 pixels wide.

    And, I didn't notice you mentioning it, there seems to be a bug (which is also reproducible in Forms > Combo Box > Two Columns) in which the second time you expand the combo box, the number of entries in the list will not obey the page size. This can't be reproduced in Forms > Combo Box > Custom Search because the contents of the dropdown picker is reloaded every time it is expanded. The "cached" version in the former example has an issue with keeping the picker intact when re-showing it, if you use remote querying, then this shouldn't be a problem for you. If this is a problem for you, please open a new thread specific to that issue and we'll investigate it.

    I hope this helps!
  5. #5
    Thanks a lot, please feel free to close.
    Will submit a separate ticket to follow up on getting TypeAhead feature to work.
  6. #6
    Okay, @Caleb, thanks for the feedback! We hope we could help with this one!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. problem with pagingtoolbar of combobox
    By ddslogistics in forum 1.x Help
    Replies: 0
    Last Post: Sep 19, 2012, 9:11 AM
  2. Replies: 0
    Last Post: Sep 08, 2011, 1:16 PM
  3. Replies: 2
    Last Post: Aug 18, 2009, 11:22 AM
  4. [CLOSED] Combobox makes page with large image really slow
    By jchau in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jun 10, 2009, 4:06 AM
  5. Replies: 11
    Last Post: Apr 06, 2009, 4:35 AM

Posting Permissions