Good day,
I have a rather perplexing issue where if I press the "Enter" key in a filter for a datagrid it seems to fire all data grid filters on the page. I have multiple data grids and one of the data grids has a date filter and thus a calendar pops up every time I hit enter on a numeric or text filter from another data grid. Any suggestions on how to fix this?
Any details on how to reproduce such issue?
Thanks for getting back to me! I can post some code snippets if needed, I have them nested within components on a page. I have a tabbed structure and some of the tabs have a grid on them.
I can give you the two grids and maybe that will help:
(Grid without Date Filter)
<RadzenDataGrid @ref=grid AllowFiltering="true" Data="@model" FilterMode="Radzen.FilterMode.Simple" TItem="FundSourceDTO" AllowSorting="true" AllowPaging="true" PageSize="10" ShowEmptyMessage="false"
FilterCaseSensitivity="@filterCaseSensitivity" LogicalFilterOperator="@logicalFilterOperator" Sort="@Reset" Page="@Reset" Filter="@Reset" RowCreate="@OnCreate" EditMode="@editMode" RowUpdate="@OnEdit" Responsive="true">
<HeaderTemplate>
<RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle" Text="Add New fundSource" Click="@InsertRow" Disabled="@((editMode == DataGridEditMode.Single && fundSourcesToInsert.Count() > 0) || ReadOnly)" />
</HeaderTemplate>
<Columns>
<RadzenDataGridColumn TItem="FundSourceDTO" FormatString="{0:c}" Property="AmountRequested" Title="Requested Amount" >
<EditTemplate Context="fundSource">
<RadzenNumeric TValue="decimal" Format="c" @bind-Value=@fundSource.AmountRequested Name="RequestedAmount" />
<RadzenRequiredValidator Text="You must specify a requested amount." Component="RequestedAmount" Popup="false" />
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="FundSourceDTO" FormatString="{0:c}" Property="AmountApproved" Title="Amount Approved">
<EditTemplate Context="fundSource">
<RadzenNumeric TValue="decimal?" Format="c" Style="display: block;" @bind-Value=@fundSource.AmountApproved Name="AmountApproved" />
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="FundSourceDTO" Property="County" Title="County" Type="typeof(IEnumerable<string>)" FilterValue="@selectedCounty" FilterOperator="FilterOperator.Contains" LogicalFilterOperator="LogicalFilterOperator.Or">
<FilterTemplate>
<RadzenDropDown @bind-Value=@selectedCounty Style="width:100%;" Change=@OnSelectedCountyChange Data="@allCounties" TextProperty="Text" ValueProperty="Text" AllowClear="true" Multiple="true" />
</FilterTemplate>
<Template Context="fundSource">
@fundSource.County
</Template>
<EditTemplate Context="fundSource">
<RadzenDropDown @bind-Value="fundSource.CountyId" Name="County" onselect="@SaveRow" Data="@counties" Style="display: block;" TextProperty="@nameof(RefCounty.CountyName)" ValueProperty="@nameof(RefCounty.Id)"
InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "Select County" }})" />
<RadzenCustomValidator Component="County" Validator="@(() => ValidateCounty(ref fundSource))" Text="You must select a county and priority or a state." Popup="false" />
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="FundSourceDTO" Property="Priority" Title="Priority" Type="typeof(IEnumerable<string>)" FilterValue="@selectedPriority" FilterOperator="FilterOperator.Contains" LogicalFilterOperator="LogicalFilterOperator.Or">
<FilterTemplate>
<RadzenDropDown @bind-Value=@selectedPriority Style="width:100%;" Change=@OnSelectedPriorityChange Data="@allPriorities" TextProperty="Text" ValueProperty="Text" AllowClear="true" Multiple="true" />
</FilterTemplate>
<Template Context="fundSource">
@fundSource.Priority
</Template>
<EditTemplate Context="fundSource">
<RadzenDropDown @bind-Value="fundSource.CountyPriorityId" Name="CountyPriority" Style="display: block;" Data="@priorities" TextProperty="@nameof(RefCountyPriority.Name)" ValueProperty="@nameof(RefCountyPriority.Id)"
InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "Select Priority" }})" />
<RadzenCustomValidator Component="CountyPriority" Validator="@(() => ValidatePriority(ref fundSource))" Text="You must select a county and a county priority." Popup="false" />
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="FundSourceDTO" Property="IsState" Title="State?">
<Template Context="fundSource">
@if (fundSource.IsState)
{
<RadzenLabel Text="Yes" />
}
else
{
<RadzenLabel Text="No" />
}
</Template>
<EditTemplate Context="fundSource">
<RadzenCheckBox @bind-Value="fundSource.IsState" Name="IsState" />
<RadzenCustomValidator Component="IsState" Validator="@(() => ValidateState(ref fundSource))" Text="You must specify state or county and priority." Popup="false" />
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="FundSourceDTO" Property="IsLoan" Title="Loan?">
<Template Context="fundSource">
@if (fundSource.IsLoan)
{
<RadzenLabel Text="Yes"/>
}
else
{
<RadzenLabel Text="No" />
}
</Template>
<EditTemplate Context="fundSource">
<RadzenCheckBox @bind-Value="fundSource.IsLoan" />
</EditTemplate>
<FooterTemplate>
# of Fund Sources: <b>@grid.View.Count()</b>
</FooterTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="FundSourceDTO" Context="fundSource" Filterable="false" Width="120px" Sortable="false" TextAlign="TextAlign.Right" Frozen="true" FrozenPosition="FrozenColumnPosition.Right">
<Template Context="fundSource">
@if (!ReadOnly)
{
<RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="btn-secondary" Click="@(args => EditRow(fundSource))" @onclick:stopPropagation="true">
</RadzenButton>
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" Size="ButtonSize.Medium" class="btn-danger" Click="@(args => OnDelete(fundSource))" @onclick:stopPropagation="true">
</RadzenButton>
}
</Template>
<EditTemplate Context="fundSource">
<RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@((args) => SaveRow(fundSource))" aria-label="Save">
</RadzenButton>
<RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="rz-my-1 rz-ms-1" Click="@((args) => CancelEdit(fundSource))" aria-label="Cancel">
</RadzenButton>
</EditTemplate>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
(Grid with Date filter)
<RadzenDataGrid @ref=grid AllowFiltering="true" Data="@model" FilterMode="Radzen.FilterMode.Simple" TItem="DisbursementsDTO" AllowSorting="true" FilterPopupRenderMode="PopupRenderMode.OnDemand" AllowPaging="true" PageSize="10" ShowEmptyMessage="false"
FilterCaseSensitivity="@filterCaseSensitivity" LogicalFilterOperator="@logicalFilterOperator" AllowColumnResize="true" Sort="@Reset" Page="@Reset" Filter="@Reset" RowCreate="@OnCreate" EditMode="@editMode" RowUpdate="@OnEdit" Responsive="true" tabindex="2">
<HeaderTemplate>
<RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle" Text="Add New Disbursement" Click="@InsertRow" Disabled="@((editMode == DataGridEditMode.Single && disbursementsToInsert.Count() > 0) || ReadOnly)" />
</HeaderTemplate>
<Columns>
<RadzenDataGridColumn TItem="DisbursementsDTO" Property="Type" Title="Type" Type="typeof(IEnumerable<string>)" FilterValue="@selectedType" FilterOperator="FilterOperator.Contains" LogicalFilterOperator="LogicalFilterOperator.Or">
<FilterTemplate>
<RadzenDropDown @bind-Value=@selectedType Style="width:100%;" Change=@OnSelectedTypeChange Data="@allTypes" TextProperty="Text" ValueProperty="Text" AllowClear="true" Multiple="true" />
</FilterTemplate>
<Template Context="disbursement">
@disbursement.Type
</Template>
<EditTemplate Context="disbursement">
<RadzenDropDown @bind-Value=@disbursement.DisbursementType Style="display: block;" Name="DisbursementType" Data="@types" TextProperty="Description" ValueProperty="Id" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "Select Type" }})" />
<RadzenRequiredValidator Text="You must select a type." Component="DisbursementType" Popup="false"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="DisbursementsDTO" FormatString="{0:d}" Property="RequestedDate" Title="Requested Date">
<EditTemplate Context="disbursement">
<RadzenDatePicker @bind-Value="disbursement.RequestedDate" Style="display: block;" DateFormat="MM/dd/yyyy" Name="RequestedDate" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "Select Requested Date" }})" />
<RadzenRequiredValidator Text="You must specify a requested date." Component="RequestedDate" Popup="false" />
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="DisbursementsDTO" FormatString="{0:c}" Property="RequestedAmount" Title="Requested Amount">
<EditTemplate Context="disbursement">
<RadzenNumeric TValue="decimal" Format="c" Style="display: block;" @bind-Value=@disbursement.RequestedAmount Name="RequestedAmount" />
<RadzenRequiredValidator Text="You must specify a requested amount." Component="RequestedAmount" Popup="false" />
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="DisbursementsDTO" FormatString="{0:d}" Property="DateSent" Title="Date Sent">
<EditTemplate Context="disbursement">
<RadzenDatePicker @bind-Value="disbursement.DateSent" DateFormat="MM/dd/yyyy" Style="display: block;" Name="DateSent" />
<RadzenCompareValidator Visible=@(disbursement.AmountSent > 0) Value=null Operator=@CompareOperator.NotEqual Component="DateSent" Text="You must have a date sent if an amount is entered." Popup="false"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="DisbursementsDTO" FormatString="{0:c}" Property="AmountSent" Title="Amount Sent">
<EditTemplate Context="disbursement">
<RadzenNumeric TValue="decimal?" Format="c" @bind-Value=@disbursement.AmountSent Style="display: block;" Name="AmountSent" />
<RadzenCompareValidator Visible=@(disbursement.DateSent != null) Value=0 Operator=@CompareOperator.NotEqual Component="AmountSent" Text="You must have an amount sent if a date is specified." Popup="false" />
</EditTemplate>
<FooterTemplate>
# of Disbursements: <b>@grid.View.Count()</b>
</FooterTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="DisbursementsDTO" Context="disbursement" Filterable="false" Width="120px" Sortable="false" TextAlign="TextAlign.Right" Frozen="true" FrozenPosition="FrozenColumnPosition.Right">
<Template Context="disbursement">
@if (!ReadOnly)
{
<RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="btn-secondary" Click="@(args => EditRow(disbursement))" @onclick:stopPropagation="true">
</RadzenButton>
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" Size="ButtonSize.Medium" class="btn-danger" Click="@(args => OnDelete(disbursement))" @onclick:stopPropagation="true">
</RadzenButton>
}
</Template>
<EditTemplate Context="disbursement">
<RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@((args) => SaveRow(disbursement))" aria-label="Save">
</RadzenButton>
<RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="rz-my-1 rz-ms-1" Click="@((args) => CancelEdit(disbursement))" aria-label="Cancel">
</RadzenButton>
</EditTemplate>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
Each grid should have its own reference value as I have them being created based on the model being passed. I have noticed that when pressing enter on the grid with a date filter, the calendar picker appears under the date filter.
I'm afraid that we need runnable code to reproduce and debug the problem - you can use our demos to replicate your case, they are editable. Other possible approach will be to debug your case at your end by attaching Radzen.Blazor.csproj to your app.
I went ahead and made a replication of the issue, it seems when they are inside an EditForm. Not sure why that causes them all to fire. I made a very basic form that replicates this issue.
Enter key will always submit the form, you might find this thread helpful:
Ah, thank you very much. I hadn't considered that. I have modified my code to pull the grids out of the edit form, it was a left over of something else I was doing. However, I appreciate the link and will take a look to help myself in the future. 