Fixed columns are not Inline editable.

libradford

We have a tool we are building and the ProfitCenter needs to be editable inline, but the column also needs to stay fixed when scrolling. No matter what I try, I am not able to achieve both. Is there a solution for this issue????

libradford

editorRequests = new $.fn.dataTable.Editor({
        ajax:
        {
            url: "/ProfitCenter/SubmitRequests",
            type: "POST"
        },

        table: "#PCRequests",
        display: "jqueryui",
        fields: [
            {
                label: "Request Id:",
                type: "select",
                name: "ProfitCenterRequest.Id",
                type: "readonly"
            },
            {

                label: "Request Type:",
                name: "ProfitCenterRequest.RequestType",
                multiEditable: false,
                type: "readonly"

            },
            {
                type: "select",
                label: "Status:",
                name: "ProfitCenterRequest.Status",
                options: ["Not Submitted", "Pending"]

            },

            {
                label: "Profit Center:",
                name: "ProfitCenterRequest.ProfitCenter",
                multiEditable: false
            },
            {
                label: "Suggested Profit Center:",
                name: "ProfitCenterRequest.SuggestedPC",
                multiEditable: false
            },
            {
                label: "Name:",
                name: "ProfitCenterRequest.Name",
                multiEditable: false
            },
            {
                label: "Description:",
                name: "ProfitCenterRequest.Description",
                multiEditable: false
            },
            {
                type: "select",
                label: "Company Code",
                name: "ProfitCenterRequest.CompanyCode",
                placeholder: "Select"
            },

            {
                type: "select",
                label: "Successor PC",
                name: "ProfitCenterRequest.SuccessorPC",
                placeholder: "Select"
            },
            {
                type: "select",
                label: "Reference PC",
                name: "ProfitCenterRequest.ReferencePC",
                placeholder: "Select"
            },
            {
                type: "select",
                label: "US Residual PC",
                name: "ProfitCenterRequest.USResidualPC",
                placeholder: "Select"
            },
            {
                type: "select",
                label: "Business:",
                name: "ProfitCenterRequest.Business",
                placeholder: "Select"
            },
            {
                type: "select",
                label: "Business Area:",
                name: "ProfitCenterRequest.BusinessArea",
                placeholder: "Select"
            },
        
            {
                type: "select",
                label: "Federal Classification:",
                name: "ProfitCenterRequest.FederalClassification",
                placeholder: "Select Federal Classification"
            },
            {
                type: "textarea",
                label: "Notes:",
                name: "ProfitCenterRequest.Notes"
            }
        ]       
    });

    requestTable = $('#PCRequests').DataTable({
            scrollX: true,
            scrollCollapse: true,
            /*"autoWidth": false,*/
            fixedColumns: {
                leftColumns: 4,
                heightMatch: "auto"
            },
            dom: "Bfrtip",
            ajax: {
                url: "/ProfitCenter/PCRequests",
                type: 'POST'
            },
            serverSide: true,
            order: [[1, 'desc']],
            columns: [
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false,
                    searchable: false
                },
                { data: "ProfitCenterRequest.Id", editField: "ProfitCenterRequest.Id" },
                { data: "ProfitCenterRequest.RequestType", editField: "ProfitCenterRequest.RequestType" , className: 'RequestType' },
                {
                    data: "ProfitCenterRequest.Status", editField: "ProfitCenterRequest.Status" , className: "Status", 
                    defaultContent: "<a href='#'>Not Submitted</a>",
                    "render": function (data, type, row, meta) {
                        if (type === 'display') {
                            if (data == 'Not Submitted') {
                                //data = "<a href='#'>" + data + "</a>"
                            }
                            else {
                                data = "<a href='#' data-toggle='modal' data-target='#newApprovalModal'>" + data + "</a>"
                            }
                        }
                        return data;
                    }
                },
                { data: "ProfitCenterRequest.ProfitCenter", editField: "ProfitCenterRequest.ProfitCenter", className: 'editable' },
                { data: "ProfitCenterRequest.SuggestedPC", editField: "ProfitCenterRequest.SuggestedPC"},
                { data: "ProfitCenterRequest.Name", editField: "ProfitCenterRequest.Name", className: 'editable'},
                { data: "ProfitCenterRequest.CreatedBy", editField: "ProfitCenterRequest.CreatedBy"},
                {
                    data: "ProfitCenterRequest.CreatedDate", editField: "ProfitCenterRequest.CreatedDate", type: "datetime",
                    render: function (data, type) {
                        if (data !== null) {
                            var wrapper = moment(new Date(parseInt(data.substr(6))));
                            return wrapper.format("YYYY-MM-DD");
                        }
                        else {
                            return "";
                        }
                    }
                },
                { data: "ProfitCenterRequest.SuccessorPC", editField: "ProfitCenterRequest.SuccessorPC" },
                { data: "ProfitCenterRequest.ReferencePC", editField: "ProfitCenterRequest.ReferencePC" },
                { data: "ProfitCenterRequest.USResidualPC", editField: "ProfitCenterRequest.USResidualPC" },
                { data: "ProfitCenterRequest.CompanyCode", editField: "ProfitCenterRequest.CompanyCode", className: "CompanyCode editable" },
                { data: "VW_ZNODES.TEXT", editField: "ProfitCenterRequest.Business", className: "Business" },
             
                { data: "VW_J_1BBRANCH.NAME", editField: "ProfitCenterRequest.BusinessPlace" },
                {
                    data: "ProfitCenterRequest.Description", editField: "ProfitCenterRequest.Description",
                    searchable: false },
                {
                    data: "ProfitCenterRequest.Purpose", editField: "ProfitCenterRequest.Purpose",
                    searchable: false
                },
                {
                    data: "ProfitCenterRequest.Notes", editField: "ProfitCenterRequest.Notes", className: 'editable',
                    searchable: false
                }
                //,{
                //    data: null,
                //    defaultContent: "<a href='#' data-toggle='modal' data-target='#'>Hierarchy </a>",
                //    render: function (data, type, row, meta) {
                //        if (type === 'display') {
                //            data = "<a href='#' data-toggle='modal' data-target='#'>  Hierarchy </a>";
                //        }
                //        return data;
                //    },
                //    searchable: false
                //}
                
            ],
            select: {
                style: 'os',
                selector: 'td.select-checkbox'
            },
            buttons: [
                {
                    extend: "create",
                    text: "New",
                    action: function (e, dt, node, config) {
                        currentPCRequests = dt.rows({ selected: true }).data();
                        $('#BulkRequestModal').modal('show');
                    }
                },
                { extend: "edit", editor: editorRequests },

                {
                    extend: "remove",
                    text: "Delete",
                    action: function (e, dt, node, config) {
                        currentPCRequests = dt.rows({ selected: true }).data();
                        $('#DeleteModal').modal('show');
                    }
                
                },
                "selectNone"
            ]

        });

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

colin

This example here should help, as it's doing just that. Could you take a look, please, and see if that does the trick,

Colin

libradford

Below is my original code for the inline call:

 $(requestTable.table().container()).on('click', 'tbody td:not(:first-child)', function (e) {
            if ((this.className.trim() != "Status") || ((this.className.trim() == "Status") && (this.textContent == "Not Submitted"))) {
                //editorRequests.inline(this, {
                //    submit: 'allIfChanged',
                //    scope: 'cell',
                //    buttons: { label: '>', fn: function () { this.submit(); } }
                //});
                editorRequests.one('open', () => {
                    $('input', this).focus();
                });
                editorRequests.inline(requestTable.cells(this.parentNode, '*').nodes(), {
                    submit: 'allIfChanged',
                    scope: 'cell',
                    buttons: { label: '>', fn: function () { this.submit(); } }
                });
            }

        });

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

colin

Did that example I posted get you going? I'm not clear if you still have an issue.

Colin

libradford

No, I was not able to get it working properly.

colin

If you want assistance, can you link to your page so we can take a look, please,

Colin