This is a migrated thread and some comments may be shown as answers.

excel like filtering in a headertemplate

4 Answers 121 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sebastiaan
Top achievements
Rank 1
Sebastiaan asked on 18 Jan 2016, 03:38 PM

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

4 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 19 Jan 2016, 02:17 PM
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
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 Feedback Portal and vote to affect the priority of the items
0
Sebastiaan
Top achievements
Rank 1
answered on 25 Jan 2016, 09:09 AM

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?

0
Sebastiaan
Top achievements
Rank 1
answered on 25 Jan 2016, 11:00 AM

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;

0
Konstantin Dikov
Telerik team
answered on 27 Jan 2016, 01:00 PM
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
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 Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Sebastiaan
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Sebastiaan
Top achievements
Rank 1
Share this question
or