var sSchedule_multiSelectSearchBoxUtility = function (searchTextField, searchValueField, includeSearchOptions, searchListDataSource, ascendingSortCallback, descendingSortCallback, filterButtonCallback, isFilterMenu, shuffleDataCallback) {

    /*--- START : Customized Search Filter Box  -------------------------*/

    // shorten references to variables. this is better for uglification
    var ui = kendo.ui,
		Widget = ui.Widget;

    var multiSelectSearchBox = Widget.extend({
        // method called when a new kendoMultiSelectSearchBox widget is created
        init: function (element, options) {
            var that = this,
				autoComplete,
				listView,
				filterPanel,
				sortingPanel;

            // base call to initialize widget
            Widget.fn.init.call(that, element, options);

            sortingPanel = $("<div><a class='ascendingSortButton'  style='margin-right: 30px; text-decoration: none;' href='javascript:void(0)'><i class='fa fa-long-arrow-down'></i> Sort A-Z</a>&nbsp;&nbsp;<a class='shuffleDataButton' href='javascript:void(0)' style='text-decoration: none;' ><i class='fa fa-random'></i> Shuffle Data</a><br/><a class='descendingSortButton' href='javascript:void(0)' style='text-decoration: none;'><i class='fa fa-long-arrow-up'></i> Sort Z-A </a></div>");

            if (includeSearchOptions == true) {
                that.element.append(sortingPanel);
            }
            // append the element that will be the auto complete
            autoComplete = $("<input style='width: 100%; font-size: 15px;margin-top: 10px;' class='k-input searchTextBox k-textbox'/>");

            that.element.append(autoComplete);

            //append the element that will be command panel
            filterPanel = $("<div style='margin-top: 10px;'><a class='filterButton' style='margin-right: 5px; text-decoration: none;' href='javascript:void(0)'></i> Filter</a>&nbsp;<a class='selectAllButton' style='margin-right: 5px; text-decoration: none;' href='javascript:void(0)'>Select All</a>&nbsp;<a class='clearButton' style='margin-right: 5px; text-decoration: none;' href='javascript:void(0)'>Clear</a></div>");

            // append the element that will be the list view
            listView = $("<div  id='searchListDiv' class='bsbSkin searchListSchedules'></div>");

            if (includeSearchOptions == true) {
                that.element.append(filterPanel);
            }


            if (isFilterMenu == false) {
                listView.css("display", "none");
                $(".searchTextBox").focusin(function (e) {
                    //here make the div visible
                    listView.css("display", "");
                });
            }
            that.element.append(listView);



            $(".searchTextBox").keyup(function (e) {
                searchListDataSource.filter([]);
                var searchValue = $(e.currentTarget).val();
                //here based on the auto complete value, change the filter options.
                var filterOptions = { logic: "or", filters: [] };
                filterOptions.filters.push({ field: searchTextField, operator: "contains", value: searchValue });
                searchListDataSource.filter(filterOptions);

            });

            /*START : SORT PANEL */
            $(".ascendingSortButton").click(function (e) {
                e.preventDefault();
                if (ascendingSortCallback)
                    ascendingSortCallback();
                $(".k-grid-filter").click();
            });

            $(".descendingSortButton").click(function (e) {
                e.preventDefault();
                if (descendingSortCallback)
                    descendingSortCallback();
                $(".k-grid-filter").click();
            });

            $(".shuffleDataButton").click(function (e) {
                e.preventDefault();
                if (shuffleDataCallback)
                    shuffleDataCallback();
                $(".k-grid-filter").click();
            });


            /*END : SORT PANEL */


            /* START : Fiilter and Other Buttons Click  */

            $(".filterButton").click(function (e) {
                e.preventDefault();
                var selectedSearchIds = [];

                //get the checked items first here.
                $(".k-listview input:checked").each(function () {
                    selectedSearchIds.push(parseInt(this.value));
                });

                //here check the condition if "Select All" with Search Text Given or not.
                //"Select All" with "Search Text"
                var filterTextValue = $(".searchTextBox").val();
                filterButtonCallback(filterTextValue, selectedSearchIds);
                $(".k-grid-filter").click();
            });

            $(".selectAllButton").click(function (e) {
                e.preventDefault();
                //get the checked items first here.
                $(".k-listview input").each(function () {
                    this.checked = true;
                });
                return;
            });

            $(".clearButton").click(function (e) {
                e.preventDefault();
                //that.autoComplete.value("");
                $(".searchTextBox").val("");
                searchListDataSource.filter([]);
                return;
            });

            /* END Fiilter and Other Buttons Click  */

            // results listview
            that.listView = listView.kendoListView({
                // autoBind: false,
                dataSource: searchListDataSource,
                template: that.options.template
            }).data("kendoListView");

            // remove the border from the listview
            listView.css("border-width", "0");

        },

        // options that are avaiable to the user when initializing the widget
        options: {
            name: "MultiSelectSearchBox",
            template: "<input type='checkbox' name='{0}' value='#:" + searchValueField + "#'/>&nbsp;<label for='{0}'>#: {2} #</label>",
            placeholder: "Search"
        },

        getSelectedSearchItems: function () {
            var selectedSearchIds = [];
            //get the checked items first here.
            $(".k-listview input:checked").each(function () {
                selectedSearchIds.push(parseInt(this.value));
            });

            return selectedSearchIds;
        },
        _search: function (e) {
            var that = this;
            var selectedSearchIds = [];
            var searchText = $(".searchTextBox").val();

            //get the checked items first here.
            $(".k-listview input:checked").each(function () {
                selectedSearchIds.push(this.value);
            });

            var eventLen = selectedSearchIds.length;
            if (searchText.length > 0) {
                //here based on the auto complete value, change the filter options.
                var filterOptions = { logic: "or", filters: [] };
                filterOptions.filters.push({ field: searchTextField, operator: "contains", value: searchText });
                searchListDataSource.filter(filterOptions);
            } else {
                searchListDataSource.filter([]);
            }

            var eventView = searchListDataSource.view();
            var len = eventView.length;

            //here if this list contains the selected  event Ids then, make it checked 
            for (var i = 0; i < len; i++) {
                var item = eventView[i];
                for (var j = 0; j < eventLen; j++) {
                    var itemId = item.get(searchValueField);
                    if (itemId == selectedSearchIds[j]) {
                        var eventElmId = itemId;
                        document.getElementById(eventElmId).checked = true;
                    }
                }
            }
        }
    });

    ui.plugin(multiSelectSearchBox);

    return multiSelectSearchBox;

};

/*--- END : Customized Search Filter Box  -------------------------*/