Trying to bind Readonly property of EjsDatePicker

Thread ID:	Created:	Updated:	Platform:	Replies:
147041	Aug 29,2019 05:48 PM UTC	Aug 30,2019 06:13 AM UTC	Blazor	1

Subscribe to this post

Tags: DatePicker

David Saylor

Asked On August 29, 2019 05:48 PM UTC

I'm trying to bind the Readonly property of a date picker inside of an accordion item to another boolean property. When I do that, via the code below, the EjsDatePicker does not render on screen, AND the content template of the accordion item also does not render. When I take that one attribute out (highlighted), both render successfully.

Can you tell what is wrong, or if this is a control issue?

<div>Record Status <label style="font-size:smaller;">@items.ValueNameWithCommas</label></div>

</HeaderTemplate>

@foreach (var item in items)

{

}

</ul>

</ContentTemplate>

</AccordionItem>

</ContentTemplate>

</AccordionItem>

</AccordionItems>

</EjsAccordion>

Reply | Reply with quote

Gopi Govindasamy [Syncfusion]

Replied On August 30, 2019 06:13 AM UTC

Hi David,

Greetings for Syncfusion support.

We have validated your reported issue with shared code snippet. You have used incorrect property(@bind-Readonly) bind to DatePicker component. The Readonly property is one-way binding, so no need to use @bind for this property. We have prepared sample based on shared code snippet. Please find the sample and code snippet for your reference.

@using Syncfusion.EJ2.Blazor.Calendars

@using Syncfusion.EJ2.Blazor.Buttons

@using Syncfusion.EJ2.Blazor.Navigations

<EjsAccordion>

<AccordionItems>

<AccordionItem>

<HeaderTemplate>

<div>

Record Status

</div>

</HeaderTemplate>

<ContentTemplate>

@foreach (var item in items)

{

<EjsCheckBox Label=@item.Description @bind-Checked=@item.IsSelectedBool CssClass="e-primary"></EjsCheckBox>

}

</ul>

</ContentTemplate>

</AccordionItem>

<AccordionItem Header="Date Range">

<ContentTemplate>

<EjsDatePicker Placeholder="Start Date" @bind-Value=@RangeStart Readonly=@SearchAllDatesBool></EjsDatePicker>

</ContentTemplate>

</AccordionItem>

</AccordionItems>

</EjsAccordion>

@code{

public DateTime? RangeStart { get; set; } = DateTime.Now;

public bool SearchAllDatesBool { get; set; } = true;

private List<ItemData> items { get; set; } = new List<ItemData>

{

new ItemData() { Description = "Checkbox", IsSelectedBool = true }

};

public class ItemData

{

public string Description { get; set; }

public bool IsSelectedBool { get; set; }

}

Sample Link: https://www.syncfusion.com/downloads/support/forum/147041/ze/BlazorApp1-1754646468

To know more details about DatePicker – Readonly, please refer to the below documentation link.

UG: https://ej2.syncfusion.com/blazor/documentation/datepicker/how-to/set-the-readonly/#set-the-readonly

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Readonly

Regards,
Gopi G.

Reply | Reply with quote

Trying to bind Readonly property of EjsDatePicker

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US