We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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
loading
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?


        <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 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=@this.DataElement.RangeStart @bind-Readonly=@this.DataElement.SearchAllDatesBool></EjsDatePicker>
                    </ContentTemplate>
                </AccordionItem>
            </AccordionItems>
        </EjsAccordion>

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> 
        <!--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; } 
    } 
} 



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



Regards,
Gopi G. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon