JQueryGrid is a javascript component backed by a DataSource. Developers can create powerful good looking custom grid components similar to one below by writting some simple javascript code to render the data. The rest is handled by the platform.

JQueryGrid

Steps to create the above Grid

Create an item with type "JQueryGrid" as shown in the below screenshot

JQuery Grid Properties

Enter the following code in the Java Script property
{
    init: function(jsStoreController, id) {
		t$.getInstance('dashc').initGrid(jsStoreController, id);
    },
    storeDataChanged: function(result, offset, totallength) {
        t$.getInstance('dashc').storeDataChanged(result, offset, totallength);
    },
    storeAdd: function(rows, index, offset, totallength) {
        t$.getInstance('dashc').storeAdd(rows, index, offset, totallength);
    },
    storeClear: function() {
        t$.getInstance('dashc').storeClear();
    }
}
Enter the following code in the page level Java Script property
{
    initGrid: function (jsStoreController, id) {
        this.id = id;
        this.jsStoreController = jsStoreController;
        $('head').append('<style>' + '.del {text-decoration: line-through;}' + '.ins {text-decoration: underline;}' + '</style>');

        this.userid = t$.getNumber('session.userid');
        var comments = $('<div class="xc-comments"></div>');
        var content = $('<div id="commentContent" style="position:relative;" class="xc-comments-content"></div>');
        this.more = $('<a style="float: right;font-weight: bold; margin: 20px; font-size:120%;" class="xc-commens-more" href="#">More ↓</a>');
        comments.append(content).append(this.more);
        this.content = content;

        content.on("click", "div.comment", function () {
            if ($(this).hasClass('selected')) {
                return false;
            }
            $this = $(this);
            var index = $this.index();
            $this.parent().find('.selected').removeClass('selected');
            $this.addClass('selected');
            jsStoreController.setCurrentRow(index);
        });
        $('#' + id + ' .x-panel-body').append(comments);
        content.on("click", "a.tasklink", function () {
            t$.goToPage("$p$detailsoftask&_wcTasksV=[taskid_=_" + $(this).attr('taskid') + "]&frompage=newpage&retainStores=Y");
            return false;
        });

        content.on("click", "a.unsubscribe", function () {
            var model = {
                taskid: parseFloat($(this).attr('taskid')),
                userid: t$.getNumber('session.userid')
            };
            var link = $(this);
            link.hide();
            t$.invokeDataSource('DummyTaskStream', model, {
                onSuccess: function (result) {
                    var tasks = $('#commentContent .t' + link.attr('taskid'));
                    // reduce the offset to reflect the removed rows.
                    var tasksArray = $.makeArray(tasks);
                    var len = tasksArray.length;
                    $.each(tasksArray, function (index, task) {
                        var rownum = $(task).index() - index;
                        t$.clearRow('StreamDashBoard', 'newIssueBtn', rownum);
                        $(task).delay(300 * index).slideUp(400, function () {
                            $(this).remove();
                            if (len == index + 1) {
                                // in last task
                                if (me.content.children('.selected').length == 0) {
                                    if (me.content.children().length > 0) {
                                        me.content.children().first().trigger('click');
                                    } else {
                                        // empty... hence refresh
                                        t$.setOffset('StreamDashBoard', 'newIssueBtn', 0);
                                        t$.invokeQuery('StreamDashBoard');
                                    }
                                } else {
                                    // need a way to update the status bar with the new record number
                                }
                            }
                        });
                    });
                    var total = tasksArray.length;
                    var offset = t$.getOffset('StreamDashBoard', 'newIssueBtn');
                    var totalLength = t$.getTotalLength('StreamDashBoard', 'newIssueBtn');
                    t$.setOffset('StreamDashBoard', 'newIssueBtn', offset - total);
                    t$.setTotalLength('StreamDashBoard', 'newIssueBtn', totalLength - total);
                },
                onFailure: function (result) {
                    link.show();
                }
            });
            return false;
        });
        content.on("mouseenter", "div.comment", function () {
            $(this).addClass("hover");
        });

        content.on("mouseleave", "div.comment", function () {
            $(this).removeClass("hover");
        });

        this.more.bind('click', function () {
            jsStoreController.next();
            return false;
        });
    },
    formatRow: function (row, index) {
        if (row.comments) {
            return '<div id="_t' + index + '" class="comment t' + row.taskid + (index == 0 ? " selected" : "") + '"><div class="icon"><img src="resource3/pp/' + row.userid + '.png?s=20">' + '</div><div class="content">' + '<div class="timestamp right">' + row.updatedate + '</div>' + '<div class="hover-icons" style="display: none; float: right;">' + ((row.userid != this.userid) ? ' <a href="#" title="Unsubscribe" taskid="' + row.taskid + '" class="unsubscribe">' + t$.getIconHtml("balloon_minus") + '</a>' : '') + '</div>' + '<span class="user">' + row.sb + '</span><span class="text">' + ((row.comments) ? row.comments : '') + '</span></div></div>';
        } else {
            return '<div id="_t' + index + '" class="comment t' + row.taskid + (index == 0 ? " selected" : "") + '"><div class="icon">' + '<img src="resource3/pp/' + row.userid + '.png?s=20">' + '</div><div class="content">' + '<div class="timestamp right">' + row.updatedate + '</div>' + '<div class="hover-icons" style="display: none; float: right;">' + ((row.userid != this.userid) ? ' <a href="#" title="Unsubscribe" taskid="' + row.taskid + '" class="unsubscribe">' + t$.getIconHtml("balloon_minus") + '</a>' : '') + '</div>' + '<span class="user">' + row.sb + '</span></div></div>';
        }
    },
    storeDataChanged: function (result, offset, totallength) {
        this.storeAdd(result.data, 0, offset, totallength);
    },
    storeAdd: function (rows, index, offset, totallength) {
        var str = new Array();
        var len = rows.length;
        for (var i = 0; i < len; i++) {
            str.push(this.formatRow(rows[i], (i + offset)));
        }
        this.content.append(str.join(''));
        if (totallength > offset + len) {
            this.more.show();
        } else {
            this.more.hide();
        }
        this.slowScrollTo('#' + this.id + ' .x-panel-body', '#_t' + offset);
    },
    storeClear: function () {
        this.content.empty();
    },
    slowScrollTo: function (parent, id) {
        if ($(id) != null && $(id).position() != null) {
            $(parent).animate({
                scrollTop: $(id).position().top
            }, 'slow');
        }
    }
}

Location

101 California Street, Suite 2710
San Francisco, CA 94111


440 N. Wolfe Rd.
Sunnyvale, CA 94085


Office 11, 5th Floor, Building 9,
Mindspace IT Park
Hyderabad 500081

p: +1 (844) AT CloudIO (844-282-5683)
f: +1 (650) 300-5247 | e: sales@cloudio.io
© 2009, 2017 CloudIO Inc. | Terms of Use | Privacy Policy