excel like filtering in a headertemplate

[Sebastiaan]

Hello,

I am trying to add excel style filtering to our current application. To achieve this the solution has been upgraded with the Telerik 15.3.1111.45 upgrade.

 

But after adding

            gridview.AllowFilteringByColumn = true;
            gridview.EnableHeaderContextFilterMenu = true;
            gridview.FilterType = GridFilterType.HeaderContext;

to the constructor of the grid.

I saw a little change in the layout of the header column but no filtermenu button to open. (as mentioned: http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/excel-like-filtering/defaultcs.aspx )

My guess is that I'm forgetting one thing that is needed to show the menu demonstrated in above link.

 

To be sure I'll also post the GridHeaderTemplate that we set as columnheader (and shows everything in the columnheader) (This is basically how column headers showed the info needed before excel style filtering)

        public void InstantiateIn(Control container)
        {
            // Check if column is sorted and show corresponding image
            SortingProp sort = null;
            bool hasSort = controller.CurrentSorting != null && controller.CurrentSorting.TryGetValue(prop.ID, out sort);
            if (hasSort)
            {
                var div = new HtmlGenericControl("div");
                var image = new HtmlImage { Src = "images/grid_sort_" };

                div.Attributes.Add("class", "sort");
                image.Src += sort.SortDirection == MySortDirection.Ascending ? "ascending.png" : "descending.png";

                div.Controls.Add(image);
                container.Controls.Add(div);
            }

            // Check if column is filtered and show corresponding image
            if (controller.IsPropFiltered(prop.ObjProp.ObjProp))
            {
                var image = new HtmlImage { Src = MyFileUrls.CreateSharedImageUrl(ImageRepository.Shared.filter_16, false) };
                image.Attributes.Add("class", "filter");
                container.Controls.Add(image);
            }

            var title = new HtmlGenericControl("div");
            var label = new Literal { Text = prop.ObjProp.TranslGrid };
            title.Attributes.Add("class", "title");
            title.Controls.Add(label);
            container.Controls.Add(title);
        }

 

regards,

Sebastiaan

[Konstantin Dikov]

Hello Sebastiaan,

Defining custom header template will remove the excel-like filtering functionality (the header context menu). With custom GridHeaderTemplate you need to create custom button and attach client-side code to open the context menu. If you inspect the generated button in our "Excel-like filtering" demo you will see that the click event is executing the following code:

onclick="Telerik.Web.UI.Grid.ShowContextMenu($find('masterTableClientID'), 'ContactName', event); return false;"

To enable the context menu you need to add a button that will execute the above function.

Hope this helps.


Regards,
Konstantin Dikov
Telerik

[Sebastiaan]

Hello Konstantin,

it works, but by default the menu is transparent? I fixed it here by adding a background-color to it.

 

Then I also have this line of code

column.FilterCheckListEnableLoadOnDemand = true;

Which enables the excel like filtering part of the menu.

How do I fill this?

[Sebastiaan]

column.FilterCheckListEnableLoadOnDemand = true;

actually gives me a JSON.parse error.

 

Uncaught SyntaxError: JSON.parse in browserLink line 17 (which is a NuGet package)

Checking in there I get a:

Failed to load viewstate.  The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during the previous request.  For example, when adding controls dynamically, the controls added during a post-back must match the type and position of the controls added during the initial request.

The same error occurs when just selecting a different row instead of selecting the header, this error disappears when I disable gridview.EnableHeaderContextMenu = true;

[Konstantin Dikov]

Hello Sebastiaan,

Could you please add the following line in your web.config file and see if it resolves the issue:

<appSettings>
 <add key="vs:EnableBrowserLink" value="false" />
</appSettings>

I am looking forward to your reply.


Regards,
Konstantin Dikov
Telerik