1. Home
  2. Forum
  3. Blazor
  4. Trying to bind Readonly property of EjsDatePicker

Trying to bind Readonly property of EjsDatePicker

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>

1 Reply
GG Gopi Govindasamy Syncfusion Team 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. 


Loader.
Up arrow icon