Activities of "cfyazilim"

Version: 8.7.0 Type: MVC Framework: .NET Core About UI my theme is metronic 4th theme

I need editable row table like this screenshot. Is it possible?

thank you ı am waiting

Anyone help me please?

And this is result

 var dataTable = _$customersTable.DataTable({
            scrollX: true,
            responsive: false,
            paging: true,
            serverSide: true,
            processing: true,
            listAction: {
                ajaxFunction: _customersService.getAll,
                inputFilter: function () {
                    return {
                        filter: $('#CustomersTableFilter').val(),
                        nameFilter: $('#NameFilterId').val(),
                        codeFilter: $('#CodeFilterId').val(),
                        phone1Filter: $('#Phone1FilterId').val(),
                        phone2Filter: $('#Phone2FilterId').val(),
                        faxFilter: $('#FaxFilterId').val(),
                        mobileFilter: $('#MobileFilterId').val(),
                        webFilter: $('#WebFilterId').val(),
                        emailFilter: $('#EmailFilterId').val(),
                        invoiceAddress1Filter: $('#InvoiceAddress1FilterId').val(),
                        invoiceAddress2Filter: $('#InvoiceAddress2FilterId').val(),
                        taxDepartmentFilter: $('#TaxDepartmentFilterId').val(),
                        taxIdFilter: $('#TaxIdFilterId').val(),
                        mernisIdFilter: $('#MernisIdFilterId').val(),
                        locationFilter: $('#LocationFilterId').val(),
                        commercialTitleFilter: $('#CommercialTitleFilterId').val(),
                        invoiceZipCodeFilter: $('#InvoiceZipCodeFilterId').val(),
                        deliveryAddress1Filter: $('#DeliveryAddress1FilterId').val(),
                        deliveryAddress2Filter: $('#DeliveryAddress2FilterId').val(),
                        deliveryZipCodeFilter: $('#DeliveryZipCodeFilterId').val(),
                        minEmployeeCountFilter: $('#MinEmployeeCountFilterId').val(),
                        maxEmployeeCountFilter: $('#MaxEmployeeCountFilterId').val(),
                        riskTypeFilter: -1,
                        deliveryNoteAmountsFilter: -1,
                        approvedOrdersFilter: -1,
                        allOfOrdersFilter: -1,
                        deliveryDurationTypeFilter: -1,
                        minRiskLimitFilter: $('#MinRiskLimitFilterId').val(),
                        maxRiskLimitFilter: $('#MaxRiskLimitFilterId').val(),
                        statusFilter: $('#StatusFilterId').val(),
                        minDeliveryDurationFilter: $('#MinDeliveryDurationFilterId').val(),
                        maxDeliveryDurationFilter: $('#MaxDeliveryDurationFilterId').val(),                      
                        minDiscountRateFilter: $('#MinDiscountRateFilterId').val(),
                        maxDiscountRateFilter: $('#MaxDiscountRateFilterId').val(),
                        minClassFilter: $('#MinClassFilterId').val(),
                        maxClassFilter: $('#MaxClassFilterId').val(),
                        text1Filter: $('#Text1FilterId').val(),
                        text2Filter: $('#Text2FilterId').val(),
                        text3Filter: $('#Text3FilterId').val(),
                        text4Filter: $('#Text4FilterId').val(),
                        text5Filter: $('#Text5FilterId').val(),
                        text6Filter: $('#Text6FilterId').val(),
                        minNumber1Filter: $('#MinNumber1FilterId').val(),
                        maxNumber1Filter: $('#MaxNumber1FilterId').val(),
                        minNumber2Filter: $('#MinNumber2FilterId').val(),
                        maxNumber2Filter: $('#MaxNumber2FilterId').val(),
                        minNumber3Filter: $('#MinNumber3FilterId').val(),
                        maxNumber3Filter: $('#MaxNumber3FilterId').val(),
                        minNumber4Filter: $('#MinNumber4FilterId').val(),
                        maxNumber4Filter: $('#MaxNumber4FilterId').val(),
                        minNumber5Filter: $('#MinNumber5FilterId').val(),
                        maxNumber5Filter: $('#MaxNumber5FilterId').val(),
                        minNumber6Filter: $('#MinNumber6FilterId').val(),
                        maxNumber6Filter: $('#MaxNumber6FilterId').val(),
                        minDate1Filter: getDateFilter($('#MinDate1FilterId')),
                        maxDate1Filter: getDateFilter($('#MaxDate1FilterId')),
                        minDate2Filter: getDateFilter($('#MinDate2FilterId')),
                        maxDate2Filter: getDateFilter($('#MaxDate2FilterId')),
                        minDate3Filter: getDateFilter($('#MinDate3FilterId')),
                        maxDate3Filter: getDateFilter($('#MaxDate3FilterId')),
                        minDate4Filter: getDateFilter($('#MinDate4FilterId')),
                        maxDate4Filter: getDateFilter($('#MaxDate4FilterId')),
                        minDate5Filter: getDateFilter($('#MinDate5FilterId')),
                        maxDate5Filter: getDateFilter($('#MaxDate5FilterId')),
                        minDate6Filter: getDateFilter($('#MinDate6FilterId')),
                        maxDate6Filter: getDateFilter($('#MaxDate6FilterId')),
                        districtNameFilter: $('#DistrictNameFilterId').val(),
                        cityNameFilter: $('#CityNameFilterId').val(),
                        countryNameFilter: $('#CountryNameFilterId').val(),
                        districtName2Filter: $('#DistrictName2FilterId').val(),
                        cityName2Filter: $('#CityName2FilterId').val(),
                        countryName2Filter: $('#CountryName2FilterId').val(),
                        customerTypeNameFilter: $('#CustomerTypeNameFilterId').val(),
                        regionNameFilter: $('#RegionNameFilterId').val(),
                        userNameFilter: $('#UserNameFilterId').val(),
                        riskCriterionNameFilter: $('#RiskCriterionNameFilterId').val(),
                        offerOrderTemplateNameFilter: $('#OfferOrderTemplateNameFilterId').val(),
                        offerOrderTemplateName2Filter: $('#OfferOrderTemplateName2FilterId').val(),
                        deliveryTypeNameFilter: $('#DeliveryTypeNameFilterId').val(),
                        sectorNameFilter: $('#SectorNameFilterId').val(),
                        paymentConditionNameFilter: $('#PaymentConditionNameFilterId').val(),
                        courierCompanyNameFilter: $('#CourierCompanyNameFilterId').val(),
                        pointAreaValueValueFilter: $('#PointAreaValueValueFilterId').val(),
                        pointAreaValueValue2Filter: $('#PointAreaValueValue2FilterId').val(),
                        pointAreaValueValue3Filter: $('#PointAreaValueValue3FilterId').val(),
                        pointAreaValueValue4Filter: $('#PointAreaValueValue4FilterId').val(),
                        pointAreaValueValue5Filter: $('#PointAreaValueValue5FilterId').val(),
                        pointAreaValueValue6Filter: $('#PointAreaValueValue6FilterId').val(),
                        pointAreaValueValue7Filter: $('#PointAreaValueValue7FilterId').val(),
                        pointAreaValueValue8Filter: $('#PointAreaValueValue8FilterId').val(),
                        pointAreaValueValue9Filter: $('#PointAreaValueValue9FilterId').val(),
                        pointAreaValueValue10Filter: $('#PointAreaValueValue10FilterId').val()
                    };
                }
            },
            columnDefs: [
                {
                    className: "text-align-right-buttons",
                    targets: 7,
                    width: 1,
                    data: null,
                    orderable: false,
                    autoWidth: false,
                    defaultContent: "<button id='btnEdit' class=\"btn btn-sm btn-clean btn-icon btn-icon-md\"><i class='la la-edit' title='" + app.localize('Edit') + "'></i/></button><button id='btnDelete' class=\"btn btn-sm btn-clean btn-icon btn-icon-md\"><i class='la la-trash' title='" + app.localize('Delete') + "'></i/></button>"
                },
                {
                    className: "clickView",
                    targets: 0,
                    data: "customer.name",
                    name: "name"
                },
                {
                    className: "clickView",
                    targets: 1,
                    data: "customer.phone1",
                    name: "phone1"
                },
                {
                    className: "clickView",
                    targets: 2,
                    data: "customer.email",
                    name: "email"
                },
                {
                    className: "clickView",
                    targets: 3,
                    data: "customer.web",
                    name: "web"
                },
                {
                    className: "clickView",
                    targets: 4,
                    data: "cityName",
                    name: "invoiceCityFk.name"
                },
                {
                    className: "clickView",
                    targets: 5,
                    data: "sectorName",
                    name: "sectorFk.name"
                },          
                {
                    className: "clickView",
                    targets: 6,
                    data: "customer.status",
                    name: "status",
                    render: function (status) {
                        return app.localize('Enum_CustomerStatus_' + status);
                    }
                }
            ]
        });

         <div class="row align-items-center">
                    <table id="CustomersTable" class="display table table-striped table-bordered table-hover dt-responsive nowrap">
                        <thead>
                            <tr>
                                <th>@L("Name")</th>
                                <th>@L("Phone")</th>
                                <th>@L("Email")</th>
                                <th>@L("Web")</th>
                                <th>@L("City")</th>
                                <th>@L("Sector")</th>
                                <th>@L("Status")</th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>

If you want to from me add these code: className: 'control responsive', orderable: false, render: function () { return ''; }, targets: 0

I dont want responsive, I want scroll . Please check my codes.

And default theme settings

Metronic 6 theme 4 Default asp.net zero table settings

Hello

I am using asp.net zero core mvc version. When ı want to tables scrool feature, ı change js file like this :scrollX: true but scroll feature does not work. When ı change js file like this: ,scrollX:true, responsive: false, it works but table is broken like this screenshot.

Can you help me? What is wrong? Thank you

var dataTable = _$customersTable.DataTable({
            scrollX: true,
            responsive: false,
            paging: true,
            serverSide: true,
            processing: true,
            listAction: {
                ajaxFunction: _customersService.getAll,
                inputFilter: function () {
                    return {
                        
                        
                    };
                }
            },
            columnDefs: [
                {
                    className: "text-align-right-buttons",
                    targets: 7,
                    width: 1,
                    data: null,
                    orderable: false,
                    autoWidth: false,
                    defaultContent: "<button id='btnEdit' class=\"btn btn-sm btn-clean btn-icon btn-icon-md\"><i class='la la-edit' title='" + app.localize('Edit') + "'></i/></button><button id='btnDelete' class=\"btn btn-sm btn-clean btn-icon btn-icon-md\"><i class='la la-trash' title='" + app.localize('Delete') + "'></i/></button>"
                },
                {
                    className: "clickView",
                    targets: 0,
                    data: "customer.name",
                    name: "name"
                },
                {
                    className: "clickView",
                    targets: 1,
                    data: "customer.phone1",
                    name: "phone1"
                },
                {
                    className: "clickView",
                    targets: 2,
                    data: "customer.email",
                    name: "email"
                },
                {
                    className: "clickView",
                    targets: 3,
                    data: "customer.web",
                    name: "web"
                },
                {
                    className: "clickView",
                    targets: 4,
                    data: "cityName",
                    name: "invoiceCityFk.name"
                },
                {
                    className: "clickView",
                    targets: 5,
                    data: "sectorName",
                    name: "sectorFk.name"
                },          
                {
                    className: "clickView",
                    targets: 6,
                    data: "customer.status",
                    name: "status",
                    render: function (status) {
                        return app.localize('Enum_CustomerStatus_' + status);
                    }
                }
            ]
        });