1. Home
  2. Forum
  3. Blazor
  4. SfAutoComplete inside sfdatagrid issue

SfAutoComplete inside sfdatagrid issue

Good day,

  I have attached a sample project showing the sfautocomplete and sfdatagrid,

  #1 During edit mode, there is an error
  #2 During add, it's okay to have a field in description column since I put the sfautocomplete
  #3 During edit, description column should not be shown, how to do it?
  #4 How to properly bind sfatucomplete value to model


Thank you.

Attachment: AUTOCOMPLETEDATAGRIDERROR_4753b3e4.rar

11 Replies 1 reply marked as answer
RS Renjith Singh Rajendran Syncfusion Team March 3, 2021 12:24 PM UTC

Hi Martin, 

Greetings from Syncfusion support. 

Query 1 : During edit mode, there is an error , During edit, description column should not be shown, how to do it? 
We suggest you to disable the SfAutoComplete by checking for the RequestType as Add/BeginEdit in OnActionBegin event to achieve this requirement. 

<GridEvents TValue="EMRAIRPRO.Shared.InvFormDetail"... OnActionBegin="OnActionBegin" ... ></GridEvents><GridColumn Field="DESCRIPTION" HeaderText="Description" AllowEditing="false">    <EditTemplate>        <SfAutoComplete ID="DESCRIPTION" ... Enabled="@AutoCompleteDisable">            ...        </SfAutoComplete>    </EditTemplate></GridColumn>public bool AutoCompleteDisable { get; set; }public void OnActionBegin(ActionEventArgs<EMRAIRPRO.Shared.InvFormDetail> args){    if (args.RequestType.Equals(Action.Add))    {        AutoCompleteDisable = true;    }    else if (args.RequestType.Equals(Action.BeginEdit))    {        AutoCompleteDisable = false;    }}

Note : The Cell based events(OnCellSave, OnCellEdit) will be triggered only when using Batch mode of editing in Grid. 

Query 2 : How to properly bind sfatucomplete value to model 
We suggest you to ensure to provide proper values for the properties of SfAutoComplete based on the type of column in which you are using SfAutoComplete. As the DESCRIPTION field is a string typed field, we suggest you to define SfAutoComplete based on the string valued column. 
 
Please refer the highlighted codes below, 

 
<GridColumn Field="DESCRIPTION" HeaderText="Description" AllowEditing="false"> 
    <EditTemplate> 
        <SfAutoComplete ID="DESCRIPTION" TValue="string" TItem="TblInvItems" 
                        @bind-Value="@((context as InvFormDetail).DESCRIPTION)" 
                        AllowFiltering="true" 
                        IgnoreCase="true" 
                        MinLength="3" 
                        Placeholder="Select product"> 
            <SfDataManager Url="inv/getinvitems" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager> 
            <AutoCompleteFieldSettings Text="Itemdescription" Value="Itemdescription"></AutoCompleteFieldSettings> 
            <AutoCompleteEvents TItem="TblInvItems" TValue="string"></AutoCompleteEvents> 
        </SfAutoComplete> 
    </EditTemplate> 
</GridColumn> 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


MS Martin Sato replied to Renjith Singh Rajendran March 3, 2021 11:37 PM UTC

Hi Martin, 

Greetings from Syncfusion support. 

Query 1 : During edit mode, there is an error , During edit, description column should not be shown, how to do it? 
We suggest you to disable the SfAutoComplete by checking for the RequestType as Add/BeginEdit in OnActionBegin event to achieve this requirement. 

<GridEvents TValue="EMRAIRPRO.Shared.InvFormDetail"... OnActionBegin="OnActionBegin" ... ></GridEvents><GridColumn Field="DESCRIPTION" HeaderText="Description" AllowEditing="false">    <EditTemplate>        <SfAutoComplete ID="DESCRIPTION" ... Enabled="@AutoCompleteDisable">            ...        </SfAutoComplete>    </EditTemplate></GridColumn>public bool AutoCompleteDisable { get; set; }public void OnActionBegin(ActionEventArgs<EMRAIRPRO.Shared.InvFormDetail> args){    if (args.RequestType.Equals(Action.Add))    {        AutoCompleteDisable = true;    }    else if (args.RequestType.Equals(Action.BeginEdit))    {        AutoCompleteDisable = false;    }}

Note : The Cell based events(OnCellSave, OnCellEdit) will be triggered only when using Batch mode of editing in Grid. 

Query 2 : How to properly bind sfatucomplete value to model 
We suggest you to ensure to provide proper values for the properties of SfAutoComplete based on the type of column in which you are using SfAutoComplete. As the DESCRIPTION field is a string typed field, we suggest you to define SfAutoComplete based on the string valued column. 
 
Please refer the highlighted codes below, 

 
<GridColumn Field="DESCRIPTION" HeaderText="Description" AllowEditing="false"> 
    <EditTemplate> 
        <SfAutoComplete ID="DESCRIPTION" TValue="string" TItem="TblInvItems" 
                        @bind-Value="@((context as InvFormDetail).DESCRIPTION)" 
                        AllowFiltering="true" 
                        IgnoreCase="true" 
                        MinLength="3" 
                        Placeholder="Select product"> 
            <SfDataManager Url="inv/getinvitems" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager> 
            <AutoCompleteFieldSettings Text="Itemdescription" Value="Itemdescription"></AutoCompleteFieldSettings> 
            <AutoCompleteEvents TItem="TblInvItems" TValue="string"></AutoCompleteEvents> 
        </SfAutoComplete> 
    </EditTemplate> 
</GridColumn> 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Hi,

   I have tried it, and it's no longer showing any error, but I want to get the selected value and manually assign other fields to my model asf ollows:

<AutoCompleteEvents TItem="TblInvItems" TValue="string" OnValueSelect="(e)=> {
                                                                                                                           var row = context as InvFormDetail;
                                                                                                                           row.PRICE = e.ItemData.Sellprice;
                                                                                                                           row.NETPRICE = row.PRICE;
                                                                                                                       }"></AutoCompleteEvents>

But, it's not being called or not assigned. Please show me the correct way.

Thank you.

MS Martin Sato March 4, 2021 12:02 AM UTC

Also, I tried this:
                                            OnActionBegin="OnActionBegin"
                                            OnCellEdit="CellEdit"
                                            OnCellSave="CellSaved">

I want to do some computation when cell value is changed or changing, how to do it properly?


Thanks.





RS Renjith Singh Rajendran Syncfusion Team March 4, 2021 10:56 AM UTC

Hi Martin, 

Based on this scenario, we suggest you to set the value for a variable and assign this to the @bind-Value property of the component. And also ensure to handle the save in OnActionBegin event of Grid based on RequestType as Save. And also ensure to set PreventRender as false in OnActionComplete event hanlder based on RequestType as Add/BeginEdit. Please refer and use as like the codes below, 

<GridEvents ... OnActionBegin="OnActionBegin" OnActionComplete="OnActionComplete"... ></GridEvents>
<GridColumn Field="DESCRIPTION" HeaderText="Description" AllowEditing="false"> 
    <EditTemplate> 
        <SfAutoComplete ID="DESCRIPTION" ... Enabled="@AutoCompleteDisable"> 
            ... 
            <AutoCompleteEvents ... OnValueSelect="(e) => OnValueSelect(e, context as InvFormDetail)"></AutoCompleteEvents> 
        </SfAutoComplete> 
    </EditTemplate> 
</GridColumn> 
... 
<GridColumn Field="PRICE" HeaderText="Price" Format="n2" TextAlign="TextAlign.Right"> 
    <EditTemplate> 
        <SfNumericTextBox ID="PRICE" ...  @bind-Value="@PRICEValue" /> 
    </EditTemplate> 
</GridColumn> 
    public decimal? PRICEValue { get; set; }    public decimal? NETPRICEValue { get; set; }    public void OnValueSelect(SelectEventArgs<TblInvItems> e, InvFormDetail row)    {        PRICEValue = e.ItemData.Sellprice;        NETPRICEValue = row.PRICE;    }    public void OnActionBegin(ActionEventArgs<EMRAIRPRO.Shared.InvFormDetail> args)    {        if (args.RequestType.Equals(Action.Save))        {            //Hanlde the saving of the corresponding value here            args.Data.PRICE = PRICEValue;            args.Data.NETPRICE = NETPRICEValue;        }        ...    }public void OnActionComplete(ActionEventArgs<EMRAIRPRO.Shared.InvFormDetail> args){    if(args.RequestType.Equals(Action.Add) || args.RequestType.Equals(Action.BeginEdit))    {        args.PreventRender = false;    }}

Query : I tried this:  OnCellEdit,OnCellSave 
As informed in our previous update, the Cell based events(OnCellSave, OnCellEdit) will be triggered only when using Batch mode of editing in Grid. As you have used Normal edit mode in Grid, it is suggested to use Action events(OnActionBegin, OnActionComplete) for your requirement. 

References :  

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Marked as answer
MS Martin Sato replied to Renjith Singh Rajendran March 4, 2021 02:11 PM UTC

Hi Martin, 

Based on this scenario, we suggest you to set the value for a variable and assign this to the @bind-Value property of the component. And also ensure to handle the save in OnActionBegin event of Grid based on RequestType as Save. And also ensure to set PreventRender as false in OnActionComplete event hanlder based on RequestType as Add/BeginEdit. Please refer and use as like the codes below, 

<GridEvents ... OnActionBegin="OnActionBegin" OnActionComplete="OnActionComplete"... ></GridEvents>
<GridColumn Field="DESCRIPTION" HeaderText="Description" AllowEditing="false"> 
    <EditTemplate> 
        <SfAutoComplete ID="DESCRIPTION" ... Enabled="@AutoCompleteDisable"> 
            ... 
            <AutoCompleteEvents ... OnValueSelect="(e) => OnValueSelect(e, context as InvFormDetail)"></AutoCompleteEvents> 
        </SfAutoComplete> 
    </EditTemplate> 
</GridColumn> 
... 
<GridColumn Field="PRICE" HeaderText="Price" Format="n2" TextAlign="TextAlign.Right"> 
    <EditTemplate> 
        <SfNumericTextBox ID="PRICE" ...  @bind-Value="@PRICEValue" /> 
    </EditTemplate> 
</GridColumn> 
    public decimal? PRICEValue { get; set; }    public decimal? NETPRICEValue { get; set; }    public void OnValueSelect(SelectEventArgs<TblInvItems> e, InvFormDetail row)    {        PRICEValue = e.ItemData.Sellprice;        NETPRICEValue = row.PRICE;    }    public void OnActionBegin(ActionEventArgs<EMRAIRPRO.Shared.InvFormDetail> args)    {        if (args.RequestType.Equals(Action.Save))        {            //Hanlde the saving of the corresponding value here            args.Data.PRICE = PRICEValue;            args.Data.NETPRICE = NETPRICEValue;        }        ...    }public void OnActionComplete(ActionEventArgs<EMRAIRPRO.Shared.InvFormDetail> args){    if(args.RequestType.Equals(Action.Add) || args.RequestType.Equals(Action.BeginEdit))    {        args.PreventRender = false;    }}

Query : I tried this:  OnCellEdit,OnCellSave 
As informed in our previous update, the Cell based events(OnCellSave, OnCellEdit) will be triggered only when using Batch mode of editing in Grid. As you have used Normal edit mode in Grid, it is suggested to use Action events(OnActionBegin, OnActionComplete) for your requirement. 

References :  

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Hi,

  I tried your solution, and wanted this behaviour,

  After autocomplete selected the product, I want to show the price, set default quantity to 1, then amount quantity * price, using the ff:


But it's not being updated in the current row being edited/added




Thanks.


MS Martin Sato March 5, 2021 12:48 AM UTC

It is working now, thank you for your support.

VN Vignesh Natarajan Syncfusion Team March 5, 2021 11:20 AM UTC

Hi Martin,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan   


MS Martin Sato replied to Vignesh Natarajan March 29, 2021 09:19 AM UTC

Hi Martin,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan   


Hi,

  I have another issue, my grid datasource is set to a list of my model class, and on action begin after i update the quantity it's not updated yet, i have this code

private async void OnActionBegin(ActionEventArgs<EMRAIRPRO.Shared.RRFormDetail> args)
        {
           ...
          ....

            if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit)
            {
                detail = args.Data;
            }
            else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save)
            {
                
              //here the grid gets updated the new values
              //but when I checked the list the quantity is not yet updated, so if I perform total amount
                
                
                

            }
            else if (args.RequestType == Syncfusion.Blazor.Grids.Action.Delete)
            {
               //remove 
            }

        }

 Here is my Model class
public class RRFormDetail : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public Guid INDEXER { get; set; }
        public Guid? ITEM_INDEXER { get; set; }
        public string DESCRIPTION { get; set; }
        public string UNITMSR { get; set; }
        private decimal? _QTY;

        public decimal? QTY
        {
            get { return _QTY; }
            set 
            {
                _QTY = value;
                OnPropertyChanged("QTY");
                AMOUNT = NETPRICE * QTY;
            }
        }

        private decimal? _PRICE;

        public decimal? PRICE
        {
            get { return _PRICE; }
            set { _PRICE = value;
                OnPropertyChanged("PRICE");
                NETPRICE = PRICE - DISCOUNT;
                AMOUNT = QTY * NETPRICE;
            }
        }
        private decimal? _DISCOUNT;

        public decimal? DISCOUNT
        {
            get { return _DISCOUNT; }
            set { 
                _DISCOUNT = value;
                OnPropertyChanged("DISCOUNT");
                NETPRICE = PRICE - DISCOUNT;

            }
        }

        private decimal? _NETPRICE { get; set; }
        public decimal? NETPRICE
        {
            get
            {
                return _NETPRICE;
            }
            set
            {
                _NETPRICE = value;
                OnPropertyChanged("NETPRICE");
            }
        }
        private decimal? _AMOUNT { get; set; }

        public decimal? AMOUNT
        {
            get
            {
                return _AMOUNT;
            }
            set
            {
                _AMOUNT = value;
                OnPropertyChanged("AMOUNT");
            }
        }
        public int? SEQNO { get; set; }
        public bool DELFLAG { get; set; }
        protected void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(name));
            }
        }
    }

 And here is my list declaration:

private List<EMRAIRPRO.Shared.RRFormDetail> list = new List<RRFormDetail>();


Thank you.

RS Renjith Singh Rajendran Syncfusion Team March 30, 2021 12:24 PM UTC

Hi Martin, 

We would like to inform that the OnActionBegin event will be triggered when an action starts. So the list won’t be updated when this event is triggered, as the edited data save to list action has just been initiated. You can get the modified data in args.Data inside this OnActionBegin handler. Please refer below documentation for more details. 

You can customize the edited data for saving in OnActionBegin event by modifying field values in args.Data. As the edited data in args.Data is not yet saved in list, you can modify the args.Data values(based on your calculation), so that the modified args.Data value will be saved in list. 

And the OnActionComplete event will be triggered once the save gets completed. So you could find the modified data in list, in this event handler. Please refer the screenshot below, 

 

Please get back to us if you need further assistance. 

Regards, 
Renjith R 


MS Martin Sato replied to Vignesh Natarajan March 30, 2021 12:44 PM UTC

Hi Martin,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan   


Thank you, it's working now.

RS Renjith Singh Rajendran Syncfusion Team March 31, 2021 07:00 AM UTC

Hi Martin, 

Thanks for your update. Please get back to us if you need further assistance. 

Regards, 
Renjith R 


Loader.
Up arrow icon