This topic contains 10 replies, has 2 voices, and was last updated by Jai Jai 5 months ago.

Datatable checkbox does not refresh


  • ademsis
    Participant

    Posts: 76
    Member Reply #18180

    Hello,

    I’m using metronic datatable and using local datasource. After refreshing data (dataJSONArray) from web service, I execute below codes to refresh datatable.

    this.datatable.originalDataSet = this.dataJSONArray;
    this.datatable.reload();

    After first refresh I select some records and refresh data (dataJSONArray) and execute above codes, but selection does not lost. I’m using version 5.2.1


    ademsis
    Participant

    Posts: 76
    Member Reply #18183

    Reminder

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #18191

    Hi 🙂

    Can you please send a few more code line to check?

    Thanks


    ademsis
    Participant

    Posts: 76
    Member Reply #18223

    Hi Jai,

    I hope you will find below code enough:


    export class HoldOrdersComponent implements OnInit {
    selectedFilter1;
    selectedFilter2;
    filter1Value: string;
    filter2Value: string;
    //selectedValue;
    filterList: { "id": number; "name": string; }[];
    // filter1;
    //transitStatus;
    transitStatusList;
    cmbTransitStatus: any = null;
    // selectedAllRows;
    // requestIds;
    filterProjectList: any;

    dataJSONArray = [];
    datatable;

    options = {
    data: {
    type: 'local',
    source: this.dataJSONArray,
    pageSize: 10,
    saveState: {
    cookie: true,
    webstorage: true
    },

    serverPaging: false,
    serverFiltering: false,
    serverSorting: false
    },

    layout: {
    theme: 'default',
    class: 'm-datatable--brand',
    scroll: true,
    height: null,
    footer: false,
    header: true,

    smoothScroll: {
    scrollbarShown: true
    },

    spinner: {
    overlayColor: '#000000',
    opacity: 0,
    type: 'loader',
    state: 'brand',
    message: true
    },

    icons: {
    sort: { asc: 'la la-arrow-up', desc: 'la la-arrow-down' },
    pagination: {
    next: 'la la-angle-right',
    prev: 'la la-angle-left',
    first: 'la la-angle-double-left',
    last: 'la la-angle-double-right',
    more: 'la la-ellipsis-h'
    },
    }
    },

    sortable: true,

    pagination: true,

    search: {
    // enable trigger search by keyup enter
    onEnter: false,
    // input text for search
    input: $('#generalSearch'),
    // search delay in milliseconds
    delay: 400,
    },

    // columns definition
    columns: [{
    field: "OrderId",
    title: "#",
    sortable: false,
    width: 40,
    locked: { left: 'xl' },
    selector: { class: 'm-checkbox--solid m-checkbox--brand' }
    }, {
    field: "InvoiceYear",
    //title: "Id",
    title: "Yıl",
    sortable: true,
    width: 40,
    }, {
    field: "InvoiceWeek",
    title: "Hafta",
    sortable: true,
    width: 40,
    }],

    toolbar: {
    layout: ['pagination', 'info'],

    placement: ['bottom'], //'top', 'bottom'

    items: {
    pagination: {
    type: 'default',

    pages: {
    desktop: {
    layout: 'default',
    pagesNumber: 6
    },
    tablet: {
    layout: 'default',
    pagesNumber: 3
    },
    mobile: {
    layout: 'compact'
    }
    },

    navigation: {
    prev: true,
    next: true,
    first: true,
    last: true
    },

    pageSizeSelect: [10, 20, 30, 50, 100]
    },

    info: true
    }
    },

    translate: {
    records: {
    processing: 'Please wait...',
    noRecords: 'No records found'
    },
    toolbar: {
    pagination: {
    items: {
    default: {
    first: 'First',
    prev: 'Previous',
    next: 'Next',
    last: 'Last',
    more: 'More pages',
    input: 'Page number',
    select: 'Select page size'
    },
    info: 'Displaying {{start}} - {{end}} of {{total}} records'
    }
    }
    }
    }

    ,
    extensions: {
    checkbox: {},
    }

    }

    eventsCapture = function(dataTable) {
    //$('.m_datatable')
    dataTable
    //(<any>$('#m_datatable'))
    .on('m-datatable--on-check', function(e, args) {
    //console.log('Checkbox active: ' + args.toString());
    selOrderIds.push(args.toString());
    })
    .on('m-datatable--on-uncheck', function(e, args) {
    //console.log('Checkbox inactive: ' + args.toString());
    let i = selOrderIds.indexOf(args.toString());
    if (i !== -1) {
    selOrderIds.splice(i, 1);
    }
    });
    };

    constructor(private holdOrdersService: HoldOrdersService, private customerService: CustomerService) { }

    ngOnInit() {
    this.datatable = (<any>$('#m_datatable')).mDatatable(this.options);
    this.eventsCapture(this.datatable);

    this.holdOrdersService.GetTransitStatus()
    .subscribe((resp) => {
    this.transitStatusList = resp;
    if (resp){
    this.cmbTransitStatus = resp[0];
    }
    });

    this.holdOrdersService.GetFilterList()
    .subscribe(resp => this.filterList = resp);

    this.customerService.GetProjectList()
    .subscribe(resp => {
    this.filterProjectList = resp;
    });
    }

    btnSearchClick() {
    let transitStatus: number = null;
    if (this.cmbTransitStatus && this.cmbTransitStatus.id > 1) {
    transitStatus = this.cmbTransitStatus.id - 2;
    }

    let filter1Code: string = null;
    let filter2Code: string = null;
    if (this.selectedFilter1) {
    filter1Code = this.selectedFilter1.code;
    }
    if (this.selectedFilter2) {
    filter2Code = this.selectedFilter2.code;
    }

    this.holdOrdersService.GetHoldOrders(transitStatus, filter1Code, this.filter1Value, filter2Code, this.filter2Value)
    .subscribe((resp: any) => {
    this.dataJSONArray = resp.Result.HoldOrders;
    this.datatable.originalDataSet = this.dataJSONArray;
    this.datatable.reload();
    });
    }

    }


    ademsis
    Participant

    Posts: 76
    Member Reply #18265

    Any answer?


    ademsis
    Participant

    Posts: 76
    Member Reply #18290

    Will you answer?

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #18326

    Hi 🙂

    Can you try to disable the option data.saveState: false?

    Thanks


    ademsis
    Participant

    Posts: 76
    Member Reply #18338

    options.data.saveState: false or below assignments did not made any change

    options = {
    data: {
    type: 'local',
    source: this.dataJSONArray,
    pageSize: 10,
    saveState: {
    cookie: false,
    webstorage: false
    },


    ademsis
    Participant

    Posts: 76
    Member Reply #18355

    Can you please reply?


    ademsis
    Participant

    Posts: 76
    Member Reply #18358

    Hi Jai.

    I’am waiting for 2 weeks, for a solution. Will you help or guide me if I do something wrong or missing…

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #18370

    Hi 🙂

    Sorry for the very late response. It was a bug, after using reload() the checked checkboxes not properly cleared.

    We have fixed it in the datatable plugin. You should get the fix in the next updates. We are releasing a new update by today, with other bug fixes and features.

    Thanks

You must be logged in to reply to this topic.