Knockout code called by action method in C# MVC Controller

knockout.js

var FilterViewModel = function (afterFilter)
{

    /*************************************************************
     * Task Group Filters                                       **
     ************************************************************/
    function TaskGroupFilters(data)
    {
        this.id = ko.observable(data.Id);
        this.name = ko.observable(data.Name);
        this.isChecked = ko.observable(data.IsChecked);
        this.taskSources = ko.observableArray([]);

        this.regionName = ko.observable(data.RegionName);

        this.displayName = ko.observable();

        if (data.RegionName == null || data.RegionName == "")
        {
            this.displayName(this.name());
        }
        else
        {
            this.displayName(this.name() + " - " + this.regionName());
        }

        // Task Sources
        if (data.TaskSources != null)
        {
            var mappedTaskSources = $.map(data.TaskSources, function (item)
            {
                return new TaskSourceFilters(item)
            });
            this.taskSources(mappedTaskSources);
        }
    }

    /*************************************************************
     * Task Source Filters                                      **
     ************************************************************/
    function TaskSourceFilters(data)
    {
        this.id = ko.observable(data.Id);
        this.name = ko.observable(data.Name);
        this.isChecked = ko.observable(data.IsChecked);
    }

    /*************************************************************
     * User Filters                                             **
     ************************************************************/
    function UserFilters(data)
    {
        this.id = data.Id;
        this.text = data.DisplayName;
        this.isChecked = data.IsChecked;
    }

    /*************************************************************
     * Custom Filters                                             **
     ************************************************************/
    function CustomFilters(data) {
        this.id = ko.observable(data.Id);
        this.name = ko.observable(data.DisplayName);
        this.isChecked = ko.observable(data.IsChecked);
    }

    /*************************************************************
     * Status Filters                                           **
     ************************************************************/
    function StatusFilters(data)
    {
        this.id = ko.observable(data.Id);
        this.name = ko.observable(data.Status);
        this.color = ko.observable(data.Color);
        this.isChecked = ko.observable(data.IsChecked);
    }

	//Vaibhav - Support for Sub status
	/*************************************************************
     * Sub Status Filters                                       **
     ************************************************************/

    function SubStatusFilters(id, text)
    {
    	this.id = id;
    	this.text = text;
    }

    /*************************************************************
     * Priority Filters                                         **
     ************************************************************/
    function PriorityFilters(data)
    {
        this.id = ko.observable(data.Id);
        this.name = ko.observable(data.Priority);
        this.rank = ko.observable(data.Rank);
        this.isChecked = ko.observable(data.IsChecked);
    }

    /*************************************************************
     * View Model                                               **
     * -> Handles the KO ViewModel and properties/events        **
     ************************************************************/
    function ViewModel()
    {
        // Data
        var self = this;
        var runOnStartup = true;

        self.AfterFilterSetFunction = afterFilter;

        // Filters
        self.taskGroupFilters = ko.observableArray();
        self.selUserFilters = ko.observableArray();
        self.selSupFilters = ko.observableArray();
        self.statusFilters = ko.observableArray();
        self.subStatusFilters = ko.observableArray();
        self.priorityFilters = ko.observableArray();
        self.DateFields = ko.observableArray();

        self.isSourceFilterSet = ko.observable(false);
        self.isUserFilterSet = ko.observable(false);
        self.isSupervisorFilterSet = ko.observable(false);
        self.isStatusFilterSet = ko.observable(false);
        self.isSubStatusFilterSet = ko.observable(false);
        self.isPriorityFilterSet = ko.observable(false);


        self.rangeStartDate = ko.observable();
        self.rangeStartTime = ko.observable();
        self.rangeEndDate = ko.observable();
        self.rangeEndTime = ko.observable();
        self.isDateFilterActive = ko.observable(false);
        self.showDateFilterActive = ko.observable(false);

        self.savedFilters = ko.observableArray();
        self.selectedFilter = ko.observable();
        self.newFilterName = ko.observable();

        self.isFilterSelected = ko.computed(function() {
            return self.selectedFilter() != null && self.selectedFilter() != undefined;
        });

        var fillAndRunAfterAction = function() {
            fillFilter();

            self.AfterFilterSetFunction();
        }

        self.loadSelectedFilter = function(parameters) {
            $.post("/filter/LoadSavedFilter",
                { id: self.selectedFilter() },
                function (data, textStatus, jqXHR) {
                    fillAndRunAfterAction();
                });
        }

        self.removeSelectedFilter = function (parameters) {
            $.post("/filter/RemoveSavedFilter",
                { id: self.selectedFilter() },
                function (data, textStatus, jqXHR) {
                    fillAndRunAfterAction();

                });
        }

        self.saveCurrentFilter = function (parameters) {
            if (!self.newFilterName() || self.newFilterName().length < 3) {
                toastr["warning"]("Filter name must be longer than 3 characters");
                return;
            }

            $.post("/filter/savefilter",
                { name: self.newFilterName() },
                function(data, textStatus, jqXHR) {
                    fillAndRunAfterAction();
                    self.newFilterName(undefined);
                });
        }

        /*************************************************************
         * Load                                                     **
         * -> Call server returning data and binding to KO          **
         * -> observables                                           **
         ************************************************************/
        function load()
        {
            //$(document).ready(function ()
          //  {
                //$('#fromDatePicker').datepicker({
                //    changeMonth: true,
                //    startDate: "1/1/2010",
                //    numberOfMonths: 1,
                //    prevText: '<i class="fa fa-chevron-left"></i>',
                //    nextText: '<i class="fa fa-chevron-right"></i>',
                //    minDate: self.rangeStartDate()
                //});
                //$("#toDatePicker").datepicker({
                //    changeMonth: true,
                //    startDate: "1/1/2010",
                //    numberOfMonths: 1,
                //    prevText: '<i class="fa fa-chevron-left"></i>',
                //    nextText: '<i class="fa fa-chevron-right"></i>',
                //    maxDate: self.rangeEndDate()
                //});

                //$('#fromTimePicker').timepicker();

                //$('#fromTimePicker').timepicker({
                //    controlType: 'select',
                //    prevText: '<i class="fa fa-chevron-left"></i>',
                //    nextText: '<i class="fa fa-chevron-right"></i>',
                //    timeFormat: 'h:mm tt',
                //    parse: 'loose',
                //    defaultTime: self.rangeStartTime()
                //});
                //$('#toTimePicker').timepicker({
                //    controlType: 'select',
                //    timeFormat: 'h:mm tt',
                //    prevText: '<i class="fa fa-chevron-left"></i>',
                //    nextText: '<i class="fa fa-chevron-right"></i>',
                //    maxDate: self.rangeEndTime(),
                //    parse:'loose',
                //    defaultTime: self.rangeEndTime()
                //});

                //$("#fromTimePicker").timepicker();
                //$("#toTimePicker").timepicker();

                $("#filterDiv").on("shown.bs.collapse", function ()
                {
                    $("#divUpperClear").hide();
                    $("#aCollapseFilter i").removeClass("fa-plus").addClass("fa-minus");
                });

                $("#filterDiv").on("hidden.bs.collapse", function ()
                {
                    $("#divUpperClear").show();
                    $("#aCollapseFilter i").removeClass("fa-minus").addClass("fa-plus");
                });


   //         });
        }

        self.RefreshFilters  = function ()
        {
            fillFilter();
        }

        function fillFilter()
        {
            // Get Filters
            $.post("/Filter/Get",
                function (data)
                {
                    // Task Group Filters
                    var mappedTaskGroups = $.map(data.filter.TaskGroups, function (item) { return new TaskGroupFilters(item); });
                    self.taskGroupFilters(mappedTaskGroups);

                    // User Filters
                    if (data.filter.Users.length > 0)
                    {
                        $("#selUserFilter").val(JSON.stringify(data.filter.Users));
                    }
                    else
                    {
                        $("#selUserFilter").val('');
                    }

                    // User Filters
                    if (data.filter.Supervisors.length > 0)
                    {
                        $("#selSupFilter").val(JSON.stringify(data.filter.Supervisors));
                    }
                    else
                    {
                        $("#selSupFilter").val('');
                    }

                    // Status Filters
                    var mappedStatusFilters = $.map(data.filter.Status, function (item) { return new StatusFilters(item); });
                    self.statusFilters(mappedStatusFilters);

                	//Sub Status filter
                    if (data.filter.SubStatus.length > 0)
                    {
                    	$('#selSubStatusFilter').val(JSON.stringify(data.filter.SubStatus));
                    }
                    else
                    {
                    	$('#selSubStatusFilter').val('');
                    }

                    // Priority Filters
                    var mappedPriorityFilters = $.map(data.filter.Priorities, function (item) { return new PriorityFilters(item); });
                    self.priorityFilters(mappedPriorityFilters);

                    var mappedCustomFilters = $.map(data.SavedFilters, function (item) { return new CustomFilters(item); });
                    self.savedFilters(mappedCustomFilters);

                    self.DateFields(data.filter.DateFields);

                    // Determine Filter Colors
                    self.isSourceFilterSet(data.filter.IsTaskSourceFiltered);
                    self.isUserFilterSet(data.filter.IsUserFiltered);
                    self.isSupervisorFilterSet(data.filter.IsSupervisorFiltered);
                    self.isPriorityFilterSet(data.filter.IsPriorityFiltered);
                    self.isStatusFilterSet(data.filter.IsStatusFiltered);
                    self.isSubStatusFilterSet(data.filter.IsSubStatusFiltered);
                    //alert(self.isSubStatusFilterSet());
                    self.isDateFilterActive(data.filter.IsDateFilterActive);
                    self.showDateFilterActive(data.filter.IsDateFilterActive);

                    self.rangeStartDate(data.filter.RangeStartDate);
                    self.rangeStartTime(data.filter.RangeStartTime);
                    self.rangeEndDate(data.filter.RangeEndDate);
                    self.rangeEndTime(data.filter.RangeEndTime);

                    load();
                    if (self.showDateFilterActive() === true)
                    {
                        if (!$("#divDateTimeFilter").hasClass("in"))
                            $("#divDateTimeFilter").collapse("toggle");
                    }
                    else
                    {
                        if ($("#divDateTimeFilter").hasClass("in"))
                            $("#divDateTimeFilter").collapse("toggle");
                    }

                    // Set range filters


                    if (data.filter.SelectedDateField != "")
                    {
                        $("#selDateFieldFilter").val(data.filter.SelectedDateField);
                    }
                    else
                    {
                        $("#selDateFieldFilter").val("Last Modified");
                    }

                    $("#selSourceFilter, #selStatusFilter,#selPriorityFilter").select2("destroy");

                    $("#selSourceFilter, #selStatusFilter,#selPriorityFilter").each(function ()
                    {
                        var $this = $(this),
                            width = $this.attr("data-select-width") || "100%";
                        //, _showSearchInput = $this.attr('data-select-search') === 'true';
                        $this.select2({
                            //showSearchInput : _showSearchInput,
                            allowClear: true,
                            width: width
                        });

                        //clear memory reference
                        $this = null;
                    });

                    self.selectedFilter(null);

                    $("#selSavedFilters").select2("destroy");

                    //$("#selSavedFilters")
                    //    .select2({
                    //        minimumResultsForSearch: -1,
                    //        width: "100%",
                    //        allowClear: true
                    //    })
                    //    .on("change",
                    //        function (e) {
                    //            if (e.val > 0) {
                    //                self.selectedFilter(e.val);
                    //            } else {
                    //                self.selectedFilter(undefined);
                    //            }
                    //        });

                  //  $("#selSupFilter,#selUserFilter").select2("destroy");
                        initAjaxSelect2("selUserFilter", "/filter/GetUserList")
                        initAjaxSelect2("selSupFilter", "/filter/GetSupervisorList")
                        initAjaxSelect2SubStatuses("selSubStatusFilter", "/filter/GetTaskSubStatuses");
                

                    $(".select2-hidden-accessible").remove();
                    if ($("#filterDiv").hasClass("in"))
                    {
                        $("#aCollapseFilter i").removeClass("fa-plus").addClass("fa-minus");

                        $("#divUpperClear").hide();
                    }
                    else
                    {
                        $("#aCollapseFilter i").removeClass("fa-minus").addClass("fa-plus");

                        $("#divUpperClear").show();
                    }
                });
        }

        function initAjaxSelect2SubStatuses(id, url) {
        	//var userData = self.selUserFilters();
        	$("#" + id).select2({
        		multiple: true,
        		minimumInputLength: 3,
        		allowClear: true,
        		cache: true,
        		closeOnSelect: false,
        		ajax: {
        			url: url,
        			dataType: "json",
        			delay: 250,
        			cache: true,
        			type: "POST",
        			data: function (params, page) {
        				var query = {
        					term: params, // search term
        					page: page
        				};

        				return query;
        			},
        			results: function (data, page) {
        				// parse the results into the format expected by Select2
        				// since we are using custom formatting functions we do not need to
        				// alter the remote JSON data, except to indicate that infinite
        				// scrolling can be used
        				page = page || 1;
						/*
        				var options = [];
        				$.each(data, function (i, val) {
        					options.push({ id: val, text: val });
        				});
						*/
        				return {
        					results: data.items,
        					pagination: {
        						more: (page * 30) < data.count
        					}
        				};
        			},
        		},
        		initSelection: function (element, callback) {
        			if (element != null && element[0] != null &&
                        element != undefined && element[0] != undefined) {
        				var selSubStatus = $.map(JSON.parse(element[0].value), function (item) {
        					return new SubStatusFilters(item, item);
        				});

        				callback(selSubStatus);
        			}
        		}
        	});
        }

        function initAjaxSelect2(id, url)
        {
            var userData = self.selUserFilters();
            $("#"+id).select2({
                multiple: true,
                minimumInputLength: 3,
                allowClear: true,
                cache: true,
                closeOnSelect: false,
                ajax: {
                    url: url,
                    dataType: "json",
                    delay: 250,
                    cache: true,
                    type: "POST",
                    data: function (params, page)
                    {
                        var query = {
                            term: params, // search term
                            page: page
                        };

                        return query;
                    },
                    results: function (data, page)
                    {
                        // parse the results into the format expected by Select2
                        // since we are using custom formatting functions we do not need to
                        // alter the remote JSON data, except to indicate that infinite
                        // scrolling can be used
                        page = page || 1;

                        return {
                            results: data.items,
                            pagination: {
                                more: (page * 30) < data.count
                            }
                        };
                    },
                },
                initSelection: function (element, callback, userData)
                {
                    if (element != null && element[0] != null &&
                        element != undefined && element[0] != undefined)
                    {
                        /*
                        var val = element[0].value;

                        val = val.slice(val.indexOf("["), val.indexOf("]") + 1);

                        element[0].value = val;
                        */
                        var selUser = $.map(JSON.parse(element[0].value), function (item)
                        {
                            return new UserFilters(item);
                        });

                        callback(selUser);
                    }
                }
            });
        }

        // Initial load of list
        fillFilter();

        self.filter = function (filter)
        {
            if (filter)
            {
                // Show Filter Row
                $("#trFilter").removeClass("hidden");
                $("#btnShowFilter").removeClass("show").addClass("hidden");
                $("#btnHideFilter").removeClass("hidden").addClass("show");
            } else
            {
                // Hide Filter Row
                $("#trFilter").addClass("hidden");
                $("#btnShowFilter").removeClass("hidden").addClass("show");
                $("#btnHideFilter").removeClass("show").addClass("hidden");
            }
        };

        var getFilterVM = function() {
            // Get all Task Sources Selected
            var taskSourceFilterIds = [];
            taskSourceFilterIds = $("#selSourceFilter").select2("val");

            // Get all User Ids Selected
            /*
            var userFilterIds = [];

            var val = $("#selUserFilter").val();
            if (val != "") {
                val = val.slice(val.indexOf("]") + 1);

                if (val.indexOf(",") == 0)
                    val = val.slice(1);

                userFilterIds = val.split(",");
                $("#selUserFilter").val("");
            }
            */

            //Get all user ids selected
            var userFilterOjbs = $('#selUserFilter').select2("data");
            var userFilterIds = [];
            $.each(userFilterOjbs, function (i, obj) {
                userFilterIds.push(obj.id);
            });

            // Get all Status Ids Selected
            var statusFilterIds = [];
            statusFilterIds = $("#selStatusFilter").select2("val");

        	//Get all sub statuses selected
            var subStatusesObjs = $('#selSubStatusFilter').select2("data");
            var subStatuses = [];
            $.each(subStatusesObjs, function (i, obj) {
            	subStatuses.push(obj.text);
            });

            // Get all Priority Ids Selected
            var priorityFilterIds = [];
            priorityFilterIds = $("#selPriorityFilter").select2("val");

            var dateField = $("#selDateFieldFilter").val();

            // Get Start Date
            var rangeStart = self.rangeStartDate();//$("#fromDatePicker").val();// + " " + $("#fromTimePicker").val();
            var rangeEnd = self.rangeEndDate();//("#toDatePicker").val();// + " " + $("#toTimePicker").val();
            var isDateFilterActive = self.showDateFilterActive();

            // Get all supervisor Ids Selected
            /*
            var supservisorFilterIds = [];
            val = $("#selSupFilter").val();
            if (val != "") {
                val = val.slice(val.indexOf("]") + 1);

                if (val.indexOf(",") == 0)
                    val = val.slice(1);

                supservisorFilterIds = val.split(",");
                $("#selSupFilter").val("");
            }
            */

            var supervisorFilterOjbs = $('#selSupFilter').select2("data");
            var supervisorFilterIds = [];
            $.each(supervisorFilterOjbs, function (i, obj) {
                supervisorFilterIds.push(obj.id);
            });

            return {
                taskSourceIds: taskSourceFilterIds,
                userIds: userFilterIds,
                statusIds: statusFilterIds,
				subStatuses : subStatuses,
                priorityIds: priorityFilterIds,
                rangeStartDate: rangeStart,
                rangeEndDate: rangeEnd,
                includeDate: isDateFilterActive,
                supervisorIds: supervisorFilterIds,
                dateField: dateField
            }
        }

        /*************************************************************
         * Apply filters                                            **
         ************************************************************/
        self.applyFilter = function (saveFilterValues)
        {

            //if no value was passed in for saveFilterValues parameter, set saveFilterValues to false
            if (arguments.length === 0 || saveFilterValues === false)
            {
                saveFilterValues = false;
            }

            var filter = getFilterVM();

            // Filter Task List
            $.post("/Filter/Set",
                {
                    filter: filter
                },
                function success(data, textStatus, jqXHR)
                {
                    // Rebind to table
                    fillAndRunAfterAction();

                });

        };

        self.clearFilter = function ()
        {
            // Uncheck all check boxes
            $("#selSourceFilter").select2("val", "");
            //$("#selUserFilter").select2("val", "");
            $("#selStatusFilter").select2("val", "");
            $("#selUserFilter").val(null);
            $('#selSubStatusFilter').val(null);
            $("#selPriorityFilter").select2("val", "");
            //$("#selSupFilter").select2("val", "");
            $("#selSupFilter").val(null);
            $("#selDateFieldFilter").val("Last Modified");

            self.selectedFilter(null);
            // Determine Filter Colors
            //self.isSourceFilterSet(false);
            //self.isUserFilterSet(false);
            //self.isStatusFilterSet(false);
            //self.isPriorityFilterSet(false);

            // Clear Filter
            $.post("/filter/ClearFilter",
                function success(data, textStatus, jqXHR)
                {
                    // Rebind to table
                    fillAndRunAfterAction();

                });
        };
    }

    if (document.getElementById("TaskFilters"))
    {
        var vm = new ViewModel();
        ko.applyBindings(vm, document.getElementById("TaskFilters"));
        return vm;
    }

    
};