custom knockout js component used for table column filter controls

component-kodropdown.js

function KODropDownComponent(params) {
    var self = this;
    self.version = "2.1.1";
    self.dropdownFilter = params.value;
    self.dropdownLabel = params.label;
    self.dropdownDetails = params.details || params.label;
    self.dropdownHeader = params.header || params.label;
    self.dropdownItems = params.items || [];
    self.dropdownLinkCss = params.css;
    self.itemText = params.itemText || "";
    self.itemValue = params.itemValue || "";
    self.setItemText = function (item) {
        return self.itemText ? item[self.itemText] : item;
    };
    self.setDropdownFilter = function (filterValue, event) {
        var $el = $(event.target),
            $dropdown = $el.closest(".dropdown-menu");
        self.dropdownFilter(self.itemValue ? filterValue[self.itemValue] : filterValue);
        $dropdown.hide();
    };
    self.clearFilter = function (value, event) {
        var $el = $(event.target),
            $dropdown = $el.closest(".dropdown-menu");
        self.dropdownFilter('');
        $dropdown.hide();
    };
    self.showDropdown = function (value, event) { //bootstrap's script won't work
        var $toggle = $(event.target).closest(".dropdown-toggle"),
            $dropdown = $toggle.siblings(".dropdown-menu"),
            dropDownTop = $toggle.offset().top + $toggle.outerHeight() - $(window).scrollTop();
        $dropdown.toggle();
        $dropdown.css("top", dropDownTop + "px");
        $dropdown.css("left", $toggle.offset().left + "px");
    };
    self.isItemSelected = function (item) {
        var tmpItem = self.itemValue ? item[self.itemValue] : item;
        return tmpItem === self.dropdownFilter();
    };
}
 
ko.components.register('component-kodropdown', {
    viewModel: KODropDownComponent,
    template: '<div class="dropdown">\
                <a href="#" class="dropdown-toggle dropdown-label" data-toggle="dropdown" data-bind="css: $component.dropdownLinkCss, attr: {title: $component.dropdownDetails}, click: $component.showDropdown">\
                    <div style="display: inline;" data-bind="text: $component.dropdownLabel"></div>\
                    <span style="display: none;" data-bind="visible: $component.dropdownFilter()" class="glyphicon glyphicon-filter"></span>\
                    <span class="caret" style="margin-top: 0px; margin-left: 0px;"></span>\
                </a>\
                <ul class="dropdown-menu scrollable-menu" style="color: #000;">\
                    <li class="dropdown-header" data-bind="text: $component.dropdownHeader"></li>\
                    <li><a href="#" data-bind="click: $component.clearFilter">Clear Filter</a></li>\
                    <li class="divider"></li>\
                    <!-- ko foreach: { data: $component.dropdownItems, as: \'dropdownItem\' } -->\
                    <li>\
                        <a href="#" data-bind="click: $component.setDropdownFilter, css: { \'bg-primary\': $component.isItemSelected(dropdownItem) }">\
                            <span data-bind="text: $parent.itemText ? dropdownItem[$parent.itemText] : dropdownItem "> </span>\
                        </a>\
                    </li>\
                    <!-- /ko -->\
                </ul>\
            </div>'
});