Selecting a row when clicking a command button in DataGrid

[JMoodyUMC]

Should clicking a button in the command column on a row select the row in the DataGrid? I'm having an issue on 1 case when I click the edit button without selecting a row. If I first select the row, then clicking the edit button the error does not occur.

Is there a workaround I can do with the Clicked event on the button in the ? I haven't found any examples. I would like to set a flag based on the context, then run the built-in edit.

[David-Moreira]

Hello,
I understand that you'd like the row to be selected when you click Edit, right? However I'm not 100% sure what you are trying to accomplish, so I can try to help you with finding alternatives.

So
You can override the EditTemplate, provide your own button and override the Edit Logic so it Selects the Row by using DataGrid.Select... and whetever else you'd like to do, like setting a flag.

Let me know if this is what you are looking for.

[JMoodyUMC]

I'm writing a time card entry screen.

The Job Number column is an autocomplete, and the Account column is a select. Both have edit templates, and custom validators. The account column depends on the job number column.

What's happening is the if I just click the edit button, the validator for the account number is run, then the validator for the job column, finally the validator for the grid.

In the above example, I typed the wrong value for the end time, and did not catch it before I saved the card. So, I selected the card, clicked the edit button on the last row, and changed the time to the correct time. The validator for the account number is then called. I'm not sure why. But since it is called, I end up with null value issues.

Here is a portion of my grid and code.

<Validations @ref="detailValidations" Mode="ValidationMode.Manual">
    <DataGrid TItem="TimeCardDetail"
              Bordered="true"
              Data="timeCardService.Card.Detail"
              Editable="true"
              EditMode="DataGridEditMode.Inline"
              Filterable="false"
              Hoverable="true"
              Narrow="true"
              PageSize="@timeCardService.Card.Detail.Count"
              RowInserting="ValidateDetail"
              RowUpdating="ValidateDetail"
              ShowValidationFeedback="true"
              Sortable="false"
              Striped="true"
              UseInternalEditing="true"
              UseValidation="true"
              NewItemDefaultSetter="TimeCardDetailNewItemDefaultSetter"
              @bind-SelectedRow="@selectedDetail">
        <DataGridColumns>
            <DataGridColumn TItem="TimeCardDetail" Field="@nameof(TimeCardDetail.JobNumber)" Caption="Job Number" Editable="true"
                            Validator="ValidateJobNumber">
                <EditTemplate>
                    @{
                        job = (string)context.CellValue;
                        searchJob = (string)context.CellValue;
                        <Autocomplete TItem="string"
                                      TValue="string"
                                      Data="@openJobs"
                                      TextField="@(x => x)"
                                      ValueField="@(x => x)"
                                      SelectedValue="@searchJob"
                                      SelectedValueChanged="@(v => { context.CellValue = v; SearchJobHandler(v); })"
                                      SelectedText="@job"
                                      SelectedTextChanged="@(v => { context.CellValue = v; job = v; })"
                                      Filter="AutocompleteFilter.StartsWith"
                                      FreeTyping="true" />
                    }
                </EditTemplate>
            </DataGridColumn>
...
            <DataGridSelectColumn TItem="TimeCardDetail" Field="@nameof(TimeCardDetail.AccountNumber)" Caption="Account" Editable="true">
                <EditTemplate>
                    <Validation Validator="@ValidateAccountNumber">
                       @{
                           string lac = (string)context.CellValue;
                           <Select TValue="string"
                                   SelectedValue="lac"
                                   SelectedValueChanged="@(v => context.CellValue = v)">
                               <ChildContent>
                                   <SelectItem TValue="string" Value="null"></SelectItem>
                                   @foreach (AccountCode ac in accountCodeService.AccountCodes)
                                   {
                                       <SelectItem TValue="string" Value="@ac.LaborAccount">@ac.LaborAccount</SelectItem>
                                   }
                               </ChildContent>
                           </Select>
                        }
                    </Validation>
                </EditTemplate>
            </DataGridSelectColumn>
...
            <DataGridColumn TItem="TimeCardDetail" Field="@nameof(TimeCardDetail.StartTime)" Caption="Start Time" Editable="true">
                <DisplayTemplate>
                    @{
                        TimeSpan time = (TimeSpan)context.StartTime;
                        @DateTime.Today.Add(time).ToShortTimeString();
                    }
                </DisplayTemplate>
            </DataGridColumn>
            <DataGridCommandColumn TItem="TimeCardDetail" DisplayOrder="10">
            </DataGridCommandColumn>
        </DataGridColumns>
    </DataGrid>
</Validations>

@code
{
    TimeCardDetail selectedDetail;
    private string job;
    private string searchJob;
    private void ValidateAccountNumber(ValidatorEventArgs args)
    {
        var selectedValue = args.Value == null ? String.Empty : args.Value.ToString();
        bool bLunchOrEnd = (selectedDetail.JobNumber == "Lunch Time" || selectedDetail.JobNumber == "End Time");
        // The account number should only be blank on Lunch Time and End Time records.
        if (selectedValue == String.Empty && !bLunchOrEnd)
        {
            laborMessage.Level = LaborMessage.MessageLevel.ERROR;
            laborMessage.Message = "Please select an account.";
            return;
        }
        if (bLunchOrEnd)
        {
            selectedAccount = selectedValue;
            selectedPayrollCode = 0;
            return;
        }
        // more validation....
    }
}

I have been playing with the project. It seems like the ValidateAccountNumber code is being hit every time the save button is clicked.

I did try changing the select to this:

<DataGridSelectColumn TItem="TimeCardDetail" Field="@nameof(TimeCardDetail.AccountNumber)" Caption="Account" Editable="true" Validator="@ValidateAccountNumber">
    <EditTemplate>
        @{
            string lac = (string)context.CellValue;
            <Select TValue="string"
                    SelectedValue="lac"
                    SelectedValueChanged="@(v => context.CellValue = v)">
                <ChildContent>
                    <SelectItem TValue="string" Value="null"></SelectItem>
                    @foreach (AccountCode ac in accountCodeService.AccountCodes)
                    {
                        <SelectItem TValue="string" Value="@ac.LaborAccount">@ac.LaborAccount</SelectItem>
                    }
                </ChildContent>
            </Select>
        }
    </EditTemplate>
</DataGridSelectColumn>

but then my custom validator was never hit.

[David-Moreira]

Ahh I think I've got it.
You're trying to do "contextual validation". So, basically Validator only gives you access to the value being validated, Validator does not access the context (Item being edited) unless you have it in memory (Selected Row).

So I see two ways for you to solve this:
1 - For contextual validations, bind to the RowUpdating Eventcallback, and you will have access to the
CancellableRowChange<TItem, Dictionary<string, object>> where you will have the original state of the Item and a dictionary of the Values that have now been edited. You can do additional validation here, and if it fails, you can cancel the row update.

2 - Actually make the Edit Button, Select the Row so you can have contextual access to the row (your selectedDetail).
Example:

<DataGridCommandColumn TItem="Employee" Width="170px">
    <EditCommandTemplate>
        <Button Color="Color.Primary" Clicked="@(async () => { await dataGrid.Select( context.Item ); await context.Clicked.InvokeAsync(); })">@context.LocalizationString</Button>
    </EditCommandTemplate>
</DataGridCommandColumn>

(I didn't test this code but pretty sure it's close to this)
Personally, for your use case, I like the 2nd option the best.
Let us know if this helps!

[stsrki]

Also, don't forget. With 0.9.4 we introduced a new API for accessing edited values. https://blazorise.com/docs/extensions/datagrid/#cascading-values

Example:

<EditTemplate>
    @context.ReadCell( "SomeFieldName" );
</EditTemplate>

[David-Moreira]

So many ways to skin a cat! 😆

[JMoodyUMC]

Thanks for the help. I did use the second method. It is working great now.

[David-Moreira]

Ahh I think I've got it.
You're trying to do "contextual validation". So, basically Validator only gives you access to the value being validated, Validator does not access the context (Item being edited) unless you have it in memory (Selected Row).

So I see two ways for you to solve this:
1 - For contextual validations, bind to the RowUpdating Eventcallback, and you will have access to the
CancellableRowChange<TItem, Dictionary<string, object>> where you will have the original state of the Item and a dictionary of the Values that have now been edited. You can do additional validation here, and if it fails, you can cancel the row update.

2 - Actually make the Edit Button, Select the Row so you can have contextual access to the row (your selectedDetail).
Example:

@context.LocalizationString (I didn't test this code but pretty sure it's close to this) Personally, for your use case, I like the 2nd option the best. Let us know if this helps!

@stsrki
stsrki
3 days ago
Maintainer
Also, don't forget. With 0.9.4 we introduced a new API for accessing edited values. https://blazorise.com/docs/extensions/datagrid/#cascading-values

Example:

@context.ReadCell( "SomeFieldName" );

[RealityMasque]

Hi, in terms of option 2 "Actually make the Edit Button, Select the Row...", how do we do that?

[RealityMasque]

my command buttons don't seem to select the row in which they are clicked.