[CLOSED] Remove Grid Column by column index.

[pawangyanwali]

Hello,
I have a java script function which inserts the column and removes the column from the grid. It was working fine in previous version of Ext.Net i.e Ext.Net 2.1 As I have upgraded the version of Ext.Net to 2.5 I have unable to remove the column from grid.

triggerStore.load({
        params: { "tableName": modelName },
        scope: this,
        callback: function (records, operation, success) {
            debugger;
            //the operation object contains all of the details of the load operation
            if (success) {

first remove the column from the current grid.
The code to remove column is:

if (grid.columnManager.columns.length > 2) {
                        for (var k = 0; k < (grid.columnManager.columns.length) ; k++) {
                            if (grid.columnManager.columns.length == 2) break;
                            if (grid.columnManager.columns[k].dataIndex != "") {
                                //var col = grid.columnManager.columns[k]
                                //col.removeAll(false);
                                //problem in ext.net 2.5
                                grid.removeColumn(k, true);
                                k = 0;
                            }
                        }
                    }

Now add the new columns in the grid.
The code to add/insert the column is:

for (var j = 0; j < triggerStore.model.getFields().length; j++) {
                        var title = triggerStore.model.getFields()[j].name;

                        if (title != "id") {

                            if (title == "IsPrimary") {
                                var eColumn = Ext.create('Ext.grid.column.CheckColumn', { header: title, dataIndex: title });
                                grid.insertColumn(j + 1, eColumn, true);
                            }
                            else {
                                var eColumn = Ext.create('Ext.grid.column.Column', { header: title, dataIndex: title });
                                grid.insertColumn(j + 1, eColumn, true);
                            }
                        }
                    }

This code worked fine in Ext.Net.MVC 2.1 but failed in 2.5. The main problem is though the column is inserted the grid.column is always 0 but updated in grid.columnManager. As I remove the column the from grid the column is null.

[Daniil]

Hi @pawangyanwali,

Hard to say what is going wrong. If you provide a standalone runnable example to reproduce, I could investigate.

[pawangyanwali]

Hi @pawangyanwali,

Hard to say what is going wrong. If you provide a standalone runnable example to reproduce, I could investigate.

Here is the partial view which loads the grid in a window.

@using Core.Framework.Common.Constants
@(Html.X().Window().ID("SinglePickWindow").Hidden(true)
      .Width(450).Height(450).Modal(true).Layout(LayoutType.Card)
      .Closable(false).CloseAction(CloseAction.Destroy)
      .Listeners(events => events.Show.Handler = "pickerGridShow(#{gridSelector1})")
      .Items(i => i.Add((@Html.X().Panel().AutoScroll(true).ID("MainWindowPanel3")
                   .Items(it => it.Add((@Html.X().GridPanel().ID("gridSelector1").Layout("Fit")
                            .Hidden(true)
                                .ColumnModel(@Html.X().CommandColumn().Width(110)
                                            .Commands(
                                                @Html.X().GridCommand().CommandName("Select").Icon(Icon.ApplicationGo)
                                                     .Text(Compensation.UI.Controllers.Base.BaseController.GetLabelText(ResourceLabelConstants.LBL_GRID_SELECT_TEXT)),
                                                @Html.X().GridCommand().CommandName("Description").Icon(Icon.ApplicationViewDetail)
                                                     )
                                            .Listeners(ls => ls.Command.Handler = "SetValue(command, record, #{gridSelector1});"))
                                    .SelectionModel((@Html.X().CheckboxSelectionModel().Mode(SelectionMode.Single)
                                    ))
                                    ))
                          )
                        ))
            )
          .Title("Select Data")//LBL_PICK_WINDOW_TITLE_TEXT
          .BottomBar(
                @Html.X().PagingToolbar().ID("gridPaging1")
                    .DisplayInfo(true)
                    .DisplayMsg(Compensation.UI.Controllers.Base.BaseController.GetLabelText(ResourceLabelConstants.LBL_PAGING_MESSAGE_TEXT))
                    .EmptyMsg(Compensation.UI.Controllers.Base.BaseController.GetLabelText(ResourceLabelConstants.LBL_NO_DATA_DISPLAY_MESSAGE))
            )

          .Buttons(b => b.Add(
              (@Html.X().Button()
                   .Text(Compensation.UI.Controllers.Base.BaseController.GetLabelText(ResourceLabelConstants.LBL_CANCEL_BUTTON_TEXT))
                   .Icon(Icon.Accept)
                   .Listeners(l => l.Click.Handler = "#{SinglePickWindow}.hide();")
              )
                            )))

Here is the java script which loads the data in grid view after it is loaded.

var pickerGridShow = function (grid) {
    debugger;
    var paging;
        paging = Ext.getCmp("gridPaging1");
    if (paging != null) {
        paging.bindStore(triggerStore);
    }

    triggerStore.load({
        params: { "tableName": modelName },
        scope: this,
        callback: function (records, operation, success) {
            debugger;
            //the operation object contains all of the details of the load operation
            if (success) {
                if (grid != null) {
                    //if (grid.columnManager.columns.length > 2) {
                    //    for (var k = 0; k < (grid.columnManager.columns.length) ; k++) {
                    //        if (grid.columnManager.columns.length == 2) break;
                    //        if (grid.columnManager.columns[k].dataIndex != "") {
                    //            //var col = grid.columnManager.columns[k]
                    //            //col.removeAll(false);
                    //            //problem in ext.net 2.5
                    //            grid.removeColumn(k, true);
                    //            k = 0;
                    //        }
                    //    }
                    //}

                    if (grid.columns.length > 2) {
                        for (var k = 0; k < (grid.columns.length) ; k++) {
                            if (grid.columns.length == 2) break;
                            if (grid.columns[k].dataIndex != "") {
                                //problem in ext.net 2.5
                                grid.removeColumn(k, true);
                                k = 0;
                            }
                        }
                    }
                    //this is the dynamic section of the column that needs to be created
                    for (var j = 0; j < triggerStore.model.getFields().length; j++) {
                        var title = triggerStore.model.getFields()[j].name;

                        if (title != "id") {

                            if (title == "IsPrimary") {
                                var eColumn = Ext.create('Ext.grid.column.CheckColumn', { header: title, dataIndex: title });
                                //grid.addColumn(eColumn, true);
                                grid.insertColumn(j + 1, eColumn, true);
                            }
                            else {
                                var eColumn = Ext.create('Ext.grid.column.Column', { header: title, dataIndex: title });
                                //grid.addColumn(eColumn, true);
                                grid.insertColumn(j + 1, eColumn, true);
                            }
                        }
                    }

                    grid.getStore().loadData(records);
                  
                    grid.getView().bindStore(triggerStore);

                    grid.getView().refresh();
                    grid.doLayout();

                    //now let's get the item from the triggerPanel
                    if (grid.getTag() != null) {
                        var trgItem = grid.getTag().getValue();

                        if (trgItem != null && trgItem.length > 0) {

                            var items = trgItem.split("^");
                            if (items.length > 0) {
                                var split = items[0].split(",");
                                var record = new Array();
                                for (var i = 0; i < split.length; i++) {
                                    record[i] = triggerStore.findRecord(triggerStore.model.getFields()[0].name, split[i]);
                                }
                            }
                            else {
                                var split = trgItem.split(",");
                                var record = new Array();
                                for (var i = 0; i < split.length; i++) {
                                    record[i] = triggerStore.findRecord(triggerStore.model.getFields()[0].name, split[i]);
                                }
                            }

                            grid.getSelectionModel().select(record);
                        }
                    }
                }

            }

        }
    });

};

First image is the image, when the gird window is loaded for the first time, with user id in collection. again when i load the same window but different data/same data first the previous columns will be deleted/removed but in this case if i use grid.column the column length is always one which in already in the grid but grid.column is not updated as new column was inserted from java script, instead grid.columnManager is updated. Now when I execute the grid.removeColumn code the grdi.columnManager is null, the effect in grid is only the header of the column is removed not the data.
Why the grid.column is not updated but grid.columnManager? This was wroking perfectly in the previous version of the ext.net i.e 2.1 but not in 2.5



Thank You.

[Daniil]

Why the grid.column is not updated but grid.columnManager? This was wroking perfectly in the previous version of the ext.net i.e 2.1 but not in 2.5

Seems there is a related thread:
http://forums.ext.net/showthread.php?27926

[pawangyanwali]

I have updated the previous code, there is the code which checks the grid columns and deletes the column. But the problem is that, whenever the grid.removeColumn(k,true); is executed it throws the exception in Ext.js.

var columns = grid.headerCt.getGridColumns();
                    if (columns.length > 2) {
                        for (var k = 0; k < (columns.length) ; k++) {
                            if (columns.length == 2) break;
                            if (columns[k].dataIndex != "") {
                                grid.removeColumn(k, true);
                                k = 0;
                            }
                        }
                    }

I have attached image of the error.

Thank You

[Daniil]

I have no idea. Please provide us with a standalone example to reproduce the problem.

[pawangyanwali]

I have no idea. Please provide us with a standalone example to reproduce the problem.

Here is the partial view where is grid is loaded.

@using Core.Framework.Common.Constants
@(Html.X().Window().ID("SinglePickWindow").Hidden(true)
      .Width(450).Height(450).Modal(true).Layout(LayoutType.Card)
      .Closable(false).CloseAction(CloseAction.Destroy)
      .Listeners(events => events.Show.Handler = "pickerGridShow(#{gridSelector1})")
      .Items(i => i.Add((@Html.X().Panel().AutoScroll(true).ID("MainWindowPanel3")
                   .Items(it => it.Add((@Html.X().GridPanel().ID("gridSelector1").Layout("Fit")
                            .Hidden(true)
                                .ColumnModel(@Html.X().CommandColumn().Width(110)
                                            .Commands(
                                                @Html.X().GridCommand().CommandName("Select").Icon(Icon.ApplicationGo)
                                                     .Text(Compensation.UI.Controllers.Base.BaseController.GetLabelText(ResourceLabelConstants.LBL_GRID_SELECT_TEXT)),
                                                @Html.X().GridCommand().CommandName("Description").Icon(Icon.ApplicationViewDetail)
                                                     )
                                            .Listeners(ls => ls.Command.Handler = "SetValue(command, record, #{gridSelector1});"))
                                    .SelectionModel((@Html.X().CheckboxSelectionModel().Mode(SelectionMode.Single)
                                    ))
                                    ))
                          )
                        ))
            )
          .Title("Select Data")//LBL_PICK_WINDOW_TITLE_TEXT
          .BottomBar(
                @Html.X().PagingToolbar().ID("gridPaging1")
                    .DisplayInfo(true)
                    .DisplayMsg(Compensation.UI.Controllers.Base.BaseController.GetLabelText(ResourceLabelConstants.LBL_PAGING_MESSAGE_TEXT))
                    .EmptyMsg(Compensation.UI.Controllers.Base.BaseController.GetLabelText(ResourceLabelConstants.LBL_NO_DATA_DISPLAY_MESSAGE))
            )

          .Buttons(b => b.Add(
              (@Html.X().Button()
                   .Text(Compensation.UI.Controllers.Base.BaseController.GetLabelText(ResourceLabelConstants.LBL_CANCEL_BUTTON_TEXT))
                   .Icon(Icon.Accept)
                   .Listeners(l => l.Click.Handler = "#{SinglePickWindow}.hide();")
              )
                            )))

Here is the JavaScrip which add and removes the columns in the gird.

var pickerGridShow = function (grid) {
    debugger;
    var paging;
    paging = Ext.getCmp("gridPaging1");

    if (paging != null) {
        paging.bindStore(triggerStore);
    }

    triggerStore.load({
        params: { "tableName": modelName },
        scope: this,
        callback: function (records, operation, success) {
            debugger;
            //the operation object contains all of the details of the load operation
            if (success) {
                if (grid != null) {
                    var columns = grid.headerCt.getGridColumns();
                    if (columns.length > 2) {
                        for (var k = 0; k < (columns.length) ; k++) {
                            if (columns.length == 2) break;
                            if (columns[k].dataIndex != "") {
                                grid.removeColumn(k, true);
                                k = 0;
                            }
                        }
                    }

                    //this is the dynamic section of the column that needs to be created
                    for (var j = 0; j < triggerStore.model.getFields().length; j++) {
                        var title = triggerStore.model.getFields()[j].name;

                        if (title != "id") {
                                var eColumn = Ext.create('Ext.grid.column.Column', { header: title, dataIndex: title });
                                //grid.addColumn(eColumn, true);
                                grid.insertColumn(j + 1, eColumn, true);
                            }
                    }
                    grid.getStore().loadData(records);
                    grid.getView().bindStore(triggerStore);
                    grid.getView().refresh();
                    grid.doLayout();

                    //now let's get the item from the triggerPanel
                    if (grid.getTag() != null) {
                        var trgItem = grid.getTag().getValue();

                        var split = trgItem.split(",");
                        var record = new Array();
                        for (var i = 0; i < split.length; i++) {
                             record[i] = triggerStore.findRecord(triggerStore.model.getFields()[0].name, split[i]);
                        }
                        grid.getSelectionModel().select(record);
                        }
                    }
                }

            }

        }
    });

};

When, the grid is load for the second time, as the number of column is greater than 2 it will proceed to delete the column from the gird. So, while removing the column from the gird; there is an error as in the attached image. the code to remove the grid column that I used is;

grid.removeColumn(k, true);

I am getting this error, because the grid.column is not updated. Is there any possible ways to remove the column from the gird as I don't find any other ways to remove the column from the gird.

Thank You.

[pawangyanwali]

The issue is I am unable to remove the column of index 2 because the

grid.column

is not updated as the grid.removeColumn(index, bool) removes the column from

grid.column

Is there any new solution to this as it was working perfect in ext 2.1

Thank You

[pawangyanwali]

The issue is I am unable to remove the column of index 2 because the

grid.column

is not updated as the grid.removeColumn(index, bool) removes the column from

grid.column

Is there any new solution to this as it was working perfect in ext 2.1

Thank You

[Daniil]

This is still actual.

I have no idea. Please provide us with a standalone example to reproduce the problem.