Show or hide a filter for Grid column in client side

[Joey Montambeault]

Hi expert,

I have a Grid with some columns that allow filters. When the page is rendered for the first time, I hided all filters using this client side code :
function pageLoad(sender, args)
{
    $find('<%=Grid.ClientID %>').get_masterTableView().hideFilterItem();
}

for each column that allow filter, I want to show the filter on the click on this column. I use the ColumnClick event to do that, but I'm not able to do that. I want some client side code like :

function ColumnClick(columnName)
{
        var masterTable = $find('<%=Grid.ClientID %>').get_masterTableView();
        masterTable.get_columns()[columnName].AllowFiltering = true;
}

I know that I can do that using server side code, but I don't want to that.
I hope that you have some Javascript code to acheive my goal.

thank you for you help.

Hakim

[Maria Ilieva]

Hi Joey,

Here is an example:

          

<script type="text/javascript" language="javascript">

    function filterMenushowing(sender, eventArgs)
    {
        if (eventArgs.get_column().get_uniqueName() == "unique_invoice_no")
        {
            var menu = eventArgs.get_menu();
            var items = menu._itemData;
            var i = 0;
            while (i < items.length)
            {
                if (items[i].value != "NoFilter" && items[i].value != "EqualTo")
                {
                    var item = menu._findItemByValue(items[i].value);
                    if (item != null)
                        item._element.style.display="none";
                }
                i++;
            }
        }
    }
</script>

I hope this helps.


Regards,
Maria Ilieva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Joey Montambeault]

Hi Maria,

Thank you for your help, but I don't know how raise the eventfilterMenushowing.

I put ClientEvents-OnFilterMenuShowing="filterMenushowing", but no thing happen when i clicked on the image.

To more clarify my issue, i post my code over here:

//hide all filters controls on th epage load
       function pageLoad(sender, args)
        {
            var grid = $find('<%=gvUsers.ClientID %>');
            
            if(grid != null)
            {
                grid.get_masterTableView().hideFilterItem();
            }
        }

<telerik:RadGrid ID="gvUsers" runat="server" Skin="Default"
         AutoGenerateColumns="false"
        GridLines="None" PageSize="20" AllowFilteringByColumn="True"
        OnItemCreated="gvUsers_ItemCreated">
       <ClientSettings ClientEvents-OnFilterMenuShowing="filterMenushowing" ></ClientSettings>
      <MasterTableView AllowSorting="True" AllowFilteringByColumn="true">
            <Columns>    
                    <telerik:GridTemplateColumn UniqueName="Profile">
                            <HeaderTemplate>
                                <asp:Literal ID="lit" runat="server" Text="Profile" />
                                 <img id="img1" runat="server" src="../images/download.gif" alt="Show Filter" />
                            </HeaderTemplate>
                            <FilterTemplate>
                                <telerik:RadComboBox ID="ddlProfile" runat="server" Width="120px" />
                            </FilterTemplate>
                  </telerik:GridTemplateColumn>

                 <telerik:GridTemplateColumn UniqueName="Access">
                        <HeaderTemplate>
                                <asp:Literal ID="litRights" runat="server" Text="Rights" />
                                <img id="img2" runat="server" src="../images/download.gif" alt="Show Filter" />
                       </HeaderTemplate>
                       <FilterTemplate>
                                <telerik:RadComboBox ID="ddlRights" runat="server" Width="100px" />
                       </FilterTemplate>
                        <ItemTemplate>
                                <%# DataBinder.Eval(Container.DataItem, "Access")%>
                       </ItemTemplate>
                    </telerik:GridTemplateColumn>   
             </Columns>
       </MasterTableView>
</telerik:RadGrid>

Now, I want to show the filter control  ddlProfile on click on the control img1  and show the filter control  ddlRights on click on the control img2.

Could you show me where i'll put my event to Show the control filter.

Thank you very much.

Hakim

[Maria Ilieva]

Hello Joey,

In your case another option could be to create your own custom RadContexMenu and manually fire the filter command on a particular img click.

Regards,
Maria Ilieva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.