AllowCustom blanks out all other lines in the grid.

I have an autocomplete in the grid with allow custom = false on.  They can type in something and select something from the list. As soon as they click on any other row without even typing anything in, it clears data that already existed plus if nothing is there it highlights it green like there was a change anyways.  
All I want this to do is if they don't select anything from the list that is valid only clear that line they attempted to edit and not touch any other line.
I like the feature because otherwise, I have to check if the value is a legit value in the value changed function.  I'm trying to do validation and i'm dealing with big data sources not able to download the entire model into the application so I have to query the database each time.

Also its causing an issue in the combo box that I have.  I have virtualization on and if the value is not in the "first page" of the load then it doesn't set it and clears out the combo box. Again I would like to use this, but right now i'm using valuechanged to do another query to check if the value is legit.

Unless theres a better way to do this. I have a video attached thanks


    <SfComboBox @ref="comboboxCustomer" ID="CustAccount" TValue="string" TItem="FDICustomer" Placeholder="e.g. Account Num" CssClass="e-multi-column" @bind-Value="@ChemOrderTable.CustAccount" DataSource="@Customers" AllowFiltering="true" Query="@customerQuery" PopupWidth="700px" PopupHeight="500" EnableVirtualization="true" Width="200px" AllowCustom="false">
                                                        <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="context2">

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

                                                    </SfComboBox>



                                    <GridColumn Field=@nameof(FDIChemicalOrderLine.ServiceLocationID) HeaderText="ServiceLocationID" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Right" Width="250">
                                        <EditTemplate>

                                            <SfAutoComplete @ref="autoServiceLocation" ID="FSServiceLocationID" TValue="string" TItem="FDIServiceLocation" @bind-Value="(context as FDIChemicalOrderLine).ServiceLocationID" CssClass="e-multi-column" AllowCustom="false" Placeholder="e.g. UWI" DataSource="@fDIServiceLocations" PopupWidth="600px" PopupHeight="400px">
                                                <AutoCompleteFieldSettings Text="ServiceLocationID" Value="ServiceLocationID"></AutoCompleteFieldSettings>
                                                <AutoCompleteTemplates TItem="FDIServiceLocation">
                                                    <HeaderTemplate>
                                                        <table><tr><th class="e-text-center">Item Number</th><th class="e-text-center">Search Name</th></tr></table>
                                                    </HeaderTemplate>
                                                    <ItemTemplate Context="context2">

                                                        <table><tbody><tr><td class="e-text-center">@((context2 as FDIServiceLocation).ServiceLocationID)</td><td class="e-text-center">@((context2 as FDIServiceLocation).LicenseID)</td></tr> </tbody></table>
                                                    </ItemTemplate>
                                                </AutoCompleteTemplates>
                                                <AutoCompleteEvents TValue="string" TItem="FDIServiceLocation" Filtering="OnServiceFilter"></AutoCompleteEvents>
                                            </SfAutoComplete>

                                        </EditTemplate>

                                    </GridColumn>

Attachment: AllowCustomIssues_ef6454df.zip

7 Replies 1 reply marked as answer

RN Rahul Narayanasamy Syncfusion Team November 6, 2020 04:16 PM UTC

Hi Chris, 

Greetings from Syncfusion. 

Query: AllowCustom blanks out all other lines in the grid.  

We have validated your query with the provided details and we are quite unclear about your requirement. Could you please share the below details. It will be helpful to validate and provide a better solution. 

  • Whether did you face the problem related to AllowCustom Property of Combo Box component?
  • Full Grid code snippets/ Full page code snippets.
  • Whether did you enabled EnableVirtualization property in Grid?
  • Whether the entered values are lost in EditTemplate column while editing?
  • Exact replication procedure.

Regards, 
Rahul 




CJ chris johansson November 6, 2020 06:06 PM UTC

I'll explain what happens in the video I attached. Allow custom in both scenarios causes issues.

As you can see first I have a combo box that lives outside the data grid.  This combo box has virtualization on and allow custom="false".  When the application first loads, I pull 1200 records and store it in an object. The combo box only takes the first 100 records (because i don't want to load everything) out of 1200 and displays it in the combo box.  After that you can keep scrolling and it will load more as you scroll.  Let's say when it first loads the default data customer ID is 012-000001.  Since that is in the list of 1-100 records initially, it will load this value.  If the default data is 012-000200, it will not be set and my validation message comes up.  This is because Allow Custom is false. It believes that  012-000200, is not in that list, yet I have 1200 records.  So as you can see in the video when it first loaded, it did not set the customer account because it was over the first 100 records it pulls.  If I select say 012-000003 which is under 100 it works and doesn't blank out.  Then I go to select 012-000180 which is in that entire list of 1-1200 records but because its not in the "initial" load of 100, it blanks it out because its thinking its not a legit number in that list, which it is essentially.

The issue with the grid is that I have an autocomplete inside the grid and allow custom is false. I don't have virtualization on in the grid right now because its not supported in batch mode yet.  If I type in a legit number and select from the autocomplete list, and start clicking in other rows on that column it highlights them green as if there was a change and blanks out the other rows in that column, even if there is data there currently it will blank it out. I'm not sure why it does that, i'm not even typing in anything i'm just clicking on that row/column.

A third issue i found interesting is that. I have code to enter the cell to edit by doing 1 click only.  This works if I have an autocomplete on Delivery location column but not on the service location column, or the location type field (dropdown list).  The name field is a "read only" field. So its almost like anything to the right of that column doesn't go completely into the field, you have to double click. I attached a separate video for this as well as my grid code. The combobox code I posted already was outside the grid in the "header" area.
 

Handler when clicking on a cell in the grid to enter the cell on one click. 

 public async Task CellSelectHandler(CellSelectEventArgs<FDIChemicalOrderLine> args)
    {
        //  get selected cell index
        var CellIndexes = await GridInstance.GetSelectedRowCellIndexes();

        //get the row and cell index
        // double rowIndex = args.RowIndex;
        double oldRowIndex = CurrentEditRowIndex;
        CurrentEditRowIndex = args.RowIndex;
        var CurrentEditCellIndex = (int)CellIndexes[0].Item2;

        //get the available fields
        var fields = await GridInstance.GetColumnFieldNames();
        // edit the selected cell using the cell index and column name
        if (CurrentEditCellIndex != 0)
            await GridInstance.EditCell(CurrentEditRowIndex, fields[CurrentEditCellIndex]);
}


Attachment: CellOneClickIssue_ee68399a.zip


CJ chris johansson November 10, 2020 11:44 PM UTC

Hopefully this makes sense do you need more info?


RN Rahul Narayanasamy Syncfusion Team November 11, 2020 02:11 PM UTC

Hi Chris, 

Thanks for sharing the details. 

Query: As you can see first I have a combo box that lives outside the data grid.  This combo box has virtualization on and allow custom="false".  When the application first loads, I pull 1200 records and store it in an object. . . . 

We have validated your shared information. we suspect that you have preselected the value which is out of initial loading records (out of 100 records) that value is blank out the component initial loading. We have prepared the virtual scrolling with initial 12 records and loading the initial data out of 12 record (initial loading data). But we cannot able to replicate the issue from our end. 


Query: The issue with the grid is that I have an autocomplete inside the grid - tart clicking in other rows on that column it highlights them green as if there was a change and blanks out the other rows in that column, even if there is data there currently it will blank it out. 

We have validated your query and checked the reported problem at our end. We could not reproduce the problem at our end. Find the below sample for your reference. 


While defining other controls in EditTemplate, you need to provide the ID value(which is same as Field name) to corresponding control. Find the below code snippets for your reference. 

[Counter.razor] 
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"> 
            <EditTemplate> 
                <SfAutoComplete ID="CustomerID" TItem="Order" TValue="string" @bind-Value="@((context as Order).CustomerID)" DataSource="@Orders"> 
                    <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings> 
                </SfAutoComplete> 
            </EditTemplate> 
        </GridColumn> 
        . . . 
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"> 
            <EditTemplate> 
                <SfComboBox ID="ShipCountry" TValue="string" TItem="Order" @bind-Value="@((context as Order).ShipCountry)" DataSource="@Orders"> 
                    <ComboBoxFieldSettings Text="ShipCountry" Value="ShipCountry"></ComboBoxFieldSettings> 
                </SfComboBox> 
            </EditTemplate> 
        </GridColumn> 

Could you please ensure the case and check the problem. 

If you are still facing the problem, then could you please reproduce the problem and revert back to us. It will be helpful to validate and provide a better solution. 

Regards, 
Rahul 


Marked as answer

CJ chris johansson November 18, 2020 06:18 AM UTC

I opened up your project.  One thing I wanted to point out with the grid issue is that the difference between mine and yours is that you load all of yours initially which i can't do. So i ended up setting the datasource to just that 1 value upon cell click event and then when they filter it will pull in the filtered results. This allowed me to use Allowcustom  = false

Also Why is it when I tab in the grid solution you have provided , that it randomly highlights green as an edit on the freight column.
I also have this issue when i'm tabbing alot in my grid.. Just hold down tab and you'll notice this functionality.  I also have an issue where I can't seem to tab into the servicelocationID field.  I have to tab twice and it just goes to the next line. Is there some  type of fix or something i'm missing why it wouldn't go to that column?

Its also strange that when I click into that column it does not just enter into that column.  Even if I remove the celledit code and keep it on the defaults, (double click). I have to double click to enter and then click again to edit. which is weird... 

             
                           

                               
                                   
                                   
                                       
                                           
ServiceLocationIDLicense Num
                                       
                                       

                                           
@((context2 as FDIServiceLocation).ServiceLocationID)@((context2 as FDIServiceLocation).LicenseID)
                                       
                                   
                                   
                               

                           
                           

                       


I have a video attached. thanks

Attachment: tabissue_9d67663b.zip


CJ chris johansson November 18, 2020 06:18 AM UTC

              <GridColumn FilterSettings="@(new FilterSettings { Operator = Syncfusion.Blazor.Operator.Contains })" Field=@nameof(FDIChemicalOrderLine.ServiceLocationID) HeaderText="ServiceLocationID" TextAlign="TextAlign.Right" Width="400">
                            <EditTemplate>

                                <SfAutoComplete @ref="autoServiceLocation" ID="FSServiceLocationID" TValue="string" TItem="FDIServiceLocation" @bind-Value="(context as FDIChemicalOrderLine).ServiceLocationID" Placeholder="e.g. UWI" CssClass="e-multi-column" DataSource="@fDIServiceLocations" AllowFiltering="true" PopupWidth="400px" AllowCustom="false">
                                    <AutoCompleteFieldSettings Text="ServiceLocationID" Value="ServiceLocationID"></AutoCompleteFieldSettings>
                                    <AutoCompleteTemplates TItem="FDIServiceLocation">
                                        <HeaderTemplate>
                                            <table><tr><th class="e-text-center">ServiceLocationID</th><th class="e-text-center">License Num</th></tr></table>
                                        </HeaderTemplate>
                                        <ItemTemplate Context="context2">

                                            <table><tbody><tr><td class="e-text-center">@((context2 as FDIServiceLocation).ServiceLocationID)</td><td class="e-text-center">@((context2 as FDIServiceLocation).LicenseID)</td></tr> </tbody></table>
                                        </ItemTemplate>
                                    </AutoCompleteTemplates>
                                    <AutoCompleteEvents TValue="string" TItem="FDIServiceLocation" Filtering="OnServiceFilter"></AutoCompleteEvents>
                                </SfAutoComplete>

                           
                            </EditTemplate>

                        </GridColumn>


RN Rahul Narayanasamy Syncfusion Team November 19, 2020 03:52 AM UTC

Hi Chris, 

We have validated your query with the provided information. We have changed the autocomplete as per your shared codes and checked the problem. Find the sample for your reference. 


If you are still facing the problem then please reproduce the problem in the provided sample and revert back to us. It will be helpful to validate further at our end. 

Query: cell gets empty while navigating using tab  

From your video demonstration, while clicking the tab to edit the cell, the ItemID column gets blank. We might suspect that you have rendered a custom component in ItemID column. If don’t provide @bind-Value property to the custom component, then the values gets null when clicking the cell. 

If you are binding a custom component in that column(ItemID), then define @bind-Value Property to define the value and ensure the problem at your end. 

If not then for this problem, we need some details regarding the problem. Could you please share the below details. It will be helpful to validate the problem. 

  • Full Grid code snippets.
  • Share model class details if possible.
  • What datatype you have used for ItemID column.
  • Whether did you rendered any custom component in ItemID column. Share that column definition.
  • Share a simple reproduceable sample if possible.

Regards, 
Rahul 


Loader.
Up arrow icon