Filter list alignment issue for Grid

[Deepak]

When I click  on the filter present on the header area of grid, its coming beside the column which is correct. But when trying to access this through enter key by putting focus with the help of tab key, the placement is not coming beside the column. Its different in different browsers.
Thanks in advance for any kind of help on this issue.

[Princy]

Hi Deepak,

The contextmenu that is showing when the filter icon is clicked in RadGrid is shown through an onclick event handler attached to the filter icon. You can verify this by examining RadGrid's markup (there is an onclick event handler attached to the input element that represents the filter icon). By default, when you tab to the filter button and press Enter or Space, the browser simulates a click event. This means the onclick event handler will be executed even when you use the keyboard for "clicking" the button. This is standard browser behavior and cannot be prevented. 

You can work around this limitation with some JavaScript. You can use RadGrid's client-side OnFilterMenuShowing event:

<ClientEvents OnFilterMenuShowing="gridFilterMenuShowing" />

In the event handler, we cancel the original menu showing event and "simulate" another event. The point is in providing the correct mouse cursor coordinates. We want to position the context menu right under the filter button, no matter where the mouse cursor is reported to be. To do that, we create a fake event arguments object and specify the current target and the clientX / clientY fields we need. Additionally, we use a custom flag to indicate a custom event is fired and prevent infinitely throwing the OnFilterMenuShowing event.

Here is the gridFilterMenuShowing javascript function:

<script type="text/javascript">
    function gridFilterMenuShowing(sender, args) {
        //get the DOM event
        var evt = args.get_domEvent();
        if (!evt._isCustomEvent) //if this is the original event - prevent it
       {
            //get the target
            var target = evt.target || evt.srcElement;
            //get the location
            var loc = $telerik.$(target).offset();
            //create a "fake" event arguments object
            var newEvt = $telerik.$.extend({}, {
                target: target,     //specify the current target
                clientX: loc.left,  //and the coordinates we want
                clientY: loc.top + target.offsetHeight,
                _isCustomEvent: true //this is important!
            });
            args.set_cancel(true);
            setTimeout(function () {
                //this internal RadGrid function invokes the context menu all over again
                sender._showFilterMenu(args.get_tableView().get_id(), args.get_column().get_uniqueName(), newEvt);
            }, 100);
        }
    }
</script>

Thanks,
Princy

[Deepak]

Thanks a lot Princy for your valuable comment. Its working for me.

[Deepak]

HI Princy,
I found one bug in this gridFilterMenuShowing() javascript function. Here its getting the initial location of filter icon or column.
then displaying the filter list on that location. But once you are scrolling the page (top to bottom or left to right), and  putting the focus by clicking on the filter icon by mouse  or by tab-enter , then the filter box will appear on the same place where exactly the column was(the location of column before scrolling), not in the current location of filter icon or column. 

Thanks

[Eyup]

Hello Deepak,

I am afraid we are not able to replicate the issue locally. Can you replicate this behavior with any of our demos?
http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/filtering/defaultcs.aspx

Please provide us the exact steps to reproduce the issue or open a support ticket to send us a very basic sample runnable web site demonstrating the erratic behavior. Thus, we will be able to further analyze the problem and provide a proper solution.

Regards,
Eyup
Telerik

[Deepak]

Hi Eyup,

  Thanks for your reply. I added .ascx and ascx.cs code to you for sample reference. In this .ascx page i added a JS method for initial filter popup alignment. Because before that if i go to a filter text box and press tab and enter then filter popup appears at top-left corner but after adding this JS method it appears with proper alignment. But the problem is if we scroll the page horizontally or vertically then the filter popup not appears in correct position. So please go through this code and attachments and help me.




.aspx Code :


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script type="text/javascript">
    function gridFilterMenuShowing(sender, args) {
        //get the DOM event
        var evt = args.get_domEvent();
        if (!evt._isCustomEvent) //if this is the original event - prevent it
        {
            //get the target
            var target = evt.target || evt.srcElement;
            //get the location
            var loc = $telerik.$(target).offset();
            //create a "fake" event arguments object
            var newEvt = $telerik.$.extend({}, {
                target: target,     //specify the current target
                clientX: loc.left,  //and the coordinates we want
                clientY: loc.top + target.offsetHeight,
                _isCustomEvent: true //this is important!
            });
            args.set_cancel(true);
            setTimeout(function () {
                //this internal RadGrid function invokes the context menu all over again
                sender._showFilterMenu(args.get_tableView().get_id(), args.get_column().get_uniqueName(), newEvt);
            }, 100);
        }
    }



    function ColumnResizing(s, e) {
        var column = e.get_gridColumn();
        var min = 85;

        if (column._columnResizer && column._columnResizer._currentWidth) {
            if (column._columnResizer._currentWidth < min) {
                e.set_cancel(true);
                column._columnResizer._currentWidth = min;
                s.get_masterTableView().resizeColumn(column.get_element().cellIndex, min);
            }
        }
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body style="Width: 2500px;height: 2000px;">
    <form id="form1" runat="server">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <telerik:RadGrid ID="rgCampaigns" runat="server" AllowPaging="True"
                    AllowSorting="True" PageSize="15" 
                    CellSpacing="0" CellPadding="0" GridLines="None" 
        SkinID="RadGridOffice" Skin="Office2007" 
        OnNeedDataSource="rgCampaigns_NeedDataSource" 
        OnItemCommand="rgCampaigns_ItemCommand">
                    <PagerStyle Mode="NumericPages"></PagerStyle>
                    
                    <ClientSettings>
<Selecting AllowRowSelect="True"></Selecting>

                     <ClientEvents OnFilterMenuShowing="gridFilterMenuShowing"/>
                        <Resizing AllowColumnResize="True" ResizeGridOnColumnResize="False"></Resizing>
                        <ClientEvents OnColumnResizing="ColumnResizing" />
                    </ClientSettings>
                    <MasterTableView Width="1800px" TableLayout="Fixed" AutoGenerateColumns="False" AllowFilteringByColumn="true" DataKeyNames="UserId"
                        GroupLoadMode="Server">

<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>

                        <HeaderStyle Wrap="false" />

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>
                        <Columns>
                            <telerik:GridBoundColumn HeaderText="UserId" DataField="UserId" UniqueName="UserId" Visible="False"/>
                            <telerik:GridBoundColumn HeaderText="UserName" DataField="UserName" UniqueName="UserName" FilterControlWidth="70px">
                             <HeaderStyle Width="110px"/>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Education" DataField="Education" UniqueName="Education" FilterControlWidth="70px">
                                <HeaderStyle Width="110px"></HeaderStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Location" DataField="Location" UniqueName="Location" FilterControlWidth="70px">
                             <HeaderStyle Width="110px"/>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="FirstName" DataField="FirstName" UniqueName="FirstName" FilterControlWidth="130px">
                                <HeaderStyle Width="170px"/>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="LastName " DataField="LastName" UniqueName="LastName" FilterControlWidth="70px">
                                <HeaderStyle Width="110px"></HeaderStyle>
                            </telerik:GridBoundColumn>
                            
                            <telerik:GridBoundColumn HeaderText="Address1" DataField="Address1" UniqueName="Address1" FilterControlWidth="70px">
                                <HeaderStyle Width="110px"></HeaderStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Address2" DataField="Address2" UniqueName="Address2" FilterControlWidth="70px">
                                <HeaderStyle Width="110px"></HeaderStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Phone" DataField="Phone" UniqueName="Phone" FilterControlWidth="70px">
                                <HeaderStyle Width="110px"></HeaderStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Gender" DataField="Gender" UniqueName="Gender" FilterControlWidth="70px">
                            <HeaderStyle Width="110px"></HeaderStyle>
                            </telerik:GridBoundColumn>
                        </Columns>
                        <NoRecordsTemplate>
                            Campaigns repository is empty
                        </NoRecordsTemplate>
                        <PagerStyle Mode="NextPrevAndNumeric" />
                    </MasterTableView>
                    <ClientSettings EnablePostBackOnRowClick="false">
                        <Selecting AllowRowSelect="true" />
                    </ClientSettings>
                    <GroupingSettings CaseSensitive="false" />

<FilterMenu EnableImageSprites="False"></FilterMenu>
                </telerik:RadGrid>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    </form>
</body>
</html>

.aspx.cs  Code  :



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.rgCampaigns.DataSource = BindGridviewData();
        this.rgCampaigns.Visible = true;
    }

    protected DataTable BindGridviewData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("UserId", typeof(Int32));
        dt.Columns.Add("UserName", typeof(string));
        dt.Columns.Add("Education", typeof(string));
        dt.Columns.Add("Location", typeof(string));
        dt.Columns.Add("FirstName", typeof(string));
        dt.Columns.Add("LastName", typeof(string));
        dt.Columns.Add("Address1", typeof(string));
        dt.Columns.Add("Address2", typeof(string));
        dt.Columns.Add("Phone", typeof(string));
        dt.Columns.Add("Gender", typeof(string));



        DataRow dtrow = dt.NewRow();
        dtrow["UserId"] = 1;
        dtrow["UserName"] = "SureshDasari";
        dtrow["Education"] = "B.Tech";
        dtrow["Location"] = "Chennai";
        dtrow["FirstName"] = "First1";
        dtrow["LastName"] = "Last2";
        dtrow["Address1"] = "BLR";
        dtrow["Address2"] = "HAL";
        dtrow["Phone"] = "7577676";
        dtrow["Gender"] = "M";
        dt.Rows.Add(dtrow);

        dtrow = dt.NewRow();
        dtrow["UserId"] = 2;
        dtrow["UserName"] = "MadhavSai";
        dtrow["Education"] = "MBA";
        dtrow["Location"] = "Nagpur";
        dtrow["FirstName"] = "First1";
        dtrow["LastName"] = "Last2";
        dtrow["Address1"] = "BLR";
        dtrow["Address2"] = "HAL";
        dtrow["Phone"] = "7577676";
        dtrow["Gender"] = "M";
        dt.Rows.Add(dtrow);

        dtrow = dt.NewRow();
        dtrow["UserId"] = 3;
        dtrow["UserName"] = "MaheshDasari";
        dtrow["Education"] = "B.Tech";
        dtrow["Location"] = "Nuzividu";
        dtrow["FirstName"] = "First1";
        dtrow["LastName"] = "Last2";
        dtrow["Address1"] = "BLR";
        dtrow["Address2"] = "HAL";
        dtrow["Phone"] = "7577676";
        dtrow["Gender"] = "M";
        dt.Rows.Add(dtrow);

        dtrow = dt.NewRow();
        dtrow["UserId"] = 4;
        dtrow["UserName"] = "Mahendra";
        dtrow["Education"] = "CA";
        dtrow["Location"] = "Guntur";
        dtrow["FirstName"] = "First1";
        dtrow["LastName"] = "Last2";
        dtrow["Address1"] = "BLR";
        dtrow["Address2"] = "HAL";
        dtrow["Phone"] = "7577676";
        dtrow["Gender"] = "M";
        dt.Rows.Add(dtrow);


        return dt;
    }
    protected void rgCampaigns_ItemCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
    {

    }
    protected void rgCampaigns_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        this.rgCampaigns.DataSource = BindGridviewData();
        this.rgCampaigns.Visible = true;
    }
}

[Eyup]

Hi Deepak,

To resolve this issue, please remove the javascript workaround and place a hidden button on your page:

<form id="form1" runat="server" defaultbutton="HiddenButtonUniqueID">
    <asp:Button ID="HiddenButtonUniqueID" runat="server" Text="Button" Style="display: none;" OnClientClick="return false;" />

As described in the following thread which describes a problem caused by the same reason:
http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-disable-enter-key.aspx

Hope this helps. Please give it a try and let us know about the result.

Regards,
Eyup
Telerik