DATATABLE SERVERSIDE SECOND TD CLİCK GET MODAL POPPUP DETAİLS

gokhanoz

I want to use the existing + icon feature and I want to open poppup detail when second td is clicked. Currently responsive works smoothly but the + responsive feature disappears when I activate this feature modal poppup details referance link

Summerizate: I want modal popup details to be displayed when second td is clicked without being affected by responsive feature

var assetListVM;
$(function () {
    assetListVM = {
        dt: null,
        init: function () {
            window.$('.js-example-basic-multiple2').select2({
                placeholder: "Tür ...",
                allowClear: true
            });
            window.$('.js-example-basic-multiple3').select2({
                placeholder: "Durum ...",
                allowClear: true
            });
            window.$('.js-example-basic-multiple4').select2({
                placeholder: "Proje ...",
                allowClear: true
            });
            window.dt = window.$('#datatable').DataTable({
                "proccessing": true,
                "serverSide": true,
                "ajax": {
                    "url": '/Teklif/Get',
                    "data": function (data) {
                        if (startDate !== null || endDate !== null) {
                            data.startDate = window.$('#startDate').val();
                            data.endDate = window.$('#endDate').val();
                        }
                        if (window.DurId !== null) {
                            data.DurIds = window.$('#DurId').val().toString();
                        }
                        if (window.TurId !== null) {
                            data.TurIds = window.$('#TurId').val().toString();
                        }
                        if (window.ProId !== null) {
                            data.ProIds = window.$('#ProId').val().toString();
                        }
                    }
                },
                "columns": [
                    { "title": "Sıra", "data": "Id" },
                    { "title": "Tarih", "data": "Tarih", "searchable": true },
                    { "title": "Proje", "data": "ProjeID", "searchable": true },
                    { "title": "Tür", "data": "TurID", "searchable": true },
                    { "title": "Ad", "data": "Ad", "searchable": true },
                    { "title": "Belge No", "data": "DokumanNo", "searchable": true, "stitle:": "DokumanNo" },
                    { "title": "Firma", "data": "CariID", "searchable": true },
                    { "title": "Yetkili", "data": "Yetkili", "searchable": true },
                    { "title": "Telefon", "data": "Telefon", "searchable": true },
                    { "title": "Açıklama", "data": "Aciklama", "searchable": true },
                    { "title": "Oluşturan", "data": "KulID", "searchable": true },
                    { "title": "Durum", "data": "DurumID", "searchable": true },
                    {
                        "title": "KDV Hariç :",
                        "data": "Toplam",
                        "searchable": true
                    },
                    {
                        "title": "KDV Dahil :",
                        "data": "GenelToplam",
                        "searchable": true
                    },
                    {
                        "title": "Eylemler",
                        "render": function (data, type, row) {
                            const inner = `<a href="/Teklif/Güncelle?id=${
                                row.Id}" class="on-default edit-row" title="Güncelle" data-id="${row.Id
                                }"><i class="fa fa-pencil"></i></a> <a href="javascript:void(0);" class="chng-status" title="Teklif Durum" data-id="${row.Id
                                }"><i class="fa fa-circle-o-notch" style="color:crimson;"></i></a> <a href="javascript:void(0);" class="delete-btn" title="Sil" data-id="${row.Id
                                }"><i class="fa fa-trash-o"></i></a>`;
                            return inner;
                        }
                    },
                    {
                        "title": "Revize",
                        "render": function (data, type, row) {
                            const inner = `<a href="/Teklif/GüncelleRevize?id=${
                                row.Id}" class="on-default edit-row" title="Güncelle" data-id="${row.Id
                                }"><i class="fa fa-copy"></i></a> <a href="javascript:void(0);" class="view-revision" data-id="${row.Id
                                }"><i class="ft-list"></i></a>`;
                            return inner;
                        }
                    },
                    {
                        "title": "Dosya",
                        "render": function (data, type, row) {
                            const inner = `<a href="#" class="on-default showfile-btn" title="Teklif" data-id="${row.Id
                                }"><i class="fa fa-file" style="color:red;"></i></a> <a href="#" class="on-default showfile-btn2" title="Arge" data-id="${row.Id
                                }"><i class="fa fa-file" style="color:darkcyan;"></i></a>`;
                            return inner;
                        }
                    }
                ],
                "createdRow": function (row) {
                    window.$.each(window.$('td', row), function () {
                        window.$(this).attr('class', "kisa");
                    });
                },
                'columnDefs': [
                    {
                        'targets': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
                        'createdCell': function (td, cellData, rowData, row, col) {
                            window.$(td).attr('title', cellData);
                            if (col === 4) {
                                window.$(td).attr('id', `title-${rowData.Id}`);
                            }
                        }
                    }
                ],
                "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
                "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                    const oSettings = this.fnSettings();
                    window.$("td:first", nRow).html(oSettings._iDisplayStart + iDisplayIndex + 1);
                    return nRow;
                },
                responsive: true
            });
        }
    };
    assetListVM.init();
});

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin