Customize Node Inspector module

[DF]

Hi there,

 Is there a way to customize the node inspector module of Rad Editor?  I need to remove the functionality for CLASSNAME and PROPERTIES button.  So all that would be available is width, height, border color/width, tooltip, title, and alignment?  

[DF]

I wasn't specific enough, I mean when an image is selected.  Thanks

[Marin Bratanov]

Hi Martin,

There is no API for that, because the NodeInspector creates its elements dynamically when selection changes. What you can do is override the function that creates the items and skip creating the ones you do not want. Below follow examples for both the Lightweight and Classic render modes. Note that I cannot guarantee such an override will not cause issues (e.g., when we update the functions and the module) and that it will work as desired. You can download our source code and see how this module is implemented so you can either use it to create your own custom module based on that (see documentation and demo about that), or keep the overrides up to date.

for Classic Render Mode

 

Telerik.Web.UI.Editor.Modules.NodeInspector.ClassicView.prototype.createUI = function () {
    var owner = this.owner;
    var controls = owner._tools;
    var mainPanelArray = owner._nodeInspectorAttributesArray;
    var mainTable = document.createElement("table");

    mainTable.border = 0;
    mainTable.cellSpacing = 0;
    mainTable.cellPadding = 0;

    for (var rowCount = 0; rowCount < mainPanelArray.length; rowCount++) {
        var curRow = mainPanelArray[rowCount];
        var oRow = mainTable.insertRow(-1);
        for (var i = 0; i < curRow.length; i++) {
            var item = curRow[i];
            //this is where we skip creating the ones we do not want. You can inspect the rendered HTML to see where those attributes are taken from
            if (item == "className" || item == "SetImageProperties") continue;

            var oCell = oRow.insertCell(-1);
            oCell.style.display = "none";
            oCell.setAttribute("controlName", item);
            oCell.innerHTML = owner._getLocalizedString(item, item);
            oCell.className = "reModuleLabel";

            oCell = oRow.insertCell(-1);
            oCell.style.display = "none";
            oCell.setAttribute("controlHolder", item);
            var control = owner._getControlByName(item);

            if (control) {
                controls[item] = control;
                oCell.appendChild(control.get_element());
            }
        }
    }
    return mainTable;
}

For Lightweight Render Mode

Telerik.Web.UI.Editor.Modules.NodeInspector.LightweightView.prototype.createUI = function() {

    var owner = this.owner;
    var controls = owner._tools;
    var mainPanelArray = owner._nodeInspectorAttributesArray;
    var wrapper = document.createElement("div");

    for (var rowCount = 0; rowCount < mainPanelArray.length; rowCount++) {
        var curRow = mainPanelArray[rowCount];
        var rowEl = document.createElement("div");
        rowEl.className = "reRow reAltRow";
        wrapper.appendChild(rowEl);

        for (var i = 0; i < curRow.length; i++) {
            var item = curRow[i];
            //this is where we skip creating the ones we do not want. You can inspect the rendered HTML to see where those attributes are taken from
            if (item == "className" || item == "SetImageProperties") continue;
            var lbl = document.createElement("span");
            lbl.setAttribute("controlName", item);
            lbl.className = "reLabel";
            lbl.innerHTML = owner._getLocalizedString(item, item);
            rowEl.appendChild(lbl);

            var control = owner._getControlByName(item);
            if(control) {
                controls[item] = control;
                rowEl.appendChild(control.get_element());
            }
        }
    }

    return wrapper;
}

Regards,

Marin Bratanov
Telerik