Hi Peter,
it’s a Vuejs 3 app with smart-webcomponent-vue.
My Setup:
“smart-webcomponents”: “^10.0.0”,
“vue”: “^3.0.0”,
“vue-router”: “^4.0.11”
Component
`import ContextMenu from ‘jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue’;
import ScrollBar from ‘jqwidgets-scripts/jqwidgets/jqxscrollbar.js’;
import FilterBadges from ‘../includes/FilterBadges’;
export default {
components: {
ContextMenu,
ScrollBar,
FilterBadges
},
data() {
return {
grid: false,
theme: ‘material’,
width: ‘100%’,
height: this.getGridHeight(),
editSettings: {
saveOnPageChange: false,
saveOnBlur: false,
saveOnSelectionChange: false,
cancelOnEsc: true,
saveOnEnter: true,
editOnDoubleClick: false,
editOnF2: true
},
dataFields: null,
columns: [],
columnsresize: true,
columnsmenu: false,
filterable: true,
showfilterrow: true,
editmode: ‘dblclick’,
filterFocusIndex: 0,
modalTitle: ”,
showModal: false,
showAlert: false,
alertType: ”,
alertMessage: ”,
alertTitle: ”,
alertContinueCallback: ”,
selectedRow: false,
selectedItem: false,
showGrid: false,
showLoader: false,
showFiltered: false,
filters: [],
gridMenuRef: ‘gridMenu’,
showRightSidebar: false,
scrollOffset: {left: 0, top: 0},
scrollBarPosition: false,
autoloadstate: this.inModal && this.inModal == true ? true : false,
dataAdapter: {}
}
},
methods: {
initGrid(url) {
axios.get(url)
.then(response => {
let data = response.data;
this.source[‘dataFields’] = data.fields;
this.dataFields = data.fields;
this.columns = data.columns;
this.setDataAdapter();
this.setColumnTooltip();
})
.catch(error => {
this.errorHandler(error);
});
},
setDataAdapter() {
var vm = this;
this.dataAdapter = new jqx.dataAdapter(this.source, {
formatData(data) {
//sprečavamo dvostruki poziv prema serveru
let state = vm.getState();
if(this.autoloadstate !== false) {
if(state && state[‘filters’]) {
$.extend(data, state[‘filters’]);
}
if(state && state[‘sortcolumn’]) {
let sortObj = {};
sortObj[‘sortdatafield’] = state[‘sortcolumn’];
sortObj[‘sortorder’] = state[‘sortdirection’][‘ascending’] == true ? ‘asc’ : ‘desc’;
$.extend(data, sortObj);
}
}
return data;
},
});
},
onRenderGridRows(params) {
return params.data;
},
onRowClick(event) {
let args = event.args;
this.selectedRow = args.row;
this.selectedItem = this.selectedRow.bounddata;
if (args.originalEvent.button == 2) {
this.openContextMenu(event.args);
this.grid.selectrow(this.selectedRow.boundindex);
} else {
this.$emit(‘selected’, this.selectedItem);
}
},
onRowDblClick(event) {
if(this.inModal) return;
let args = event.args;
this.selectedRow = args.row;
this.selectedItem = this.selectedRow.bounddata;
this.edit();
},
onFilter(event) {
if(this.autoloadstate && !this.inModal){
this.grid.savestate();
}
this.grid.updatebounddata(‘filter’);
if(this.getFilters() != false && this.getFilters().length > 0) {
this.showFiltered = true;
}
return true;
},
onColumnResized(event) {
if(this.autoloadstate && !this.inModal){
this.grid.savestate();
}
},
onCellEndEdit(event) {
//console.log(‘cell endedit’);
},
removeFilter(item) {
this.grid.removefilter(item);
},
onSort() {
if(this.autoloadstate && !this.inModal) {
this.grid.savestate();
}
//bug fix
if(event.type != ‘readystatechange’) {
this.grid.updatebounddata(‘sort’);
}
},
onColumnReordered: function (event) {
this.grid.savestate();
},
getGridHeight(el = ‘.c-main’) {
if(el == ‘window’) {
return $(window).height();
} else {
if($(el).length == 0) return;
return $(el).height()-10;
}
},
getGridHeightAfterForm() {
return 700;
//return $(window).height() – $(‘main form’).height() – 100;
},
openContextMenu(event) {
let menu = this.$refs[this.gridMenuRef];
if(menu == undefined) return;
let left = event.originalEvent.pageX;
let top = event.originalEvent.clientY;
let menuHeight = menu.height;
let menuWidth = menu.width;
let bottomMenu = top + menuHeight;
let rightMenu = left + menuWidth;
let windowHeight = window.innerHeight;
let windowWidth = window.innerWidth;
let pageYOffset = window.pageYOffset;
let pageY = windowHeight + pageYOffset;
if(bottomMenu > windowHeight) {
top = pageY – menuHeight – 50;
} else {
top = event.originalEvent.pageY;
}
if(rightMenu > windowWidth) {
left = windowWidth – menuWidth – 50;
}
menu.open(left, top);
},
closeContextMenu() {
this.$refs[this.gridMenuRef].close();
},
updateGrid(data) {
this.scrollOffset = this.getScrollOffset();
this.source.localdata = data;
this.dataAdapter.dataBind();
this.closeAlert();
this.closeModal();
},
resetFilter() {
this.grid.clearfilters();
//this.grid.savestate();
this.grid.loadstate();
if(this.extraFilterForm) {
this.extraFilterForm.reset();
}
window.localStorage.removeItem(“jqxGrid” + this.idSelector);
},
getState() {
if(this.inModal) return false;
let state = window.localStorage[‘jqxGrid’ + this.idSelector];
if(state != undefined) {
return JSON.parse(state);
}
return false;
},
loadState() {
let savedState = this.getState();
if(savedState) {
this.grid.loadstate(this.getState())
}
},
refresh() {
this.grid.updatebounddata(‘data’);
},
ready() {
this.grid = this.$refs.grid;
//add global event listeners
this.addEventListeners();
//set localization
this.setLocalization();
//set filter row focus
this.setFilterFocus();
//hook
if(this.afterReady) {
this.afterReady();
}
//load state
//this.loadState();
},
onBindingComplete() {
this.setScrollOffset(this.scrollOffset);
//resetiramo poziciju na koju scollbar treba ići
this.scrollBarPosition = false;
},
addEventListeners() {
let vm = this;
//prevent contextmenu event listener
document.addEventListener(‘contextmenu’, event => event.preventDefault());
//add ESC event listener
document.addEventListener(‘keyup’, event => {
switch(event.key) {
case ‘Enter’:
this.selectedRow = false;
this.selectedItem= false;
if(vm.grid) {
vm.grid.clearselection()
}
break;
}
});
this.addEventListenerToCheckboxGrid();
},
addEventListenerToCheckboxGrid() {
/**
* selected row custom format (e.g. radni list/table)
* for grid with checkbox and row select combination
*/
let vm = this;
if($(‘#’ + this.idSelector).closest(‘.grid-wrapper.grid-checkbox’).length == 0) {
return;
}
//add listener to all gridcells except first one (checkbox)
$(‘[role=”gridcell”]:not([columnindex=”0″])’).on(‘click’, function(e){
let id = $(e.target).closest(‘[role=”row”]’).attr(‘id’);
vm.formatSelectedRow(id);
});
},
setFilterFocus() {
let filterInputs = $(‘#’ + this.idSelector + ‘ ‘ + ‘.jqx-filter-input’);
if(filterInputs.length == 0 ) return;
$(‘#’ + this.idSelector + ‘ ‘ + ‘.jqx-filter-input’)[this.filterFocusIndex].focus();
},
setLocalization() {
let localizationobj = {};
localizationobj.firstDay = 1;
localizationobj.percentsymbol = “%”;
localizationobj.decimalseparator = “.”;
localizationobj.thousandsseparator = “,”;
localizationobj.filterchoosestring = “Odaberi”;
localizationobj.sortascendingstring = “Sortiraj uzlazno”;
localizationobj.sortdescendingstring = “Sortiraj silazno”;
let days = {
// full day names
names: [“Nedjelja”, “Ponedjeljak”, “Utorak”, “Srijeda”, “Četvrtak”, “Petak”, “Subota”],
// abbreviated day names
namesAbbr: [“Ne”, “Po”, “Ut”, “Sr”, “Če”, “Pe”, “Su”],
// shortest day names
namesShort: [“Ne”, “Po”, “Ut”, “Sr”, “Če”, “Pe”, “Su”]
};
localizationobj.days = days;
let months = {
// full month names (13 months for lunar calendards — 13th month should be “” if not lunar)
names: [“Siječanj”, “Veljača”, “Ožujak”, “Travanj”, “Svibanj”, “Lipanj”, “Srpanj”, “Kolovoz”, “Rujan”, “Listopa”, “Studeni”, “Prosinac”, “”],
// abbreviated month names
namesAbbr: [“sij”,”vlj”,”ožu”,”tra”,”svi”,”lip”,”srp”,”kol”,”ruj”,”lis”,”stu”,”pro”,””]
};
localizationobj.months = months;
let monthsGenitive = {
names: [“siječnja”,”veljače”,”ožujka”,”travnja”,”svibnja”,”lipnja”,”srpnja”,”kolovoza”,”rujna”,”listopada”,”studenog”,”prosinca”,””],
namesAbbr: [“sij”,”vlj”,”ožu”,”tra”,”svi”,”lip”,”srp”,”kol”,”ruj”,”lis”,”stu”,”pro”,””]
};
localizationobj.monthsGenitive = monthsGenitive;
let numberFormat = {
pattern: [“- n”],
“,”: “.”,
“.”: “,”,
percent: {
pattern: [“-n%”,”n%”],
“,”: “.”,
“.”: “,”
},
currency: {
pattern: [“-n $”,”n $”],
“,”: “.”,
“.”: “,”,
symbol: “kn”
}
};
localizationobj.numberFormat = numberFormat;
localizationobj.twoDigitYearMax = 2029;
/*let patterns = {
// short date pattern
d: “MM/dd/yyyy”,
// long date pattern
D: “MM/dd/yyyy”,
//D: “dd.MM.yyyy”,
//D: “d.M.yyyy”,
// short time pattern
t: “h:mm tt”,
// long time pattern
T: “h:mm:ss tt”,
// long date, short time pattern
f: “MM/dd/yyyy h:mm tt”,
// long date, long time pattern
F: “MM/dd/yyyy h:mm:ss tt”,
// month/day pattern
M: “MMMM dd”,
// month/year pattern
Y: “yyyy MMMM”,
// S is a sortable format that does not vary by culture
S: “MM/dd/yyyy”,
//S: “d.M.yyyy”
}
localizationobj.patterns = patterns;*/
// apply localization.
$(‘#’ + this.idSelector).jqxGrid(‘localizestrings’, localizationobj);
},
getFilters() {
if(this.filters == undefined || !this.filters) return false;
//reset filters
this.filters = [];
let filters = this.grid.getfilterinformation();
for(let i = 0; i < filters.length; i++) {
let info = filters[i];
let filterColumn = info.filtercolumn;
let filterColumnText = info.filtercolumntext;
let filterData = info.filter.getfilters();
for(let x = 0; x < filterData.length; x++) {
let filter = filterData[x];
this.filters.push({
filterKey: filterColumn + filter.value,
filterColumn: filterColumn,
filterColumnText: filterColumnText,
filterValue: filter.value,
filterCondition: filter.condition,
filterType: filter.type
});
}
}
return this.filters = this.sortArrayOfObjects(this.filters, ‘filterColumnText’)
},
openExtraFilter() {
if(this.extraFilter == undefined) return false;
var index = 0;
for(let prop in this.extraFilter.fields) {
var field = this.extraFilter.fields[prop];
//reset values
this.extraFilter.values[‘value’ + index] = ”;
for(let x = 0; x < this.filters.length; x++) {
let filterColumn= this.filters[x].filterColumn;
let filterValue= this.filters[x].filterValue;
if(filterColumn == field) {
this.extraFilter.values[‘value’ + index] = filterValue;
}
}
index++;
}
},
applyExtraFilter() {
if(this.extraFilter == undefined) return false;
let index = 0;
for(let prop in this.extraFilter.fields) {
var filtergroup = new $.jqx.filter();
var filterfield = this.extraFilter.fields[‘field’ + index];
var filter_or_operator = 1;
var filtervalue = this.extraFilter.values[‘value’ + index];
var filtercondition = ‘EQUAL’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
if(filtervalue != null && filtervalue.length !=”) {
this.grid.addfilter(filterfield, filtergroup);
} else {
this.grid.removefilter(filterfield);
}
index++;
}
// apply the filters.
this.grid.applyfilters();
//this.grid.clearfilters();
},
del() {
if(!this.selectedItem) {
this.openAlert(‘warning’, ‘Najprije odaberite stavku za brisanje’);
} else {
this.openAlert(‘question’, ‘Nastaviti s brisanjem’);
}
},
openModal() {
this.showModal = true;
},
closeModal() {
this.showModal = false;
},
openAlert(type, msg, title, continueCallback) {
this.alertType = type;
this.alertMessage = msg;
this.alertTitle = title;
this.alertContinueCallback = continueCallback;
this.showAlert = true;
this.showLoader = false;
},
closeAlert() {
this.showAlert = false;
},
alertCallback(callback) {
this[callback]();
},
setColumnTooltip() {
for(var index in this.columns) {
let column = this.columns[index];
if(column.hasOwnProperty(‘tooltip’)) {
this.columns[index].rendered = function(element) {
element.attr(‘data-toggle’, ‘tooltip’);
element.attr(‘title’, column.tooltip);
element.tooltip();
}
}
}
},
initRightSidebar() {
if(this.showRightSidebar !== undefined) {
let showRightSidebar = localStorage.getItem(this.idSelector + ‘RightSidebar’);
if(showRightSidebar != null) {
this.showRightSidebar = showRightSidebar === ‘true’;
}
}
},
toggleRightSidebar() {
localStorage.setItem(this.idSelector + “RightSidebar”, !this.showRightSidebar);
this.showRightSidebar = !this.showRightSidebar;
this.refresh();
},
toggleColumn(cols) {
for(let index in cols) {
let col = cols[index];
for(let i in this.columns) {
let column = this.columns[i];
if(col.datafield == column.datafield) {
if(col.hidden) {
this.grid.hidecolumn(col.datafield);
} else {
this.grid.showcolumn(col.datafield);
}
}
}
}
this.$refs.toggleColumn.showLoader = false;
this.grid.savestate();
},
getScrollOffset() {
return $(‘#’ + this.idSelector).jqxGrid(‘scrollposition’);
},
setScrollOffset(offset) {
if(this.scrollBarPosition == ‘bottom’) {
this.setScrollBarToBottom(offset);
} else {
$(‘#’ + this.idSelector).jqxGrid(‘scrolloffset’, offset.top, offset.left);
}
},
setScrollBarToBottom(offset) {
$(‘#’ + this.idSelector).jqxGrid(‘scrolloffset’, this.getScrollBarMax(), offset.left);
},
getScrollBarMax() {
return $(‘#verticalScrollBar’ + this.idSelector).jqxScrollBar(‘max’);
},
formatSelectedRow(elementId) {
//remove class from currently selected row
$(‘.selected-row’).removeClass(‘selected-row’);
//add class selected
$(‘#’ + elementId).addClass(‘selected-row’)
},
getSelectedRowId() {
return this.selectedItem ? this.selectedItem.id : null;
},
getQueryFromFilter() {
let filter = ”;
let filterLength = this.filters.length;
let query = ‘filterscount=’ + filterLength;
for(let index in this.filters) {
let filter = this.filters[index];
let value = filter.filterValue;
//check if date
if(filter.filterType == ‘datefilter’) {
value = moment(value).format(‘DD.MM.YYYY’);
}
query += ‘&’ + filter.filterColumn + ‘operator=and’;
query += ‘&filtervalue’ + index + ‘=’ + value;
query += ‘&filtercondition’ + index + ‘=’ + filter.filterCondition;
query += ‘&filterdatafield’ + index + ‘=’ + filter.filterColumn;
}
return query;
}
}
}
`

Sorry i was having wrong code in clipboard.
Please check the animated GIF.

Here’s the right code:

<script>
    /* eslint-disable */
    import "../../node_modules/smart-webcomponents/source/styles/smart.default.css";
    import "../../node_modules/smart-webcomponents/source/modules/smart.grid.js";
    export default {
        mounted() {
            this.initGrid();
        },
        methods: {
            initGrid() {
                let vm = this;
                window.Smart('#grid', class {
                    get properties() {
                        return {
                           editing: {
                                enabled: true,
                                mode: 'row'
                            },
                            filtering: {
                                enabled: true,
                                filterRow: {
                                    visible: true
                                }
                            },
                            dataSource: new window.Smart.DataAdapter({
                                dataSource: [
                                    {id: 11, premiered: '2021-01-01', name: 'Only Fools and Horses'},
                                    {id: 22, premiered: '2021-02-02', name: 'Breaking Bad'},
                                    {id: 33, premiered: '2021-03-03', name: 'Sweet Tooth'},
                                ],
                                dataFields: [
                                    { name: 'id', dataType: 'int'},
                                    { name: 'premiered', dataType: 'date'},
                                    { name: 'name', dataType: 'string'},
                                ]
                            }),
                            columns: [
                                {
                                    label: 'Show',
                                    dataField: 'name'
                                },
                                {
                                    label: 'Premiered',
                                    dataField: 'premiered',
                                    cellsFormat: "dd.MM.yyyy"
                                }
                            ],
                        }
                    }
                }
            )
        }
    }
}
</script>

Ok.
Thanks for info.
Keep up the good work!