How to apply different filter options for different columns in telerik radgrid?

Question

For telerik Radgrid, we are getting default values for filtering columns. But I need to have different filtering options for different columns.

I am able to remove some of the options like this

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

But the problem here is filter options are getting removed for all the columns. I need different filter options for different columns. Server side options is preferred. Thanks in advance

Answer 1

http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/how-to/Filtering/reduce-the-filter-menu-options

Direct from Telerik: This is not possible using server-side code. You must use the client-side example from the link above (pasted below):

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var column = null;
        function MenuShowing(sender, args) {
            if (column == null) return;
            var menu = sender; var items = menu.get_items();
            if (column.get_dataType() == "System.String") {
                var i = 0;
                while (i < items.get_count()) {
                    if (!(items.getItem(i).get_value() in { 'NoFilter': '', 'Contains': '', 'NotIsEmpty': '', 'IsEmpty': '', 'NotEqualTo': '', 'EqualTo': '' })) {
                        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++;
                }
            }
            if (column.get_dataType() == "System.Int64") {
                var j = 0; while (j < items.get_count()) {
                    if (!(items.getItem(j).get_value() in { 'NoFilter': '', 'GreaterThan': '', 'LessThan': '', 'NotEqualTo': '', 'EqualTo': '' })) {
                        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;
            menu.repaint();
        }
        function filterMenuShowing(sender, eventArgs) {
            column = eventArgs.get_column();
        }
    </script>
</telerik:RadCodeBlock>

---

<telerik:RadGrid...>
    //Additional markup removed
    <FilterMenu OnClientShowing="MenuShowing" />
</telerik:RadGrid>

Explanation from Telerik:

There is a single filtering menu object server-side. Not all of its items appear in every filter menu client-side....The filtering menu is independent for each column in RadGrid - this means that the filtering menu options vary by the DataType of the corresponding column....However, if you remove some of the options from the menu on the server, this will affect all grid columns and they will be stripped from each column filter menu options (if available by default for that type of column).

Answer 2

Chambo solution can be customise to solve this exact problem.

In Js:

First as you need to access the Column Name, you can add it to the filterMenuShowing function. Or access it via get_uniqueName() on column.

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 == "Date") { // If the column name is Date
        var i = 0;
        while (i < items.get_count()) {
            if (!(items.getItem(i).get_value() in { 'NoFilter': '', 'Contains': '', 'GreaterThan': '', 'LessThan': '' })) {
                var item = items.getItem(i);
                if (item != null){
                    item.set_visible(false);
                }
            }
            else { // Not mandatory.
                var item = items.getItem(i);
                if (item != null){
                    item.set_visible(true);
                }
            } i++;
        }
    }
    else {
        if (columnName == "Name") {
            var j = 0;
            while (j < items.get_count()) {
                if (!(items.getItem(j).get_value() in { 'NoFilter': '', 'Contains': '', 'StartsWith': '', 'EndsWith': '' })) {
                    var item = items.getItem(j);
                    if (item != null){
                        item.set_visible(false);
                    }
                }
                else { // Not mandatory.
                    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();
}

In Aspx:

You need to link your function to the right client event as show in the documentation.

<ClientSettings>
    <Scrolling AllowScroll="false" />
    <ClientEvents OnFilterMenuShowing="filterMenuShowing" />
</ClientSettings>

and

<FilterMenu OnClientShowing="MenuShowing" />