Non-Databound TreeGrid generates an error when attempting to edit a cell

[pwilliams]

SmartClient Version: SmartClient_v110p_2017-05-01_Evaluation run in IE11
I知 new to SmartClient and I知 trying to get a proof of concept working. We are starting with an empty TreeGrid and then building the tree all in JavaScript. Double clicking a cell to enter edit mode, generates an error. I have looked at the Edit example, but it is data bound and that appear to make a difference. I get the same error on other examples which are not data bound.

    function btnSC_onClick(btn) {
        var newNode = {     RefDes: "11", LocationID: "Bozo", ParentID: "", Description: "ozoB", Auditable: true, Accessible: false, Adjacency: false,
                            ContentTypeID: "3", CID: "T01-00001", OEMPartNo: "Bozo", OEMSerialNo: "ozoB", Nomenclature: "Bozo-ozoB",
                            UserOrder: "1", DefaultOrder: "1", AdjacentCount: "0", ContainerID: "", KeyID: "-1", ConfigID: "T01-00005", HistoryCount: "2"
        };
        newNode = {
            RefDes: "11", name: "Bozo", ParentID: "", Description: "ozoB", Auditable: true, Accessible: false, Adjacency: false,
            ContentTypeID: "3", CID: "T01-00001", OEMPartNo: "Bozo", OEMSerialNo: "ozoB", Nomenclature: "Bozo-ozoB",
            UserOrder: "1", DefaultOrder: "1", AdjacentCount: "0", ContainerID: "", KeyID: "-1", ConfigID: "T01-00005", HistoryCount: "2"
        };
 
        var parent = configTreeData.find("Config");
        configTreeData.add(newNode, parent) //, "btnSC_Callback")
 
        var parent = configTreeData.find("Bozo");
        var newNode2 = {
            RefDes: "7-11-13-69-666", name: "ozoB", ParentID: "Bozo", Description: "ozoB", Auditable: true, Accessible: false, Adjacency: true,
            ContentTypeID: "3", CID: "T01-00002", OEMPartNo: "Bozo2", OEMSerialNo: "ozoB2", Nomenclature: "Bozo-ozoB2",
            UserOrder: "2", DefaultOrder: "2", AdjacentCount: "0", ContainerID: "", KeyID: "-1", ConfigID: "T01-00005", HistoryCount: "1"
        };
        configTreeData.add(newNode2, parent);
    }
 
 
 
    isc.Tree.create({
        ID: "configTreeData",
        canEdit: true,
        root: { name: "Config"}
    });
 
    isc.TreeGrid.create({
        ID: "configTree",
        top: 1000,
        left:10,
        width: 800,
        height: 400,
        alternateRecordStyles: true,
        canEdit: true,
        modalEditing: true,
        selectOnEdit: true,
        data: configTreeData,
        autoFetchData: false,
        showOpenIcons: true,
        showDropIcons: true,
        closedIconSuffix: "+",
        fields: [
                    { name: "RefDes"        , title: "Location"         , width: 120, frozen: true },
                    { name: "name", title: "Location ID", width: 80 },
                    { name: "ParentID", title: "Parent ID", width: 80 },
                    { name: "Description"   , title: "Description"      , width: 160 },
                    { name: "Auditable"     , title: "Auditable"        , width:  50, type: "boolean" },
                    { name: "Accessible"    , title: "Accessible"       , width:  50, type: "boolean" },
                    { name: "Adjacency"     , title: "Adjacency"        , width:  50, type: "boolean" },
                    //{ name: "ContentType", title: "State", width: 50, type: "comboBox", optionDataSource: "dsState", valueField: "ID", displayField: "Display", autoFetchData: true },
                    //{ name: "OccupiedType", title: "Type", width: 50, type: "comboBox", optionDataSource: "dsType" , valueField: "ID", displayField: "Display", autoFetchData: true },
                    { name: "ContentTypeID" , title: "Contents ID"      , hidden: true },
                    { name: "CID"           , title: "CID"              , hidden: true },
                    { name: "OEMPartNo"     , title: "OEM Part No"      , width: 100 },
                    { name: "OEMSerialNo"   , title: "OEM Serial No"    , width: 100 },
                    { name: "Nomenclature"  , title: "Part Nomenclature", width: 110 },
                    { name: "UserOrder"     , title: "User Order"       , width:  62, layoutAlign: "right" },
                    { name: "DefaultOrder"  , title: "Default Order"    , width:  77, layoutAlign: "right" },
                    { name: "AdjacentCount" , title: "Adjacent Count"   , hidden: true },
                    { name: "ContainerID"   , title: "Container ID"     , hidden: true },
                    { name: "KeyID"         , title: "Key ID"           , hidden: true },
                    { name: "ConfigID"      , title: "Configuration ID" , hidden: true },
                    { name: "HistoryCount"  , title: "History Count"    , hidden: true }
        ]
    });

The Call Stack:



The Error message:



The Code generating the Error:

String.prototype.trim = function String$trim() {
/// <summary locid="M:J#String.trim" />
/// <returns type="String"></returns>
if (arguments.length !== 0) throw Error.parameterCount();
return this.replace(/^\s+|\s+$/g, '');

Thanks,
Paul

[Isomorphic]

A DataSource is required for editing, because we need to know the types of fields amongst other things. When using a DataSource however, there is no need for the data to be fetched from the DataSource if that's not what you want - you can provide the Tree directly via the "data" attribute as you are now.

The error you tried to report may still be a valid bug, however, your attempt to post a stack trace came across as garbage. Please see the FAQ for the best way to obtain and report stack traces.

[pwilliams]

We currently have a TreeGrid which is populated by setting the Data attribute to a Tree. The documentation states "[FONT=CenturyGothic-Italic][SIZE=1][FONT=CenturyGothic-Italic][SIZE=1]ListGrid [/SIZE][/FONT][/SIZE][/FONT][FONT=CenturyGothic][SIZE=1][FONT=CenturyGothic][SIZE=1]editing requires functionality provided by the [/SIZE][/FONT][/SIZE][/FONT][FONT=CenturyGothic-Italic][SIZE=1][FONT=CenturyGothic-Italic][SIZE=1]DynamicForm [/SIZE][/FONT][/SIZE][/FONT][FONT=CenturyGothic][SIZE=1][FONT=CenturyGothic][SIZE=1]widget".
I found one example of an editable TreeGrid. It utilized a DataSource and a VStack. I attempted to use our current TreeGrid with a Tree for its data attribute and the only member of the VStack.. It errored when we attempted to edit a text field. We are looking at being able to edit text fields check boxes and combo list boxes (Select). Do you have any examples of creating an editable TreeGrid with the Data attribute and being the only SmartClient widget in an ASp page?[/SIZE][/FONT][/SIZE][/FONT]

[pwilliams]

Sorry for the way the last post was presented.

We currently have a TreeGrid which is populated by setting the Data attribute to a Tree. The documentation states "ListGrid editing requires functionality provided by the DynamicForm widget".
I found one example of an editable TreeGrid. It utilized a DataSource and a VStack. I attempted to use our current TreeGrid with a Tree for its data attribute and the only member of the VStack.. It errored when we attempted to edit a text field. We are looking at being able to edit text fields check boxes and combo list boxes (Select). Do you have any examples of creating an editable TreeGrid with the Data attribute and being the only SmartClient widget?

[Isomorphic]

See our previous post (#2) for what's wrong and how to correct it.