FilterMenu Customization issue

[Pradip]

Hi,

I want to customize filter-menu according to column.
there are 4 columns in my rad-grid and all that columns contains filter-menu , I want to customise all of them filter-menu.

issue is when i customize first column(filter-menu) using unique-id of column , changes apply to all filter-menu on rad-grid.
another issue is when i put customize code for more than one column, filter-menu drop-down stops working.

following code i used.....


    protected void RadGridUserActionLog_Init(object sender, System.EventArgs e)
        {
            foreach (GridColumn column in RadGridUserActionLog.Columns)
            {             
                if (column.UniqueName == "Date")
                {
                    GridFilterMenu menu = RadGridUserActionLog.FilterMenu;
                    int i = 0;

                    while (i < menu.Items.Count)
                    {
                        if (menu.Items[i].Text == "IsNull" || menu.Items[i].Text == "NotIsNull")
                        {
                            i++;
                        }
                        else
                        {
                            menu.Items.RemoveAt(i);
                        }
                    }                    
                }
                              

                if (column.UniqueName == "Username")
                {
                    GridFilterMenu defaultmenu = RadGridUserActionLog.FilterMenu;
                    int i = 0;

                    while (i < defaultmenu.Items.Count)
                    {
                        if (defaultmenu.Items[i].Text == "NoFilter" || defaultmenu.Items[i].Text == "EqualTo" || defaultmenu.Items[i].Text == "NotEqualTo" || defaultmenu.Items[i].Text == "GreaterThan" || defaultmenu.Items[i].Text == "LessThan" || defaultmenu.Items[i].Text == "GreaterThanOrEqualTo" || defaultmenu.Items[i].Text == "LessThanOrEqualTo")
                        {
                            i++;
                        }
                        else
                        {
                            defaultmenu.Items.RemoveAt(i);
                            
                        }
                        RadGridUserActionLog.FilterMenu.DataBind();
                    }
                }
             }          
        }

[Pradip]

image of rad-grid..
there are three filter-menu, and i want to customize them all.

[Genady Sergeev]

Hi Pradip,

Please take a look at the customize filter menu help article, which describes a possible approach.

I hope that this helps.

Regards,
Genady Sergeev
Telerik

 

 

[Pradip]

i already checked it, it works fine only for one column.
While i have 3 columns in my rad-grid and i want to customize filter-menu  for all of them individually , as i mention above.

[Shinu]

Hi Pradip,

Please have a look into the sample code snippet which works fine at my end. Try to replicate the issue in the provided code or please provide your full code for further help.

ASPX:

<telerik:RadGrid ID="radgrdOrders" runat="server" AllowFilteringByColumn="true" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" OnInit="radgrdOrders_Init">
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" UniqueName="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CustomerID" UniqueName="CustomerID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="EmployeeID" UniqueName="EmployeeID">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:

protected void radgrdOrders_Init(object sender, EventArgs e)
{
    GridFilterMenu menu = radgrdOrders.FilterMenu;
    int Counter = 0;
    while (Counter < menu.Items.Count)
    {
        if (menu.Items[Counter].Text == "NoFilter" || menu.Items[Counter].Text == "Contains" || menu.Items[Counter].Text == "EqualTo" || menu.Items[Counter].Text == "GreaterThan" || menu.Items[Counter].Text == "LessThan")
        {
            Counter++;
        }
        else
        {
            menu.Items.RemoveAt(Counter);
        }
    }
}

Thanks,
Shinu.

[Pradip]

Thanks Shinu for your reply,

Yes, code which suggested by you is working but I have 3 column and want to customize individually.
All three colums should have different filter-menu.

Suppose for "date" column  there should be only "GreaterThan" and "LessThan" item display in filter-menu,
same as  for "username" column there should be only "NoFilter" and "EqualTo" item display in filter-menu.

[Shinu]

Hi Pradip,

Please take a look at the sample code snippet. I have customized the filter menu for two column. Try and let me know if any concern.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource" AllowFilteringByColumn="true" EnableLinqExpressions="false">
    <MasterTableView DataKeyNames="ID">
        <Columns>
            <telerik:GridBoundColumn UniqueName="ID" DataField="ID" HeaderText="ID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Number" HeaderText="Number" UniqueName="Number" DataType="System.Int16">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="false" />
        <ClientEvents OnFilterMenuShowing="filterMenuShowing" />
    </ClientSettings>
    <FilterMenu OnClientShown="MenuShowing" />
</telerik:RadGrid>

C#:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    dynamic data = new[] {
        new { ID = 1, Name = "Name1", Number=123},
        new { ID = 2, Name = "Name2", Number=456},
        new { ID = 3, Name = "Name3", Number=789},
        new { ID = 4, Name = "Name4", Number=123},
        new { ID = 5, Name = "Name5", Number=258}
    };
    RadGrid1.DataSource = data;
}

JS:

<script type="text/javascript">
    var column = null;
    var columnName = null;
    function MenuShowing(sender, args) {
        if (column == null) return;
        if (columnName == null) return;
        var menu = sender; var items = menu.get_items();
        if (columnName == "Name") {
            var i = 0;
            while (i < items.get_count()) {
                if (!(items.getItem(i).get_value() in { 'StartsWith': '', 'Contains': '' })) {
                    var item = items.getItem(i);
                    if (item != null)
                        item.set_visible(false);
                }
                else {
                    var item = items.getItem(i);
                    if (item != null)
                        item.set_visible(true);
                } i++;
            }
        }
        else {
            if (columnName == "Number") {
                var j = 0;
                while (j < items.get_count()) {

                    if (!(items.getItem(j).get_value() in { 'EqualTo': '', 'NotEqualTo': '' })) {
                        var item = items.getItem(j);
                        if (item != null)
                            item.set_visible(false);
                    }
                    else {
                        var item = items.getItem(j);
                        if (item != null)
                            item.set_visible(true);
                    } j++;
                }
            }
        }
        column = null;
        columnName = null;
    }

    function filterMenuShowing(sender, eventArgs) {
        column = eventArgs.get_column();
        columnName = eventArgs.get_column().get_uniqueName();
    }
</script>

Thanks,
Shinu

[Pradip]

Hi Shinu,

Code which you posted is working fine , But one issue arise because of it.
Blank space is display in filter-menu at the place of items which we set as visible false.

I give you screenshot of it.

thanks

[Shinu]

Hi Pradip,

Unfortunately, I'm unable to replicate the issue at my end. Can you please provide your full code snippet and the version you are using.

Thanks,
Shinu

[Pradip]

Hi Shinu,

Now issue is resolved using following jquery script.

$(".rmItem").each(function () {
              if ($(this).find("a").attr("style") == "width: auto; display: none;") {
                  $(this).hide();
              }
          });

Thank you very much for your help

Thanks,
Pradip