Customize Node Inspector module

3 posts, 0 answers
  1. Martin
    Martin avatar
    9 posts
    Member since:
    Mar 2015

    Posted 08 Jun 2015 Link to this post

    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?  

  2. Martin
    Martin avatar
    9 posts
    Member since:
    Mar 2015

    Posted 08 Jun 2015 in reply to Martin Link to this post

    I wasn't specific enough, I mean when an image is selected.  Thanks
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 10 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top