Knockout JS filter functionality in index.cshtml file

I'm trying to write a dynamic code to use knockout across pages. For that I've a common.js file which has all the required functionality. But for filter functionality as it is different per page, I'm writing it in index.cshtml file. The code what I've written for filtering, if I put it in common.js, it works fine but it doesn't filter the data if I put it in index.cshtml file. I've created a JSFiddle for it, but for some reason it's not showing correctly. The link for the same is http://jsfiddle.net/maulikk2000/FGkKx/ . So, my question is what I'm doing wrong here. I'm putting just JS code here as index.cshtml code gets bit unreadable. Commented line at the bottom of index.cshtml in jsfiddle ( $.getJSON) is my real code.

function CreateGrid(gridId, itemObject, pageSize, initializeFilterByItems, dataItems) {

    var self = this;

    self.gridId = gridId;


    self.itemObjectArray = ko.observableArray(ko.utils.arrayMap(dataItems, function (data) {
        return new itemObject(data);

    }));

    self.pageSize = ko.observable(pageSize);
    self.pageIndex = ko.observable(1);
    self.prevPageIndex = ko.observable(1);

    self.selectedItem = ko.observable();
    self.itemForEditing = ko.observable();



    initializeFilterByItems(self.itemObjectArray);


    self.stringStartsWith = function (item, startsWith) {

        item = item || "";

        if (startsWith.length > item.length) return false;
        return item.substring(0, startsWith.length) === startsWith;

    };

    self.templateToUse = function (item) {

        var item1 = self.selectedItem();

        var template = item === item1 ? 'editTmpl' : 'itemsTmpl';
        return template;

    };

    self.pagedList = ko.computed(function () {

        var size = self.pageSize();
        var start = (self.pageIndex() - 1) * size;

        var itemsToReturn = this.filteredItems ? this.filteredItems : self.itemObjectArray;

        //return self.filteredItems.slice(start, start + size);
        return itemsToReturn.slice(start, start + size);

    });

    self.maxPageIndex = ko.computed(function () {
        return Math.ceil(self.itemObjectArray().length / self.pageSize());

    });

    self.totalItems = ko.computed(function () {
        return self.itemObjectArray().length;
    });

    self.previousPage = function () {
        if (self.pageIndex() > 1) {
            self.pageIndex(self.pageIndex() - 1);
            self.prevPageIndex(self.pageIndex());
        }
    };

    self.nextPage = function () {
        if (self.pageIndex() <= self.maxPageIndex()) {
            self.pageIndex(self.pageIndex() + 1);
            self.prevPageIndex(self.pageIndex());
        }
    };

    self.firstPage = function () {
        self.pageIndex(1);
        self.prevPageIndex(1);
    };

    self.lastPage = function () {
        self.pageIndex(self.maxPageIndex());
        self.prevPageIndex(self.maxPageIndex());
    };

    self.pageIndex.subscribe(function (item) {

        if (item) {

            var jumpToPage = parseInt(item);

            if (jumpToPage <= self.maxPageIndex()) {
                self.pageIndex(jumpToPage);
                self.prevPageIndex(jumpToPage);
            } else {

                self.pageIndex(self.prevPageIndex());

            }
        }

    });

    self.allPages = ko.computed(function () {

        var pages = [];
        for (var i = 1; i <= self.maxPageIndex(); i++) {
            pages.push({
                pageNumber: (i + 1)
            });
        }
        return pages;
    });

    self.moveToPage = function (index) {
        self.pageIndex(index);
    };

    self.selectItem = function (item) {
        self.selectedItem(item);
        self.itemForEditing(new itemObject(ko.toJS(item)));

    };

    self.acceptItem = function (item) {

        var validationError = ko.validation.group(item);
        var vlength = validationError().length;

        if (vlength == 0) {

            var selected = self.selectedItem(),
                edited = self.itemForEditing();

            var currentdate = new Date();
            var datetime = currentdate.getFullYear() + "-" + (currentdate.getMonth() + 1) + "-" + currentdate.getDate() + " " + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() + "." + currentdate.getMilliseconds();


            item.Date_Last_Updated(datetime);
            var id = selected.ContractorServiceId();

            ajaxUpdate(updateItemUrl + id, ko.toJSON(item), function () {

               edited.update(selected);

                self.selectedItem(null);
                self.itemForEditing(null);
            },

            function (errorText) {
                alert(errorText);
                selected.update(edited);
            });

        } else {

        }
    };

    self.revertItem = function (item) {
        var selected = self.selectedItem(),
            edited = ko.toJS(self.itemForEditing());
        selected.update(edited);

        self.selectedItem(null);
        self.itemForEditing(null);
    };

    self.remove = function (item) {
        if (confirm("Are you sure you want to delete " + " '" + item.ContractorServiceDescription() + "'??")) {

            var itemId = item.ContractorServiceId();

            ajaxDelete(deleteItemUrl + itemId, function () {
                self.itemObjectArray.remove(item);
            },

            function (errorMessage) {
                alert(errorMessage);
            });

        }

    };

    self.getAll = function () {

        self.itemObjectArray.removeAll();

        $.getJSON(readItemUrl, function (services) {

            $.each(services, function (index, service) {
                self.itemObjectArray.push(new itemObject(service));
           });

        });
    };

    self.add = function () {

        var data = {};
        data.ContractorServiceId = "enter new id here";
        data.ContractorServiceDescription = "enter new description here";
        var newItem = new itemObject(data);

        self.selectedItem(newItem);

        $("#contractorServiceDialog").dialog({

            width: 420,
            buttons: [{
                text: 'Save',
                    "class": 'commonButtonStyle',
                    "autofocus": this,
                click: function () {
                    var validationError = ko.validation.group(self.selectedItem());
                    var vlength = validationError().length;

                    if (vlength != 0) {

                    } else {

                        $(this).dialog("close");

                        var item = self.selectedItem();

                        ajaxAdd(addItemUrl, ko.toJSON(item), function () {
                            self.getAll();
                        },

                        function (errorText) {
                            alert(errorText);
                        });
                    }
                }
            }, {
                text: "Cancel",
                    "class": 'commonButtonStyle',
                click: function () {
                    self.itemObjectArray.remove(newItem); // We need to remove this otherwise it'll appear on the last page...
                    $(this).dialog("close");
                }
            }]


        });


    };

}

Answers


Need Your Help

GTKmm on Windows (porting) - sigc::mem_fun returning errors from VC++ Express 2010 about deducing template arguments

windows visual-c++ gtk gtkmm libsigc++

I am trying to port my GTKmm application developed in Linux into Windows. I have a treeview with multiple selections and I need to get those selections into an std::vector. The code I use (and that

Preserving timezones in Rails

ruby-on-rails datetime timezone

If I have a time string of the form "Wed, 22 Jun 2011 09:43:58 +0200" coming from a client, I wish to store it with the time zone preserved. This is important because it's not just the absolute UTC...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.