Update combo boxes value when its not in the datasource

I have a combo box and a grid.  When you select a line on the grid, the combo box gets updated with its associated value.  The only issue is if the value is not in the combo box datasource, it will not update.  I had to populate only 100 lines in the combo box because the datasource is so large.  How can I show the value in the combo box even though its not apart of the datasource.  If they want to change it, thats ok, because i have filters on everything at that point. I just need it to show the value in the combo box. I tried bind value and value etc.. doesn't seem to work.. of course if its in the datasource it will show but thats not always the case.  I managed to get this to work with a combo box inside a grid but i guess that was totally different.

Also I noticed when i click on a column in the grid which has allowediting to false. It will not activate the event RowSelecting="RowSelectingHandler". I need that to activate everytime someone clicks on a row to update the combo boxes above whether its read only or not. Is there a solution for this?
THanks



           <SfComboBox @ref="comboboxFieldID" id="FieldID" TValue="string" TItem="FDIFieldID" Placeholder="e.g. Field ID" CssClass="e-multi-column" @bind-Value="@ChemOrderTable.FSFIELDID" DataSource="@FieldIDS" AllowFiltering="true" Query="@fieldIDQuery" PopupWidth="700px" PopupHeight="500">
                                            <ComboBoxFieldSettings Text="FieldID" Value="FieldID"></ComboBoxFieldSettings>
                                            <ComboBoxTemplates TItem="FDIFieldID">
                                                <HeaderTemplate>
                                                    <table><tr><th class="e-text-center">Field ID</th><th class="e-text-center">Name</th></tr></table>
                                                </HeaderTemplate>
                                                <ItemTemplate Context="context">

                                                    <table><tbody><tr><td class="e-text-center">@((context as FDIFieldID).FieldID)</td><td class="e-text-center">@((context as FDIFieldID).Name)</td></tr> </tbody></table>
                                                </ItemTemplate>
                                            </ComboBoxTemplates>
                                            <ComboBoxEvents TValue="string" Filtering="onFilteringFieldID"></ComboBoxEvents>

                                        </SfComboBox>

26 Replies 1 reply marked as answer

SN Sevvandhi Nagulan Syncfusion Team September 25, 2020 04:10 PM UTC

Hi Chris,  

  
Greetings from Syncfusion support. 


Query 1 : Update combo boxes value when its not in the datasource  
  
We are validating the reported scenario. We will update further details within 2 business days(29th September,2020). 

Query 2 : “I noticed when i click on a column in the grid which has allowediting to false. It will not activate the event RowSelecting="RowSelectingHandler"”  
  
We have validated the reported query by preparing a sample with AllowEditing false for one column. RowSelecting event get triggered when selecting a record irrespective of the Grid column. Kindly download the sample from below which we have prepared suing our latest version 18.2.0.59.  


After referring the sample, if you are still facing the issue. Kindly get back to us with following details.   


 
·       Share your grid code example along with event handler. 
·       Are you facing any exception / script error while selecting a record in Grid. 
·       Share your Syncfusion.Blazor Nuget package version details. 
·       Share your Application type (Blazor Server side) or Blazor WebAssembly 

Above requested details will be very helpful for us to validate the reported query at our end and provide solution as early as possible.        

Regards,  
Sevvandhi N 



CJ chris johansson September 25, 2020 06:00 PM UTC

Ok thanks. I looked at the code regarding the Row handler triggered when clicking on a row that doesn't allow editing and i'm not sure what is different and why mine doesnt work. Here is my grid below.. I also have a cellselecthandler to override the double click to single click not sure if that effects it.


                            <SfGrid @ref="GridInstance" DataSource="@chemOrderLines" AllowPaging="true" AllowFiltering="true"  AllowSorting="true" AllowMultiSorting="true" AllowResizing="true" Width="1200" AllowReordering="true" ShowColumnChooser="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel", "ColumnChooser" })" Height="450">
                                <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
                                <GridPageSettings PageSize="30"></GridPageSettings>
                                <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Both"></GridSelectionSettings>
                                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" AllowNextRowEdit="true" Mode="EditMode.Batch"></GridEditSettings>
                                <GridEvents CellSelected="CellSelectHandler" RowSelecting="RowSelectingHandler" TValue="FDIChemicalOrderLine" OnBatchSave="OnSave" OnBatchAdd="OnAdd"></GridEvents>
                                <GridColumns>
                                    <GridColumn Field=@nameof(FDIChemicalOrderLine.ID) IsPrimaryKey="true" ValidationRules="@(new ValidationRules { Required = true })" HeaderText="ID" Visible="false" TextAlign="TextAlign.Right" Type="ColumnType.Number" AutoFit="true" ></GridColumn>
                                    <GridColumn Field=@nameof(FDIChemicalOrderLine.SortOrder) HeaderText="Sort Order" TextAlign="TextAlign.Right" Type="ColumnType.Number" AutoFit="true"></GridColumn>
                                    <GridColumn Field=@nameof(FDIChemicalOrderLine.FSBillingLocationId) HeaderText="Billing Location" AutoFit="true"> </GridColumn>
                                    <GridColumn Field=@nameof(FDIChemicalOrderLine.FSDeliveryLocationId) HeaderText="Delivery Location" TextAlign="TextAlign.Right" EditType="EditType.DropDownEdit" AutoFit="true">
                                        <EditTemplate>

                                            <SfComboBox @ref="comboboxLocationAddress" ID="FSDeliveryLocationId" TValue="string" Width="300" TItem="FDILocationAddress" @bind-Value="(context as FDIChemicalOrderLine).FSDeliveryLocationId" Placeholder="e.g. 02-36-001-13W2" CssClass="e-multi-column" DataSource="@locationAddresses" AllowFiltering="true" Query="@locationQuery" PopupWidth="400px">
                                                <ComboBoxFieldSettings Text="locationAddress" Value="locationAddress"></ComboBoxFieldSettings>
                                                <ComboBoxTemplates TItem="FDILocationAddress">
                                                    <HeaderTemplate>
                                                        <table><tr><th class="e-text-center">Address</th></tr></table>
                                                    </HeaderTemplate>
                                                    <ItemTemplate Context="context2">
                                                        <table><tbody><tr><td class="e-text-center">@((context2 as FDILocationAddress).locationAddress)</td></tr> </tbody></table>
                                                    </ItemTemplate>
                                                </ComboBoxTemplates>
                                                <ComboBoxEvents TValue="string" Filtering="onFilteringLocation" OnOpen="onOpenLocation" ValueChange="onLocationValueChange"></ComboBoxEvents>
                                            </SfComboBox>


                                        </EditTemplate>


                                    </GridColumn>


                                    <GridColumn Field=@nameof(FDIChemicalOrderLine.itemid) HeaderText="ItemID" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Right" Width="150">
                                        <EditTemplate>
                                            @{var currItem = (context as FDIChemicalOrderLine);

                                                <SfComboBox @ref="comboboxItemID" ID="itemid" TValue="string" TItem="FDIItemID" @bind-Value="(context as FDIChemicalOrderLine).itemid" Placeholder="e.g. item" CssClass="e-multi-column" DataSource="@ItemIDs" AllowFiltering="true" Query="@itemQuery" PopupWidth="700px">
                                                    <ComboBoxFieldSettings Text="itemid" Value="itemid"></ComboBoxFieldSettings>
                                                    <ComboBoxTemplates TItem="FDIItemID">
                                                        <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 FDIItemID).itemid)</td><td class="e-text-center">@((context2 as FDIItemID).NameAlias)</td></tr> </tbody></table>
                                                        </ItemTemplate>
                                                    </ComboBoxTemplates>
                                                    <ComboBoxEvents TValue="string" Filtering="onFilteringItemID" OnOpen="onOpenItem" ValueChange="@((args) => onValueChangeItemID(args, currItem))"></ComboBoxEvents>

                                                </SfComboBox>

                                            }
                                        </EditTemplate>


                                    </GridColumn>



                                    <GridColumn Field=@nameof(FDIChemicalOrderLine.NameAlias) Uid="NameAlias" HeaderText="Name" AutoFit="true" AllowEditing="false"></GridColumn>

                                </GridColumns>
                            </SfGrid>


    public async Task RowSelectingHandler(RowSelectingEventArgs<FDIChemicalOrderLine> args)
    { //some code , doesn't get triggered when the row is not editable.
}




CJ chris johansson September 25, 2020 06:02 PM UTC

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

        //get the row and cell index
        CurrentEditRowIndex = CellIndexes[0].Item1;
        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
        await GridInstance.EditCell(CurrentEditRowIndex, fields[CurrentEditCellIndex]);
}


SN Sevvandhi Nagulan Syncfusion Team September 29, 2020 11:38 AM UTC

Hi Chris,  
  
We are able to reproduce the reported problem in the provided sample. We have confirmed it is a bug and logged the defect report “RowSelecting and RowSelected events not triggered when SelectionMode is Both”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming  bi-weekly release which is expected to be rolled out by the mid of October, 2020.        
       
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.      
    
   
  
Until then we appreciate your patience.     

Regards,  
Sevvandhi N 



CJ chris johansson September 29, 2020 02:38 PM UTC

Ok Thanks, I used cell event for now instead of the row event.  This seems to work for when a column is readonly it still gets triggered.

Also is there an update for Query 1 : Update combo boxes value when its not in the datasource  ?

How to set the value when its not in the datasource?


SN Sevvandhi Nagulan Syncfusion Team September 30, 2020 10:32 AM UTC

Hi Chris, 


In the latest source we have resolved the reported issue(“If we update the custom value in bind-Value property, then the custom value is not updated to the combobox component”). The fix for the reported issue will be included in the upcoming volume 3 release which is expected to be rolled out on tomorrow. We appreciate your patience until then. 


Regards, 
Sevvandhi N 



CJ chris johansson October 1, 2020 05:56 PM UTC

I was previously on 18.2.0.59  , then today I updated to 18.3.0.35 and I just got a ton of errors so I had to roll back.




BC Berly Christopher Syncfusion Team October 2, 2020 11:36 AM UTC

Hi Chris, 
  
We would like to inform you that, we have introduced some breaking changes in the ComboBox component. We have documented those information in the below mentioned release notes. So, we would like you to review the breaking changes from the below location before you upgrade. 
  
  
Still issue persists, please share the issue reproducing sample that will help us to check and proceed further from our end. 
  
Regards, 
Berly B.C 



CJ chris johansson October 2, 2020 10:04 PM UTC

Yes I am attempted to change my combo box code and added TItem to ComboBoxEvents , but there is an error on ValueChange="@onCustValueChange".

    <SfComboBox @ref="comboboxCustomer" id="CustomerID" TValue="string" TItem="FDICustomer" Placeholder="e.g. Account Num" CssClass="e-multi-column" Text="@ChemOrderTable.CustAccount" 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>


    private void onCustValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, FDICustomer> args)

    {
        if (args.Value != "" && args.Value != null)
        {
            var findCustomer = AllCustomers.Find(x => x.CustAccount == args.Value);
            ChemOrderTable.CustName = findCustomer.Name;
        }
    }


CJ chris johansson October 2, 2020 10:23 PM UTC

I'm also getting errors on my treeview.

     <SfTreeView CssClass="main-treeview" @ref="TreeView" ExpandOn="@Expand" TValue="TreeData">
                            <TreeViewFieldsSettings Id="nodeId" Text="nodeText" IconCss="iconCss" DataSource="treedata" HasChildren="hasChild" ParentID="pid">
                            </TreeViewFieldsSettings>
                        </SfTreeView>





CJ chris johansson October 3, 2020 12:01 AM UTC

Additional Errors, not sure about these lambda expressions either, because it doesn't  point to any specific line. as well as the rendertreebuilder error.  I attached my entire code because there are several and i'm not sure why the grid events are not working either.



CJ chris johansson October 3, 2020 12:01 AM UTC

File attached

Attachment: Index_ff13669e.zip


SN Sevvandhi Nagulan Syncfusion Team October 5, 2020 07:41 AM UTC

Hi Chris, 



Query 1: Yes I am attempted to change my combo box code and added TItem to ComboBoxEvents , but there is an error on ValueChange="@onCustValueChange". 
 
 
We checked the reported issue using the code attached in the version V18.3.35. The ComboBox control working as expected. Please see attached screenshot and sample. 
 
 
Screenshot: 

 





If still issue persists, modify the above sample to replicate the issue. 

We will update further information on the other queries shortly. 

Regards, 
Sevvandhi N 



CJ chris johansson October 5, 2020 03:32 PM UTC

Ok, I updated all the other combo boxes with the proper signatures and my project is not complaining about those specific lines.. It was just confusing because it still has a red swiggly line under the line in question. Your project you sent me appears to also have it even though it compiles.

here is a screenshot of your project.



CJ chris johansson October 5, 2020 06:57 PM UTC

Update: I was able to compile my project by fixing the combo boxes, removed Expanded="false" from my treeview and added <TreeViewTemplates TValue="TreeViewItem">
Removed ExpandOn=@Expand function from my treeview on my Mainlayout.

Issue is now when I run my project and occasionally when I use the multi combo box in the grid, it changes the height and makes it smaller.  Also my treeview glitches while expanding and click around.  Some nodes tend to disappear and then come back.
Also when I first load, and after a few glitches i refresh the page i get this error





SN Sevvandhi Nagulan Syncfusion Team October 6, 2020 12:49 PM UTC

Hi Chris, 


Query 1: “Issue is now when I run my project and occasionally when I use the multi combo box in the grid, it changes the height and makes it smaller. ”  

  
From your query we understand that you are facing issue while editing a column in Grid with ComboBox control. We need some details to validate the reported query at our end. So kindly share the following details.  
  
1.       While changing the value in ComboBox, height of the Grid changes or height of the ComboBox? 
2.       Share your updated code example of Grid along with ComboBox control. 
3.       Share the video demonstration of the issue along with replication procedure. 
4.       If possible share the issue reproducible sample to validate the reported issue. 
 
  
Above requested details will be helpful for us to validate the reported query at our end and provide solution as early as possible.   


Query 2: Also my treeview glitches while expanding and click around.  Some nodes tend to disappear and then come back. 
Also when I first load, and after a few glitches i refresh the page i get this error. 


We have checked your reported problem in TreeView component. We would like to let you know that, we have made some breaking changes in the TreeView component from the release version 18.3.0.35. We have renamed ExpandOnSettings Enum value into ExpandAction. Also, for rendering the custom templates in TreeView component, we need to set the TValue with a named model for the TreeViewTemplates tag in the TreeView component.  

  
Please refer to the below link for more details.  
  
  
  
  
  
  
  

  
Please let us know, if you need any further assistance.  

  
Regards,  
Sevvandhi N 



CJ chris johansson October 6, 2020 04:07 PM UTC

I was able to get rid of the window.fs blazor with the latest stylesheet https://cdn.syncfusion.com/blazor/18.3.35/styles/bootstrap4.css.
The issue persists with the tree view glitching, dissapearing and coming back. Also the grids Height changes when i'm editing lines such as in the combo box.
I have video that replicates both.



Attachment: SyncVideo_5cfb5305.zip


CJ chris johansson October 6, 2020 04:08 PM UTC

In the tree you will see that Kindersley node disappears and then comes back.
heres my code as well

Attachment: Index_83c3490e.zip


SP Sowmiya Padmanaban Syncfusion Team October 7, 2020 02:56 PM UTC

Hi Chris Johansson,  
 
Query 1- TreeView issue 
 
We have checked your reported issue with TreeView component based on your shared code snippet. But, we were unable to replicate your reported issue with latest version (18.3.38). 
 
Refer the below sample link. 
 
 
Could you please check the above sample link. If the issue still persist, could you please share the below details. 
 
1.     Steps to replicate your reported issue. 
2.     Exact use case for your reported issue. 
3.     If possible, replicate the issue in attached sample. 
 
Query 2- Also the grids Height changes when i'm editing lines such as in the combo box. 
 
Thanks for sharing the video demonstration of the issue.   
 
In the provided demo, we are able to find that the Grid height is changed after selecting a value from ComboBox. Can you please share the following details along with other details requested in previous update.   


 
·         Are you facing the reported issue after upgrading to our latest version only? 
·         Have your rendered the Grid component inside a specific container and adjusted the height of Grid based on container? 
·         If yes, share the details about the page layout. 
 
Kindly share the above details with previous requested details, which will be very helpful for us to validate the reported query at our end and provide the solution at the earliest.   
 
Regards,  
Sowmiya.P 



CJ chris johansson October 7, 2020 04:28 PM UTC

I have updated to the latest version of  18.3.0.38.  The thing is, these issues i'm having were never an issue with the previous version of 2.0.58

Regarding the height of the grid.  I have another video that basically shows that if you have a grid height of 500px and your popupheight for a multicolumn combo box in the grid as a column has 100px.. If you try to filter and then select a value in that combo box , it will change the height of the grid to basically what the popupheight is for the combobox.  everytime I change the height of the combo box it changes the height of the grid.  I have a video that shows this happening.

Regarding the Treeview.  I'm not sure if this is the intended functions. But I think the disappearing happens when allowdraganddrop is true.  I don't remember it being this glitchy before in 2.0.58 but when you click around lots sometimes the node disappears i think because you may of unintentionally moved it.  I can do it in the example you sent me.

I have attached two videos and my code.

Attachment: Issues_3ede14a4.zip


SP Sowmiya Padmanaban Syncfusion Team October 8, 2020 01:01 PM UTC

Hi Chris Johansson,  
 
Sorry for the inconvenience. 
 
Query 1- TreeView issue 
 
We were able to replicate your reported issue with TreeView component. We have considered this as a bug in TreeView component. We will include the fix for this issue in our next patch release which is expected to be rolled out at the mid of October 2020. 
 
Please, you can track the following feedback portal link to the status of bug fix. 
 
 
Query 2- Grid query. 
 
We need some more time to validate the reported query at our end by preparing a sample.  So we will update you the further details by 9th October 2020.  
 
We appreciate your patience 
 
 
Regards,  
Sowmiya.P 



SP Sowmiya Padmanaban Syncfusion Team October 9, 2020 07:05 AM UTC

Hi Chris,   
  
Thanks for sharing the requested details.   
  
Query: “everytime I change the height of the combo box it changes the height of the grid.  I have a video that shows this happening  
  
We have validated the reported issue by preparing a sample using your code example (Grid component alone) and we are not able to reproduce the reported issue at our end. Please find the sample which we have prepared from below   
  
  
After referring the sample, if you are still facing the issue. Kindly get back to us with issue reproducible sample or try to reproduce the reported issue in provided sample.    
  
Regards,  
Sowmiya.P 



CJ chris johansson October 9, 2020 02:54 PM UTC

says access denied can't download it


SP Sowmiya Padmanaban Syncfusion Team October 12, 2020 09:53 AM UTC

Hi Chris,  
  
Sorry for the inconvenience. 
 
Please, download the sample from the below link. 
  
 
Please let us know, if you need any further assistance. 
 
Regards  
Sowmiya.P 


Marked as answer

CJ chris johansson October 13, 2020 04:02 PM UTC

I was able to reproduce 2 issues in the example that you have sent me back.
I was able to get the grid height to change and also able to have the combo box stick.
Right now we are using sync controls and in order for us to purchase them, we want to make sure that all our requirements are being met.  I'm finding a lot of little bugs or work arounds that I need to do but I appreciate the support and timely releases.  It's just I need to find ways in order to prevent these things from happening.

Attachment: HeightandPopupSticking_6d05c14c.zip


CJ chris johansson October 19, 2020 02:32 PM UTC

Just following up on this thanks

Loader.
Up arrow icon