1. Home
  2. Forum
  3. Blazor
  4. Grid with dropdownlist Template

Grid with dropdownlist Template

Hello Team!
I face some issues with the grid including dropdownlist 
Q1: when Cliking on Add buttons select value in my dropdownlist and then click on save icons I get this error 

this is my grid code
<SfGrid TValue="MyGridClass" ID="Grid" DataSource="@_listSignetRapport" Toolbar="@(new List<string>() { "Add"})">
<GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal" NewRowPosition="NewRowPosition.Bottom" ShowDeleteConfirmDialog="true"></GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(MyGridClass.Id) HeaderText="Rapport" Visible="false"></GridColumn>
<GridColumn Field=@nameof(MyGridClass.NomSignet) HeaderText="Signet"  Width="150" IsPrimaryKey="true" EditType="EditType.DropDownEdit">
<EditTemplate> 
<SfComboBox @bind-Value="_signetValue" ID="signetcbb" Placeholder="Signets disponibles" AllowCustom="true" TItem="string" TValue="string" DataSource="@_signetsList" >                                        
</SfComboBox>
</EditTemplate>
</GridColumn>
<GridColumn Field=@nameof(MyGridClass.InformationSource) HeaderText="Information Source" Width="200" EditType="EditType.DropDownEdit">
  <EditTemplate>
<SfDropDownList ID="infosourcecbb" Placeholder="Informations sources" TValue="string" TItem ="InformationSourceData" DataSource="@_infoSourceList">
<DropDownListEvents TValue="string"></DropDownListEvents>
<DropDownListFieldSettings Text="Information" Value="Information"></DropDownListFieldSettings>
</SfDropDownList>
</EditTemplate>
</GridColumn>
<GridColumn HeaderText="" Width="150">
<GridCommandColumns>
<GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></GridCommandColumn>
<GridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-update", CssClass = "e-flat" })"></GridCommandColumn>
<GridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-cancel-icon", CssClass = "e-flat" })"></GridCommandColumn>
</GridCommandColumns>
</GridColumn>
</GridColumns>
</SfGrid>


public static List<string> _signetsList { get; set; }
public static List<InformationSourceData> _infoSourceList { get; set; } 
ObservableCollection<MyGridClass> _listSignetRapport { get; set; } // When I declare List<MyGridClass> _listSignetRapport the Add buttons doesn't add line on grid anymore
 
public class MyGridClass
{
public string Id { get; set; }
public string NomSignet { get; set; }
public string InformationSource { get; set; }
}

public class InformationSourceData
{
public string Information { get; set; }
}

Thanks,
Chimène NK.

34 Replies
RS Renjith Singh Rajendran Syncfusion Team March 30, 2020 09:04 AM UTC

Hi Chimène, 

Thanks for contacting Syncfusion support. 

We tried to reproduce the reported problem by creating a sample with your shared codes. But we could not face the reported problem from our side. Adding new record in Grid works fine from our side. We are attaching the sample for your convenience. Please download the sample from the link below, 
 
Please refer the below application. And, if you are still facing difficulties, kindly get back to us with the following details for better assistance. 
  1. Share the sample which you have tried from your side.
  2. Share the exact scenario or proper replication procedure.
  3. Share with us the video demo showing the problem you are facing.

Query : When I declare List<MyGridClass> _listSignetRapport the Add buttons doesn't add line on grid anymore 
We could see that you have provided different names for the ID property of ComboBox/DropdownList and Field property of GridColumn. We suspect that this might have caused the problem you are facing. So we suggest you to ensure to provide the ID values for ComboBox and Dropdownlist to be same as the Field name values. Please refer the codes below, 

 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Signet" Width="150" IsPrimaryKey="true" EditType="EditType.DropDownEdit"> 
            <EditTemplate> 
                <SfComboBox @bind-Value="_signetValue" ID="CustomerID" Placeholder="Signets disponibles" AllowCustom="true" TItem="string" TValue="string" DataSource="@_signetsList"> 
                </SfComboBox> 
            </EditTemplate> 
        </GridColumn> 
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Information Source" Width="200" EditType="EditType.DropDownEdit"> 
            <EditTemplate> 
                <SfDropDownList ID="ShipCountry" Placeholder="Informations sources" TValue="string" TItem="Countries" DataSource="@_infoSourceList"> 
                    <DropDownListEvents TValue="string"></DropDownListEvents> 
                    <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings> 
                </SfDropDownList> 
            </EditTemplate> 
        </GridColumn> 


And also we suggest you to ensure to provide IsPrimaryKey property for a unique value column in Grid. The column which you have set the IsPrimaryKey property needs to have unique values. As only based on this unique value column in Grid, we will be updating the values to the Grid rows. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


NC NKOUAMBIA CHIMENE March 30, 2020 09:03 PM UTC

Hello Team!

Every things is fine now, but I have another problem,

Why when doubleclick to update information I loss my current value, all the line just empty the values?

you can use your example to reproduce the issues.

Questions: Is there a way to indicate unique constraint/alternativekey in the grid like we specified key and required element?

Thanks,
Chimène Nk.

RS Renjith Singh Rajendran Syncfusion Team March 31, 2020 09:11 AM UTC

Hi Chimène, 

Query 1 : Why when doubleclick to update information I loss my current value, all the line just empty the values?you can use your example to reproduce the issues. 
We tried to reproduce the reported problem with our sample from the previous update. But we could not face the reported problem, when update value to Grid by double clicking the row in Grid. We are attaching the video for your reference. Please download the video demo from the link below, 
 
If you are still facing difficulties, then kindly get back to us with the following details to further proceed on this and provide you a solution as early as possible. 
  1. Share a issue reproducible sample. SO that we could validate the problem based on your sample.
  2. Share a video demo showing the problem and its replication procedure.
  3. Share the details of script error if any occurred in the browser console.

Query 2 : Questions: Is there a way to indicate unique constraint/alternativekey in the grid like we specified key and required element? 
Yes, we have support for DataAnnotation in Syncfusion Grid. We suggest you to refer the below documentation for more details regarding this topic. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


NC NKOUAMBIA CHIMENE March 31, 2020 08:48 PM UTC

Hello Team!
I think we have not understand each other about my question so I join a gif to show how when try to update existing value all the grid lines cells come empty.

And in the gif i also show a strange behavior I cancel the default save in other to validate my model(according to my desing pattern) before insert it. The first gif it work very well since the first column have to be unique not duplicated(index in SQL) it show the validation message and not validate the line, but in the second gif it show the message cancel the line and then the Add button are unabled. how can I fixe it. (my code work as i want just the strange behavior)

<SfGrid TValue="SignetRapportElectroniqueSys" ID="Grid" DataSource="@_listItems" Toolbar="@(new List<string>() { "Add"})">
                    
public async Task OnActionBegin(ActionEventArgs<MyClass> args)
{
switch (args.RequestType.ToString())
{
case "Save":
args.Cancel = true;
try
{
item= new MyClass
{
IdSignetRapportElectronique = args.Data.Id,
IdRapportElectronique = 2,
NomSignet = args.Data.NomSignet,
InformationSource = args.Data.InformationSource
};
_listItems = await _signetrapportService.SaveAsync(_item, _listItems);
}
catch (Exception ex)
{
_validationResults = ex.ValidationResults;
StateHasChanged();
}
break;
case "Delete":
_listItems = await _signetrapportService.DeleteAsync(args.Data.IdSignetRapportElectronique, _listItems);
break;
}
}

Thanks,
Chimène NK.

Attachment: SyncfusionGridBug_444c494c.7z

RS Renjith Singh Rajendran Syncfusion Team April 1, 2020 07:37 AM UTC

Hi Chimène, 

Thanks for your update. 

Query 1 : show how when try to update existing value all the grid lines cells come empty. 
We suspect that you are referring to the initial value’s for the Dropdown and combo boxes, which did not get displayed on initial rendering. If so, we suggest you to ensure to set the Value property for the components. And also ensure that the value which you want to get displayed in Dropdown/Combobox at initial rendering are available in the DataSource bound to Dropdown. We have modified the sample based on this scenario. Please download the sample from the link below, 
 
 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Signet" Width="150" > 
            <EditTemplate> 
                <SfComboBox Value="@_signetValue" ID="CustomerID" Placeholder="Signets disponibles" AllowCustom="true" TItem="string" TValue="string" DataSource="@_signetsList"> 
                    <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings> 
                </SfComboBox> 
            </EditTemplate> 
        </GridColumn> 
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Information Source" Width="200" > 
            <EditTemplate> 
                <SfDropDownList ID="ShipCountry" Value="@((context as Order).ShipCountry)" TValue="string" TItem="Countries" DataSource="@_infoSourceList"> 
                    <DropDownListEvents TValue="string"></DropDownListEvents> 
                    <DropDownListFieldSettings Text="Name" Value="Name"></DropDownListFieldSettings> 
                </SfDropDownList> 
            </EditTemplate> 
        </GridColumn> 
         
 
@code{ 
    ... 
   public string _signetValue = "BHTUKL"; 
    public List<string> _signetsList = new List<string>() { "BHTUKL", "NGRTHU", "NHTJJIL" }; 
    ... 
} 
 
 
Note : And also, It is not advised to use EditTemplate for a Primary Key column(CustomerID) in Grid. The primary key column values need to be unique and they should not be changed. Based on this unique unchanged primary key values only Grid will perform the CRUD actions. Please refer the documentation below, 
In the above attached sample, we have set OrderID column as primary key in Grid. 
 
Query 2 : And in the gif i also show a strange behavior. Add button are unabled. 
We have analyzed your codes and the attached gif. We could see that, you are cancelling our default save action in Grid, and instead of that you are manually updating the database values which is bound to Grid. At these cases, as the Grid’s default save action is cancelled by using args.Cancel the Grid maintains in its Editable state(this is why the Add button remains disabled) . As in editable state the Add button will always remain disabled.  

So to overcome this default Grid’s behavior, it is suggested to call the Grid’s Refresh() method. We suggest you to call the “Refresh()” method of Grid after updating new data manually to the DB which bound to Grid.  

 
<SfGrid TValue="Order" @ref="grid" ID="Grid" DataSource="@_listSignetRapport" Toolbar="@(new List<string>() { "Add"})"> 
    <GridEvents OnActionBegin="OnActionBegin" TValue="Order"></GridEvents> 
    ... 
</SfGrid> 
 
 
@code{ 
    public SfGrid<Order> grid { get; set; } 
    ... 
    public async Task OnActionBegin(ActionEventArgs<Order> args) 
    { 
        switch (args.RequestType.ToString()) 
        { 
            case "Save": 
                args.Cancel = true; 
                ... 
                //Call the Refresh method after updating the vaulues to your DB 
                grid.Refresh(); 
                break; 
        } 
    } 
} 


And if you are still facing difficulties, kindly get back to us with an issue reproducing sample application and a video demo showing the problem you are facing. So that we could validate your based on your scenario and provide you a solution as early as possible. 

Regards, 
Renjith Singh Rajendran. 


NC NKOUAMBIA CHIMENE April 1, 2020 08:25 PM UTC

Hello Team!

Thanks for the answer it resolve partially my problem.

First: I have 2 combobox but one is AllowCustom="true"  because the user can be able to edit a value not present in list so the problem when click for update existing item since the combobox value is not in default listdatasource the fields is empty. Is there a way to overcome it?
 I don't need to add the value into the list at all because it is not necessary for me, because any user can have the possibility to write his value he want for that fields from now that cbb has no value so it is empty(but at the future it will hava value but the user can still have the possibility to write his own Text on that cbb).

Second: now the Add buttons is ok after cancel the default save action but i need that when there is validation results(the items is not correct dependent of my validators) i need that the line that user are editing doesn't get deleted? so if there is an error so we go into catch{} the validation message show and let the possibility to user to modify his value and save or cancel.

Thanks,
Chimène NK.   


RS Renjith Singh Rajendran Syncfusion Team April 2, 2020 03:06 PM UTC

Hi Chimène, 

Thanks for your update. 

Query 1 : the user can be able to edit a value not present in list so the problem when click for update existing item since the combobox value is not in default listdatasource the fields is empty. 
We would like to inform you that if we type any custom value in the ComboBox component, then the typed value will not be maintained in the input element of the ComboBox component without adding in to the existing data source. This is the default behavior of Syncfusion ComboBox. So manually typed and saved values will not be shown in Combobox’s input element when re-editing the Grid’s row, the values which are available in ComboBox’s list will only be displayed in Combobox’s input element. 

Query 2 : i need that the line that user are editing doesn't get deleted? 
We are currently checking this requirement from our side. We will update you further details on April 3, 2020. 

Regards, 
Renjith Singh Rajendran. 

  


NC NKOUAMBIA CHIMENE April 2, 2020 08:11 PM UTC

Hello Team!

Is there a way to change the color of selected rows to red for example? in this code i need to select and color all rows who respect a condition
public void OnGridDataBound(Dictionary<String, String> listSignetNotFound)
{
var Source = this._sfGridSignet.DataSource;
var IndexNum = 0;
List<int> Index = new List<int>();
foreach (var Data in Source)
{
if (listSignetNotFound.ContainsKey(Data.NomSignet))
{
Index.Add(IndexNum);
}
IndexNum++;
}
_sfGridSignet.SelectRows(Index); //need also to color it to red
}

About my other problem while updating value with a allowcustom cbb i proceed like this in other to not loss the value when editing
public async Task OnActionBegin(ActionEventArgs<SignetRapportElectroniqueSys> args)
    {
        switch (args.RequestType.ToString())
        {
            case "BeginEdit":
                if (!_signetsList.Contains(args.RowData.NomSignet))
                    _signetsList.Add(args.RowData.NomSignet); 
                break;
        }
    }

Thanks,
Chimène NK.

RS Renjith Singh Rajendran Syncfusion Team April 3, 2020 09:15 AM UTC

Hi Chimène, 

Thanks for your update. 

Query 1 : Is there a way to change the color of selected rows to red 
If you want to change the color of a particular row in Grid based then we suggest you to refer the below documentation. 
 
Or if you want to change the color for the row selection background then we suggest you to add the below highlighted style to your application. 

<style> 
    .e-grid .e-row .e-rowcell.e-selectionbackground { 
        background-color: yellow; 
    } 
</style> 


Query 2 : i need that the line that user are editing doesn't get deleted? 
By default, when cancel the Save action(during add) using args.Cancel in OnActionBegin events will keep the Edit form in the opened state. But currently we are facing issue with this default cancelling behavior, the add form gets closed even if we cancel the add saving action in OnActionBegin event handler. So, we have confirmed this as a defect and logged a defect report for the same. We will fix this issue “Problem with cancelling the adding of new record in OnActionBegin event” and include the fix in our upcoming bi-weekly patch release which is expected to be rolled out in the mid of April,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.  

Query 3 : About my other problem while updating value with a allowcustom cbb i proceed like this in other 
Yes, please use the solution as like what you have done to achieve that requirement. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



NC NKOUAMBIA CHIMENE April 3, 2020 09:23 PM UTC

Hello Team!

About color the selected rows the giving solutions is not ok for me because the function a wrote in the previous post is from onclick of a button not on the load of the grid maybe the name a gave to my function make you confused. So i click on the buttons and the rows meet a condition get selected from now it select with default gray color but i want those selected rows to be red. Is there a way to do something like _sfGridSignet.SelectRows(index).AddClass(....) ????

Question: Is there a way to have the toolbar command(Add) in french? set a background color for the grid header(C)? be able to change the alternate color for rows(A bleue, B yellow). 
can we add something here to achieve it?
.e-grid .e-altrow {
        background-color: #0274d823;
    }


Thanks,
Chimène NK.

RS Renjith Singh Rajendran Syncfusion Team April 6, 2020 02:12 PM UTC

Hi Chimène, 

Query 1 : So i click on the buttons and the rows meet a condition get selected from now it select with default gray color but i want those selected rows to be red. 
From your query, we could infer that your requirement is to change the color of the selection background to Red instead of the default Grey color. If so then the below suggested solution from our previous update will work for your case. We have also prepared a sample to select the Grid rows in a button click. And the selected rows will be applied Red color. Please dowlaod the sample from the link below, 
 
 
    <SfButton @onclick="onclick">Select rows</SfButton> 
    <SfGrid TValue="Order" @ref="grid" ID="Grid" DataSource="@_listSignetRapport" Toolbar="@(new List<string>() { "Add"})"> 
        <GridSelectionSettings Type="SelectionType.Multiple"></GridSelectionSettings> 
        ... 
   </SfGrid> 
 
<style> 
    .e-grid .e-row .e-rowcell.e-selectionbackground { 
        background-color: red; 
    } 
</style> 
 
@code{ 
    ... 
    public void onclick() 
    { 
        List<int> Index = new List<int>() { 1,2 }; 
        grid.SelectRows(Index); //need also to color it to red 
    } 
    ... 
} 
 
 
Query 2 : Question: Is there a way to have the toolbar command(Add) in french? 
We suggest you to use the “Localization feature” of Grid. With this you can change language for Syncfusion Grid component. And in our latest version 18.1.0.42, we have modified the localization functionality for Blazor server side sample (based on .NET core approach). Please refer the below release notes for more details, 

For an example purpose, we have created a sample by loading and applying the es culture for Syncfusion Grid component(we suggest you to apply your own culture, for example French instead of es). Please download the sample from the link below, 
Note : Please clear the browser cache before running the above application. 

We are also attaching our default locale resource file. You can change this locale text based on your culture(French) by using these locale keys.   

Please refer the below configuration for more information. 


<SfGrid TValue="Order" AllowPaging="true" DataSource="@Orders" Toolbar="@( new List<string> { "Add","Edit","Delete","Update","Cancel" })" Locale="es" > 
    ... 
</SfGrid> 
 
  
[Startup.cs] 
 
namespace BlazorApp1 
{ 
    public class Startup 
    { 
        public Startup(IConfiguration configuration) 
        { 
            Configuration = configuration; 
        } 
        public IConfiguration Configuration { get; } 
 
        // This method gets called by the runtime. Use this method to add services to the container. 
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 
        public void ConfigureServices(IServiceCollection services) 
        { 
            services.AddSyncfusionBlazor(); 
            services.AddLocalization(options => options.ResourcesPath = "Resources"); 
            services.Configure<RequestLocalizationOptions>(options => 
            { 
                //    // define the list of cultures your app will support 
                var supportedCultures = new List<CultureInfo>() 
            { 
                new CultureInfo("en-US"), 
                new CultureInfo("es") 
            }; 
 
                // set the default culture 
                options.DefaultRequestCulture = new RequestCulture("es"); 
 
                options.SupportedCultures = supportedCultures; 
                options.SupportedUICultures = supportedCultures; 
                options.RequestCultureProviders = new List<IRequestCultureProvider>() { 
                 new QueryStringRequestCultureProvider() 
                }; 
            }); 
            services.AddRazorPages(); 
            services.AddServerSideBlazor(); 
            services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SampleLocalizer)); 
            services.AddSingleton<WeatherForecastService>(); 
            
            ...             
        } 
        
        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. 
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env) 
        { 
            app.UseRequestLocalization(); 
            ... 
       } 
    } 
} 


Note : We have generated the resource file based on es culture and used that resource file in the above attached application. 

[SampleLocalizer.cs] 
 
public class SampleLocalizer : ISyncfusionStringLocalizer 
    { 
 
        public string Get(string key) 
        { 
            return this.Manager.GetString(key); 
        } 
 
        public System.Resources.ResourceManager Manager 
        { 
            get 
            { 
                return  blazordatagrid.Resources.SyncfusionBlazorLocale.ResourceManager; 
            } 
        } 
    } 


Note: Add the resx files to Resources folder. Mark the resx files as Embedded resource in .csproj file. 

Please refer the below Microsoft reference links for more details, 
Reference Link:  
 
Query 3 : set a background color for the grid header(C)? 
If you want to customize all the header cells in Grid, then you can add the below style to your application to apply style for the Grid’s headers. Please use the code below, 

 
<style> 
    .e-grid .e-headercell { 
        color:red; 
        background-color:deepskyblue; 
    } 
</style> 


But based on your requirement, we could see that you would like to customize only a particular header cell in Grid. To apply style based on the particular column header, then we suggest you to use the “HeaderCellInfo” event of Grid. And in the handler based on the column’s field name add the css class to the header cell. We have also included this requirement in the above sample(sample in Query 1 ) 

Please refer the code below, 
 
 
    <SfGrid TValue="Order" @ref="grid" ID="Grid" DataSource="@_listSignetRapport" Toolbar="@(new List<string>() { "Add"})"> 
        <GridSelectionSettings Type="SelectionType.Multiple"></GridSelectionSettings> 
        <GridEvents HeaderCellInfo="HeaderCellInfo" TValue="Order"></GridEvents> 
        ... 
   </SfGrid> 
 
<style> 
    .e-grid .e-row .e-rowcell.e-selectionbackground { 
        background-color: red; 
    } 
    .e-grid .orderidcss { 
        color: blue; 
        background-color: greenyellow; 
    } 
</style> 
 
@code{ 
    ... 
   public void HeaderCellInfo(HeaderCellInfoEventArgs args) 
    { 
        var ColDetails = JsonConvert.DeserializeObject<Dictionary<string, object>>(args.Cell.ToString()); 
        foreach (var a in ColDetails) 
        { 
            var ColumnField = new GridColumn(); 
            if (a.Key == "column") 
            { 
                ColumnField = JsonConvert.DeserializeObject<GridColumn>(a.Value.ToString()); 
            } 
            if (ColumnField.Field == "OrderID") 
            { 
                args.Node.AddClass(new string[] { "orderidcss" });  //Based on a particular header cell add the css to apply style for a particular header cell 
            } 
        } 
    } 
} 

 
Note : Please ensure to set the Type for all the defined Grid columns. 

Query 4 : be able to change the alternate color for rows(A bleue, B yellow). 
Yes, you can apply the styles as suggested in the below documentation, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


NC NKOUAMBIA CHIMENE April 7, 2020 09:20 PM UTC

Hello Team!

Thanks for reply, but about my needs for colored the selected rows in red when clicked in a bouttons the giving answer is not adapted because i don't need to change the default selection color it is only when click on the buttons(because i need to like alert the user about some missing value ) so when the user clik on the grid i need the default gray color to apply. So if the user came to the page and don't click the boutton, and click on a the grid rows the default color is ok if he click on the button the selected rows has to be red, but if after that he select a row in grid the default color has to be apply.

Thanks,
Chimène NK

RS Renjith Singh Rajendran Syncfusion Team April 8, 2020 01:33 PM UTC

Hi Chimène, 

We suggest you to use the “@attributes” property to achieve this requirement. We have prepared a sample, please download the sample from the link below, 
 
In the below code, we have set the @attributes property for Grid and in that property we will be adding the attribute for the Grid div element and use flags to apply the corresponding styles for selection background based on the selection done using Button click or normal selection. Please refer the codes below, 

 
    <SfButton @onclick="onclick">Select rows</SfButton> 
 
    <SfGrid TValue="Order" @ref="grid" ID="GridInstance" DataSource="@_listSignetRapport" @attributes="@GridAttributes" Toolbar="@(new List<string>() { "Add"})"> 
        <GridSelectionSettings Type="SelectionType.Multiple"></GridSelectionSettings> 
        <GridEvents TValue="Order" RowSelecting="RowSelecting" RowSelected="RowSelected"></GridEvents> 
        ... 
    </SfGrid> 
 
<style> 
    .e-grid[data-selection="custom"] .e-rowcell.e-selectionbackground {                   //use css selector to apply style for selection 
        background-color: red !important; 
    } 
     
</style> 
 
@code{ 
     
    private Dictionary<string, object> GridAttributes { get; set; } = new Dictionary<string, object>(); 
    ObservableCollection<Order> _listSignetRapport { get; set; } 
    public bool flag = false; 
    public bool RowSelectedFlag = false; 
    ... 
    public void onclick() 
    { 
        if (GridAttributes.Count == 0)                   //set the attribute for Grid’s div element 
        { 
            GridAttributes.Add("data-selection", "custom");                     
        } 
        else 
        { 
            GridAttributes["data-selection"] = "custom"; 
        } 
        List<int> Index = new List<int>() { 1,2 }; 
        RowSelectedFlag = true;                         //set the flag to indicate selection is done using button click 
        grid.SelectRows(Index);     
    } 
    public void RowSelecting(RowSelectingEventArgs<Order> args)         //in this event, we will remove the attribute when select a record by mouse click 
    { 
        if (flag) 
        { 
            GridAttributes["data-selection"]= ""; 
            flag = false; 
        } 
    } 
    public void RowSelected(RowSelectEventArgs<Order> args)       //in this event, we will set flags for removing the attribute, when perform select by button click 
    { 
        if (RowSelectedFlag) 
        { 
            flag = true; 
            RowSelectedFlag = false; 
        } 
    } 
    ... 
} 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


NC NKOUAMBIA CHIMENE April 9, 2020 07:57 PM UTC

Hello Team!

I'm unable to download the example joint in the post of  April 6, 2020 02:12 PM UTC about the localization 

Can you please add it again? I try to follow the step but i don't know where to find the resources files for french and how to use it i suppose it was include in the sample i'm not able to download. 
I download the last fr.json on github add locale = "fr" on grid tag and this 
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
this.JsRuntime.Sf().LoadLocaleData("wwwroot/ej2-locale/src/fr.json").SetCulture("fr");
}
}
but it like the translation are partial as you can see on this image in green the traduction is ok in red the traduction is not ok for the same grid. I'm I missing something?

 

Question: Is there a way to change the background color of the Grid command header?

Thanks,
Chimène Nk.

RS Renjith Singh Rajendran Syncfusion Team April 13, 2020 02:10 PM UTC

Hi Chimène, 

Query 1 : but i don't know where to find the resources files for french and how to use it i suppose it was include in the sample i'm not able to download. 
As informed in our previous update, we have modified our Localization feature. Please refer the below documentation for more details to apply globalization in server side. 
 
We have also prepared a sample to apply fr culture in grid. Please download the sample from the link below, 
 
Please download the below resx file for translations for other Syncfusion components in fr. The below file contains translations keys for other Syncfusion components. You can add these translation keys in the above attached application’s resx file, if you want to apply globalization for other components used in Grid. In the above sample, we have added the below code to resx file to display the “No records to display” for Dropdown list in French. 
 
 
  <data name="DropDownList_NoRecordsTemplate" xml:space="preserve"> 
    <value>Aucun enregistrement trouvé</value> 
  </data> 
 
 
Query 2 : Problem with showing French culture for command column buttons(Delete, Edit) 
We have confirmed this as a defect and logged a defect report for the same. Thank you for taking the time to report this issue “Globalization not applied for the Command buttons tooltip” 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 in the month of May, 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.  
 
Query 3 : Is there a way to change the background color of the Grid command header? 
As suggested in our previous update dated April 6, 2020 we suggest you to use the “HeaderCellInfo” event of Grid to achieve this requirement. And also you can use the CustomAttributes property of Grid columns. Please refer the code below, 

 
       <GridColumn HeaderText="" Width="150" CustomAttributes="@(new { @class="commandcss"})"> 
            <GridCommandColumns> 
                <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn> 
                ... 
           </GridCommandColumns> 
        </GridColumn> 

<style> 
    .e-grid .commandcss { 
        color: blue; 
        background-color: greenyellow; 
    }  
</style> 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


NC NKOUAMBIA CHIMENE April 14, 2020 07:18 PM UTC

Hello Team!

Sorry i'm talking about his command header background color. How to modified it? 

I write this but it color partially(the background color stop ) and the buttons doesn't take the background color, can you give me the best way to correct it? I want the background to be blue and the bouttons icons and text to be white
.e-grid .e-toolbar-items{
        color: white;  
        background-color: blue;
    }

Please for these issues you can refer to the sample of Replied On April 8, 2020 01:33 PM UTC
Issue1: After implement the given solution in the thread of Replied On April 8, 2020 01:33 PM UTC when i click on a delete rows icons  i get the message as like i'm not selecting any rows, the delete work normally when i remove RowSelecting="RowSelecting" in > tag is there anything missing?

Issue2: (using the sample of the thread of Replied On April 8, 2020 01:33 PM UTC)Is there a way to make the selected items persist until user finish making his modification or click on cancel button, as the purpose of the buttons is to alert the user about some rows that doesn't respect some condition it will be nice to persist those red rows that get colored after click buttons. And after any editing of those red rows the grid will refresh to just keeping in red the rows that still fill the condition.

Thanks,
Chimène NK.

RS Renjith Singh Rajendran Syncfusion Team April 15, 2020 12:09 PM UTC

Hi Chimène, 

Query 1 : i'm talking about his command header background color. 
We suggest you to add the below styles to your application to apply styles to the Grid’s toolbar. Please add the below styles in your application, 

 
<style> 
    /*Below styles apply color for toolbar area in Grid*/ 
    .e-grid .e-toolbar { 
        background-color: blue; 
    } 
    .e-grid .e-toolbar-items { 
        background-color: blue; 
    } 
    /*Below styles apply color for toolbar buttons which are enabled state*/ 
    .e-grid .e-toolbar-items .e-tbar-btn { 
        background-color: blue; 
    } 
    .e-grid .e-toolbar-items .e-tbar-btn .e-btn-icon { 
        color: white; 
    } 
    .e-grid .e-toolbar-items .e-tbar-btn .e-tbar-btn-text { 
        color:white; 
    } 
    /*Below styles apply color for toolbar buttons with overlay(disabled)*/ 
    .e-grid .e-toolbar-items .e-toolbar-item.e-overlay .e-tbar-btn { 
        background-color: blue; 
    } 
    .e-grid .e-toolbar-items .e-toolbar-item.e-overlay .e-tbar-btn .e-btn-icon { 
        color: white; 
    } 
    .e-grid .e-toolbar-items .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text { 
        color: white; 
    } 
    .e-toolbar .e-toolbar-items .e-toolbar-item.e-overlay { 
        background-color: blue; 
    } 
</style> 


Query 2 : when i click on a delete rows icons  i get the message as like i'm not selecting any rows, 
We have confirmed this as a defect and logged a defect report for the same. Thank you for taking the time to report this issue “Command Column Delete not works when bind RowSelecting event” 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 in the month of May, 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.  

Query 3 : Is there a way to make the selected items persist until user finish making his modification or click on cancel button, 
We are not clear about this requirement. In our previously attached sample dated April 8, 2020, after updating value to Grid using Update command button, will still maintain the red selection for that particular row.  

We suspect that, you are referring to the not maintained of red selection when the Grid’s row is in editable state (i.e. background selection of Grid’s editform also needs to be in red color). If this is your requirement, then we suggest you to add the below style to application shared dated April 8, 2020 to achieve this requirement. 

Add the below style also in that sample. 

    <style> 
        ... 
       .e-grid[data-selection="custom"] .e-row.e-editedrow .e-rowcell { 
            background-color: red !important; 
        } 
        ... 
   </style> 

We have prepared a video demo showing the behavior. Please  download the video from the link below, 
 
If we have misunderstood your requirement, then we need more details to further proceed on this and provide you a solution. Please get back to us with the following details, 
  1. Share a video demonstrating your requirement.
  2. Share the detailed explanation of your requirement.
  3. Share a pictorial representation showing your requirement.
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


NC NKOUAMBIA CHIMENE April 16, 2020 09:00 PM UTC

Hello Team!

I think my explanation aren't been understand as i want, so i join a gif to explain what i want.

1- After click on Valid buttons the invalid items in grid are colored with red color (Ok)
2- And then i don't want the user to be able to unselected those red items until he click on cancel (clicking on cancel already uncolored the red items and reset the default gray selected color)
3- While editing(modified/delete) those red items I want them to stay red Colored if possible or if not, they have to stay checked
4- The checkbox have to be readonly and his value has to change only when click on Valid to check invalid items
5- If possible after clicking on Valid only the red colored items(invalid one) are editable 

I Hope I explain well my need now!

Thanks,
Chimène NK.

 

Attachment: SyncfusionGridGridNeed_8592e6f1.7z

RS Renjith Singh Rajendran Syncfusion Team April 17, 2020 03:19 PM UTC

Hi Chimène, 

We would like to inform you that we have “RowDeselecting” event in Grid, with this event you can prevent the deselection to be performed for a row by setting “args.Cancel = true”. So we suggest you to use this event for your case scenario, for preventing the row deselection based on your scenario. We are attaching the below code for your reference to implement the below suggestion in your application based on your scenario. In the below code, we have set the “args.Cancel = true” by checking for whether the clicked row is available in the ErrorRowIndex and checking for the flag(whether the red color is applied for the row). 

 
<GridEvents HeaderCellInfo="HeaderCellInfo" TValue="Order" RowSelecting="RowSelecting" RowDeselecting="RowDeselecting" RowSelected="RowSelected"></GridEvents> 
 
    List<int> ErrorRowIndex = new List<int>() { 1, 2 }; 
    public void onclick() 
    { 
        grid.ClearRowSelection(); 
        if (GridAttributes.Count == 0) 
        { 
            GridAttributes.Add("data-selection", "custom"); 
        } 
        else 
        { 
            GridAttributes["data-selection"] = "custom"; 
        } 
        ErrorRowIndex = new List<int>() { 1, 2 }; 
        RowSelectedFlag = true; 
        grid.SelectRows(ErrorRowIndex); //need also to color it to red 
    } 
    public void RowDeselecting(RowDeselectEventArgs<Order> args) 
    { 
        if (ErrorRowIndex.Contains(Convert.ToInt32(args.RowIndex)) && flag) 
        { 
            args.Cancel = true; 
        } 
    } 
    public void RowSelecting(RowSelectingEventArgs<Order> args) 
    { 
        if (flag && !ErrorRowIndex.Contains(Convert.ToInt32(args.RowIndex))) 
        { 
            GridAttributes["data-selection"]= ""; 
            flag = false; 
        } 
    } 
    public void RowSelected(RowSelectEventArgs<Order> args) 
    { 
        if (RowSelectedFlag) 
        { 
            flag = true; 
            RowSelectedFlag = false; 
        } 
    } 


We have also modified the sample from our previous update on April 8,2020. Please download the sample from the link below, 
 
We suggest you to refer the above codes and implement this idea in your application based on your scenario. And if you face any difficulties in implementing the above suggestion in your application, then kindly share the video demo showing the problem you face in your implementation. 

Regards, 
Renjith Singh Rajendran. 


NC NKOUAMBIA CHIMENE April 17, 2020 09:43 PM UTC

Hello Team!

Thanks for solution but it incomplet 
I mean by the time i click on Valid buttons and items are colored in red those rows items have to stay in red color even when i'm editing them and the red color will be remove only when i click on cancel buttons(so you can use your example and add a Cancel buttons).

In the solution you give now after selecting invalidrows if i click on red rows it ok it doesn't deselect, but if i click on any other rows(other than red one) the red one deselect, after the red rows are selected if i click on edit command(on red rows) the other redrows deselect their color.

My need is that by the time i click on "select rows" on the giving example, the invalidrows(red colored one) has to stay red independently on any action i'm doing in grid(add/delete/update). So those rows have to be deselect only if i click on cancel bouttons

I Hope i give more details about my needs!

Thanks,
Chimène NK!

RS Renjith Singh Rajendran Syncfusion Team April 20, 2020 01:21 PM UTC

Hi Chimène, 

We have analyzed your complete requirement. And this requirement can be achieved by using the RowDataBound event of Grid. With this event, you can apply the color for the rows you need to mark as error. So please ignore our previous updates, and use the RowDataBound event together with the Grid Refresh method to achieve this requirement. 

We have prepared a sample based on this scenario. Please download the sample from the link below, 
 
In the below code, when the ErrorMarker button is clicked, we will set Markflag as true and be calling the Refresh method. This will trigger the RowDataBound event and apply the style for the corresponding rows based on the Primary key value of each row. And when the RemoveError button is clicked, call the same Refresh method and now set the Markflag to false. This will remove the error red color from the rows. Please refer the codes below, 

 
    <SfButton @onclick="MarkError">ErrorMarker</SfButton> 
    <SfButton @onclick="RemoveError">RemoveError</SfButton> 
 
    <SfGrid TValue="Order" @ref="grid" ID="GridInstance" DataSource="@Orders" Toolbar="@(new List<string>() { "Add"})"> 
       <GridEvents TValue="Order" RowDataBound="RowBound" ></GridEvents> 
        ... 
   </SfGrid> 
 
<style> 
    .error-row { 
        background-color: red; 
    } 
</style> 
 
@code{  
    public bool Markflag = false; 
    public void MarkError() 
    { 
        Markflag = true; 
        grid.Refresh(); 
    } 
    public void RemoveError() 
    { 
        Markflag = false; 
        grid.Refresh(); 
    } 
    public void RowBound(RowDataBoundEventArgs<Order> args) 
    { 
        if (Markflag && (args.Data.OrderID == 1001 || args.Data.OrderID == 1002)) 
        { 
            args.Row.AddClass(new string[] { "error-row" }); 
        } 
    } 
} 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


NC NKOUAMBIA CHIMENE April 20, 2020 09:26 PM UTC

Hello Team!

Thanks for the answer, it works as I want now, but just a little question, 
when moving this 
.e-grid .e-headercell { 
    color:white; 
    background-color:#0275d8; 
}
in my site.css file the style doesn't apply, but if i put it directly on the razor page it ok, is there an explanation about it? because other grid style are in my .site.css and it's apply fine but this one No

Thanks,
Chimène NK!

RS Renjith Singh Rajendran Syncfusion Team April 21, 2020 07:29 AM UTC

Hi Chimène, 

We suggest you to set proper root for the css classes as like below code to overcome the problem you are facing. Please use like the below codes, 

 
.e-grid .e-columnheader .e-headercell { 
    color: white; 
    background-color: #0275d8; 
} 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


NC NKOUAMBIA CHIMENE April 22, 2020 08:48 PM UTC

Hello Team!

Please I have some needs:
1- When click on add bouttons of the grid, I need the focus to be set to the new added row
2- I need my dialog box to be top+center but even if i set the bellow property it set the left+top position
<SfDialog> 
..........
<DialogPositionData X="Center" Y="Top"></DialogPositionData>
............
</SfDialog>
3- Has you will see on the gif i want to show a toast message to user but:
 - The content message doesn't change, 
 - When click the buttons several times the user can see the last toast hidding it's not nice
 - And as you can see if the user click on the toast the color change to black I need the red color to be permanent, I think i miss something 

<SfToast @ref="_toastObj" Height="auto" Width="800px" Content="@_toastContent" TimeOut="0">
    <ToastPosition X="Center" Y="Top"></ToastPosition>
    <ToastEvents OnClick="@ToastClick"></ToastEvents>
</SfToast>

<input type="submit" class="btn btn-outline-primary" @onclick="@ShowToastWithMessage" value="Afficher" />


 private SfToast _toastObj;
 private string _toastContent { get; set; } = "You have a new friend request yet to accept";

protected void ShowToastWithMessage()
{
_toastContent = string.Format("<li class=\"validation-message\">{0}</li>", "You have an error here!!");
await _toastObj.Hide();
await Task.Delay(100);
await _toastObj.Show();
}

<style>
    .e-toast-container .e-toast {
    background-color: red;
    }

    .e-toast-container .e-toast .e-toast-message .e-toast-content {
    color: white;
    font-size: 13px;
    font-weight: normal;
    }
</style>

Thanks,
Chimène NK.


Attachment: SyncfusionGridQuestion_ffc782bd.7z

RS Renjith Singh Rajendran Syncfusion Team April 23, 2020 01:27 PM UTC

Hi Chimène, 

Query 1 : When click on add bouttons of the grid, I need the focus to be set to the new added row 
We suspect that you would like to select the newly added row, once it is added to Grid. If so then we suggest you to call the SelectRow method of Grid with its argument as the index you need to select in the OnActionComplete event as like the below code, 

 
@code{ 
    public List<Order> Orders { get; set; } 
 
    public SfGrid<Order> grid { get; set; } 
    ... 
   public void OnActionComplete(ActionEventArgs<Order> args) 
    { 
        if(args.RequestType.ToString() == "Save") 
        { 
            grid.SelectRow(0);    //Select the corresponding row by passing the index value. 
        } 
    } 
    ... 
} 


If we have misunderstood your requirement, kindly get back to us with a detailed description of your complete requirement. And also share a video demo showing your requirement. 
 
Query 2: “I need my dialog box to be top+center but even if i set the bellow property it set the left+top position”  
Use small casing for defining the dialog positions. Refer the below code block for example. 

 
<DialogPositionData X="center" Y="top"></DialogPositionData>  


Query 3: “Has you will see on the gif i want to show a toast message to user but:”  

a.The content message doesn't change,  
We are able to see the updated toast message with the update error content. We have ensured the toast with Nuget version 18.1.45. We have also prepared a sample based on your requirement. 

b.When click the buttons several times the user can see the last toast hidding it's not nice  
Since you have called the hide toast before the toast show the reported toast close behavior occurs.  

  
protected async void ShowToastWithMessage()  
    {  
        _toastContent = string.Format("<li class=\"validation-message\">{0}</li>", "You have an error here!!");  
        await _toastObj.Hide();  
        await Task.Delay(100);  
        await _toastObj.Show();  
    }  
  

c.And as you can see if the user click on the toast the color change to black I need the red color to be permanent, I think i miss something  
Need to set the CSS hover color, also for the toast to resolve this issue. Check the above sample for reference. 

 .e-toast-container .e-toast:hover {  
        background-color: red;  
    }  

Note : If you have new queries with other components like SfToaster/SfDialog you can create a new forum by mentioning those components name. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 




NC NKOUAMBIA CHIMENE May 5, 2020 03:42 PM UTC

Hello Team!

*** I need to set the focus to the first element of my new gridline when click to Add(as in the video)  
*** And also need to replace the default DeleteConfirm with my own 
<SfDialog @bind-Visible="@Visible" IsModal="true" Width="400px" ShowCloseIcon="true" CloseOnEscape="true">
    <DialogEvents></DialogEvents> 
    <DialogTemplates>
        <Header> Suppression </Header>
        <Content> Êtes-vous sûr de vouloir supprimer définitivement?</Content>
        <FooterTemplate>
            <div>
                <button class="btn btn-success" @onclick="@(async () => await OnConfirmDelete())">Oui</button>
                <button class="btn btn-danger"@onclick="@OnCancelDelete" >Non</button>
            </div>
        </FooterTemplate>
    </DialogTemplates>
</SfDialog>

@code{
private Boolean Visible = false;

protected virtual void OnCancelDelete()
{
ClosePopup();
}

protected virtual async Task OnConfirmDelete()
{
await _signetrapportService.DeleteAsync();
ClosePopup();
}

private void ClosePopup()
{
Visible = false;
}
}

Thanks,
Chimène NK.

NC NKOUAMBIA CHIMENE May 5, 2020 03:48 PM UTC

The gift for my previous questions!

Attachment: SyncfusionGridQuestion0505_1f300cef.7z

RS Renjith Singh Rajendran Syncfusion Team May 6, 2020 01:08 PM UTC

Hi Chimène, 

Query 1 : I need to set the focus to the first element of my new gridline when click to Add(as in the video)   
We suggest you to call the FocusIn method for the corresponding SfDropDownList you need to set focus in the edit form. Call this method in the Created event handler of SfDropDownList.  

Please use the codes below, 

 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Rapport" Type="ColumnType.Number" > 
            <EditTemplate> 
                <SfDropDownList @ref="dropinstance" TValue="int" TItem="Order" ...> 
                    <DropDownListEvents Created="Created" TValue="int"></DropDownListEvents> 
                </SfDropDownList> 
            </EditTemplate> 
        </GridColumn> 

    SfDropDownList<int, Order> dropinstance; 
    ... 
   public void Created() 
    { 
        dropinstance.FocusIn(); 
    } 


Query 2 : And also need to replace the default DeleteConfirm with my own 
You can disable our default delete confirmation dialog by setting the ShowDeleteConfirmDialog property to false.  

And to display your customized dialog, we suggest you to bind the OnActionBegin event of Grid. In this event handler, based on the RequestType as Delete we suggest you to cancel the default Delete operation using “args.Cancel” and set the Visible variable to true. 

Please refer and use as like the codes below, 

 
<SfGrid TValue="Order" @ref="grid" ID="GridInstance" DataSource="@Orders" Toolbar="@(new List<string>() { "Add"})"> 
   <GridEditSettings AllowEditing="true" AllowDeleting="true" ... ShowDeleteConfirmDialog="false"></GridEditSettings> 
    <GridEvents TValue="Order" ... OnActionBegin="OnActionBegin" ></GridEvents> 
    ... 
</SfGrid> 
 
<SfDialog @bind-Visible="@Visible" IsModal="true" Width="400px" ShowCloseIcon="true" CloseOnEscape="true"> 
    ... 
</SfDialog> 
 
@code{ 
    ... 
   public async Task OnActionBegin(ActionEventArgs<Order> args) 
    { 
        if (args.RequestType.ToString() == "Delete") 
        {  
            args.Cancel = true;             //Cancel the default delete action and do the delete action in Oui button click 
            Visible = true;                 //Display your custom dialog  
        } 
    } 
    private Boolean Visible = false; 
    ... 
} 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


NC NKOUAMBIA CHIMENE May 6, 2020 11:06 PM UTC

Hello Team!

For my first question the items is a SfComboBox so doesn't have the created event, how to set focus to it when click to add?
 
<SfGrid Height="100%" Width="100%" >
<GridColumn Field=@nameof(SignetRapportElectroniqueSys.NomSignet)  HeaderText="Signet"  Width="250" EditType="EditType.DropDownEdit">
<EditTemplate> 
<SfComboBox ID="NomSignet" Value="@((context as SignetRapportElectroniqueSys).NomSignet)" Placeholder="Signets disponibles" AllowCustom="true" TItem="string" TValue="string" DataSource="@_signetsList" >                                        
</SfComboBox>
</EditTemplate>
</<GridColumn>
</SfGrid>

Another Question it seems like grid limit to show only 20 elements because even if i set the height to 100% it doesn't show more than 20 items(if i delete one it show 20 items) I need to show all with scrollbar, I don't want to paginate!! see my gift

Thanks,
Chimène NK.

Attachment: SyncfusionGridQuestion0605_80f49cfb.7z

RS Renjith Singh Rajendran Syncfusion Team May 7, 2020 12:42 PM UTC

Hi Chimène, 

Query 1 : my first question the items is a SfComboBox so doesn't have the created event, how to set focus to it when click to add? 
You can bind the Created event for SfComboBox by following the code below. And as suggested in our previous update, call the FocusIn method of combobox to achieve this requirement. Please use the codes below, 
 
 
    <EditTemplate> 
        <SfComboBox @ref="comboinstance" ID="NomSignet" ... TItem="string" TValue="string" > 
           <ComboBoxEvents Created="Created" TValue="string"></ComboBoxEvents> 
        </SfComboBox> 
    </EditTemplate> 
 
   SfComboBox<string, string> comboinstance; 
 
    public void Created() 
    { 
        comboinstance.FocusIn(); 
    } 
 
 
Query 2 : Another Question it seems like grid limit to show only 20 elements because even if i set the height to 100% it doesn't show more than 20 items 
We suspect that the problem might have caused because of the layout of your Grid inside the Dialog. So, we need more details t further proceed on this and provide you a solution as early as possible. Kindly get back to us with the following details for better assistance. 
  1. Share the sample which you have tried from your side. We need to analyze the layout of your Grid and Dialog enclosing the Grid.
  2. Share with us your complete Grid and dialog codes, and also share any customizing styles you have applied for the Dialog enclosing Grid in your application.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 
 
Regards, 
Renjith Singh Rajendran 


NC NKOUAMBIA CHIMENE May 7, 2020 08:19 PM UTC

Hello Team!

This is my page Structure!

Thanks,
Chimène NK.

Attachment: MyPageStructureWithGrid_79593242.7z

RS Renjith Singh Rajendran Syncfusion Team May 8, 2020 10:50 AM UTC

Hi Chimène, 

Thanks for your update. 

We tried to reproduce the reported problem by creating a sample based on the shared codes. But we could not face the reported problem. With increase in record size of Grid, the Dialog component renders a scroller to display the hidden Grid records. We are attaching the sample which we have tried from our side for your reference, please download the sample from the link below, 
 
Please refer the above attached sample and if you are still facing difficulties, then we need more details to further proceed on this. Kindly get back to us with the following details for better assistance. 

  1. Share the sample which you have tried from your side.
  2. Or share an issue reproducing sample similar to your original application.
  3. Or if possible kindly reproduce the problem with our attached sample and share with us for further analysis.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith Singh Rajendran 


NC NKOUAMBIA CHIMENE May 26, 2020 04:14 PM UTC

Hello Team!

I think the last upgrade break this 
https://www.syncfusion.com/feedback/12458/problem-with-cancelling-the-adding-of-new-record-in-onactionbegin-eventcancel 
 
When set focus the write action doesn't take effect immediatly, we have to click on the component before be able to interact with, so what do we have to change?  
public void Created()
    {
        comboinstance.FocusIn();
    }

Thanks,
Chimène Nk.

RS Renjith Singh Rajendran Syncfusion Team May 30, 2020 05:15 AM UTC

Hi Chimène, 

Greetings from Syncfusion support. 

Query : I think the last upgrade break this && When set focus the write action doesn't take effect immediatly, we have to click on the component before be able to interact with, 
We tried to reproduce the above reported problems by creating a sample with our latest version 18.1.0.54. But we could not reproduce the reported problems from our side. We are attaching the sample which we have tried from our side for your reference. Please download the sample from the link below, 
 
We have also prepared a video demo showing the proper working of the above requirements, please download the video from link below, 
 
If you are still facing difficulties, then we need more details to further proceed on this. Kindly get back to us with the following details for better assistance. 
  1. Share an issue reproducible sample.
  2. Or reproduce the problem with the attached sample and share with us for further analysis.
  3. Share the exact scenario or proper replication procedure.
  4. Share the video demo showing the problem you are facing.

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Loader.
Up arrow icon