Filter Popup conflict with Fixed Header

Feb 22, 2015 at 11:31 PM
Hi,

I have used the Grid and everything is great. Now I need to add Fixed Header functionality in grid. I am trying to use jquery.FloatThead http://mkoryak.github.io/floatThead/. Fixed header is working fine but Filter Popup hide inside header area.

How can I restore the filters?
Mar 11, 2015 at 12:34 PM
I got in this problem once and the only solution I found is to override grid mvc scripts to render popup outside the table.
Mar 21, 2015 at 1:19 PM
Edited Mar 21, 2015 at 1:20 PM
Thanks Leya,

Can you please share the code where we need to override the js code? Actually I am also trying for the same but not able to solve the issue yet.
Mar 23, 2015 at 7:34 AM
Add this after your gridmvc scripts.
(function () {
    if (window.GridMvc) {
        GridMvc.prototype.openFilterPopup = function (self, html) {
            var columnType = $(this).attr("data-type") || "";
            var widget = self.getFilterWidgetForType(columnType);
            if (widget == null)
                return false;

            var columnName = $(this).attr("data-name") || "";
            var filterData = $(this).attr("data-filterdata") || "";
            var widgetData = $(this).attr("data-widgetdata") || "{}";
            var filterDataObj = self.parseFilterValues(filterData) || {};
            var filterUrl = $(this).attr("data-url") || "";

            $(".grid-dropdown").remove();
            $("body").append(html);

            var widgetContainer = $("body").children(".grid-dropdown").find(".grid-popup-widget");
            if (typeof (widget.onRender) != 'undefined')
                widget.onRender(widgetContainer, self.lang, columnType, filterDataObj, function (values) {
                    self.closeOpenedPopups();
                    self.applyFilterValues(filterUrl, columnName, values, false);
                }, $.parseJSON(widgetData));

            if ($(this).find(".grid-filter-btn").hasClass("filtered") && widget.showClearFilterButton()) {
                var inner = $("body").find(".grid-popup-additional");
                inner.append(self.getClearFilterButton(filterUrl));
                inner.find(".grid-filter-clear").click(function () {
                    self.applyFilterValues(filterUrl, columnName, "", true);
                });
            }
            var openResult = self.openMenuOnClick.call(this, self);
            if (typeof (widget.onShow) != 'undefined')
                widget.onShow();

            self.setupPopupInitialPosition($(this));
            return openResult;
        };

        GridMvc.prototype.setupPopupInitialPosition = function (popup) {
            var dropdown = $(".grid-dropdown");
            var arrow = dropdown.find(".grid-dropdown-arrow");

            var dropdownWidth = dropdown.width();
            var popupLeft = popup.offset().left;
            var popupTop = popup.offset().top;
            var winWidth = $(window).width();
            var dropdownTop = popupTop + 20;
            var dropdownLeft = 0;
            var arrowLeft = 0;

            if (popupLeft + dropdownWidth + 10 > winWidth) {
                dropdownLeft = winWidth - dropdownWidth - 10;
                arrowLeft = popupLeft - dropdownLeft - 3;
            } else {
                dropdownLeft = popupLeft - 20;
                arrowLeft = 17;
            }

            dropdown.attr("style", "display: block; left: " + dropdownLeft + "px; top: " + dropdownTop + "px !important");
            arrow.css("left", arrowLeft + "px");
        };

        GridMvc.prototype.openMenuOnClick = function (self) {
            if ($(this).hasClass("clicked")) return true;
            self.closeOpenedPopups();
            $(this).addClass("clicked");
            var popup = $("body").find(".grid-dropdown");
            if (popup.length == 0) return true;
            popup.show();
            popup.addClass("opened");
            self.openedMenuBtn = $(this);
            $(document).bind("click.gridmvc", function (e) {
                self.documentCallback(e, self);
            });
            return false;
        };
    }
}());
Marked as answer by krgsoft on 3/23/2015 at 10:02 AM
Mar 23, 2015 at 5:01 PM
Great !!!!! Thank you very much Leya, Its working perfectly.................