Trying to bind Readonly property of EjsDatePicker

[David Saylor]

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?

        <EjsAccordion>

            <AccordionItems>

                <!--Status-->

                <AccordionItem>     

                    <HeaderTemplate>

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

                    </HeaderTemplate>

                    <ContentTemplate>

                        <ul id="status">

                            @foreach (var item in items)

                            {

                            <EjsCheckBox [email protected] @[email protected] CssClass="e-primary"></EjsCheckBox>

                            }

                        </ul>

                    </ContentTemplate>

                </AccordionItem>

                <!--Date Range-->

                <AccordionItem Header="Date Range">

                    <ContentTemplate>

                        <EjsDatePicker Placeholder="Start Date" @[email protected] @[email protected]></EjsDatePicker>

                    </ContentTemplate>

                </AccordionItem>

            </AccordionItems>

        </EjsAccordion>

[Gopi Govindasamy]

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> 

        <!--Status--> 

        <AccordionItem> 

            <HeaderTemplate> 

                <div> 

                    Record Status 

                    <label style="font-size:smaller;"></label> 

                </div> 

            </HeaderTemplate> 

            <ContentTemplate> 

                <ul id="status"> 

                    @foreach (var item in items) 

                    { 

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

                    } 

                </ul> 

            </ContentTemplate> 

        </AccordionItem> 

        <!--Date Range--> 

        <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.