1. Home
  2. Forum
  3. Blazor
  4. Issues filtering multicolumn combo box.

Issues filtering multicolumn combo box.

I have multicolumn combo boxes inside a grid and outside a grid.  The combo box inside the grid seems to work as expected but outside the grid, as soon as I start to type and filter, it reverts back to the original value and will not allow me to backspace.  Only way is to completely wipe out was is in there and filter from scratch.
I'm on the latest version 18.3.0.35 of syncfusion.  Since there are thousands of customers, I save them in 1 object but only load a max of 100 customers in the filter function so I don't have to load them all. This isn't working for all my filtering methods in combo boxes that live outside the grid, but apparently works inside the grid.

I have a video and code attached.

        <SfComboBox @ref="comboboxCustomer" ID="CustomerID" TValue="string" TItem="FDICustomer" Placeholder="e.g. Account Num" CssClass="e-multi-column" Text="@ChemOrderTable.CustAccount" @bind-Value="@ChemOrderTable.CustAccount" DataSource="@Customers" AllowFiltering="true" Query="@customerQuery" PopupWidth="700px" PopupHeight="500">
                                            <ComboBoxFieldSettings Text="CustAccount" Value="CustAccount"></ComboBoxFieldSettings>
                                            <ComboBoxTemplates TItem="FDICustomer">
                                                <HeaderTemplate>
                                                    <table><tr><th class="e-text-center">Account Number</th><th class="e-text-center">Name</th></tr></table>
                                                </HeaderTemplate>
                                                <ItemTemplate Context="context">

                                                    <table><tbody><tr><td class="e-text-center">@((context as FDICustomer).CustAccount)</td><td class="e-text-center">@((context as FDICustomer).Name)</td></tr> </tbody></table>
                                                </ItemTemplate>
                                            </ComboBoxTemplates>
                                            <ComboBoxEvents TValue="string" TItem="FDICustomer" Filtering="onFilteringCustAccount" ValueChange="onCustValueChange"></ComboBoxEvents>

                                        </SfComboBox>


        public async Task onFilteringCustAccount(Syncfusion.Blazor.DropDowns.FilteringEventArgs args)
        {

            args.PreventDefaultAction = true;

            var pre = new WhereFilter();
            var predicate = new List<WhereFilter>
                ();
            predicate.Add(new WhereFilter() { Condition = "or", Field = "CustAccount", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true });
            predicate.Add(new WhereFilter() { Condition = "or", Field = "Name", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true });
            //predicate.Add(new WhereFilter() { Condition = "or", Field = "Job", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true });
            pre = WhereFilter.Or(predicate);

            Customers = AllCustomers;

            customerQuery = args.Text == "" ? new Query().Take(100) : new Query().Where(pre).Take(100);


            await this.comboboxCustomer.Filter(Customers, customerQuery);


        }


Attachment: ComboBox_d4ab76a5.zip

24 Replies
CJ chris johansson October 6, 2020 07:39 PM UTC

Full Code

Attachment: Index_f388f71c.zip

CJ chris johansson October 7, 2020 10:34 PM UTC

Any update on this? thanks so much

SN Sevvandhi Nagulan Syncfusion Team October 8, 2020 09:42 AM UTC

Hi Chris, 


Greetings from Syncfusion support. 


We validated the reported requirement. In the attached code, you have used same variable in both query property and filter method. By default, blazor consider this as property binding. If you have changed the query property, the value will be update based on previous value. Hence, the value is not cleared. We resolved the issue by binding different variable for both query properties. Please find the modified code snippet below, 


<SfComboBox @ref="comboboxCustomer" ID="CustomerID" TValue="string" TItem="FDICustomer" Placeholder="e.g. Account Num" CssClass="e-multi-column" @bind-Value="@CustAccount" DataSource="@Customers" AllowFiltering="true" Query="@customerQuery" PopupWidth="700px" PopupHeight="500"> 
    <ComboBoxFieldSettings Text="Name" Value="Name"></ComboBoxFieldSettings> 
    <ComboBoxTemplates TItem="FDICustomer"> 
        <HeaderTemplate> 
            <table><tr><th class="e-text-center">Account Number</th><th class="e-text-center">Name</th></tr></table> 
        </HeaderTemplate> 
        <ItemTemplate Context="context"> 
 
            <table><tbody><tr><td class="e-text-center">@((context as FDICustomer).Job)</td><td class="e-text-center">@((context as FDICustomer).Name)</td></tr> </tbody></table> 
        </ItemTemplate> 
    </ComboBoxTemplates> 
    <ComboBoxEvents TValue="string" TItem="FDICustomer" Filtering="onFilteringCustAccount" ValueChange="onCustValueChange"></ComboBoxEvents> 
 
</SfComboBox> 

public async Task onFilteringCustAccount(Syncfusion.Blazor.DropDowns.FilteringEventArgs args) 
    { 
 
        args.PreventDefaultAction = true; 
 
        var pre = new WhereFilter(); 
        var predicate = new List<WhereFilter> 
            (); 
        predicate.Add(new WhereFilter() { Condition = "or", Field = "Job", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }); 
        predicate.Add(new WhereFilter() { Condition = "or", Field = "Name", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }); 
        //predicate.Add(new WhereFilter() { Condition = "or", Field = "Job", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }); 
        pre = WhereFilter.Or(predicate); 
 
        //  Customers = AllCustomers; 
        var query = new Query(); 
        query = args.Text == "" ? new Query().Take(100) : new Query().Where(pre).Take(100); 
 
 
        await this.comboboxCustomer.Filter(Customers, query); 
 
 
    } 


Please find the sample below, 




Kindly check the above and get back to us if you need further assistance.  


Regards, 

Sevvandhi N 


CJ chris johansson October 8, 2020 07:16 PM UTC

Thanks for your response.
I used a new query variable in the function by going  var query = new Query(); for all my combo boxes outside the grid.  I  guess it doesn't matter if I have Query="@customerQuery" on the combo box definition then so I removed it.

But there is still a small issue, When I backspace once on the account manager combo box and field combo box the first letter appears again that I had just backspaced.  Its almost like its loading all the data and then after that I can backspace again and it begins to work properly.  It doesn't do this for my account manager combo box, maybe because my data only has like 4 values which is probably why your example worked. The other ones I have thousands and then I have to limit them to 100. I don't know ..
Its confusing because in ItemID which is a multi combo box inside the data grid.  I have to set the query on the combo box level and use that query again to change it in the function.  Just curious why does this work and the other one doesn't? 

I have a couple other videos included in this.
I've been playing around with how the function is being called with async/await/task etc.. but i still experience issues with the height of the grid being changed when I click into a combo box inside the grid and then click off into a another field...  very weird thing.
Also sometimes the combo box doesn't close and "sticks".. 

Attachment: Oct8Issues_1a37c922.zip

CJ chris johansson October 8, 2020 08:27 PM UTC

I also have found another issue with my filter methods , they all seem to be behind 1 character.
so for example in this video. I type in 101... and nothing will show in the list that has 101 in it.. I just have to press any character after that in order for it to show up... It comes in as the correct args when i type in 101 but it doesn't show up in the filter list properly.

Video attached.

Attachment: onebehind_f17b23bf.zip

CJ chris johansson October 12, 2020 04:20 PM UTC

Any update on this? Thanks

SN Sevvandhi Nagulan Syncfusion Team October 13, 2020 01:59 PM UTC

Hi Chris, 


Sorry for the delay. 


We forwarded the grid query to corresponding team and validating the ComboBox filtering issue in our end. We will update further details within 2 business days (15th, October 2020). We appreciate your patience until then. 


Regards, 
Sevvandhi N 


CJ chris johansson October 15, 2020 02:21 PM UTC

Ok thanks looking forward to it

SN Sevvandhi Nagulan Syncfusion Team October 15, 2020 03:50 PM UTC

Hi Chris, 


Sorry for the inconvenience caused. 


Currently, we are facing complexity while validating the all the reported queries in our end.  We need additional two days for validating the issue.  We will update further details within 2 business days. We appreciate your patience until then. 


Regards, 
Sevvandhi N 




CJ chris johansson October 20, 2020 05:55 AM UTC

Let me know if i can provide more info if needed

CJ chris johansson October 21, 2020 02:55 PM UTC

Is there any resolution yet? Specifically for the one character behind and the the issue of putting back the character after you delete it for the first time.  Thanks

SN Sevvandhi Nagulan Syncfusion Team October 21, 2020 03:07 PM UTC


Hi Chris, 


Sorry for the delay. 


We checked the reported issue (“Specifically for the one character behind and the the issue of putting back the character after you delete it for the first time”). We made sample with the provided code snippet and we cannot reproduce the mentioned issue. Here we have attached the ensured sample. Kindly check with the attached sample and provide an issue replicating sample by modifying the below attached sample that will help us to further validate the issue and provide you with a better solution from our end. 



Also, we are still complexity while validating the all the reported queries in our end.  We need additional two days for validating the issue.  We will update further details within 2 business days(23rd, October 2020). We appreciate your patience until then. 


In the meantime, if you provide a reproducing sample that shows all the issue, then it would be very helpful for analyzing the issues at our end. 


Regards, 
Sevvandhi N 



CJ chris johansson October 21, 2020 07:29 PM UTC

I was able to reproduce the issue where it puts the character back as you start to filter in your example you sent me by modifying the data source in the filter function.  I believe that's what was doing it.
The issue i'm running into is finding a way to deal with big datasources effectively.  If I download 1200 records from the server upon initialization , I don't want to load them all in the combo box because it takes too long to load.  So I limit the combo box to 100 lets say.  Once they start to type in the filter , I change the datasource to the entire 1200 and return the contained query result.

I noticed I can fix the issue if I clear the list add the other list into that object instead by going like this
  FieldIDS.Clear();
   FieldIDS.AddRange(ALLFieldIDS);

Maybe there's a better way to do this but I'm experimenting with data issues and long load time.  I also still having the issue with it always being 1 character behind and still not able to figure that one out.

Attachment: ComboBoxIssue_1e16436c.zip

SN Sevvandhi Nagulan Syncfusion Team October 22, 2020 02:15 PM UTC

Hi Chris, 


Thanks for providing the sample. 


We would like to inform you that, we have provided virtual scrolling support for handling large data on demand. Initially specify the data loading count by using the take property in query. Then remaining data will be loaded when scrolling the popup items based on the take count. Also, virtualization will filter the items for the typed value from the whole data source, and it load the filtered items based on the provided take count. So, we suggest you provide all the data in single variable (Customers) and remove assigning of data source again filtering event. Bind the Customers variable to data source property. Please find the code changes below, 



<SfComboBox @ref="comboboxCustomer" ID="CustomerID" TValue="string" TItem="FDICustomer" Placeholder="e.g. Account Num" CssClass="e-multi-column" @bind-Value="@CustAccount" DataSource="@Customers" AllowFiltering="true" Query="@customerQuery" PopupWidth="700px" PopupHeight="200" EnableVirtualization="true"> 
    <ComboBoxFieldSettings Text="Name" Value="Name"></ComboBoxFieldSettings> 
    <ComboBoxTemplates TItem="FDICustomer"> 
        <HeaderTemplate> 
            <table><tr><th class="e-text-center">Account Number</th><th class="e-text-center">Name</th></tr></table> 
        </HeaderTemplate> 
        <ItemTemplate Context="context"> 
 
            <table><tbody><tr><td class="e-text-center">@((context as FDICustomer).Job)</td><td class="e-text-center">@((context as FDICustomer).Name)</td></tr> </tbody></table> 
        </ItemTemplate> 
    </ComboBoxTemplates> 
    <ComboBoxEvents TValue="string" TItem="FDICustomer" Filtering="onFilteringCustAccount" ValueChange="onCustValueChange"></ComboBoxEvents> 
 
</SfComboBox> 
 
 
    public Query customerQuery { get; set; } = new Query().Take(7); 
 
 
    public async Task onFilteringCustAccount(Syncfusion.Blazor.DropDowns.FilteringEventArgs args) 
    { 
 
        args.PreventDefaultAction = true; 
 
        var pre = new WhereFilter(); 
        var predicate = new List<WhereFilter> 
            (); 
        predicate.Add(new WhereFilter() { Condition = "or", Field = "Job", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }); 
        predicate.Add(new WhereFilter() { Condition = "or", Field = "Name", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }); 
        //predicate.Add(new WhereFilter() { Condition = "or", Field = "Job", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true }); 
        pre = WhereFilter.Or(predicate); 
 
        // Customers = AllCustomers; 
        var query = new Query(); 
        query = args.Text == "" ? new Query().Take(5) : new Query().Where(pre).Take(5); 
 
 
        await this.comboboxCustomer.Filter(Customers, query); 
 
 
    } 


Please find the sample below, 





Please check the above suggestion and get back to us if you need further assistance. 



Regards, 
Sevvandhi N 



CJ chris johansson October 22, 2020 05:58 PM UTC

Thanks this seemed to fix filtering issues and the virtualization is nice as well.
The only issue is that while this works fine for medium size data sources.  I have location addresses that are 500,000 and i cannot simply query them all upon initial load and bind them to a datasource.  That is why i have to call the API everytime they filter and return the results.  
Which is fine it does work , but the virtualization of scrolling through the data doesn't work for this case.. Unless you have a way to call the next chunk of data when they scroll in the list and I could call an API to pull the next bit of data.. 

SN Sevvandhi Nagulan Syncfusion Team October 23, 2020 12:17 PM UTC

Hi Chris, 



Thanks for the update. 


We would like to inform you that very large data can also used with a virtualization technique. We have loaded the 5,00,000 data in the example below and it works as expected while opening the popup and filtering. Please refer to this example below. 


for(var i = 0; i < 500000; i++) 
        { 
            Games.Add(new GameFields() { ID = i, Text = "FootBall" }); 
        } 


Please find the sample below, 




If still issue persists, please provide the details about how you have loaded the data from the service. If you provided the back-end details or issue reproducing sample, it would be helpful to validate the issue further at our end. 


Please check the above sample and get back to us if you need further assistance. 


Regards, 
Sevvandhi N 


CJ chris johansson October 26, 2020 06:42 AM UTC

Thanks. Still this query of data takes a long time even if you query directly from sql server..

Do you have virtualization for the datagrid as well if it has to load alot of lines? We don't want to use paging

CJ chris johansson October 26, 2020 08:05 PM UTC

I was able to find grid virtualization but it seems to not work properly in batch mode when trying to add/delete/update/cancel....
It doesn't seem to show the added line when i click add.. i have to focus later on the grid and eventually it pops up... with cancel after i click it. it doesn't remove everything unless i click somewhere on the grid it refreshes.  Also when i scroll down and edit something and go back to the top of the list it removes the first one i added.. 
Is this suppose to work correctly?

Attachment: GridVirtualization_b6787a7.zip

CJ chris johansson October 26, 2020 08:07 PM UTC

Here is another example

Attachment: VirtualGridIssue_23e7d058.zip

SN Sevvandhi Nagulan Syncfusion Team October 27, 2020 11:58 AM UTC

Hi Chris,  

  
We don’t have support to perform Normal/Batch editing in a VirtualScroll Grid. We have considered this as a feature and logged a feature task “Provide support for Normal and Batch editing in Grid with Virtual scrolling” for this requirement. We have planned to implement this and include this feature in any of our upcoming releases.   
   
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    


  
Regards,  
Sevvandhi N 


CJ chris johansson October 27, 2020 02:59 PM UTC

Ok, can it also be implemented for virtual columns as well? 
I'm a bit surprised this doesn't have support already for editing, I don't see much of a point to use this unless you wanted to just "view" large data... But I appreciate putting this in as a feature, hopefully its soon.

SN Sevvandhi Nagulan Syncfusion Team October 28, 2020 08:27 AM UTC

Hi Chris,  
             

Yes, we will consider the case for EnableColumn Virtualization also. As mentioned in previous update, we don’t have Normal/Batch modes of editing support, but we do have Dialog Editing support in a Virtualization enabled Grid.   


So, you can use the Dialog editing feature to achieve your requirement.  


Regards,  
Sevvandhi N 


CJ chris johansson November 23, 2020 06:14 AM UTC

Hello, is there going to be a timeline for this https://blazor.syncfusion.com/documentation/datagrid/editing/#dialog  
virtual scrolling in the grid with batch/normal mode? This feature would really help!

JP Jeevakanth Palaniappan Syncfusion Team November 24, 2020 12:37 PM UTC

Hi Chris, 
 
We have planned to implement the feature “Provide support for Normal and Batch editing in Grid with Virtual scrolling” in our upcoming Volume 1, 2021 release. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link. 


Disclaimer: The feature inclusion date is tentative and not a commitment from our side  

Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon