The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] Combo Filter issue on type

Page 2 of 3 FirstFirst 123 LastLast
  1. #11
    Hello @amitpareek!

    There's no resourceManager defined in the page, at least. So the page refuses to load.
  2. #12
    Hi Fabricio,

    Can you please add below code, just above the panel pnlParent and try again ?

    <ext:ResourceManager ID="supportResourceManager" runat="server" DirectMethodNamespace="DM"></ext:ResourceManager>
  3. #13
    Hello @amitpareek!

    I could run the example adding the resource manager.

    It is still not clear what your goal is but I could see the calls you make for clearFilter() are breaking the typeAhead functionality of filtering the combo boxes based on what you type. I couldn't notice anything broken if I just commented out lines calling said clearFilter().

    You should try the different approach suggested here: combox store filter lose efficacy after ClearFilter

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #14
    Hi Fabricio,

    That is what the main issue is, after clearFilter() its causing an issue in filter.

    I will try this approch : https://forums.ext.net/showthread.php?59869
    and let you know.
  5. #15
    Hi Fabricio,

    This solution didn't work for me.

    I have to filter package combo on the basis of what is selected in client combo.
    So when i try to select another value in client combo, i have to filter package combo, which requires to clear the filter.
    Same thing with package and fq combo, fq combo filters on selection of package combo.

    Hence this solution is not working for me : https://forums.ext.net/showthread.ph...l=1#post274164

    Note : here first combo is client, second is package and third is fq.
  6. #16
    Hello @amitpareek!

    As there's a conflict with the filters maybe if you populated the stores with the relevant data as the previous ones are selected would fit best to your scenario?

    Refer to this example that shows linked combo boxes being populated on previous' selection: Forms - Combo Box - Linked Combo Boxes

    Else maybe a solution would be to, instead of calling clearFilter(), removing just the specific filter you are applying to the store on selection, hopefully that would prevent the typeAhead filters from being removed.
    Fabrício Murta
    Developer & Support Expert
  7. #17
    Hi Fabricio,

    That exampla is getting data in second combo via service (Cities.asmx/GetCities). While i have all the data available in the combo store (that we get on boxReady), just need to filter it as per the clientId/PackageId of the selected client/package combo.

    Also i have tried to remove the filter on combo selection, that is even not working for me.

    Can you please try these solution on your end and let me know if any of it works for you ?
  8. #18
    Hello @amitpareek!

    Well, a suggestion is exactly to cease loading all data to the combo box and filter + typeAhead filter it so that you don't need to clear the filter ever.

    It is not required to use a service to load the data, if you look at the ajax linked combos example, it just wires the OnReadData event to load the combo box. There, the function that loads the city list could be just replaced by the example's for loop making (for example) the packages list for customer 3, if that was the selection passed to the event.

    One advantage on this approach is loading to the page only the necessary data on demand, making the user experience better if there are a lot of companies and each has lots of packages and, in turn, each has a lot of "FQ" entries. And you can mask the other combo boxes with the word "loading" as it fetches the data from the server.

    If you really require the "all comboboxes preloaded" approach, let us know. We can try to get something working for you if that's feasible.

    There may be a simple solution or the fix so complicated it pretty much takes the underlying (ExtJS) framework towards the next version which, in turn, would make the solution not feasible.

    Please consider the on-demand loading approach, and let us know if it does not help at all so we can investigate the "all preloaded" approach for work around over the problem.
    Fabrício Murta
    Developer & Support Expert
  9. #19
    Hello Fabricio,

    There are more than 46000 records in our case, so we have to get it only once for all three combos, and hence we use all preloaded approach.
    I want to make a try with on demand loading approach as you suggested, so will check it first and then let you know if it wont work for me.

    Thank you.
  10. #20
    Hello @amitpareek!

    By your claim I believe the best option is really have it loading on-demand instead of filtering over. Will save a lot during the first page load.

    Anyway, I went ahead and reviewed your test case with a working filter-based solution. At least as far as I tested it here, it works fine. The main point there is the clearFieldFilters() function used instead of the store's clearFilter().

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>61851 - Store-filter-linked combo boxes</title>
        <script type="text/javascript">
            TestExtractionProtocol = {
                ExpComboSelect: function (combo, records, eOpts) {
                    var clientcb = App.clientcb,
                        clientsto = App.clientsto,
                        pkgcb = App.pkgcb,
                        pkgsto = App.pkgsto,
                        fqcb = App.fqcb,
                        fqsto = App.fqsto,
                        clearFilter = TestExtractionProtocol.clearFieldFilters;
    
                    var cmVal = combo.getValue();
                    combo.getTrigger(0).show();
                    if (combo.id == clientcb.id) {
                        clearFilter(pkgsto, 'ClientId');
                        pkgsto.filter('ClientId', cmVal);
                        pkgcb.emptyText = "Select one Package";
                        pkgcb.applyEmptyText();
                        pkgcb.reset();
                        pkgcb.focus();
    
                        clearFilter(fqsto, 'ClientId');
                        fqsto.filter('ClientId', cmVal);
                        fqcb.reset();
                    } else if (combo.id == pkgcb.id) {
                        clearFilter(fqsto, 'PackageId');
                        fqsto.filter('PackageId', cmVal);
                        fqcb.emptyText = "Select one FQ";
                        fqcb.applyEmptyText();
                        fqcb.reset();
                        fqcb.focus();
                    }
                },
                // This will clear any filter affecting the specified field.
                // It does not refresh the store though, it is expected a
                // store.filter() would be called right after this to refresh it.
                clearFieldFilters: function (store, field) {
                    var to_remove = [];
    
                    var eachFn = function (entry, index, self) {
                        if (entry.property == field) {
                            to_remove.push(index);
                        }
                    };
    
                    // Get the (reverse) list of filters to remove
                    Ext.each(store.filters.items, eachFn, this, true);
    
                    // Remove each filter
                    Ext.each(to_remove, function (entry) { store.filters.removeAt(entry); });
                },
                clearFilterExp: function (me) {
                    var clientcb = App.clientcb,
                        clientsto = App.clientsto,
                        pkgcb = App.pkgcb,
                        pkgsto = App.pkgsto,
                        fqcb = App.fqcb,
                        fqsto = App.fqsto,
                        clearFilter = TestExtractionProtocol.clearFieldFilters;
    
                    me.clearValue();
                    me.clear();
                    me.getTrigger(0).hide();
                    if (me.id == clientcb.id) {
                        clearFilter(pkgsto, 'ClientId');
                        pkgsto.filter('ClientId', -1);
                        clearFilter(fqsto, 'ClientId');
                        fqsto.filter('ClientId', -1);
    
                        TestExtractionProtocol.clearFilterExp(pkgcb);
                        pkgcb.emptyText = "Choose a client";
                        pkgcb.applyEmptyText();
                    } else if (me.id == pkgcb.id) {
                        clearFilter(fqsto, 'PackageId');
                        fqsto.filter('PackageId', -1);
                        TestExtractionProtocol.clearFilterExp(fqcb);
                        fqcb.emptyText = "Choose a package";
                        fqcb.applyEmptyText();
                    } else if (me.id == "fqcb") {
                    }
                },
    
                ExpComboBoxReady: function () {
                    var clientcb = App.clientcb,
                        clientsto = App.clientsto,
                        pkgcb = App.pkgcb,
                        pkgsto = App.pkgsto,
                        fqcb = App.fqcb,
                        fqsto = App.fqsto;
    
                    clientList = []; a = 1;
                    packageList = []; b = 1;
                    fqList = []; c = 1;
    
                    for (var i = 1; i <= 10; i++) {
                        clientList.push({ ClientId: i, ClientName: "Client " + i });
    
                        for (var j = 1; j <= 10; j++) {
                            packageList.push({ ClientId: i, PackageId: b, PackageName: "cl" + i + "/Package " + b });
    
                            for (var k = 1; k <= 50; k++) {
                                fqList.push({ ClientId: i, PackageId: b, FQId: c, FQName: "cl" + i + "/pk" + b + "/FQ " + c });
                                c++;
                            }
                            b++;
                        }
                    }
    
                    clientsto.removeAll();
                    clientsto.add(clientList);
    
                    pkgsto.removeAll();
                    pkgsto.add(packageList);
                    pkgsto.filter('ClientId', -1);
    
                    App.fqsto.removeAll();
                    App.fqsto.add(fqList);
                    fqsto.filter('ClientId', -1);
                    fqsto.filter('PackageId', -1);
    
                    clientcb.anyMatch = true;
                    clientcb.enableRegEx = false;
                    clientcb.bindStore(App.clientsto);
                    clientcb.displayField = 'ClientName';
                    clientcb.valueField = 'ClientId';
    
                    pkgcb.anyMatch = true;
                    pkgcb.enableRegEx = false;
                    pkgcb.bindStore(App.pkgsto);
                    pkgcb.displayField = 'PackageName';
                    pkgcb.valueField = 'PackageId';
                    pkgcb.emptyText = "Choose a client";
                    pkgcb.applyEmptyText();
    
                    fqcb.anyMatch = true;
                    fqcb.enableRegEx = false;
                    fqcb.bindStore(App.fqsto);
                    fqcb.displayField = 'FQName';
                    fqcb.valueField = 'FQId';
                    fqcb.emptyText = "Choose a package";
                    fqcb.applyEmptyText();
                },
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" />
            <div>
                <h2>
                    Forum thread <a href="https://forums.ext.net/showthread.php?61851">61851</a>: link combo boxes by 
                    their respective stores' filters with typeAhead enabled.
                </h2>
                <br />
                <h4>
                    Using store.clearFilter() while typeAhead is enabled effectively disables typeAhead, so a selective
                    removal of filters is necessary, which is implemented with
                    <pre>TestExtractionProtocol.clearFieldFilters(store, field)</pre>
                </h4>
    
                <ext:Panel runat="server" ID="pnlParent" ItemID="pnlParent" Height="500">
                    <Items>
                        <ext:ComboBox
                            ID="clientcb"
                            QueryMode="Local"
                            runat="server"
                            DisplayField="ClientName"
                            Width="300"
                            Margin="15"
                            ValueField="ClientId"
                            FieldLabel="Client Name"
                            LabelAlign="Right"
                            TypeAhead="true"
                            >
                            <Store>
                                <ext:Store runat="server" ID="clientsto">
                                    <Model>
                                        <ext:Model runat="server">
                                            <Fields>
                                                <ext:ModelField Name="ClientId" />
                                                <ext:ModelField Name="ClientName" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <Listeners>
                                <Select Fn="TestExtractionProtocol.ExpComboSelect" />
                                <TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);" />
                                <AfterRender Fn="TestExtractionProtocol.ExpComboBoxReady" Delay="1000" />
                            </Listeners>
                            <Triggers>
                                <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                            </Triggers>
                        </ext:ComboBox>
    
                        <ext:ComboBox
                            ID="pkgcb"
                            runat="server"
                            QueryMode="Local"
                            DisplayField="PackageName"
                            Width="300"
                            Margin="15"
                            ValueField="PackageId"
                            FieldLabel="Package Name"
                            LabelAlign="Right"
                            TypeAhead="true"
                            >
                            <Store>
                                <ext:Store runat="server" ID="pkgsto" SortOnFilter="true">
                                    <Model>
                                        <ext:Model runat="server">
                                            <Fields>
                                                <ext:ModelField Name="ClientId"></ext:ModelField>
                                                <ext:ModelField Name="PackageId"></ext:ModelField>
                                                <ext:ModelField Name="PackageName"></ext:ModelField>
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <Listeners>
                                <Select Fn="TestExtractionProtocol.ExpComboSelect"></Select>
                                <TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);"></TriggerClick>
                            </Listeners>
                            <Triggers>
                                <ext:FieldTrigger Icon="Clear" HideTrigger="true"></ext:FieldTrigger>
                            </Triggers>
                        </ext:ComboBox>
                        <ext:ComboBox
                            ID="fqcb"
                            runat="server"
                            QueryMode="Local"
                            Width="300"
                            Margin="15"
                            DisplayField="FQName"
                            ValueField="FQId"
                            FieldLabel="FQ"
                            LabelAlign="Right"
                            TypeAhead="true"
                            >
                            <Store>
                                <ext:Store runat="server" ID="fqsto" SortOnFilter="true">
                                    <Model>
                                        <ext:Model runat="server" ID="modelfqlistEP">
                                            <Fields>
                                                <ext:ModelField Name="ClientId" />
                                                <ext:ModelField Name="PackageId" />
                                                <ext:ModelField Name="FQId" />
                                                <ext:ModelField Name="FQName" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <Listeners>
                                <Select Fn="TestExtractionProtocol.ExpComboSelect" />
                                <TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);" />
                            </Listeners>
                            <Triggers>
                                <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                            </Triggers>
                        </ext:ComboBox>
                    </Items>
                </ext:Panel>
            </div>
        </form>
    </body>
    </html>
    Still, the best solution seems to be loading the combo boxes as the selections are made.

    Hope this helps, nevertheless!
    Fabrício Murta
    Developer & Support Expert
Page 2 of 3 FirstFirst 123 LastLast

Similar Threads

  1. Replies: 8
    Last Post: Jun 05, 2016, 8:10 PM
  2. [CLOSED] File Type Filter in FileUploadField
    By barnali in forum 3.x Premium Help
    Replies: 1
    Last Post: Jan 05, 2016, 4:33 PM
  3. Replies: 9
    Last Post: Aug 11, 2015, 12:52 PM
  4. [CLOSED] How get combo input type in javascript?
    By mcfromero in forum 1.x Premium Help
    Replies: 3
    Last Post: Jul 18, 2012, 5:52 PM
  5. [CLOSED] Type Ahead in a Combo
    By CMA in forum 1.x Premium Help
    Replies: 2
    Last Post: Aug 17, 2009, 11:54 AM

Tags for this Thread

Posting Permissions