DateRangePicker in grid Toolbaritem

[Erick]

Hello,

I have a grid with a date column and want to filter using DateRangePicker. I'm adding the control with the following code:

<SfToolbar>
  <ToolbarItems>
    <ToolbarItem Type="ItemType.Button" Text="Exportar Excel" PrefixIcon="e-icons e-excelexport" OnClick="@ToolbarClickHandler" Id="Grid_excelexport" Align="ItemAlign.Right"></ToolbarItem>
    <ToolbarItem Type="ItemType.Input" Width="300px" Align="ItemAlign.Left">
      <SfDateRangePicker TValue="DateTimeOffset?" StartDate="@StartDate" EndDate="@EndDate" Format="dd/MM/yyyy" ShowClearButton="true" MaxDays="31">
        <DateRangePickerEvents RangeSelected="ReceivedDateRangeChange" TValue="DateTimeOffset?"></DateRangePickerEvents>
      </SfDateRangePicker>
    </ToolbarItem>
  </ToolbarItems>
</SfToolbar>

The problem that I have is that the DateRangePicker control extends all the toolbar width, beyond the other toolbar items that I create.

How do I restrict the width to the minimal needed size? I also tried using left or right alignment elements without success.

Another thing. Is it possible to add the column chooser when using <SfToolbar?

[Sarveswaran Palani]

Hi Eric,

Greetings from Syncfusion.

We suspect that your requirement is to render custom toolbar with inbuilt toolbar in Grid Toolbar.  If so, we suggest you to use the template feature to render the customized toolbar as per your requirement. Kindly refer the below attached sample and reference for additional information.

Reference: https://support.syncfusion.com/kb/article/10990/blazor-grid-render-custom-controls-along-with-default-toolbar-items

Sample: https://blazorplayground.syncfusion.com/embed/LXhfZhCuAxxgesHw?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

<SfGrid @ref="DefaultGrid" ShowColumnChooser="true" DataSource="@Orders" AllowSorting="true" AllowPaging="true" Toolbar="@(new List<Object>() {

        new ItemModel() { Type = ItemType.Input, Template = AditionalOps,Align = ItemAlign.Right, PrefixIcon="e-search"},"ColumnChooser"})">
  

</SfGrid>

 

@code {

      private RenderFragment AditionalOps =>

@<SfDateRangePicker TValue="DateTime?" StartDate="@StartValue" EndDate="@EndValue"></SfDateRangePicker>;

 

      public DateTime? StartValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 28);

 

      public DateTime? EndValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month + 1, 28);

}

Please let us know if you have further concerns.

Regards,

Sarvesh