[CLOSED] Remove Grid Column by column index.

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Remove Grid Column by column index.

    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.
    Last edited by Daniil; Apr 20, 2014 at 2:39 PM. Reason: [CLOSED]
  2. #2
    Hi @pawangyanwali,

    Hard to say what is going wrong. If you provide a standalone runnable example to reproduce, I could investigate.
  3. #3
    Quote Originally Posted by Daniil View Post
    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

    Click image for larger version. 

Name:	FirstLoad.png 
Views:	43 
Size:	62.9 KB 
ID:	9121Click image for larger version. 

Name:	GridSecondLoad.png 
Views:	44 
Size:	7.6 KB 
ID:	9131Click image for larger version. 

Name:	GridError.png 
Views:	44 
Size:	19.7 KB 
ID:	9141

    Thank You.
    Last edited by pawangyanwali; Apr 01, 2014 at 5:14 AM.
  4. #4
    Quote Originally Posted by pawangyanwali View Post
    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
  5. #5

    Remove Grid Column by column index.

    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 YouClick image for larger version. 

Name:	error.png 
Views:	49 
Size:	16.8 KB 
ID:	9181
  6. #6
    I have no idea. Please provide us with a standalone example to reproduce the problem.
  7. #7
    Quote Originally Posted by Daniil View Post
    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);
    Click image for larger version. 

Name:	error.png 
Views:	35 
Size:	16.8 KB 
ID:	9261

    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.
    Last edited by pawangyanwali; Apr 03, 2014 at 6:28 AM.
  8. #8
    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
  9. #9
    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
  10. #10
    This is still actual.
    Quote Originally Posted by Daniil View Post
    I have no idea. Please provide us with a standalone example to reproduce the problem.
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 0
    Last Post: Sep 27, 2012, 6:10 PM
  2. Replies: 1
    Last Post: Nov 24, 2011, 6:48 AM
  3. Replies: 0
    Last Post: Feb 06, 2011, 4:17 PM
  4. [CLOSED] Get column index with rowSelectionModel
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 28, 2010, 4:22 PM
  5. Replies: 3
    Last Post: Apr 08, 2010, 7:16 AM

Tags for this Thread

Posting Permissions