DateRangePicker in a Dialog

[Ditchford]

Hello

I want to create a component which is a DateRangePicker in a (modal) dialog.  When the dialog opens I just want to see the range picker without the calendar icon:

Like this:

Not like this:

Is this possible?

Thank you

[Sureshkumar P]

Hi Richard, 

 

Greetings from Syncfusion support. 

 

In our component we did not have support to hide the input element and show the popup inside the dialog window. Please explain your exact scenario to shows the dataerangepicker popup in the model dialog. We will validate and update the possible solution to achieve your requirement.  

 

Regards, 

Sureshkumar P 

[Ditchford]

Hello

This is my scenario.  I have buttons on a grid toolbar (see below) that allows a user to retrieve say the current month ("Month" below).  When they click it gets the data from the database.  They can then go Next or Previous to scroll through months.  Same with Day, Week, Year.  I want to allow the user to choose a custom range, i.e. 1-15 October.

Since I am using the toolbar, I cannot add anything other than buttons to the toolbar.  If I could add a DateRangerPicker to the toolbar then that would be OK.  Since I am limited to buttons and because I want to use this picker on other grids, I have added a component (DateRangePicker inside a dialog). I really would like the buttons to stay in the toolbar as it is a great user of space / very neat.

Thanks

[Sureshkumar P]

Hi Richard, 

 

Thanks for your detailed information. 

 

Based on your shared information, we suggest you use our Custom tool bar items to render our components in grid component using inside the template structure.  

 

To know more about Custom tool bar items in grid component, please refer the below online documentation link: https://blazor.syncfusion.com/documentation/datagrid/tool-bar/#custom-toolbar  

 

Regards, 

Sureshkumar P 

[Ditchford]

Hello

Thank you for the suggestion (Custom toolbar items).  The problem is a I already have quiet a complex toolbar using a mix of custom and standard items (i.e. Search).  This is defined in C# and I am keen to leave that alone.

I can open the calendar range in the OnFocus event of the DateRangeControl using the DateRangerPicker.Show() method.  So really all I need to do is to hide the part of the control highlighted above.  Is it possible to hide this element.  All attempts I have made have resulted in the whole control being hidden.

Many thanks 

[Sureshkumar P]

Hi DitchFord,    

  

We have analyzed your query and we understand that you want to render both custom component and default toolbar item in Grid toolbar. We have achieved your requirement by rendering the DateRangePicker as RenderFragment ToolbarItem in Grid toolbar.   

  

Refer the below code example. 

 

  

<SfGrid DataSource="@Employees" AllowExcelExport="true" AllowPdfExport="true" Toolbar="@(new List<object>() { "Edit", "Cancel", "Update","Search", new ToolbarItem(){ Template = z1}})">  

    <GridEditSettings AllowEditing="true"></GridEditSettings>  

    <GridColumns>  

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="EmployeeID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>  

        <GridColumn Field="Name.FirstName" HeaderText="First Name" Width="150"></GridColumn>  

        <GridColumn Field="Name.LastName" HeaderText="Last Name" Width="130"></GridColumn>  

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>  

    </GridColumns>  

</SfGrid>  

 private RenderFragment z1 =>@<SfDateRangePicker Placeholder="Choose a Range"></SfDateRangePicker>;  

    

Kindly download the sample which we have prepared using above code example.   

  

Sample: https://www.syncfusion.com/downloads/support/forum/159361/ze/DataGrid-691858774    

  

Please get back to us if you have further queries.   

  

Regards,  

Sureshkumar P 

 

[Ditchford]

Hello 

Thanks for that...very interesting.  I have my c# in a separate file (code behind) and the toolbar is defined in that file like this:

I cannot figure out how to make your RenderFragment method work with this setup.  Is it possible?

Also I need to be able to get the date range selected by the user out of the render fragment.  How do I do this?

Thanks

[Vignesh Natarajan]

Hi Richard,  

 

Thanks for the update.  

 

Query: “I cannot figure out how to make your RenderFragment method work with this setup.  Is it possible?” 

 

We suggest you to define the RenderFragment in razor page under code section and use that variable in cs class file. Refer the below code example.  

 

[Index.razor] 

@code{ 

   private RenderFragment PVT = @<SfDateRangePicker Placeholder="Choose a range"></SfDateRangePicker>; 

} 

 

[Index.razor.cs] 

public partial class Index: ComponentBase   {        public List<EmployeeData> Employees { get; set; }       public List<object> ToolbarItems { get; set; } = new List<object>();        protected override void OnInitialized()       {. . . . . .           ToolbarItems.Add(new Syncfusion.Blazor.Navigations.ItemModel() { Text = "NewEntry" });           ToolbarItems.Add(new Syncfusion.Blazor.Navigations.ItemModel() { Text = "CSVExport" });           ToolbarItems.Add(new Syncfusion.Blazor.Navigations.ItemModel() { Template = PVT, Align = Syncfusion.Blazor.Navigations.ItemAlign.Center });       }

 

Kindly get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Ditchford]

Hello

Great, thank you.  Last question.  Is it possible to style the date range picker control to hide what is highlighted below, i.e. to just show the calendar icon?

Thanks

[Vignesh Natarajan]

Hi Richard,  

 

Thanks for the update.  

 

Query: “Is it possible to style the date range picker control to hide what is highlighted below, i.e. to just show the calendar icon?” 

 

Yes, we can style the DateRangePicker and hide the input control to display only the calendar icon. Kindly refer the below code example.  

 

<style> 

    .e-custom .e-daterangepicker { 

        display: none; 

    } 

    .e-custom.e-input-group:not(.e-float-icon-left), 

    .e-custom.e-input-group.e-control-wrapper:not(.e-float-icon-left), 

    .e-custom.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error), 

    .e-custom.e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) { 

        border: none; 

        border-width: 0; 

    } 

  

    .e-custom.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), 

    .e-custom.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), 

    .e-custom.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error), 

    .e-custom.e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) { 

        border-color: none; 

    } 

  

    .e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before, 

    .e-custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, 

    .e-custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after, 

    .e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input)::after { 

        background: none; 

    } 

</style> 

  

@code{ 

    private RenderFragment PVT =@<SfDateRangePicker ShowClearButton="false" CssClass="e-custom" Placeholder="Choose a range"></SfDateRangePicker>; 

} 

 

 

Refer the below screenshot for the output of above code example.  

 

 

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan