Hi martin,

here is the code

and currently i am using Ignite UI 2013.1

the data which i want to show is showing me right now, but not in respective columns

can you send me the mail id so i can send you the screen shot where you can get and idea.

Hello Sushant Zanzane,

From what I see you have extended the igGrid control. I have few more questions which are not clear from the code you provided:

1) What is your grid column configuration? Do you have autoGenerateColumns: true, or you're setting columns in your custom grid.

2) What is addTestItemsToTable method doing? I guess it's invoking some igGrid API. Can you share its code, please.

3) From the e-mail you send I can see that you have Hiding, RowSelectors, Selection, Filtering and Paging features enabled, but what are their settings?

P.S.: I need this information in order to create an isolated sample which contains pure igGrid control replicating your issue. This way I can identify whether this is a bug or some other problem. If possible, can you post (or send by e-mail) the result of the following BLOCKED SCRIPT

JSON.stringify($("#itemgrid").data("sqsTestItemTable").options);

Thanks in advance,

Martin Pavlov
Infragistics, Inc. 

Hello martin,

Here the code which you required.

var defaultTableFeatures = this._getCustomizedTableFeatures();

        $(this.element).igGrid({
            width: "100%",
            enableHoverStyles: false,
            renderCheckboxes: true,
            autoGenerateColumns: false,
            dataSource: this.options.testitemlist,
            primaryKey: "Oid",
            autoCommit: true,

            columns: this._getCustomizedColumns(),
            autoGenerateColumns: false,
            features: defaultTableFeatures
        });

        // Hide group area
        $(".ui-iggrid-groupbyarea").addClass("ui-iggrid-groupbyarea-hide");

/* -----------------------------------------------------------------------------------------
       _getCustomizedTableFeatures

       Replaces the default features by those specified by the options
       ----------------------------------------------------------------------------------------- */
    _getCustomizedColumns: function () {
        var defaultColumns = [
                                        { headerText: "Oid", key: "Oid", width: "5em", hidden: true },
                                        { headerText: "ID", key: "FunctionalID", dataType: "string", width: "8em" },
                                        { headerText: "Name", key: "Name", dataType: "string", width: "25em" },
                                        { headerText: "Topic", key: "TopicPath", formatter: this._formatTopicPath(this), dataType: "string", width: "8em" },
                                        { headerText: "Status", key: "PreparationStatus", formatter: this._formatPreparationStatus(this), dataType: "string", width: "8em" },
                                        { headerText: "Risk", key: "Risk", dataType: "string", width: "8em" },
                                        { headerText: "Owner", key: "Owner", dataType: "string", width: "8em" },
                                        { headerText: "Preparation", key: "PreparationUser", dataType: "string", width: "8em", hidden: true },
                                        { headerText: "Execution", key: "ExecutionUser", dataType: "string", width: "8em", hidden: true },
                                        { headerText: "Complexity", key: "Complexity", dataType: "string", width: "8em", hidden: true },
                                        { headerText: "Priority", key: "Priority", dataType: "string", width: "8em", hidden: true },
                                        { headerText: "Level", key: "DocumentationLevel", dataType: "string", width: "8em", hidden: true },
                                        { headerText: "#TC", key: "TestCaseCount", dataType: "int", width: "5em", hidden: true },
                                        { headerText: "#T", key: "TestCount", dataType: "int", width: "5em", hidden: true },
                                        { headerText: "Description", key: "Description", dataType: "string", width: "30em" }
        ];
        if (this.options.columnheaders != null) {
            for (var i = 0; i < defaultColumns.length; i++) {
                var key = defaultColumns[i].key;
                for (var n = 0; n < this.options.columnheaders.length; n++) {
                    if (this.options.columnheaders[n].Key == defaultColumns[i].key) {
                        defaultColumns[i].headerText = this.options.columnheaders[n].HeaderText;
                        break;
                    }
                }
            }
        }
        if (this.options.columns != null) {
            var customizedColumns = [];
            for (var i = 0; i < this.options.columns; i++) {
                var key = this.options.columns[i].key;
                var hidden = this.options.columns[i].hidden;
                for (var n = 0; n < defaultColumns.length; n++) {
                    if (defaultColumns[n].key == key) {
                        defaultColumns[n].hidden = hidden;
                        customizedColumns.push(defaultColumns[n]);
                    }
                }
            }
            return customizedColumns;
        } else {
            return defaultColumns;
        }
    },

    /* -----------------------------------------------------------------------------------------
       _getCustomizedTableFeatures

       Replaces the default features by those specified by the options
       ----------------------------------------------------------------------------------------- */
    _getCustomizedTableFeatures: function () {
        // default features of an item table
        var defaultTableFeatures =
        [
        {
            name: "RowSelectors",
            enableCheckBoxes: true,
            requireSelection: false,
            enableRowNumbering: true
        },
        {
            name: "GroupBy",
            groupByAreaVisibility: "top",
            initialExpand: false
        },
        {
            name: "Sorting",
            type: "local",
            mode: "multiple",
            _applySortedColumnCss: true,
            columnSettings: [
            {
                columnIndex: 0,
                allowSorting: false,
            }]
        },
        {
            name: "Selection",
            multipleSelection: true,
            mode: "row",
            mouseDragSelect: false,
            touchDragSelect: false,
            wrapAround:false
        },
        {
            name: 'Hiding',
            columnSettings: [
            {
                columnKey: 'Oid',
                allowHiding: false,
                hidden: true
            }
            ]

        },
        {
            name: "ColumnMoving",
            mode: "immediate",
            addMovingDropDown: false
        },
        {
            name: "Filtering",
            allowFiltering: true,
            caseSensitive: false,
            mode: "advanced",
            advancedModeEditorsVisible: true,
            renderFilterButton: true
        },
        {
            name: "Resizing",
            _deferredResizing: false,
            allowDoubleClickToResize: true
        },
        {
            name: "Paging",
            type: "local",
            pageSizeDropDownLocation: "inpager",
            pageSize: 10
        },
        {
            name: "Updating",
            enableAddRow: false,
            editMode: "cell",
            enableDeleteRow: false,
            columnSettings: [
            { columnKey: "Name", editorType: "combo", editorOptions: { allowCustomValue: true, autoComplete: true, showDropDownButton: false, dropDownMaxHeight: 0 } },
            { columnKey: "Owner", editorType: "combo", validation: true, editorOptions: { mode: "editable", editable: true, filteringType: "local", renderMatchItems: "multi", filteringCondition: "contains", readonly: false, allowCustomValue: false, autoComplete: true, dataSource: this.options.ownerlist } },
            { columnKey: "PreparationStatus", editorType: "combo", validation: true, editorOptions: { mode: "editable", editable: true, filteringType: "local", renderMatchItems: "multi", filteringCondition: "contains", readonly: false, allowCustomValue: false, valueKey: "ID", textKey: "Name", dataSource: this.options.statuslist } },
            { columnKey: "PreparationUser", editorType: "combo", validation: true, editorOptions: { mode: "editable", editable: true, filteringType: "local", renderMatchItems: "multi", filteringCondition: "contains", readonly: false, allowCustomValue: false, autoComplete: true, dataSource: this.options.preparerlist } },
            { columnKey: "ExecutionUser", editorType: "combo", validation: true, editorOptions: { mode: "editable", editable: true, filteringType: "local", renderMatchItems: "multi", filteringCondition: "contains", readonly: false, allowCustomValue: false, autoComplete: true, dataSource: this.options.executerlist } },
            { columnKey: "FunctionalID", readOnly: true },
            { columnKey: "TestCaseCount", readOnly: true },
            { columnKey: "TestCount", readOnly: true },
            { columnKey: "TopicPath", editorType: "combo", validation: true, editorOptions: { mode: "editable", editable: true, filteringType: "local", renderMatchItems: "multi", filteringCondition: "contains", readonly: false, allowCustomValue: false, valueKey: "Oid", textKey: "Path", dataSource: this.options.topiclist } },
            { columnKey: "Risk", editorType: "combo", validation: true, editorOptions: { mode: "editable", editable: true, filteringType: "local", renderMatchItems: "multi", filteringCondition: "contains", readonly: false, allowCustomValue: false, dataSource: this.options.risklist } },
            { columnKey: "Complexity", editorType: "combo", validation: true, editorOptions: { mode: "editable", editable: true, filteringType: "local", renderMatchItems: "multi", filteringCondition: "contains", readonly: false, allowCustomValue: false, dataSource: this.options.complexitylist } },
            { columnKey: "Priority", editorType: "combo", validation: true, editorOptions: { mode: "editable", editable: true, filteringType: "local", renderMatchItems: "multi", filteringCondition: "contains", readonly: false, allowCustomValue: false, dataSource: this.options.prioritylist } },
            { columnKey: "Description", editorType: "combo", editorOptions: { allowCustomValue: true, autoComplete: true, showDropDownButton: false, dropDownMaxHeight: 0 } }
            ],
            editCellEnded: $.proxy(function (evt, ui) {
                var ds = ui.owner.grid.options.dataSource;
                var stpObject = null;
                var editedObjectIdx=-1
                for (var i = 0; i < ds.length; i++) {
                    if (ui.rowID == ds[i].Oid) {
                        stpObject = ds[i];
                        editedObjectIdx = i;
                        break;
                    }
                }
                if (stpObject != null) {
                    if (stpObject.Risk == null) {
                        stpObject.Risk = "undefined";
                    }
                    if (stpObject.Complexity == null) {
                        stpObject.Complexity = "undefined";
                    }
                    if (stpObject.Priority == null) {
                        stpObject.Priority = "undefined";
                    }
                    if (stpObject.Description == null) {
                        stpObject.Description = "undefined";
                    }
                    if (stpObject.Name == null) {
                        stpObject.Name = "undefined";
                    }

                    if (ui.columnKey == "TopicPath") {
                        // The user is attaching the test item to a different topic!
                        var topicOid = ui.value;
                        if (topicOid == null) {
                            return;
                        }
                        var stpTopic = null;
                        if (topicOid != null) {
                            for (var i = 0; i < this.options.topiclist.length; i++) {
                                if (this.options.topiclist[i].Oid == topicOid) {
                                    stpTopic = this.options.topiclist[i];
                                    break;
                                }
                            }
                        }
                        var jsonData = null;
                        if (stpTopic != null) {
                            jsonData = { "Json": [JSON.stringify(stpTopic), JSON.stringify(stpObject)] };
                        } else {
                            jsonData = { "Json": [null, JSON.stringify(stpObject)] };
                        }
                        showWaitCursor();
                        $.sqsAjax({
                            url: this.options.attachtotopicaction,
                            parameter: jsonData,
                            success: function (result) {
                                hideWaitCursor();
                                var _ds = stpObject;
                                // get the result and do some magic with it
                                var message = result.Message;
                                var success = result.Success;
                                if (!success) {
                                    var errdlg = $('<div></div>');
                                    $(errdlg).sqsErrorDialog({ text: message });
                                    var field = ui.columnKey;
                                    eval("_ds." + field + " = _ds.Loaded" + field + ";");
                                    var rowId = ui.rowID;
                                    var colKey = ui.columnKey;
                                    var grid = ui.owner;
                                    grid.setCellValue(rowId, colKey, ui.oldValue);
                                    if (result.ContinueUrl != null) {
                                        location.href = result.ContinueUrl;
                                    }
                                } else {
                                    var field = ui.columnKey;
                                    if (field != "TopicPath") {
                                        eval("_ds.Loaded" + field + " = _ds." + field + ";");
                                    } else {
                                        if (stpTopic == null) {
                                            stpObject.TopicPath = "\\";
                                        } else {
                                            stpObject.TopicPath = stpTopic.Path;
                                        }
                                        stpObject.LoadedTopicPath = stpObject.TopicPath;
                                    }
                                }
                            }
                        });
                    } else {
                        // the user is changeing a property of the test item
                        var jsonData = { "Json": JSON.stringify(stpObject) };
                        $.sqsAjax({
                            url: this.options.saveaction,
                            parameter: jsonData,
                            success: $.proxy(function (result) {
                                var _ds = ds[i];
                                // get the result and do some magic with it
                                var message = result.Message;
                                var success = result.Success;
                                if (!success) {
                                    var errdlg = $('<div></div>');
                                    $(errdlg).sqsErrorDialog({ text: message });
                                    if (result.ErrorType == "OptimisticConcurrencyException") {
                                        var field = ui.columnKey;
                                        var refreshedObject = JSON.parse(result.ErrorData);
                                        eval("var newVal = refreshedObject." + field);
                                        eval("this.options.testitemlist[editedObjectIdx]." + field + "=newVal");
                                        eval("this.options.testitemlist[editedObjectIdx].Loaded" + field + "=newVal");
                                        var rowId = ui.rowID;
                                        var colKey = ui.columnKey;
                                        var grid = ui.owner;
                                        grid.setCellValue(rowId, colKey, newVal);
                                    } else {
                                        var field = ui.columnKey;
                                        eval("this.options.testitemlist[editedObjectIdx]." + field + " = this.options.testitemlist[editedObjectIdx].Loaded" + field + ";");
                                        var rowId = ui.rowID;
                                        var colKey = ui.columnKey;
                                        var grid = ui.owner;
                                        grid.setCellValue(rowId, colKey, ui.oldValue);
                                    }
                                    if (result.ContinueUrl != null) {
                                        location.href = result.ContinueUrl;
                                    }
                                } else {
                                    var field = ui.columnKey;
                                    eval("_ds.Loaded" + field + " = _ds." + field + ";");
                                }
                            },this)
                       });
                    }
                }


            }, this)
        }
        ];

        for (var i = 0; i < this.options.features.length; i++) {
            var fn = this.options.features[i].name;
            for (var n = 0; n < defaultTableFeatures.length; n++) {
                if (defaultTableFeatures[n].name == fn) {
                    defaultTableFeatures[n] = this.options.features[i];
                }
            }
        }

        return defaultTableFeatures;
    },

I hope this will help you.

Thanks in advance,

Sushant Zanzane

Hello,

I am just checking did you tried to reproduce the issue on the sample that Martin provided.

Hi,

the sample which martin provides me is not the one which can reproduce the issue.

make a sample with empty rows in it and then try to add new rows in it then you can see the issue.

Thanks.

Hello,

I wanted to let you know that I am currently looking into this.

Hi Martin,

Here when i am creating the data on success of the ajax call i am calling following method

$('#itemgrid').sqsTestItemTable("addTestItemsToTable",items);

the method is as follows

addTestItemsToTable: function (items) {
        for (var i = 0; i < items.length; i++) {
            var newRow = JSON.parse(items[i]);
            $(this.element).igGridUpdating("addRow", newRow);
            this.options.testitemlist[this.options.testitemlist.length] = newRow;
        }
    },

where i am using igGridUpdating.addRow APIbut when the table is totaly empty it will add rows but not in the respective columns

o. w. it's working great.

Thanks,

Sushant Zanzane

SQS India

Hello Sushant Zanzane,

In your code you've disabled adding a new row from the UI, so my question is what API are you using to add rows to the grid. Is it igGridUpdating.addRow or igGrid.renderNewRow or igGrid("option", "dataSource", ds);

To be honest I've also tested with an empty data. When I use igGridUpdating.addRow API I cannot reproduce the issue.

Best regards,
Martin Pavlov
Infragistics, Inc.