function WebGrid1_OnColumnResize(controlId, tblName, column, width) {    var WebGrid1 = ISGetObject(controlId);
    var ShipperIDColumn = document.getElementById("ShipperIDColumn");
    var CompanyNameColumn = document.getElementById("CompanyNameColumn");
    var PhoneColumn = document.getElementById("PhoneColumn");
    var ShipperIDWidth = document.getElementById("ShipperIDWidth");
    var CompanyNameWidth = document.getElementById("CompanyNameWidth");
    var PhoneWidth = document.getElementById("PhoneWidth");
    // To save the new width
    if (column.DataMember == ShipperIDColumn.value) {
        ShipperIDWidth.value = width;
    }
    else if (column.DataMember == CompanyNameColumn.value) {
        CompanyNameWidth.value = width;
    }
    else {
        PhoneWidth.value = width;
    }
    // To post back
    WebGrid1.RefreshAll();
    return true;
}

Then I made some validation in InitializeColumn server side event, to apply the new width. Here the snippet code:

protected void WebGrid1_InitializeColumn(object sender, ISNet.WebUI.WebGrid.ColumnEventArgs e)
{
    // To set ShipperID Column
    if (ShipperIDColumn.Value == e.Column.DataMember && ShipperIDWidth.Value != "")
    {
        string newWidth = ShipperIDWidth.Value;
        int intNewWitdh = Int32.Parse(newWidth);
        e.Column.Width = System.Web.UI.WebControls.Unit.Pixel(intNewWitdh);
    }
    // To set CompanyName Column
    else if (CompanyNameColumn.Value == e.Column.DataMember && CompanyNameWidth.Value != "")
    {
        string newWidth = CompanyNameWidth.Value;
        int intNewWitdh = Int32.Parse(newWidth);
        e.Column.Width = System.Web.UI.WebControls.Unit.Pixel(intNewWitdh);
    }
    // To set Phone Column
    else if (PhoneColumn.Value == e.Column.DataMember && PhoneWidth.Value != "")
    {
        string newWidth = PhoneWidth.Value;
        int intNewWitdh = Int32.Parse(newWidth);
        e.Column.Width = System.Web.UI.WebControls.Unit.Pixel(intNewWitdh);
    }
}

I attached my sample as well. Please have a review on my sample and let me hear your response.

Thank you.

Regards,
Hans.

<script type="text/javascript">function removeColumn(colName) {
var grid = ISGetObject(gridName);
var col = grid.RootTable.Columns.GetNamedITem(colName);
// How can I do this step?
col.Visible = false;
// here I would like to create a post  back to the server so I can do some modification to my column list on the server side. 
refreshPage();
}
</script>

Hello,

Thank you for your information.

I made a simple sample to demonstrate how to hide and show WebGrid column from client side.
I bind the WebGrid to access data source (Northwind.mdb database & Shippers table).
In my sample, I try to hide\show Phone column using WebButton’s OnClientClick client side event.
Here’s the snippet code in OnClientClick:

function WebButton1_OnClientClick(controlId, parameter) {    var WebButton1 = ISGetObject(controlId);
    var WebGrid1 = ISGetObject("WebGrid1");
    if (!WebGrid1.RootTable.Columns.GetNamedItem("Phone").Visible) {
        WebGrid1.RootTable.Columns.GetNamedItem("Phone").Visible = true;
        WebGrid1.RootTable.Columns.GetNamedItem("Phone").Show();
    } else {
        WebGrid1.RootTable.Columns.GetNamedItem("Phone").Visible = false;
        WebGrid1.RootTable.Columns.GetNamedItem("Phone").HideFromView();
    }
    return true;
}

However, if you want to make any changes to your Webgrid’s column, for example adding new columns, the structure is changed and could not be modified easily without fullpostback.

In my humble opinion, I recommended you to handle all your WebGrid’s changes using fullpostback event. So you could easier to handle all your WebGrid’s changes.

I attached my sample as well. Please have review on my sample.

Thank you.

Regards,
Hans.

Hans,

It seems there is another issue with this approach...When I try to execute the following code in the JS, I always get a JS error as listed below. It seems to always break on either Show() or HideFromView();

Any ideas?

TypeError: va7744 is null[Break On This Error] 	...30); if (ve2630.tagName =="TR" ||ve2630.tagName =="TD") return wgab058.m3c386(ve...
ISRes....7200533 (line 9)

                            var grid = ISGetObject(myGrid);
                            var columnSettings = returnObj.newColumnSettings.split(",");
                            for (var i = 0; i < columnSettings.length; i++) {
                                var settingTokens = columnSettings[i].split(":");
                                if (settingTokens[1] == "SHOW") {
                                    if (!grid.RootTable.Columns.GetNamedItem(settingTokens[0]).Visible) {
                                        grid.RootTable.Columns.GetNamedItem(settingTokens[0]).Visible = true;
                                        grid.RootTable.Columns.GetNamedItem(settingTokens[0]).Show();
                                    }
                                }
                                else if (settingTokens[1] == "HIDE") {
                                    if (grid.RootTable.Columns.GetNamedItem(settingTokens[0]).Visible) {
                                        grid.RootTable.Columns.GetNamedItem(settingTokens[0]).Visible = false;
                                        grid.RootTable.Columns.GetNamedItem(settingTokens[0]).HideFromView();
                                    }
                                }
                            }
                            wgDoResize(true, true);

I'm passing in a string that looks like colName:SHOW,colName:HIDE,colName:SHOW. I've confirmed that the strings are being split correctly as well.

Hello,

Thank you for the code.

Could you provide me more information about your code?
For example, where do you get the value of “returnObj”? Or what function and how you call the function to hide the column?

Or if you don’t mind, could you provide me a simple sample that replicate this issue?

So I can help you to investigate this issue further more.

Thank you.

Regards,
Hans.

parent.aspxfunction openPopup() {
  // I'm not using showModalDialog anymore. I'm using the JQuery ColorBox plugin, but I am adding this code as an explanation
  var returnObj = window.showModalDialog(URL, args, "edge:Raised;scroll:no;help:no;status:no;center:yes;resizable:no;dialogHeight:350px;dialogWidth:600px;dialogLeft:48px;dialogTop:50px;");
  var grid = ISGetObject(myGrid);
                            var columnSettings = returnObj.newColumnSettings.split(",");
                            for (var i = 0; i < columnSettings.length; i++) {
                                var settingTokens = columnSettings[i].split(":");
                                if (settingTokens[1] == "SHOW") {
                                    if (!grid.RootTable.Columns.GetNamedItem(settingTokens[0]).Visible) {
                                        grid.RootTable.Columns.GetNamedItem(settingTokens[0]).Visible = true;
                                        grid.RootTable.Columns.GetNamedItem(settingTokens[0]).Show();
                                    }
                                }
                                else if (settingTokens[1] == "HIDE") {
                                    if (grid.RootTable.Columns.GetNamedItem(settingTokens[0]).Visible) {
                                        grid.RootTable.Columns.GetNamedItem(settingTokens[0]).Visible = false;
                                        grid.RootTable.Columns.GetNamedItem(settingTokens[0]).HideFromView();
                                    }
                                }
                            }
                            wgDoResize(true, true);
// this call posts back to the server so I can the new grid layout
refreshPage();
}

Now...the popup

function closeWindow(callbackParams) {
// call back params is an object in this case looks like {message: "some message", newColumnSettings: "a,comma,delim,string" }
                parent.modalCallback(callbackParams);
}

Hello,

Thank you for your information and code.

I made a simple sample that maybe similar with your scenario.
I adding the columns during the PrepareDataBinding event server side as well.

However I still can’t reproduce your issue on my end.
Would you mind to modify my sample, so it can replicate your issue? And could you please tell me the setting that I’ve missed in my sample?

Thank you.

Regards,
Hans.

var grid = ISGetObject('myGrid');            var settings = "";
            for (var i = 0; i < grid.RootTable.Columns.length; i++) {
                    if (settings.length != 0 && i < grid.RootTable.Columns.length) {
                        settings += ","
                    }
                    settings += grid.RootTable.Columns[i].Name + ":" + grid.RootTable.Columns[i].Width + "px:" + grid.RootTable.Columns[i].Visible;
            }