This topic contains 12 replies, has 2 voices, and was last updated by Jai Jai 9 months, 1 week ago.

get value checkbox checked in datatable


  • hafizanenvato
    Participant

    Posts: 25
    Member Reply #13687

    i initialise metronic datatable using angular 4 approach. i initialise using in ngAfterInit. it working great except i cant get the value of checked checkbox in datatable. How to get that value/id checkbox(checked=true)? im stuck on this so long. Your help would be much appreciated.

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #13713

    Hi 🙂

    First make the init datatable variable available for other functions in component.
    this.datatable = $(dt).mDatatable();

    For example get the selected checkbox on button click. Bind some button to click event and in the function, get selected row by this function.
    let selected = this.datatable.getSelectedRecords();

    Thanks


    hafizanenvato
    Participant

    Posts: 25
    Member Reply #13730

    can you show me example how to do it in angular way? i dint get it because i cant even make clikc button in datatable function in..

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #13793

    Hi 🙂

    Below is my sample to init datatable inside component.

    “options” is the datatable options variable.

    ngOnInit() {
      var datatable = $('.m_datatable').mDatatable(options);
    
      $(document).on('click', '.deleteFn', (e) => {
        e.preventDefault();
        let selected = this.datatable.getSelectedRecords();
      });
    }

    Thanks


    hafizanenvato
    Participant

    Posts: 25
    Member Reply #13966

    ngAfterViewInit() {

    var options = {
    data: {
    type: “remote”,
    source: {
    read: {
    url: “http://localhost:8080/api/agency”,
    headers: {
    “Authorization”: this.bearToken
    }
    }
    },
    pageSize: 10,
    saveState: {
    cookie: false,
    webstorage: false
    },
    serverPaging: !0,
    serverFiltering: !0,
    serverSorting: !0
    },
    layout: {
    theme: “default”,
    class: “”,
    scroll: !1,
    height: 550,
    footer: !1
    },
    sortable: !0,
    pagination: !0,
    columns: [{
    field: “id”,
    title: “#”,
    sortable: !1,
    width: 40,
    textAlign: “center”,
    selector: {
    class: “m-checkbox–solid m-checkbox–brand”
    }
    }, {
    field: “name”,
    title: “Nama”,
    sortable: “asc”,
    filterable: !1,
    width: 150
    }, {
    field: “code”,
    title: “Nama Singkatan”,
    width: 150
    }, {
    field: “state”,
    title: “Negeri”,
    sortable: !1,
    template: function(row){
    var state = row.state;
    if(state == null){
    return “”;
    }else{
    return row.state.name;
    }
    }
    }, {
    field: “city”,
    title: “Bandar”,
    width: 100,
    template: function(row){
    var city = row.city;
    if(city == null){
    return “”;
    }else{
    return row.city.name;
    }
    }
    }, {
    field: “phoneNo”,
    title: “No Tel.”
    },{
    field: “Actions”,
    width: 110,
    title: “Actions”,
    sortable: !1,
    overflow: “visible”,
    template: function(t) {
    return ‘\t\t\t\t\t\t\t<i class=”la la-pencil”></i>\t\t\t\t\t\t\t\t\t\t\t\t’+
    ‘<button id=”‘+t.id+'” class=”deleteFn m-portlet__nav-link btn m-btn m-btn–hover-danger m-btn–icon m-btn–icon-only m-btn–pill btn-outline-danger” title=”Delete”>\t\t\t\t\t\t\t<i class=”la la-trash”></i>\t\t\t\t\t\t</button>\t\t\t\t\t’
    }
    }]
    }

    let datatable = (<any>$(‘#agencyList’)).mDatatable(options);

    }

     

    **above are exactly my initiliastion.and i try your code but the value selected is null.

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #13988

    Hi 🙂

    Btw, you are editing the generated source. For easy development, you should edit of refer to the source file in the src folder, instead of assets. Those are for the compiled js/css. And use our build tools (gulp) to compile it.

    Please read more on the documentation.

    You can check our demo record selection here;

    /src/js/demo/default/custom/components/datatables/base/record-selection.js

    Thanks


    hafizanenvato
    Participant

    Posts: 25
    Member Reply #14003

    is it different between compiled and the raw one?

    my problem occurs beacus im use the compiled one?

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #14040

    Hi 🙂

    I just realize your .deleteFn is a button that exists in each row (specifically in Action column). If the button is attached to row, why do you need checkbox selector in the first place?

    If the .deleteFn button is outside of the mDatatable, the user can select (the checkbox selector) which rows they want for the action and click .deleteFn to execute the action for all selected rows.

    .deleteFn is inside each row, for the single row action. You can just attach the click listener to .deleteFn button, without using getSelectedRecords().

    I’m using this way to get the value in checkbox;

    $(‘.m_datatable’).on(‘click’, ‘.deleteFn’, (e) => {
    e.preventDefault();
    var id = $(e.target).closest(‘tr’).find(‘[type=”checkbox”]’).val();
    console.log(id);
    });

    Thanks


    hafizanenvato
    Participant

    Posts: 25
    Member Reply #14071

    Hi,

    Im using two delete function.

    1) each row. so user can directly delete when click button on specific row(using .delete)

    2) checkbox im using for delete or approve application of the checked row.

     

    basically for no 1) im already successfully get it done with ur help. and now i try to get all checked value from check box which is no 2) and i fail to do that.

    **seem like i still cant understand this, i know what u mean but how to do that, would u please help me “If the .deleteFn button is outside of the mDatatable, the user can select (the checkbox selector) which rows they want for the action and click .deleteFn to execute the action for all selected rows.”

     

    thanks


    hafizanenvato
    Participant

    Posts: 25
    Member Reply #14073

    finally i got it..but im not sure is this the right way getting it using this template(api from this datatable):

    this is how im do it.

     

    $(document).on(‘click’, ‘#m_datatable_check_all’, (e) => {
    e.preventDefault();

    let cbArr: any[] = new Array();

    var $cbAnswer = $(“.m-datatable__body”).find(“.m-checkbox > input”);
    $cbAnswer.each( function(i) {
    var status = $(this).is(“:checked”);
    if(status){
    var id = $(this).val();
    cbArr.push(id);
    }

    });

    console.log(cbArr);

    });

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #14088

    Hi 🙂

    Can you try this? I modify it a bit.

    $(document).on(‘click’, ‘#m_datatable_check_all’, (e) => {
    e.preventDefault();

    let cbArr: any[] = new Array();
    // select active rows using existing datatable instance
    let selectedRows = datatable.rows(‘.m-datatable__row–active’).nodes();

    var $cbAnswer = $(selectedRows).find(‘.m-checkbox > [type=”checkbox”]’);
    $cbAnswer.each(function(i) {
    var id = $(this).val();
    cbArr.push(id);
    });

    console.log(cbArr);
    });

    We have the demo to get all the selected records.

    /src/js/demo/default/custom/components/datatables/api/methods.js

    Thanks


    hafizanenvato
    Participant

    Posts: 25
    Member Reply #14089

    thank for the modify,

    i do check ur demo, but it not working, maybe i did miss something.

    Thanks

    Jai
    Jai
    Keymaster

    Posts: 2700
    Support Staff Reply #14093

    In your case, you are selecting checkbox value. The demo works similar, but select the other column’s content. Not the checkbox.

    Thanks

You must be logged in to reply to this topic.