CheckList filter not displaying correctly in Chrome and Edge

[Fanie]

I have a RadGrid with filtering enabled.  The one column uses CheckList filtering.  In IE11 everything works perfectly, except in Chrome and Edge.

In Chrome and Edge, the checklist item displays as normal list items, see attached images.

I've upgraded to v2020.1.219.45 to see if it would resolve the issue, but no luck.  I'm using .NET Framework 4.6.2.

This is working on another solutions, I've compared the code and it is exactly the same.

I would appreciate any leads.

Thanks in advance.

 

[Fanie]

protected void RadGrid1_FilterCheckListItemsRequested(object sender, GridFilterCheckListItemsRequestedEventArgs e)
       {
           string DataField = (e.Column as IGridDataColumn).GetActiveDataField();
           e.ListBox.DataSource = GetDateTable(DataField);
           e.ListBox.DataKeyField = DataField;
           e.ListBox.DataTextField = DataField;
           e.ListBox.DataValueField = DataField;
           e.ListBox.DataBind();
       }

       public DataTable GetDateTable(string field)
       {
           string query = string.Format("SELECT DISTINCT {0} FROM Statuses WHERE Active = 1", field);

           // String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
           SqlConnection conn = new SqlConnection(connectionStringDatabase);
           SqlDataAdapter adapter = new SqlDataAdapter();
           adapter.SelectCommand = new SqlCommand(query, conn);

           DataTable myDataTable = new DataTable();

           conn.Open();
           try
           {
               adapter.Fill(myDataTable);
           }
           finally
           {
               conn.Close();
           }

           return myDataTable;
       }

[Fanie]

<telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="LoadingPanel1" runat="server" CssClass="grid_wrapper">
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" PageSize="20" ShowFooter="True"  RenderMode="Lightweight" DataSourceID="SqlDataSource1"
            AllowFilteringByColumn="True" Skin="Metro" AllowSorting="True" AutoGenerateColumns="False" AllowAutomaticUpdates="false" AllowAutomaticInserts="false"
            OnUpdateCommand="RadGrid1_UpdateCommand" ShowStatusBar="True" FilterType="Combined" OnFilterCheckListItemsRequested="RadGrid1_FilterCheckListItemsRequested">
            <GroupingSettings CollapseAllTooltip="Collapse all groups" />
            <ExportSettings ExportOnlyData="true" IgnorePaging="true"></ExportSettings>
            <AlternatingItemStyle BorderColor="#99CCFF" />
            <MasterTableView TableLayout="Fixed" DataKeyNames="ID"   CommandItemDisplay="Top"
                  AllowMultiColumnSorting="true" AllowNaturalSort="false">
                <CommandItemSettings ShowAddNewRecordButton="false" ShowExportToExcelButton="true" ShowExportToWordButton="true" />
                <Columns>
                    <telerik:GridHyperLinkColumn HeaderText="Ticket ID" DataNavigateUrlFields="ID" DataNavigateUrlFormatString="~/editTicket.aspx?t={0}"
                        DataTextField="ID" UniqueName="ID" SortExpression="ID" FilterControlAltText="Filter ID column" FilterControlWidth="70px">
                        <HeaderStyle Width="70px" />
                    </telerik:GridHyperLinkColumn>
                    <telerik:GridDateTimeColumn DataField="dtReported" HeaderText="Date Reported" FilterControlWidth="100px" SortExpression="dtReported" EnableTimeIndependentFiltering="true"
                        UniqueName="dtReported" PickerType="DatePicker" DataFormatString="{0:dd/MM/yyyy HH:mm:ss}">
                        <HeaderStyle Width="100px" />
                    </telerik:GridDateTimeColumn>
                    <telerik:GridBoundColumn DataField="ReportedBy" HeaderText="Reported By" SortExpression="ReportedBy" FilterControlWidth="80px"
                        UniqueName="ReportedBy">
                        <HeaderStyle Width="80px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="AssignedUser" FilterControlAltText="Filter AssignedUser column" FilterControlWidth="100px" HeaderText="Assigned To" SortExpression="AssignedUser" UniqueName="AssignedUser">
                        <FilterTemplate>
                            <telerik:RadComboBox ID="RCB_AssignedUser" DataSourceID="SqlDataSource2" DataTextField="AssignedUser"
                                DataValueField="AssignedUser" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("AssignedUser").CurrentFilterValue %>'
                                runat="server" OnClientSelectedIndexChanged="ResourceIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="All" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                <script type="text/javascript">
                                    function ResourceIndexChanged(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        tableView.filter("AssignedUser", args.get_item().get_value(), "EqualTo");
                                    }
                                </script>
                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                        <HeaderStyle Width="100px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Category" FilterControlAltText="Filter Category column" FilterControlWidth="100px" HeaderText="Category" SortExpression="Category" UniqueName="Category">
                        <FilterTemplate>
                            <telerik:RadComboBox ID="RCB_Category" runat="server"  DataSourceID="SqlDataSource3" DataTextField="Category"
                                DataValueField="Category" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Category").CurrentFilterValue %>'
                                OnClientSelectedIndexChanged="CategoryIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="All" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                                <script type="text/javascript">
                                    function CategoryIndexChanged(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        tableView.filter("Category", args.get_item().get_value(), "EqualTo");
                                    }
                                </script>
                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                        <HeaderStyle Width="100px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Priority" FilterControlAltText="Filter Priority column" FilterControlWidth="100px" HeaderText="Priority" SortExpression="Priority" UniqueName="Priority">
                        <FilterTemplate>
                            <telerik:RadComboBox ID="RCB_Priority" runat="server" DataSourceID="SqlDataSource4" DataTextField="Priority"
                                DataValueField="Priority" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Priority").CurrentFilterValue %>'
                                OnClientSelectedIndexChanged="PriorityIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="All" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">
                                <script type="text/javascript">
                                    function PriorityIndexChanged(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        tableView.filter("Priority", args.get_item().get_value(), "EqualTo");
                                    }
                                </script>
                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                        <HeaderStyle Width="100px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Subject" HeaderText="Subject" SortExpression="Subject" FilterControlWidth="200px"
                        UniqueName="Subject">
                        <HeaderStyle Width="250px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="Status" FilterControlAltText="Filter Status column" FilterControlWidth="80px"
                        HeaderText="Status" SortExpression="Status" UniqueName="Status">
                        <HeaderStyle Width="80px" />
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings AllowColumnsReorder="false" AllowColumnHide="false" AllowDragToGroup="false">
               <%-- <ClientEvents OnRowDblClick="RowDblClick" OnPopUpShowing="onPopUpShowing" />--%>
                <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="475px"/>
            </ClientSettings>
            <PagerStyle PageButtonCount="5" />
            <FilterMenu  RenderMode="Lightweight"></FilterMenu>
            <HeaderContextMenu  RenderMode="Lightweight"></HeaderContextMenu>
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Ticketing.SpoorConnectionString2 %>"
            SelectCommand="USE [Ticketing.Spoor] SELECT T.ID, T.dtReported, T.ReportedBy, R.DisplayName AS 'AssignedUser', C.Category, P.Priority, T.Subject, S.Status, D.DifficultyLevel, T.cc, SC.SubCategory FROM Tickets AS T LEFT OUTER JOIN Resources AS R ON T.AssignedUser = R.ID LEFT OUTER JOIN Categories AS C ON T.Category = C.ipkCategoryID LEFT OUTER JOIN SubCategories AS SC ON T.SubCategory = SC.ipkSubCategoryID AND C.ipkCategoryID = SC.ifkCategoryID LEFT OUTER JOIN Priorities AS P ON T.Priority = P.ID LEFT OUTER JOIN Statuses AS S ON T.Status = S.ID LEFT OUTER JOIN DifficultyLevels AS D ON T.DifficultyLevel = D.ID WHERE(NOT(S.Status = 'Merged'))"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:Ticketing.SpoorConnectionString2 %>"
            ProviderName="System.Data.SqlClient" SelectCommand="USE [Ticketing.Spoor] SELECT DISTINCT DisplayName AS 'AssignedUser' FROM Resources WHERE Active = 1"
            runat="server"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:Ticketing.SpoorConnectionString2 %>"
            ProviderName="System.Data.SqlClient" SelectCommand="USE [Ticketing.Spoor] SELECT DISTINCT Category FROM Categories WHERE bIsActive = 1 ORDER BY Category"
            runat="server"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource4" ConnectionString="<%$ ConnectionStrings:Ticketing.SpoorConnectionString2 %>"
            ProviderName="System.Data.SqlClient" SelectCommand="USE [Ticketing.Spoor] SELECT DISTINCT Priority FROM Priorities WHERE Active = 1"
            runat="server"></asp:SqlDataSource>
    </telerik:RadAjaxPanel>

[Rumen]

Hi Fanie,

There is nothing specific in the checkboxes used by the RadComboBox control which may hide them in Chrome and Edge.

Can you please perform the following test to check whether the problem persists if you set the RenderMode property to Classic?

Another thing is to right-click over the line where we expect the checkbox to be placed and choose Inspect from the context menu of the browser. After that see whether the input of type="checkbox" gets created and is available in the generated markup. 

If it is there, see the applied CSS styles over it and look for -webkit-appearance: none; which purpose is to hide the checkbox elements in chrome.

You can also try to show the checkbox via this CSS class:

input[type=checkbox]
{
  -webkit-appearance:checkbox;
}

as explained at SO Checkboxes not displaying Chrome - Work in other browsers.

You may also set EnableAjax="false" to the RadAjaxPanel and see whether the AJAX is somehow related to the problem.

Best Regards,
Rumen
Progress Telerik

[Fanie]

Hi Rumen,

I can confirm that adding CSS class resolved the problem.  I had a class that sets the appearance to none.

button,
input {
  -webkit-appearance: none;
  cursor: pointer;
}

input[type=checkbox] {
        -webkit-appearance:checkbox;
}

 

Thanks for your assistance.

Regards

Fanie

[Rumen]

You are welcome, Fanie! I am glad that we managed to resolve the issue faster :)

 

Regards,
Rumen
Progress Telerik