Tracking Down Filter Styling

[Mike-E]

Hello Team Syncfusion,

I am running into a problem with your otherwise excellent grid/filter controls.  There appears to be a styling issue with the DataTime column where the back/forth buttons are missing:

Unfortunately when I attempt to track it down via Developer Tools, the control disappears.  Is there a way to figure out the styling/rules/selectors being applied here?

Thank you for any assistance you can provide,

Michae;

[Monisha Saravanan]

Hi Mike,

Greetings from Syncfusion support.

Query: I am running into a problem with your otherwise excellent grid/filter controls.  There appears to be a styling issue with the DataTime column where the back/forth buttons are missing.

We have checked your query and we could see that you have used menu filter and we have prepared an sample based on your shared  image. But we could not able to replicate the reported issue at our end. Kindly check the attached sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11070357718.zip

Kindly share the below details to validate further at our end.

1. Share us the entire Grid code snippet along with model class.
2. Share us the Syncfusion Nuget version used.
3. Share us whether you have used Default editing or facing issue when using SfDatePicker inside an EditTemplate.
4. Share us the customized styles used if any.
5. Share us the video demonstration of the issue.
6. If possible kindly share us the issue reproduceable sample or try to reproduce the reported issue on the above mentioned sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Monisha

[Mike-E]

Thank you for your assistance Monisha.  I am not surprised you are able to reproduce this as this is an issue on my end.  What I am looking to achieve here is to "freeze" the datetime control to see its styling rules/selectors.  From there, I can track down on my end which rule/selector is causing the controls to hide (or display wrong colors).

Are you able to:

1. Tell me how to "freeze"/"lock" the drop down so that I can capture it in Chrome Developer Tools
2. Tell me the styles applied to the control/s to further track down the issue.

Thank you for any continued assistance you can provide.

[Monisha Saravanan]

Hi Mike,

Thanks for the update.

Query : “Tell me how to "freeze"/"lock" the drop down so that I can capture it in Chrome Developer Tools”

We can set Args.Cancel = true in the onClose event handler, to prevent the popup from closing. You can use this to debug.

UG: https://blazor.syncfusion.com/documentation/datetime-picker/events#onclose

Code:

    public void OnCloseHandler(object Args)

    {

        Args.Cancel = true.

    }

API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerEvents-1.html#Syncfusion_Blazor_Calendars_DateTimePickerEvents_1_OnClose

Query : “Tell me the styles applied to the control/s to further track down the issue”

Please refer to our styles and appearance section in our documentation which provides exact CSS structure of the styles used in our component.

https://blazor.syncfusion.com/documentation/datetime-picker/style-appearance

Kindly get back to if you have further queries.

Regards,

Monisha

[Mike-E]

> We can set Args.Cancel = true in the onClose event handler, to prevent the popup from closing. You can use this to debug.

Thank you for your reply @Monisha.  Can you please verify this is available in the Grid filter control?

[Monisha Saravanan]

Hi Mike,

Thanks for the update.

Query: “We can set Args.Cancel = true in the onClose event handler, to prevent the popup from closing. You can use this to debug. Can you please verify this is available in the Grid filter control?”

We have checked your query and we would like to inform that we don’t have direct support to set args.Cancel in Date column instead we can use FilterTemplate feature of our DataGrid and by using filter template we can render DateTimePicker inside grid column. Kindly check the attached code snippet and UG for your reference.

<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Center" Width="130">

            <FilterTemplate>

                <SfDateTimePicker TValue="DateTime?" Format="dd/MM/yyyy" Placeholder='Select a date'  >

                    <DateTimePickerEvents TValue="DateTime?" OnClose="OnCloseHandler"></DateTimePickerEvents>

                 </SfDateTimePicker>

            </FilterTemplate>

 

        </GridColumn>

@code{

 

    public void OnCloseHandler(PopupObjectArgs args)

    {

        args.Cancel = true;

       

    }

}

 

Reference: https://blazor.syncfusion.com/documentation/datagrid/filter-menu#custom-component-in-filter-menu

Kindly get back to us if you face any difficulties or if you have further queries.

Regards,

Monisha

[Mike-E]

Thank you very much for the valuable assistance and for your time as well as your effort out there, @Monisha!  It is greatly appreciated.

[Monisha Saravanan]

Hi Mike,

Most welcome. Kindly get back to us if you have further queries.

Regards,

Monisha