Skip to content

Commit

Permalink
feat(plugins): remove jQuery from Row Detail plugin (#760)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding authored May 6, 2023
1 parent 8de05d1 commit 72e6139
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 52 deletions.
36 changes: 18 additions & 18 deletions examples/example-checkbox-header-row.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@
cursor: pointer;
}

#myGrid input[type=checkbox],
.slick-columnpicker-list input[type=checkbox] {
#myGrid input[type=checkbox],
.slick-columnpicker-list input[type=checkbox] {
display:none; /* to hide the checkbox itself */
}
}
#myGrid input[type=checkbox] + label:before,
.slick-columnpicker-list input[type=checkbox] + label:before {
cursor: pointer;
Expand All @@ -57,13 +57,13 @@
margin-right: 4px;
}
#myGrid input[type=checkbox] + label:before,
.slick-columnpicker-list input[type=checkbox] + label:before {
.slick-columnpicker-list input[type=checkbox] + label:before {
opacity: 0.2; /* unchecked icon */
}
}
#myGrid input[type=checkbox]:checked + label:before,
.slick-columnpicker-list input[type=checkbox]:checked + label:before {
.slick-columnpicker-list input[type=checkbox]:checked + label:before {
opacity: 1; /* checked icon */
}
}
</style>
</head>
<body>
Expand Down Expand Up @@ -200,9 +200,9 @@ <h3>Selected Ids (<span id="idsCount">0</span>) with index/id offset=<span id="i
function setSelectedRowIds() {
// change row selection even across multiple pages via DataView
dataView.setSelectedIds([11, 13, 37]); // don't forget we have an id offset of +8

// you can also provide optional options (all defaults to true)
// dataView.setSelectedIds([4, 5, 8, 10], {
// dataView.setSelectedIds([4, 5, 8, 10], {
// isRowBeingAdded: true,
// shouldTriggerEvent: true,
// applyGridRowSelection: true)
Expand Down Expand Up @@ -257,25 +257,25 @@ <h3>Selected Ids (<span id="idsCount">0</span>) with index/id offset=<span id="i
console.log("Previously Selected Rows: " + previousSelectedRows.toString());
console.log("Selected Rows: " + sortedSelectedRows.toString());
document.querySelector('#selectedRows').textContent = sortedSelectedRows.toString();
document.querySelector('#rowsCount').textContent = sortedSelectedRows.length;
document.querySelector('#rowsCount').textContent = sortedSelectedRows.length;
});

dataView.onSelectedRowIdsChanged.subscribe(function(e, args) {
var sortedSelectedIds = args.filteredIds.sort(function (a, b) { return a - b });
// console.log('sortedSelectedIds', args.selectedRowIds);
document.querySelector('#selectedIds').textContent = sortedSelectedIds.toString();
document.querySelector('#idsCount').textContent = sortedSelectedIds.length;
document.querySelector('#idsCount').textContent = sortedSelectedIds.length;
});

const headerRowElm = grid.getHeaderRow();
headerRowElm.addEventListener('change', filterKeyup);
headerRowElm.addEventListener('keyup', filterKeyup);
function filterKeyup(e) {
headerRowElm.addEventListener('change', filterInputHandler);
headerRowElm.addEventListener('keyup', filterInputHandler);

function filterInputHandler(e) {
const inputFilter = e.target;
const columnId = inputFilter.dataset.columnid;
if (columnId != null) {
columnFilters[columnId] = (e.target.value || '').trim();
columnFilters[columnId] = (inputFilter.value || '').trim();
dataView.refresh();
}
};
Expand All @@ -294,7 +294,7 @@ <h3>Selected Ids (<span id="idsCount">0</span>) with index/id offset=<span id="i
grid.onSort.subscribe(function (e, args) {
sortdir = args.sortAsc ? 1 : -1;
sortcol = args.sortCol.field;

// using native sort with comparer
// preferred method but can be very slow in IE with huge datasets
dataView.sort(comparer, args.sortAsc);
Expand Down
47 changes: 27 additions & 20 deletions examples/example16-row-detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,9 +134,6 @@ <h2>View Source:</h2>
</div>
</div>

<script src="../lib/firebugx.js"></script>

<script src="../lib/jquery-3.1.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>

<script src="../slick.core.js"></script>
Expand Down Expand Up @@ -189,7 +186,7 @@ <h2>View Source:</h2>
}

function setMaxRows(amount) {
var value = $("#maxRowInput").val();
var value = document.querySelector("#maxRowInput").value;
var maxRows = parseInt(value);
var options = detailView.getOptions();

Expand All @@ -200,7 +197,7 @@ <h2>View Source:</h2>
}

function setPanelRows(amount) {
var value = $("#panelRowInput").val();
var value = document.querySelector("#panelRowInput").value;
var panelRows = parseInt(value);
var options = detailView.getOptions();

Expand All @@ -211,13 +208,18 @@ <h2>View Source:</h2>
}

function hookAssigneeOnClick(itemId) {
$("#who-is-assignee_" + itemId).off("click").on("click", function() {
alert("Assignee is " + $("#assignee_" + itemId).val());
});
document.querySelector("#who-is-assignee_" + itemId).addEventListener("click", assigneHandler.bind(this, itemId));
}

function assigneHandler(itemId) {
alert("Assignee is " + document.querySelector("#assignee_" + itemId).value);
}

function destroyAssigneeOnClick(itemId) {
$("#who-is-assignee_" + itemId).off("click");
const handler = document.querySelector("#who-is-assignee_" + itemId)
if (handler) {
handler.removeEventListener("click", assigneHandler.bind(this, itemId));
}
}

function loadingTemplate() {
Expand Down Expand Up @@ -360,7 +362,7 @@ <h2>View Source:</h2>
return (x == y ? 0 : (x > y ? 1 : -1));
}

$(function () {
(function () {
// prepare the data
for (var i = 0; i < 5000; i++) {
data[i] = new DataItem(i);
Expand Down Expand Up @@ -434,8 +436,9 @@ <h2>View Source:</h2>
dataView.sort(comparer, args.sortAsc);
});

$(grid.getHeaderRow()).on("change keyup", ":input", function (e) {
var columnId = $(this).data("columnId");
function filterInputHandler (e) {
const inputFilter = e.target;
const columnId = inputFilter.dataset.columnid;
if (columnId != null) {
/* we can save the detail view content before filtering (this will save on every keyup)
OR you can save in other area of your code (like in the "openCity()" function)
Expand All @@ -449,17 +452,21 @@ <h2>View Source:</h2>
});

// keep filter in global variable & filter dataset by calling a refresh
columnFilters[columnId] = $.trim($(this).val());
columnFilters[columnId] = (inputFilter.value || '').trim();
dataView.refresh();
}
});
}

const headerRowElm = grid.getHeaderRow();
headerRowElm.addEventListener('change', filterInputHandler);
headerRowElm.addEventListener('keyup', filterInputHandler);

grid.onHeaderRowCellRendered.subscribe(function(e, args) {
$(args.node).empty();
$("<input type='text'>")
.data("columnId", args.column.id)
.val(columnFilters[args.column.id])
.appendTo(args.node);
args.node.innerHTML = '';
const filterInputElm = document.createElement('input');
filterInputElm.dataset.columnid = args.column.id;
filterInputElm.value = columnFilters[args.column.id] || '';
args.node.appendChild(filterInputElm);
});

// initialize the model after all the events have been hooked up
Expand All @@ -468,7 +475,7 @@ <h2>View Source:</h2>
dataView.setItems(data, 'num');
dataView.setFilter(filter);
dataView.endUpdate();
});
})();
</script>
</body>
</html>
28 changes: 14 additions & 14 deletions plugins/slick.rowdetailview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,9 @@
* expandedRows: Array of the Expanded Rows
* rowIdsOutOfViewport: Array of the Out of viewport Range Rows
*/
(function ($) {
(function (window) {
// register namespace
$.extend(true, window, {
Slick.Utils.extend(true, window, {
"Slick": {
"Plugins": {
"RowDetailView": RowDetailView
Expand Down Expand Up @@ -122,7 +122,7 @@
var _keyPrefix = _defaults.keyPrefix;
var _gridRowBuffer = 0;
var _rowIdsOutOfViewport = [];
var _options = $.extend(true, {}, _defaults, options);
var _options = Slick.Utils.extend(true, {}, _defaults, options);

// user could override the expandable icon logic from within the options or after instantiating the plugin
if (typeof _options.expandableOverride === 'function') {
Expand Down Expand Up @@ -172,7 +172,7 @@
subscribeToOnAsyncResponse();

// after data is set, let's get the DataView Id Property name used (defaults to "id")
_handler.subscribe(_dataView.onSetItemsCalled, function (e, args) {
_handler.subscribe(_dataView.onSetItemsCalled, function () {
_dataViewIdProperty = _dataView && _dataView.getIdPropertyName() || 'id';
});

Expand Down Expand Up @@ -206,7 +206,7 @@

/** set or change some of the plugin options */
function setOptions(options) {
_options = $.extend(true, {}, _options, options);
_options = Slick.Utils.extend(true, {}, _options, options);
if (_options && _options.singleRowExpand) {
collapseAll();
}
Expand All @@ -232,7 +232,7 @@
}

// clicking on a row select checkbox
if (_options.useRowClick || _grid.getColumns()[args.cell]['id'] === _options.columnId && $(e.target).hasClass(_options.cssClass)) {
if (_options.useRowClick || _grid.getColumns()[args.cell]['id'] === _options.columnId && e.target.classList.contains(_options.cssClass || '')) {
// if editing, try to commit
if (_grid.getEditorLock().isActive() && !_grid.getEditorLock().commitCurrentEdit()) {
e.preventDefault();
Expand Down Expand Up @@ -261,7 +261,7 @@
}

/** If we scroll save detail views that go out of cache range */
function handleScroll(e, args) {
function handleScroll() {
if (_options.useSimpleViewportCalc) {
calculateOutOfRangeViewsSimplerVersion();
} else {
Expand Down Expand Up @@ -358,7 +358,7 @@
}
}

/**
/**
* Check if the row became out of visible range (when user can't see it anymore)
* @param rowIndex
* @param renderedRange from SlickGrid
Expand Down Expand Up @@ -390,7 +390,7 @@

setTimeout(function () {
// make sure View Row DOM Element really exist before notifying that it's a row that is visible again
if ($('.cellDetailView_' + item[_dataViewIdProperty]).length) {
if (document.querySelector(`.${_gridUid} .cellDetailView_${item[_dataViewIdProperty]}`)) {
_self.onRowBackToViewportRange.notify({
'grid': _grid,
'item': item,
Expand Down Expand Up @@ -503,11 +503,11 @@

/** Saves the current state of the detail view */
function saveDetailView(item) {
var view = $('.' + _gridUid + ' .innerDetailView_' + item[_dataViewIdProperty]);
const view = document.querySelector(`.${_gridUid} .innerDetailView_${item[_dataViewIdProperty]}`);
if (view) {
var html = $('.' + _gridUid + ' .innerDetailView_' + item[_dataViewIdProperty]).html();
const html = view.innerHTML;
if (html !== undefined) {
item[_keyPrefix + 'detailContent'] = html;
item[`${_keyPrefix}detailContent`] = html;
}
}
}
Expand Down Expand Up @@ -757,7 +757,7 @@
_expandableOverride = overrideFn;
}

$.extend(this, {
Slick.Utils.extend(this, {
"init": init,
"destroy": destroy,
"pluginName": "RowDetailView",
Expand All @@ -783,4 +783,4 @@
"onRowBackToViewportRange": new Slick.Event()
});
}
})(jQuery);
})(window);

0 comments on commit 72e6139

Please sign in to comment.