Display formitem based on previous formitem checkbox

[Adam]

Hi, I have the following form. I'm trying to hide a form item based on the previous bool form item (see highlighted lines in the code). The form is bound to ChartDetails which has a bool property called UseGroupByProperty which gets rendered as a checkbox. When I tick and untick the checkbox using the mouse the binding doesn't seem to update however as soon as I press a key it does. Is there a way to get the binding to update when the checkbox is selected/unselected with the mouse?

<TelerikForm Model="@ChartDetails" Orientation="FormOrientation.Horizontal"
				@ref="@ChartDetailsForm">
	<FormValidation>
		<DataAnnotationsValidator></DataAnnotationsValidator>
	</FormValidation>
	<FormItems>
		<FormItem LabelText="Name*:" Field="@nameof(CustomChartViewModel.Name)"></FormItem>
		<FormItem LabelText="Type*:" Field="@nameof(CustomChartViewModel.ChartType)"></FormItem>
		<FormItem Field="@nameof(CustomChartViewModel.EntityType)"></FormItem>
		<FormItem Field="@nameof(CustomChartViewModel.ShowLegend)"></FormItem>
		<FormItem Field="@nameof(CustomChartViewModel.ShowLabels)"></FormItem>
		<FormItem Field="@nameof(CustomChartViewModel.UseGroupByProperty)"></FormItem>
		@if (ChartDetails.UseGroupByProperty)
		{
			<FormItem Field="@nameof(CustomChartViewModel.GroupByProperty)" >
				<Template>
					<label class="k-label k-form-label">Group Property</label>
					<div class="k-form-field-wrap">
						<TelerikDropDownList Data="columns"
												ValueField="ColumnName"
												TextField="Title"
												@bind-Value="ChartDetails.GroupByProperty"
												DefaultText="Select Property " />

					</div>
				</Template>
			</FormItem>
		}
							
	</FormItems>
	<FormButtons></FormButtons>
</TelerikForm>

[Matthias]

HI Adam,

just use a template and a class :

code snippet:

razor:

<TelerikForm Model="@_Customer" 

             OnValidSubmit="@HandleValidSubmit"
             OnInvalidSubmit="@HandleInvalidSubmit">
    <FormItems >
        <FormItem Field="@nameof(Customer.Name)"></FormItem>
        <FormItem Field="@nameof(Customer.City)"></FormItem>
        <FormItem Field="@nameof(Customer.HasPhoneNr)">
            <Template>
                <label for="hasPhone">PhoneNr exists:</label>
                <TelerikCheckBox Id="hastPhone"
                                 @bind-Value="@_Customer.HasPhoneNr"
                                 OnChange="@ChangeHandler"/>
            </Template>
        </FormItem>

        <div class="@formClass">
            <FormItem Field="@nameof(Customer.PhoneNr)"></FormItem>
        </div>
    </FormItems>
</TelerikForm>

Code:

@code {
    public Customer _Customer { get; set; } = new Customer();
    public bool ValidSubmit { get; set; } = false;
    public string Result { get; set; } = string.Empty;
    public string formClass { get; set; } = "showNr";

    async Task HandleValidSubmit()
    {
        ValidSubmit = true;
        await InvokeAsync(StateHasChanged);
    }

    void ChangeHandler(object value)
    {
        formClass = Convert.ToBoolean(value) ? "showNr" : "hideNr";
// Change the div to show or hide -> look at style
        StateHasChanged();
    }

    void HandleInvalidSubmit()
    {
        ValidSubmit = false;
    }

    public class Customer
    {
        public string Name { get; set; }
        public string City { get; set; }
        public string PhoneNr { get; set; }
        public bool HasPhoneNr { get; set; } = true;
    }

}

style

<style>
    .showNr{       

           font-weight: bold;   
      }
      .hideNr{
             display: none;
      }
</style>

____

Have also a look at the attachments

Have a nice day - regards Matthias

 

                    

[Adam]

Thanks Matthias, that works great

[Matthias]

not for this - continue to have fun. Greetings Matthias