SharePoint Online CSR, make clickable link in Datasheet View

Question

Want to create direct link to Document Set folders, so found and changed CSR that do this. Works well, but not in Datasheet View (it is not clickable in Datasheet View).

Tried to change column types from 'Text' to 'Hyperlink' and 'Calculated'(Text/Integer), but no result. For calculated(integer) field looks like disabled, and when I click it does nothing. In standard views it works Ok..

Can I generate clickable link in Datasheet view?

Here is CSR code that I use:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {

    function getBaseHtml(ctx) {
        return SPClientTemplates["_defaultTemplates"].Fields.default.all.all[ctx.CurrentFieldSchema.FieldType][ctx.BaseViewID](ctx);
    }

    function init() {

        // url of the library that contains document sets 
        var myDocumentSetLibraryUrl = "/Sites_Documentation/";

        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
            Templates: {

                Fields: {
                    "View_Files": {
                        View: function (ctx) {

                            var dsLinkArray = [];
                            var lookupField = ctx.CurrentItem["Related_Folder"]; // Lookup field to Document Set

                            if (lookupField && lookupField.length > 0) {
                                var lookupValue = lookupField[0].lookupValue;

                                console.log(lookupValue);
                                var dsLinkUrl = myDocumentSetLibraryUrl + "Forms/Document%20Set/docsethomepage.aspx?RootFolder=" + myDocumentSetLibraryUrl + lookupValue;
                                var dsLink = "<a href = '" + dsLinkUrl + "' target=_blank'>" + lookupValue + "</a>";
                                dsLinkArray.push(dsLink);
                                return dsLinkArray.join('');
                            }
                            return "";
                        }
                    }
                },
            },
            ListTemplateType: 100
        });
    }

    RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/doc_set_csr.js"), init);
    init();

});

Answer 1

Ok, there is no 'ootb' way to make it good working in datasheet; finally I overrided these links in CSR OnPostRender: dropped SharePoint onclick events, and replace with custom. Here is part of CSR code, it also fixes "Edit" icons that do not work properly in Datasheet views:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {

    function getBaseHtml(ctx) {
        return SPClientTemplates["_defaultTemplates"].Fields.default.all.all[ctx.CurrentFieldSchema.FieldType][ctx.BaseViewID](ctx);
    }


    function init() {

        function openInModalDialog(pUrl) {

            var options = {
                autoSize: true,
                url: pUrl,
                dialogReturnValueCallback: function (dialogResult) {
                    SP.UI.ModalDialog.RefreshPage(dialogResult)
                }
            };

            SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
            return false;

        }

        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

            // OnPreRender: function(ctx) { },

            Templates: {

                //     View: function(ctx) { return ""; },
                //     Header: function(ctx) { return ""; },
                //     Body: function(ctx) { return ""; },
                //     Group: function(ctx) { return ""; },
                //     Item: function(ctx) { return ""; },
                Fields: {
                    "Files": {
                        View: function (ctx) {

                            var dsLinkArray = [];
                            var lookupField = ctx.CurrentItem["Related_Folder"];

                            if (lookupField && lookupField.length > 0) {

                                var lookupValue = lookupField[0].lookupValue;

                                var dsLinkUrl = myDocumentSetLibraryUrl + "Forms/Document%20Set/docsethomepage.aspx?RootFolder=" + myDocumentSetLibraryUrl + lookupValue;
                                var dsLink = "<a class='doc-set-link' href='" + dsLinkUrl + "' target='_blank'>" + lookupValue + "</a>";
                                dsLinkArray.push(dsLink);
                                return dsLinkArray.join('');
                            }

                            return "-";
                        },
                    }
                },
                //     Footer: function(ctx) { return ""; }

            },

            OnPostRender: function (ctx) {

                console.log("OnPostRender fired");

                // Make links open in new tabs
                jQuery(".doc-set-link").on("click", function (e) {

                    e.preventDefault();

                    var url = e.target.href;
                    window.open(url, "_blank");

                    return false;
                });


                // Fix Edit link-icons for Datasheet Views
                var editLinks = jQuery(".ms-cellstyle.ms-vb-icon > span > a");

                editLinks.unbind('click');
                editLinks.on("click", function (e) {

                    e.preventDefault();

                    var url = jQuery(this).attr("href");
                    openInModalDialog(url);

                    return false;
                });
            },

            ListTemplateType: 100

        });
    }

    RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/doc-set-link-csr.js"), init);
    init();

});