This is a migrated thread and some comments may be shown as answers.

Validation in ListView editing Problem

2 Answers 42 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Iron
Veteran
Iron
Bob asked on 30 Sep 2020, 08:42 PM

I am following the example for Validation in ListView Editing but I am having a problem.

The problem is that after I Save and Update to the ListView, it is calling CleanUpValidation but then is getting back into the code in EditTemplate and is therefore setting the currEditItem and currEditContext again to the Model that I just updated.

This is causing problems if I try to add a new item after the update it thinks the new item is valid when it isn't because the currEditContext's model still has the item I just updated.  

I can not figure out why it is getting back into the EditTemplate after Updating?

<EditTemplate>
    @{
        currEditItem = context;
        if (currEditItem.Id == Guid.Empty)
        {
            currEditItem.Id = Guid.NewGuid();
            currEditItem.UserId = userId;
            currEditItem.FullName = GetUserName();
            currEditItem.DateWorked = DateTime.Today;
            currEditItem.TicketId = Ticket.Id;
        }
 
        if (currEditContext == null)
        {
            currEditContext = new EditContext(currEditItem);
        }
        <EditForm EditContext="@currEditContext" Context="formContext">
            <DataAnnotationsValidator />
            <ValidationSummary />
            <div class="container-fluid editTimeEntry">
                <div class="row">
                    <div class="col">
                        <ListViewCommandButton Command="Save" Class="float-right mr-1" Icon="@IconName.Save" Title="Save"></ListViewCommandButton>
                        <ListViewCommandButton Command="Cancel" Class="float-right" Icon="@IconName.Cancel" Title="Cancel"></ListViewCommandButton>
                    </div>
                </div>
                <div class="row">
                    <label for="Staff" class="font-weight-bold col-1">Staff</label>
                    <div class="col">
                        @if (isAdmin)
                        {
                            <TelerikDropDownList @bind-Value="@currEditItem.UserId" Data="@staff" Id="Staff"
                                                 ValueField="Id" TextField="FullName">
                            </TelerikDropDownList>
                        }
                        else
                        {
                            <span>@currEditItem.FullName</span>
                        }
                    </div>
                </div>
                <div class="row">
                    <label for="DateWorked" class="font-weight-bold col-1">Work Date</label>
                    <div class="col">
                        <TelerikDatePicker Id="DateWorked" @bind-Value="currEditItem.DateWorked" Format="M/d/yyyy" Max="DateTime.Today"></TelerikDatePicker>
                    </div>
                </div>
                <div class="row">
                    <label class="font-weight-bold col-1">Time spent</label>
                    <div class="col-2">
                        <label for="TimeWorked" class="mr-1">Time Worked</label>
                        <span @ref="timeWorked" @onfocusin="(() => SelectOnFocus(timeWorked))">
                            <TelerikNumericTextBox Id="TimeWorked" Value="@currEditItem.TimeWorked"
                                                   Format="#0.00 hr" Decimals="2" Step=".25"
                                                   ValueChanged="@( (double v) => TimeWorkedChangeHandler(v) )"
                                                   ValueExpression="@( () => currEditItem.TimeWorked )">
                            </TelerikNumericTextBox>
                        </span>
                    </div>
                    <div class="col-2">
                        <label for="BillabeTime" class="mr-1">Billable Time</label>
                        <span @ref="billableTime" @onfocusin="(() => SelectOnFocus(billableTime))">
                            <TelerikNumericTextBox Id="BillabeTime" Value="@currEditItem.BillableTimeWorked"
                                                   Format="#0.00 hr" Decimals="2" Step=".25"
                                                   ValueChanged="@( (double v) => BillableTimeWorkedChangeHandler(v) )"
                                                   ValueExpression="@( () => currEditItem.BillableTimeWorked )">
                            </TelerikNumericTextBox>
                        </span>
                    </div>
                    <div class="col"></div>
                </div>
                <div class="row">
                    <label for="Comments" class="font-weight-bold col-1">Comments</label>
                    <div class="col">
                        <InputTextArea @bind-Value="currEditItem.Comments" />
                    </div>
                </div>
            </div>
        </EditForm>
    }
</EditTemplate>
 
private async Task UpdateTimeEntryHandler(ListViewCommandEventArgs args)
{
    var timeEntry = (TimeEntryViewModel)args.Item;
 
    if (!currEditContext.Validate())
    {
        args.IsCancelled = true;
        return;
    }
 
    var dbTimeEntry = mapper.Map<TimeEntryViewModel, TimeEntry>(timeEntry);
 
    var result = await ticketRepository.SaveTimeEntry(dbTimeEntry);
 
    if (result)
    {
        int index = Ticket.TimeEntries.FindIndex(te => te.Id == timeEntry.Id);
 
        if (index > -1)
        {
            Ticket.TimeEntries[index] = mapper.Map<TimeEntry, TimeEntryViewModel>(dbTimeEntry);
        }
 
        UpdateTotals();
    }
 
    CleanUpValidation();
}
 
private void CleanUpValidation()
{
    currEditContext = null;
    currEditItem = null;
}

2 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 01 Oct 2020, 10:59 AM

Hello Bob,

I made the following sample project that explains this, shows how you can use async operations or even a custom editing form: https://github.com/telerik/blazor-ui/tree/master/listview/ValidationExamples

 

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Bob
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 01 Oct 2020, 12:32 PM

Thank you very much.  I followed the async example but had a problem with it.

Your line

if (isEditing && currEditContext == null)
{
    currEditContext = new EditContext(currEditItem);
}

 

The problem is that it never creates a new EditContext when doing an Add and the form never shows up because it is inside a (If currEditContext != null).  I had to change the line to the following to get it to work.

if (!isEditing || currEditContext == null)
{
    currEditContext = new EditContext(currEditItem);
}
Tags
ListView
Asked by
Bob
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Marin Bratanov
Telerik team
Bob
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or