Fixed columns are not Inline editable.

Fixed columns are not Inline editable.

libradfordlibradford Posts: 8Questions: 1Answers: 0

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????

Replies

  • libradfordlibradford Posts: 8Questions: 1Answers: 0
    edited June 2021
    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • libradfordlibradford Posts: 8Questions: 1Answers: 0
    edited June 2021

    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: '&gt;', fn: function () { this.submit(); } }
                    //});
                    editorRequests.one('open', () => {
                        $('input', this).focus();
                    });
                    editorRequests.inline(requestTable.cells(this.parentNode, '*').nodes(), {
                        submit: 'allIfChanged',
                        scope: 'cell',
                        buttons: { label: '&gt;', fn: function () { this.submit(); } }
                    });
                }
    
            });
    

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • libradfordlibradford Posts: 8Questions: 1Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

Sign In or Register to comment.