Referencing and/or using data from one cell in another

nosnetrom

Forgive me if this has been documented elsewhere, but I discovered how to reference data from other cells within the current row. In our case, we needed to use data from hidden cells to compute and render elements in another cell.

Given:

            columns: [
                { data: 'Name' },
                { data: 'AssignedDate' },
                { data: 'DueDate' },
                { data: 'StartDate' },
                { data: 'Status' },
                { data: 'AssignedTo' },
                { data: 'UserId' },
                { data: 'LearningPlanId' },
                { data: 'UserxLearningPlanItemId' },
                { data: 'FileTypeId' },
                { data: 'CompletedDate' },
                { data: "Status" },
            ]

I was able to reference other cells like so:

                    render: function (data, type, row, meta) {
                        var adStr = getDefinedStrings(row).adStr;
                        var sdStr = getDefinedStrings(row).sdStr;
                        var cdStr = getDefinedStrings(row).cdStr;
                        var strButtons = '<div class="cellContents hasButton">';
                        if (cdStr.length > 0) {
                            strButtons += "<button class='btn btn-outline-primary' onclick='window.open(\"\/dashboards\/GetTrainingCertificate?userid=" + row.UserId + "&learningplanid=" + row.LearningPlanId + "&status=" + row.Status + "\")'>View Certificate</button>";
                        } else if (getFilterId("id").length > 0) {
                            strButtons += "<button class='btn btn-outline-primary' onclick=\"showsendreminder('" + row.UserId + "', 'Training', '" + row.AssignedTo + "');\">Send Reminder</button>";
                        } else {
                            strButtons += "<button class='btn btn-primary' onclick='launchContent(\"" + row.UserxLearningPlanItemId + "\"," + row.FileTypeId.toString() + ",2);'>Launch Content</button>";
                        }
                        return strButtons + '</div>';

For reference's sake, here's the getDefinedStrings() function:

    const getDefinedStrings = (d) => {
        var ed = dateFromJsonResult(d.DueDate);
        var edStr = "";
        if (ed != null && typeof ed !== "undefined") {
            edStr = (ed.getUTCMonth() + 1).toString() + "/" + ed.getUTCDate().toString() + "/" + ed.getUTCFullYear().toString();
        }
        ed = dateFromJsonResult(d.AssignedDate);
        var adStr = "";
        if (ed != null && typeof ed !== "undefined") {
            adStr = (ed.getUTCMonth() + 1).toString() + "/" + ed.getUTCDate().toString() + "/" + ed.getUTCFullYear().toString();
        }
        ed = dateFromJsonResult(d.StartDate);
        var sdStr = "";
        if (ed != null && typeof ed !== "undefined") {
            sdStr = (ed.getUTCMonth() + 1).toString() + "/" + ed.getUTCDate().toString() + "/" + ed.getUTCFullYear().toString();
        }
        ed = dateFromJsonResult(d.CompletedDate);
        var cdStr = "";
        if (ed != null && typeof ed !== "undefined") {
            cdStr = (ed.getUTCMonth() + 1).toString() + "/" + ed.getUTCDate().toString() + "/" + ed.getUTCFullYear().toString();
        }
        return {'adStr': adStr, 'sdStr': sdStr, 'cdStr': cdStr};
    }

I hope this helps someone!

allan

Thanks for posting this. Yes, this is documented in the columns.render documentation where it discusses the third parameter for that option when used as a function.

Allan