diff --git a/examples/example-checkbox-header-row.html b/examples/example-checkbox-header-row.html index 62514e46..9df9a590 100644 --- a/examples/example-checkbox-header-row.html +++ b/examples/example-checkbox-header-row.html @@ -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; @@ -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 */ - } + } @@ -200,9 +200,9 @@

Selected Ids (0) with index/id offset=0) with index/id offset=Selected Ids (0) with index/id offset= - - @@ -189,7 +186,7 @@

View Source:

} function setMaxRows(amount) { - var value = $("#maxRowInput").val(); + var value = document.querySelector("#maxRowInput").value; var maxRows = parseInt(value); var options = detailView.getOptions(); @@ -200,7 +197,7 @@

View Source:

} function setPanelRows(amount) { - var value = $("#panelRowInput").val(); + var value = document.querySelector("#panelRowInput").value; var panelRows = parseInt(value); var options = detailView.getOptions(); @@ -211,13 +208,18 @@

View Source:

} 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() { @@ -360,7 +362,7 @@

View Source:

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); @@ -434,8 +436,9 @@

View Source:

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) @@ -449,17 +452,21 @@

View Source:

}); // 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(); - $("") - .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 @@ -468,7 +475,7 @@

View Source:

dataView.setItems(data, 'num'); dataView.setFilter(filter); dataView.endUpdate(); - }); + })(); diff --git a/plugins/slick.rowdetailview.js b/plugins/slick.rowdetailview.js index 30eb6bdb..7f911211 100644 --- a/plugins/slick.rowdetailview.js +++ b/plugins/slick.rowdetailview.js @@ -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 @@ -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') { @@ -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'; }); @@ -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(); } @@ -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(); @@ -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 { @@ -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 @@ -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, @@ -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; } } } @@ -757,7 +757,7 @@ _expandableOverride = overrideFn; } - $.extend(this, { + Slick.Utils.extend(this, { "init": init, "destroy": destroy, "pluginName": "RowDetailView", @@ -783,4 +783,4 @@ "onRowBackToViewportRange": new Slick.Event() }); } -})(jQuery); +})(window);