Extending or modifying the SharePoint Datasheet view

Question

Has anyone discovered a way to extend or modify the functionality of the SharePoint Datasheet view (the view used when you edit a list in Datasheet mode, the one that looks like a basic Excel worksheet)?

I need to do several things to it, if possible, but I have yet to find a decent non-hackish way to change any functionality in it.

EDIT: An example of what I wish to do is to enable cascading filtering on lookup fields - so a choice in one field limits the available choices in another. There is a method to do this in the standard view form, but the datasheet view is completely seperate.

Regards

Moo

Could you give one specific example of a change you'd like to make? — Argalatyr, Sep 20 '09 at 16:15

score 3 · Accepted Answer · answered Sep 21 '09 at 04:08

I don't think you can modify it in any non-hackish way, but you can create a new datasheet view from scratch. You do this by creating a new ActiveX control, and exposing it as a COM object, and modifying the web.config file to make reference to the new ActiveX control.

There's an example here: Creating a custom datasheet control.

score 0 · Answer 2 · answered Feb 02 '18 at 18:10

Actually, you can do this. Here is a code snippet I stripped out of someplace where I am doing just what you asked. I tried to remove specifics.

var gridFieldOverrideExample = (function (){
    function fieldView(ctx){
        var val=ctx.CurrentItem[curFieldName];
        var spanId=curFieldName+"span"+ctx.CurrentItem.ID;
        if (ctx.inGridMode){
            handleGridField(ctx, spanId);
        }       
        return "<span id='"+spanId+"'>"+val+"</span>";      
    } 

    function handleGridField(ctx, spanID){
        window.SP.SOD.executeOrDelayUntilScriptLoaded(function(){
            window.SP.GanttControl.WaitForGanttCreation(function (ganttChart){
                var gridColumn = null;
                var editID = "EDIT_"+curFieldName+"_GRID_FIELD";
                var columns = ganttChart.get_Columns();
                for(var i=0;i<columns.length;i++){
                    if(columns[i].columnKey == curFieldName){
                        gridColumn = columns[i];
                        break;
                    } 
                }
                if (gridColumn){
                    gridColumn.fnGetEditControlName = function(record, fieldKey){
                        return editID;
                    };
                    window.SP.JsGrid.PropertyType.Utils.RegisterEditControl(editID, function (ctx) {
                        editorInstance = new SP.JsGrid.EditControl.EditBoxEditControl(ctx, null);
                        editorInstance.NewValue = "";
                        editorInstance.SetValue = function (value) {
                            _cellContext = editorInstance.GetCellContext(); 
                            _cellContext.SetCurrentValue({ localized: value });
                        };
                        editorInstance.Unbind = function () {
                            //This happens when the grid cell loses focus - hide controls here, do cleanup, etc.
                        }
                        //Below I grabbed a reference to the original 'BindToCell' function so I can prepend to it by overwriting the event.
                        var origbtc = editorInstance.BindToCell;
                        editorInstance.BindToCell = function(cellContext){
                            if ((cellContext.record) && 
                                (cellContext.record.properties) && 
                                (cellContext.record.properties.ID) && 
                                (cellContext.record.properties.ID.dataValue)){
                                editorInstance.ItemID = cellContext.record.properties.ID.dataValue;
                            }
                            origbtc(cellContext);
                        };
                        //Below I grabbed a reference to the original 'OnBeginEdit' function so I can prepend to it by overwriting the event.                   
                        var origbte = editorInstance.OnBeginEdit;
                        editorInstance.TargetID;
                        editorInstance.OnBeginEdit = function (cellContext){
                            this.TargetID = cellContext.target.ID;
                            /*
                            . . .
                            Here is where you would include any custom rendering 
                            . . .
                            */
                            origbte(cellContext);
                        };
                        return editorInstance;
                    }, []);

                }
            });
        },"spgantt.js");
    }

    return{
        fieldView : fieldView
    }
})();

(function () {
    function OverrideFields(){
        var overrideContext = {}; 
        overrideContext.Templates = overrideContext.Templates || {};
        overrideContext.Templates.Fields = {
            'FieldToOverride' : {
                'View': gridFieldOverrideExample.fieldView
            }
        };   
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
    }   
    ExecuteOrDelayUntilScriptLoaded(OverrideFields, 'clienttemplates.js');
})();

Also, there are a couple of other examples out there. Sorry, I don't have the links anymore:

Actually, I did exactly what you asked with the cascading choices. Except I used External Lists and passed in filter values on the data pull. Basically, you would use the above code as an example and in the BindToCell event, get the determining value from cellContext.record.properties[""].localizedValue . Then you could create your own control in the OnBeginEdit event. — towkneed, Feb 02 '18 at 18:15

Extending or modifying the SharePoint Datasheet view

2 Answers2

Linked