Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #102259
    nkralj
    Member
    Up
    0
    Down

    The row filter does not work when the property editing is enabled.
    <div>
    <div>window.Smart(‘#grid’, class {</div>
    <div>                    get properties() {</div>
    <div>                        return {</div>
    <div>                           editing: {</div>
    <div>                                enabled: true,</div>
    <div>                                mode: ‘cell'</div>
    <div>                            },</div>
    <div>                            filtering: {</div>
    <div>                                enabled: true,</div>
    <div>                                filterRow: {</div>
    <div>                                    visible: true</div>
    <div>                                }</div>
    <div>                            },</div>
    <div>                            dataSource: new window.Smart.DataAdapter({</div>
    <div>                                dataSource: [</div>
    <div>                                    {id: 11, premiered: ‘2021-01-01’, name: ‘Only Fools and Horses’},</div>
    <div>                                    {id: 22, premiered: ‘2021-02-02’, name: ‘Breaking Bad’},</div>
    <div>                                    {id: 33, premiered: ‘2021-03-03’, name: ‘Sweet Tooth’},</div>
    <div>                                ],</div>
    <div>                                dataFields: [</div>
    <div>                                    { name: ‘id’, dataType: ‘int’},</div>
    <div>                                    { name: ‘premiered’, dataType: ‘date’},</div>
    <div>                                    { name: ‘name’, dataType: ‘string’},</div>
    <div>                                ]</div>
    <div>                            }),</div>
    <div>                            columns: [</div>
    <div>                                {</div>
    <div>                                    label: ‘Show’,</div>
    <div>                                    dataField: ‘name'</div>
    <div>                                },</div>
    <div>                                {</div>
    <div>                                    label: ‘Premiered’,</div>
    <div>                                    dataField: ‘premiered’,</div>
    <div>                                    cellsFormat: “dd.MM.yyyy”</div>
    <div>                                }</div>
    <div>                            ],</div>
    <div></div>
    <div>                        }</div>
    <div>                    }</div>
    <div>                }</div>
    <div>            )</div>
    <div></div>
    <div>        }</div>
    </div>

    #102285
    admin
    Keymaster
    Up
    0
    Down

    Hi nkralj,
    The latest smart-webcomponents-angular build resolves this reported behavior.
    Best regards,
    Peter Stoev
    Smart UI Team
    https://www.htmlelements.com/

    #102286
    nkralj
    Member
    Up
    0
    Down

    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;
    }
    }
    }
    `

    #102287
    admin
    Keymaster
    Up
    0
    Down

    Hi,
    The latest code is for jqxGrid, not for Smart.Grid. if you have jqwidgets questions, please use the jqwidgets.com forum
    Regards,
    Peter

    #102289
    nkralj
    Member
    Up
    0
    Down

    Sorry i was having wrong code in clipboard.
    Please check the animated GIF.
    Smart Grid Vue issue
    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>
    
    #102290
    admin
    Keymaster
    Up
    0
    Down

    Hi nkralj,
    We do not have a new Vue JS release available. You can subscribe to our newsletter and when the release is available, you will be notified. The fix will be available within it.
    Best regards,
    Peter Stoev
    Smart UI Team
    https://www.htmlelements.com/

    #102291
    nkralj
    Member
    Up
    0
    Down

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.