Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move footer into it's own template so that it can be overridden. #226

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 38 additions & 3 deletions build/KoGrid.debug.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
* koGrid JavaScript Library
* Authors: https://github.com/ericmbarnard/koGrid/blob/master/README.md
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
* Compiled At: 01/11/2013 15:58:36
* Compiled At: 03/29/2013 14:29:44
***********************************************/

(function (window) {
@@ -198,7 +198,7 @@ $.extend(window.kg.utils, {
/***********************************************
* FILE: ..\src\templates\gridTemplate.html
***********************************************/
window.kg.defaultGridTemplate = function(){ return '<div data-bind="css: {\'ui-widget\': jqueryUITheme, \'kgNoSelect\' : disableTextSelection}"><div class="kgTopPanel" data-bind="css: {\'ui-widget-header\':jqueryUITheme, \'ui-corner-top\': jqueryUITheme}, style: $data.topPanelStyle"><div class="kgGroupPanel" data-bind="visible: $data.showGroupPanel, style: headerStyle"><div class="kgGroupPanelDescription" data-bind="visible: configGroups().length == 0">Drag a column header here and drop it to group by that column</div><ul data-bind="visible: configGroups().length > 0, foreach: configGroups" class="kgGroupList"><li class="kgGroupItem"><span class="kgGroupElement"><div class="kgGroupName"><span data-bind="text: displayName"></span><span data-bind="click: function(data) { $root.removeGroup($index()) }" class="kgRemoveGroup">x</span></div><span data-bind="visible: $index() < ($root.configGroups().length - 1)" class="kgGroupArrow"></span></span></li></ul></div><div class="kgHeaderContainer" data-bind="style: headerStyle"><div class="kgHeaderScroller" data-bind="style: headerScrollerStyle, kgHeaderRow: $data" ></div></div><div class="kgHeaderButton" data-bind="visible: ($data.showColumnMenu || $data.showFilter), click: toggleShowMenu"><div class="kgHeaderButtonArrow"></div></div><div data-bind="visible: showMenu" class="kgColMenu"><div data-bind="visible: showFilter"><input placeholder="Seach Field:Value" type="text" data-bind="value: filterText, valueUpdate: \'afterkeydown\'"/></div><div data-bind="visible: showColumnMenu"><span class="kgMenuText">Choose Columns:</span><ul class="kgColList" data-bind="foreach: nonAggColumns"><li class="kgColListItem"><label style="position: relative;"><input type="checkbox" class="kgColListCheckbox" data-bind="checked: visible"/><span data-bind="text: displayName, click: toggleVisible"></span><a title="Group By" data-bind="attr: {\'class\': groupedByClass }, visible: (field != \'\u2714\'), click: $parent.groupBy"></a><span class="kgGroupingNumber" data-bind="visible: groupIndex() > 0, text: groupIndex"></span></label></li></ul></div></div></div><div class="kgViewport" data-bind="css: {\'ui-widget-content\': jqueryUITheme}, style: viewportStyle"><div class="kgCanvas" data-bind="style: canvasStyle"><div data-bind="foreach: renderedRows" style="position: absolute;"><div data-bind="style: { \'top\': offsetTop, \'height\': $parent.rowHeight + \'px\' }, click: toggleSelected, css: {\'selected\': selected, \'even\': isEven , \'odd\': isOdd, \'ui-state-default\': $parent.jqueryUITheme && isOdd, \'ui-state-active\':$parent.jqueryUITheme && isEven}, kgRow: $data" class="kgRow"></div></div></div></div><div class="kgFooterPanel" data-bind="css: {\'ui-widget-content\': jqueryUITheme, \'ui-corner-bottom\': jqueryUITheme}, style: footerStyle"><div class="kgTotalSelectContainer" data-bind="visible: footerVisible"><div class="kgFooterTotalItems" data-bind="css: {\'kgNoMultiSelect\': !multiSelect}" ><span class="kgLabel">Total Items: <span data-bind="text: maxRowsDisplay"></span></span><span data-bind="visible: filterText().length > 0" class="kgLabel">(Showing: <span data-bind="text: totalFilteredItemsLength"></span>)</span></div><div class="kgFooterSelectedItems" data-bind="visible: multiSelect"><span class="kgLabel">Selected Items: <span data-bind="text: selectedItemCount"></span></span></div></div><div class="kgPagerContainer" style="float: right; margin-top: 10px;" data-bind="visible: (footerVisible && enablePaging), css: {\'kgNoMultiSelect\': !multiSelect}"><div style="float:left; margin-right: 10px;" class="kgRowCountPicker"><span style="float: left; margin-top: 3px;" class="kgLabel">Page Size:</span><select style="float: left;height: 27px; width: 100px" data-bind="value: pagingOptions.pageSize, options: pagingOptions.pageSizes"></select></div><div style="float:left; margin-right: 10px; line-height:25px;" class="kgPagerControl" style="float: left; min-width: 135px;"><button class="kgPagerButton" data-bind="click: pageToFirst, disable: cantPageBackward()" title="First Page"><div class="kgPagerFirstTriangle"><div class="kgPagerFirstBar"></div></div></button><button class="kgPagerButton" data-bind="click: pageBackward, disable: cantPageBackward()" title="Previous Page"><div class="kgPagerFirstTriangle kgPagerPrevTriangle"></div></button><input class="kgPagerCurrent" type="number" style="width:50px; height: 24px; margin-top: 1px; padding: 0px 4px;" data-bind="value: pagingOptions.currentPage, valueUpdate: \'afterkeydown\'"/><button class="kgPagerButton" data-bind="click: pageForward, disable: cantPageForward()" title="Next Page"><div class="kgPagerLastTriangle kgPagerNextTriangle"></div></button><button class="kgPagerButton" data-bind="click: pageToLast, disable: cantPageForward()" title="Last Page"><div class="kgPagerLastTriangle"><div class="kgPagerLastBar"></div></div></button></div></div></div></div>';};
window.kg.defaultGridTemplate = function(){ return '<div data-bind="css: {\'ui-widget\': jqueryUITheme, \'kgNoSelect\' : disableTextSelection}"><div class="kgTopPanel" data-bind="css: {\'ui-widget-header\':jqueryUITheme, \'ui-corner-top\': jqueryUITheme}, style: $data.topPanelStyle"><div class="kgGroupPanel" data-bind="visible: $data.showGroupPanel, style: headerStyle"><div class="kgGroupPanelDescription" data-bind="visible: configGroups().length == 0">Drag a column header here and drop it to group by that column</div><ul data-bind="visible: configGroups().length > 0, foreach: configGroups" class="kgGroupList"><li class="kgGroupItem"><span class="kgGroupElement"><div class="kgGroupName"><span data-bind="text: displayName"></span><span data-bind="click: function(data) { $root.removeGroup($index()) }" class="kgRemoveGroup">x</span></div><span data-bind="visible: $index() < ($root.configGroups().length - 1)" class="kgGroupArrow"></span></span></li></ul></div><div class="kgHeaderContainer" data-bind="style: headerStyle"><div class="kgHeaderScroller" data-bind="style: headerScrollerStyle, kgHeaderRow: $data" ></div></div><div class="kgHeaderButton" data-bind="visible: ($data.showColumnMenu || $data.showFilter), click: toggleShowMenu"><div class="kgHeaderButtonArrow"></div></div><div data-bind="visible: showMenu" class="kgColMenu"><div data-bind="visible: showFilter"><input placeholder="Seach Field:Value" type="text" data-bind="value: filterText, valueUpdate: \'afterkeydown\'"/></div><div data-bind="visible: showColumnMenu"><span class="kgMenuText">Choose Columns:</span><ul class="kgColList" data-bind="foreach: nonAggColumns"><li class="kgColListItem"><label style="position: relative;"><input type="checkbox" class="kgColListCheckbox" data-bind="checked: visible"/><span data-bind="text: displayName, click: toggleVisible"></span><a title="Group By" data-bind="attr: {\'class\': groupedByClass }, visible: (field != \'\u2714\'), click: $parent.groupBy"></a><span class="kgGroupingNumber" data-bind="visible: groupIndex() > 0, text: groupIndex"></span></label></li></ul></div></div></div><div class="kgViewport" data-bind="css: {\'ui-widget-content\': jqueryUITheme}, style: viewportStyle"><div class="kgCanvas" data-bind="style: canvasStyle"><div data-bind="foreach: renderedRows" style="position: absolute;"><div data-bind="style: { \'top\': offsetTop, \'height\': $parent.rowHeight + \'px\' }, click: toggleSelected, css: {\'selected\': selected, \'even\': isEven , \'odd\': isOdd, \'ui-state-default\': $parent.jqueryUITheme && isOdd, \'ui-state-active\':$parent.jqueryUITheme && isEven}, kgRow: $data" class="kgRow"></div></div></div></div><div class="kgFooterPanel" data-bind="kgFooterRow: $data, style: footerStyle"></div></div>';};

/***********************************************
* FILE: ..\src\templates\rowTemplate.html
@@ -220,6 +220,11 @@ window.kg.aggregateTemplate = function(){ return '<div data-bind="click: toggleE
***********************************************/
window.kg.defaultHeaderRowTemplate = function(){ return '<div data-bind="foreach: visibleColumns"><div data-bind="kgHeaderCell: $data, attr: { \'class\': \'kgHeaderCell col\' + $index() }"></div></div>';};

/***********************************************
* FILE: ..\src\templates\footerRowTemplate.html
***********************************************/
window.kg.defaultFooterRowTemplate = function(){ return '<div data-bind="css: {\'ui-widget-content\': jqueryUITheme, \'ui-corner-bottom\': jqueryUITheme}"><div class="kgTotalSelectContainer" data-bind="visible: footerVisible"><div class="kgFooterTotalItems" data-bind="css: {\'kgNoMultiSelect\': !multiSelect}" ><span class="kgLabel">Total Items: <span data-bind="text: maxRowsDisplay"></span></span><span data-bind="visible: filterText().length > 0" class="kgLabel">(Showing: <span data-bind="text: totalFilteredItemsLength"></span>)</span></div><div class="kgFooterSelectedItems" data-bind="visible: multiSelect"><span class="kgLabel">Selected Items: <span data-bind="text: selectedItemCount"></span></span></div></div><div class="kgPagerContainer" style="float: right; margin-top: 10px;" data-bind="visible: (footerVisible && enablePaging), css: {\'kgNoMultiSelect\': !multiSelect}"><div style="float:left; margin-right: 10px;" class="kgRowCountPicker"><span style="float: left; margin-top: 3px;" class="kgLabel">Page Size:</span><select style="float: left;height: 27px; width: 100px" data-bind="value: pagingOptions.pageSize, options: pagingOptions.pageSizes"></select></div><div style="float:left; margin-right: 10px; line-height:25px;" class="kgPagerControl" style="float: left; min-width: 135px;"><button class="kgPagerButton" data-bind="click: pageToFirst, disable: cantPageBackward()" title="First Page"><div class="kgPagerFirstTriangle"><div class="kgPagerFirstBar"></div></div></button><button class="kgPagerButton" data-bind="click: pageBackward, disable: cantPageBackward()" title="Previous Page"><div class="kgPagerFirstTriangle kgPagerPrevTriangle"></div></button><input class="kgPagerCurrent" type="number" style="width:50px; height: 24px; margin-top: 1px; padding: 0px 4px;" data-bind="value: pagingOptions.currentPage, valueUpdate: \'afterkeydown\'"/><button class="kgPagerButton" data-bind="click: pageForward, disable: cantPageForward()" title="Next Page"><div class="kgPagerLastTriangle kgPagerNextTriangle"></div></button><button class="kgPagerButton" data-bind="click: pageToLast, disable: cantPageForward()" title="Last Page"><div class="kgPagerLastTriangle"><div class="kgPagerLastBar"></div></div></button></div></div></div>';};

/***********************************************
* FILE: ..\src\templates\headerCellTemplate.html
***********************************************/
@@ -356,6 +361,30 @@ ko.bindingHandlers['kgHeaderRow'] = (function () {
};
}());

/***********************************************
* FILE: ..\src\bindingHandlers\kg-footer-row.js
***********************************************/
ko.bindingHandlers['kgFooterRow'] = (function () {
return {
'init': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
bindingContext.$userViewModel = bindingContext.$data.$userViewModel;
var compile = function(html) {
var footer = $(html);
ko.applyBindings(bindingContext, footer[0]);
$(element).html(footer);
};
if (viewModel.footerRowTemplate.then) {
viewModel.footerRowTemplate.then(function (p) {
compile(p);
});
} else {
compile(viewModel.footerRowTemplate);
}
return { controlsDescendantBindings: true };
}
};
}());

/***********************************************
* FILE: ..\src\bindingHandlers\kg-header-cell.js
***********************************************/
@@ -484,6 +513,7 @@ window.kg.Column = function (config, grid) {
delay = 500,
clicks = 0,
timer = null;
self.config = config;
self.eventTaget = undefined;
self.width = colDef.width;
self.groupIndex = ko.observable(0);
@@ -1110,6 +1140,7 @@ window.kg.Grid = function (options) {
columnsChanged: function() { },
rowTemplate: undefined,
headerRowTemplate: undefined,
footerRowTemplate: undefined,
jqueryUITheme: false,
jqueryUIDraggable: false,
plugins: [],
@@ -1455,12 +1486,16 @@ window.kg.Grid = function (options) {
//Templates
self.rowTemplate = self.config.rowTemplate || window.kg.defaultRowTemplate();
self.headerRowTemplate = self.config.headerRowTemplate || window.kg.defaultHeaderRowTemplate();
self.footerRowTemplate = self.config.footerRowTemplate || window.kg.defaultFooterRowTemplate();
if (self.config.rowTemplate && !TEMPLATE_REGEXP.test(self.config.rowTemplate)) {
self.rowTemplate = window.kg.utils.getTemplatePromise(self.config.rowTemplate);
}
if (self.config.headerRowTemplate && !TEMPLATE_REGEXP.test(self.config.headerRowTemplate)) {
self.headerRowTemplate = window.kg.utils.getTemplatePromise(self.config.headerRowTemplate);
}
if (self.config.footerRowTemplate && !TEMPLATE_REGEXP.test(self.config.footerRowTemplate)) {
self.footerRowTemplate = window.kg.utils.getTemplatePromise(self.config.footerRowTemplate);
}
//scope funcs
self.visibleColumns = ko.computed(function () {
var cols = self.columns();
@@ -1587,7 +1622,7 @@ window.kg.Grid = function (options) {
var curPage = self.config.pagingOptions.currentPage();
return !(curPage > 1);
});
//call init
//call init
self.init();
};

2 changes: 2 additions & 0 deletions build/build-order.txt
Original file line number Diff line number Diff line change
@@ -7,11 +7,13 @@
..\src\templates\cellTemplate.html
..\src\templates\aggregateTemplate.html
..\src\templates\headerRowTemplate.html
..\src\templates\footerRowTemplate.html
..\src\templates\headerCellTemplate.html
..\src\bindingHandlers\ko-grid.js
..\src\bindingHandlers\kg-row.js
..\src\bindingHandlers\kg-cell.js
..\src\bindingHandlers\kg-header-row.js
..\src\bindingHandlers\kg-footer-row.js
..\src\bindingHandlers\kg-header-cell.js
..\src\bindingHandlers\kg-mouse-events.js
..\src\classes\aggregate.js
41 changes: 38 additions & 3 deletions koGrid-2.1.1.debug.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
* koGrid JavaScript Library
* Authors: https://github.com/ericmbarnard/koGrid/blob/master/README.md
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
* Compiled At: 01/11/2013 15:58:36
* Compiled At: 03/29/2013 14:29:44
***********************************************/

(function (window) {
@@ -198,7 +198,7 @@ $.extend(window.kg.utils, {
/***********************************************
* FILE: ..\src\templates\gridTemplate.html
***********************************************/
window.kg.defaultGridTemplate = function(){ return '<div data-bind="css: {\'ui-widget\': jqueryUITheme, \'kgNoSelect\' : disableTextSelection}"><div class="kgTopPanel" data-bind="css: {\'ui-widget-header\':jqueryUITheme, \'ui-corner-top\': jqueryUITheme}, style: $data.topPanelStyle"><div class="kgGroupPanel" data-bind="visible: $data.showGroupPanel, style: headerStyle"><div class="kgGroupPanelDescription" data-bind="visible: configGroups().length == 0">Drag a column header here and drop it to group by that column</div><ul data-bind="visible: configGroups().length > 0, foreach: configGroups" class="kgGroupList"><li class="kgGroupItem"><span class="kgGroupElement"><div class="kgGroupName"><span data-bind="text: displayName"></span><span data-bind="click: function(data) { $root.removeGroup($index()) }" class="kgRemoveGroup">x</span></div><span data-bind="visible: $index() < ($root.configGroups().length - 1)" class="kgGroupArrow"></span></span></li></ul></div><div class="kgHeaderContainer" data-bind="style: headerStyle"><div class="kgHeaderScroller" data-bind="style: headerScrollerStyle, kgHeaderRow: $data" ></div></div><div class="kgHeaderButton" data-bind="visible: ($data.showColumnMenu || $data.showFilter), click: toggleShowMenu"><div class="kgHeaderButtonArrow"></div></div><div data-bind="visible: showMenu" class="kgColMenu"><div data-bind="visible: showFilter"><input placeholder="Seach Field:Value" type="text" data-bind="value: filterText, valueUpdate: \'afterkeydown\'"/></div><div data-bind="visible: showColumnMenu"><span class="kgMenuText">Choose Columns:</span><ul class="kgColList" data-bind="foreach: nonAggColumns"><li class="kgColListItem"><label style="position: relative;"><input type="checkbox" class="kgColListCheckbox" data-bind="checked: visible"/><span data-bind="text: displayName, click: toggleVisible"></span><a title="Group By" data-bind="attr: {\'class\': groupedByClass }, visible: (field != \'\u2714\'), click: $parent.groupBy"></a><span class="kgGroupingNumber" data-bind="visible: groupIndex() > 0, text: groupIndex"></span></label></li></ul></div></div></div><div class="kgViewport" data-bind="css: {\'ui-widget-content\': jqueryUITheme}, style: viewportStyle"><div class="kgCanvas" data-bind="style: canvasStyle"><div data-bind="foreach: renderedRows" style="position: absolute;"><div data-bind="style: { \'top\': offsetTop, \'height\': $parent.rowHeight + \'px\' }, click: toggleSelected, css: {\'selected\': selected, \'even\': isEven , \'odd\': isOdd, \'ui-state-default\': $parent.jqueryUITheme && isOdd, \'ui-state-active\':$parent.jqueryUITheme && isEven}, kgRow: $data" class="kgRow"></div></div></div></div><div class="kgFooterPanel" data-bind="css: {\'ui-widget-content\': jqueryUITheme, \'ui-corner-bottom\': jqueryUITheme}, style: footerStyle"><div class="kgTotalSelectContainer" data-bind="visible: footerVisible"><div class="kgFooterTotalItems" data-bind="css: {\'kgNoMultiSelect\': !multiSelect}" ><span class="kgLabel">Total Items: <span data-bind="text: maxRowsDisplay"></span></span><span data-bind="visible: filterText().length > 0" class="kgLabel">(Showing: <span data-bind="text: totalFilteredItemsLength"></span>)</span></div><div class="kgFooterSelectedItems" data-bind="visible: multiSelect"><span class="kgLabel">Selected Items: <span data-bind="text: selectedItemCount"></span></span></div></div><div class="kgPagerContainer" style="float: right; margin-top: 10px;" data-bind="visible: (footerVisible && enablePaging), css: {\'kgNoMultiSelect\': !multiSelect}"><div style="float:left; margin-right: 10px;" class="kgRowCountPicker"><span style="float: left; margin-top: 3px;" class="kgLabel">Page Size:</span><select style="float: left;height: 27px; width: 100px" data-bind="value: pagingOptions.pageSize, options: pagingOptions.pageSizes"></select></div><div style="float:left; margin-right: 10px; line-height:25px;" class="kgPagerControl" style="float: left; min-width: 135px;"><button class="kgPagerButton" data-bind="click: pageToFirst, disable: cantPageBackward()" title="First Page"><div class="kgPagerFirstTriangle"><div class="kgPagerFirstBar"></div></div></button><button class="kgPagerButton" data-bind="click: pageBackward, disable: cantPageBackward()" title="Previous Page"><div class="kgPagerFirstTriangle kgPagerPrevTriangle"></div></button><input class="kgPagerCurrent" type="number" style="width:50px; height: 24px; margin-top: 1px; padding: 0px 4px;" data-bind="value: pagingOptions.currentPage, valueUpdate: \'afterkeydown\'"/><button class="kgPagerButton" data-bind="click: pageForward, disable: cantPageForward()" title="Next Page"><div class="kgPagerLastTriangle kgPagerNextTriangle"></div></button><button class="kgPagerButton" data-bind="click: pageToLast, disable: cantPageForward()" title="Last Page"><div class="kgPagerLastTriangle"><div class="kgPagerLastBar"></div></div></button></div></div></div></div>';};
window.kg.defaultGridTemplate = function(){ return '<div data-bind="css: {\'ui-widget\': jqueryUITheme, \'kgNoSelect\' : disableTextSelection}"><div class="kgTopPanel" data-bind="css: {\'ui-widget-header\':jqueryUITheme, \'ui-corner-top\': jqueryUITheme}, style: $data.topPanelStyle"><div class="kgGroupPanel" data-bind="visible: $data.showGroupPanel, style: headerStyle"><div class="kgGroupPanelDescription" data-bind="visible: configGroups().length == 0">Drag a column header here and drop it to group by that column</div><ul data-bind="visible: configGroups().length > 0, foreach: configGroups" class="kgGroupList"><li class="kgGroupItem"><span class="kgGroupElement"><div class="kgGroupName"><span data-bind="text: displayName"></span><span data-bind="click: function(data) { $root.removeGroup($index()) }" class="kgRemoveGroup">x</span></div><span data-bind="visible: $index() < ($root.configGroups().length - 1)" class="kgGroupArrow"></span></span></li></ul></div><div class="kgHeaderContainer" data-bind="style: headerStyle"><div class="kgHeaderScroller" data-bind="style: headerScrollerStyle, kgHeaderRow: $data" ></div></div><div class="kgHeaderButton" data-bind="visible: ($data.showColumnMenu || $data.showFilter), click: toggleShowMenu"><div class="kgHeaderButtonArrow"></div></div><div data-bind="visible: showMenu" class="kgColMenu"><div data-bind="visible: showFilter"><input placeholder="Seach Field:Value" type="text" data-bind="value: filterText, valueUpdate: \'afterkeydown\'"/></div><div data-bind="visible: showColumnMenu"><span class="kgMenuText">Choose Columns:</span><ul class="kgColList" data-bind="foreach: nonAggColumns"><li class="kgColListItem"><label style="position: relative;"><input type="checkbox" class="kgColListCheckbox" data-bind="checked: visible"/><span data-bind="text: displayName, click: toggleVisible"></span><a title="Group By" data-bind="attr: {\'class\': groupedByClass }, visible: (field != \'\u2714\'), click: $parent.groupBy"></a><span class="kgGroupingNumber" data-bind="visible: groupIndex() > 0, text: groupIndex"></span></label></li></ul></div></div></div><div class="kgViewport" data-bind="css: {\'ui-widget-content\': jqueryUITheme}, style: viewportStyle"><div class="kgCanvas" data-bind="style: canvasStyle"><div data-bind="foreach: renderedRows" style="position: absolute;"><div data-bind="style: { \'top\': offsetTop, \'height\': $parent.rowHeight + \'px\' }, click: toggleSelected, css: {\'selected\': selected, \'even\': isEven , \'odd\': isOdd, \'ui-state-default\': $parent.jqueryUITheme && isOdd, \'ui-state-active\':$parent.jqueryUITheme && isEven}, kgRow: $data" class="kgRow"></div></div></div></div><div class="kgFooterPanel" data-bind="kgFooterRow: $data, style: footerStyle"></div></div>';};

/***********************************************
* FILE: ..\src\templates\rowTemplate.html
@@ -220,6 +220,11 @@ window.kg.aggregateTemplate = function(){ return '<div data-bind="click: toggleE
***********************************************/
window.kg.defaultHeaderRowTemplate = function(){ return '<div data-bind="foreach: visibleColumns"><div data-bind="kgHeaderCell: $data, attr: { \'class\': \'kgHeaderCell col\' + $index() }"></div></div>';};

/***********************************************
* FILE: ..\src\templates\footerRowTemplate.html
***********************************************/
window.kg.defaultFooterRowTemplate = function(){ return '<div data-bind="css: {\'ui-widget-content\': jqueryUITheme, \'ui-corner-bottom\': jqueryUITheme}"><div class="kgTotalSelectContainer" data-bind="visible: footerVisible"><div class="kgFooterTotalItems" data-bind="css: {\'kgNoMultiSelect\': !multiSelect}" ><span class="kgLabel">Total Items: <span data-bind="text: maxRowsDisplay"></span></span><span data-bind="visible: filterText().length > 0" class="kgLabel">(Showing: <span data-bind="text: totalFilteredItemsLength"></span>)</span></div><div class="kgFooterSelectedItems" data-bind="visible: multiSelect"><span class="kgLabel">Selected Items: <span data-bind="text: selectedItemCount"></span></span></div></div><div class="kgPagerContainer" style="float: right; margin-top: 10px;" data-bind="visible: (footerVisible && enablePaging), css: {\'kgNoMultiSelect\': !multiSelect}"><div style="float:left; margin-right: 10px;" class="kgRowCountPicker"><span style="float: left; margin-top: 3px;" class="kgLabel">Page Size:</span><select style="float: left;height: 27px; width: 100px" data-bind="value: pagingOptions.pageSize, options: pagingOptions.pageSizes"></select></div><div style="float:left; margin-right: 10px; line-height:25px;" class="kgPagerControl" style="float: left; min-width: 135px;"><button class="kgPagerButton" data-bind="click: pageToFirst, disable: cantPageBackward()" title="First Page"><div class="kgPagerFirstTriangle"><div class="kgPagerFirstBar"></div></div></button><button class="kgPagerButton" data-bind="click: pageBackward, disable: cantPageBackward()" title="Previous Page"><div class="kgPagerFirstTriangle kgPagerPrevTriangle"></div></button><input class="kgPagerCurrent" type="number" style="width:50px; height: 24px; margin-top: 1px; padding: 0px 4px;" data-bind="value: pagingOptions.currentPage, valueUpdate: \'afterkeydown\'"/><button class="kgPagerButton" data-bind="click: pageForward, disable: cantPageForward()" title="Next Page"><div class="kgPagerLastTriangle kgPagerNextTriangle"></div></button><button class="kgPagerButton" data-bind="click: pageToLast, disable: cantPageForward()" title="Last Page"><div class="kgPagerLastTriangle"><div class="kgPagerLastBar"></div></div></button></div></div></div>';};

/***********************************************
* FILE: ..\src\templates\headerCellTemplate.html
***********************************************/
@@ -356,6 +361,30 @@ ko.bindingHandlers['kgHeaderRow'] = (function () {
};
}());

/***********************************************
* FILE: ..\src\bindingHandlers\kg-footer-row.js
***********************************************/
ko.bindingHandlers['kgFooterRow'] = (function () {
return {
'init': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
bindingContext.$userViewModel = bindingContext.$data.$userViewModel;
var compile = function(html) {
var footer = $(html);
ko.applyBindings(bindingContext, footer[0]);
$(element).html(footer);
};
if (viewModel.footerRowTemplate.then) {
viewModel.footerRowTemplate.then(function (p) {
compile(p);
});
} else {
compile(viewModel.footerRowTemplate);
}
return { controlsDescendantBindings: true };
}
};
}());

/***********************************************
* FILE: ..\src\bindingHandlers\kg-header-cell.js
***********************************************/
@@ -484,6 +513,7 @@ window.kg.Column = function (config, grid) {
delay = 500,
clicks = 0,
timer = null;
self.config = config;
self.eventTaget = undefined;
self.width = colDef.width;
self.groupIndex = ko.observable(0);
@@ -1110,6 +1140,7 @@ window.kg.Grid = function (options) {
columnsChanged: function() { },
rowTemplate: undefined,
headerRowTemplate: undefined,
footerRowTemplate: undefined,
jqueryUITheme: false,
jqueryUIDraggable: false,
plugins: [],
@@ -1455,12 +1486,16 @@ window.kg.Grid = function (options) {
//Templates
self.rowTemplate = self.config.rowTemplate || window.kg.defaultRowTemplate();
self.headerRowTemplate = self.config.headerRowTemplate || window.kg.defaultHeaderRowTemplate();
self.footerRowTemplate = self.config.footerRowTemplate || window.kg.defaultFooterRowTemplate();
if (self.config.rowTemplate && !TEMPLATE_REGEXP.test(self.config.rowTemplate)) {
self.rowTemplate = window.kg.utils.getTemplatePromise(self.config.rowTemplate);
}
if (self.config.headerRowTemplate && !TEMPLATE_REGEXP.test(self.config.headerRowTemplate)) {
self.headerRowTemplate = window.kg.utils.getTemplatePromise(self.config.headerRowTemplate);
}
if (self.config.footerRowTemplate && !TEMPLATE_REGEXP.test(self.config.footerRowTemplate)) {
self.footerRowTemplate = window.kg.utils.getTemplatePromise(self.config.footerRowTemplate);
}
//scope funcs
self.visibleColumns = ko.computed(function () {
var cols = self.columns();
@@ -1587,7 +1622,7 @@ window.kg.Grid = function (options) {
var curPage = self.config.pagingOptions.currentPage();
return !(curPage > 1);
});
//call init
//call init
self.init();
};

20 changes: 20 additions & 0 deletions src/bindingHandlers/kg-footer-row.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
ko.bindingHandlers['kgFooterRow'] = (function () {
return {
'init': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
bindingContext.$userViewModel = bindingContext.$data.$userViewModel;
var compile = function(html) {
var footer = $(html);
ko.applyBindings(bindingContext, footer[0]);
$(element).html(footer);
};
if (viewModel.footerRowTemplate.then) {
viewModel.footerRowTemplate.then(function (p) {
compile(p);
});
} else {
compile(viewModel.footerRowTemplate);
}
return { controlsDescendantBindings: true };
}
};
}());
1 change: 1 addition & 0 deletions src/classes/column.js
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@
delay = 500,
clicks = 0,
timer = null;
self.config = config;
self.eventTaget = undefined;
self.width = colDef.width;
self.groupIndex = ko.observable(0);
7 changes: 6 additions & 1 deletion src/classes/grid.js
Original file line number Diff line number Diff line change
@@ -34,6 +34,7 @@ window.kg.Grid = function (options) {
columnsChanged: function() { },
rowTemplate: undefined,
headerRowTemplate: undefined,
footerRowTemplate: undefined,
jqueryUITheme: false,
jqueryUIDraggable: false,
plugins: [],
@@ -379,12 +380,16 @@ window.kg.Grid = function (options) {
//Templates
self.rowTemplate = self.config.rowTemplate || window.kg.defaultRowTemplate();
self.headerRowTemplate = self.config.headerRowTemplate || window.kg.defaultHeaderRowTemplate();
self.footerRowTemplate = self.config.footerRowTemplate || window.kg.defaultFooterRowTemplate();
if (self.config.rowTemplate && !TEMPLATE_REGEXP.test(self.config.rowTemplate)) {
self.rowTemplate = window.kg.utils.getTemplatePromise(self.config.rowTemplate);
}
if (self.config.headerRowTemplate && !TEMPLATE_REGEXP.test(self.config.headerRowTemplate)) {
self.headerRowTemplate = window.kg.utils.getTemplatePromise(self.config.headerRowTemplate);
}
if (self.config.footerRowTemplate && !TEMPLATE_REGEXP.test(self.config.footerRowTemplate)) {
self.footerRowTemplate = window.kg.utils.getTemplatePromise(self.config.footerRowTemplate);
}
//scope funcs
self.visibleColumns = ko.computed(function () {
var cols = self.columns();
@@ -511,6 +516,6 @@ window.kg.Grid = function (options) {
var curPage = self.config.pagingOptions.currentPage();
return !(curPage > 1);
});
//call init
//call init
self.init();
};
24 changes: 24 additions & 0 deletions src/templates/footerRowTemplate.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!--window.kg.defaultFooterRowTemplate-->
<div data-bind="css: {'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}">
<div class="kgTotalSelectContainer" data-bind="visible: footerVisible">
<div class="kgFooterTotalItems" data-bind="css: {'kgNoMultiSelect': !multiSelect}" >
<span class="kgLabel">Total Items: <span data-bind="text: maxRowsDisplay"></span></span><span data-bind="visible: filterText().length > 0" class="kgLabel">(Showing: <span data-bind="text: totalFilteredItemsLength"></span>)</span>
</div>
<div class="kgFooterSelectedItems" data-bind="visible: multiSelect">
<span class="kgLabel">Selected Items: <span data-bind="text: selectedItemCount"></span></span>
</div>
</div>
<div class="kgPagerContainer" style="float: right; margin-top: 10px;" data-bind="visible: (footerVisible && enablePaging), css: {'kgNoMultiSelect': !multiSelect}">
<div style="float:left; margin-right: 10px;" class="kgRowCountPicker">
<span style="float: left; margin-top: 3px;" class="kgLabel">Page Size:</span>
<select style="float: left;height: 27px; width: 100px" data-bind="value: pagingOptions.pageSize, options: pagingOptions.pageSizes"></select>
</div>
<div style="float:left; margin-right: 10px; line-height:25px;" class="kgPagerControl" style="float: left; min-width: 135px;">
<button class="kgPagerButton" data-bind="click: pageToFirst, disable: cantPageBackward()" title="First Page"><div class="kgPagerFirstTriangle"><div class="kgPagerFirstBar"></div></div></button>
<button class="kgPagerButton" data-bind="click: pageBackward, disable: cantPageBackward()" title="Previous Page"><div class="kgPagerFirstTriangle kgPagerPrevTriangle"></div></button>
<input class="kgPagerCurrent" type="number" style="width:50px; height: 24px; margin-top: 1px; padding: 0px 4px;" data-bind="value: pagingOptions.currentPage, valueUpdate: 'afterkeydown'"/>
<button class="kgPagerButton" data-bind="click: pageForward, disable: cantPageForward()" title="Next Page"><div class="kgPagerLastTriangle kgPagerNextTriangle"></div></button>
<button class="kgPagerButton" data-bind="click: pageToLast, disable: cantPageForward()" title="Last Page"><div class="kgPagerLastTriangle"><div class="kgPagerLastBar"></div></div></button>
</div>
</div>
</div>
24 changes: 2 additions & 22 deletions src/templates/gridTemplate.html
Original file line number Diff line number Diff line change
@@ -47,27 +47,7 @@
</div>
</div>
</div>
<div class="kgFooterPanel" data-bind="css: {'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}, style: footerStyle">
<div class="kgTotalSelectContainer" data-bind="visible: footerVisible">
<div class="kgFooterTotalItems" data-bind="css: {'kgNoMultiSelect': !multiSelect}" >
<span class="kgLabel">Total Items: <span data-bind="text: maxRowsDisplay"></span></span><span data-bind="visible: filterText().length > 0" class="kgLabel">(Showing: <span data-bind="text: totalFilteredItemsLength"></span>)</span>
</div>
<div class="kgFooterSelectedItems" data-bind="visible: multiSelect">
<span class="kgLabel">Selected Items: <span data-bind="text: selectedItemCount"></span></span>
</div>
</div>
<div class="kgPagerContainer" style="float: right; margin-top: 10px;" data-bind="visible: (footerVisible && enablePaging), css: {'kgNoMultiSelect': !multiSelect}">
<div style="float:left; margin-right: 10px;" class="kgRowCountPicker">
<span style="float: left; margin-top: 3px;" class="kgLabel">Page Size:</span>
<select style="float: left;height: 27px; width: 100px" data-bind="value: pagingOptions.pageSize, options: pagingOptions.pageSizes"></select>
</div>
<div style="float:left; margin-right: 10px; line-height:25px;" class="kgPagerControl" style="float: left; min-width: 135px;">
<button class="kgPagerButton" data-bind="click: pageToFirst, disable: cantPageBackward()" title="First Page"><div class="kgPagerFirstTriangle"><div class="kgPagerFirstBar"></div></div></button>
<button class="kgPagerButton" data-bind="click: pageBackward, disable: cantPageBackward()" title="Previous Page"><div class="kgPagerFirstTriangle kgPagerPrevTriangle"></div></button>
<input class="kgPagerCurrent" type="number" style="width:50px; height: 24px; margin-top: 1px; padding: 0px 4px;" data-bind="value: pagingOptions.currentPage, valueUpdate: 'afterkeydown'"/>
<button class="kgPagerButton" data-bind="click: pageForward, disable: cantPageForward()" title="Next Page"><div class="kgPagerLastTriangle kgPagerNextTriangle"></div></button>
<button class="kgPagerButton" data-bind="click: pageToLast, disable: cantPageForward()" title="Last Page"><div class="kgPagerLastTriangle"><div class="kgPagerLastBar"></div></div></button>
</div>
</div>
<div class="kgFooterPanel" data-bind="kgFooterRow: $data, style: footerStyle">

</div>
</div>