Intersoft Community - WebGrid Enterprise - OnColumnResize Client Side Event, Removing Columns and PostBack

OnColumnResize Client Side Event, Removing Columns and PostBack

Hans — Thu, 09 Aug 2012 23:41:16 GMT

Hello,

I’m glad that you have found a work around.

Thank you for your feedback.
I made a sample base on your code, but unfortunately, I can’t replicate your issue on my end.
I use Nortwind database and Customers table in my sample.

I attached my sample. Please have a review on my sample and let me know if there are settings that I missed.

Could you provide me your WebGrid and Framework in your current project?

Thank you.

Regards,
Hans.

OnColumnResize Client Side Event, Removing Columns and PostBack

adajani@najiasystems.com — Thu, 09 Aug 2012 16:11:45 GMT

It's fine I found a work around.

I would like to inform your developers of one thing that has been an issue. Sometimes when I hide a column, then run the following code on client side, the invisible columns are always at the end.

For example, if I create the columns as
col1:visible, col2:visible, col3:invisible, col4:visible, col5:visible
then run my code, I get the following:
col1:visible, col2:visible, col4:visible, col5:visible, col3:invisible

I don't understand why but I hope it is addressed with the next hot fix.

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;
            }

OnColumnResize Client Side Event, Removing Columns and PostBack

Hans — Mon, 06 Aug 2012 04:30:18 GMT

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.

OnColumnResize Client Side Event, Removing Columns and PostBack

adajani@najiasystems.com — Fri, 03 Aug 2012 12:06:00 GMT

Actually there are lots of files involved...But here is the scenario.

- Same grid as above. I am dynamically adding the columns during the PrepareDataBinding event server side.

- User clicks a button, opens an iFrame window popup to choose the grid columns they want. When the iFrame posts back. It sends a comma dilimited string to the parent window through js (parent.modalCallback(callBackParams) which is assigned to returnObj. You retreive the value as returnObj.newColumnSettings.

So,

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);
}

OnColumnResize Client Side Event, Removing Columns and PostBack

Hans — Thu, 02 Aug 2012 23:54:35 GMT

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.

OnColumnResize Client Side Event, Removing Columns and PostBack

adajani@najiasystems.com — Thu, 02 Aug 2012 15:45:17 GMT

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.

Thanks!

OnColumnResize Client Side Event, Removing Columns and PostBack

Hans — Wed, 01 Aug 2012 21:41:21 GMT

Hello,

I’m glad to hear that you have found the solution for your project’s scenario.
Should you have further question, please do not hesitate to contact us.

Thank you.

Regards,
Hans.

OnColumnResize Client Side Event, Removing Columns and PostBack

adajani@najiasystems.com — Wed, 01 Aug 2012 11:03:39 GMT

This solution worked, but I had to add wgDoResize(true, true); after the call or else the columns would render weird on the grid.

OnColumnResize Client Side Event, Removing Columns and PostBack

Hans — Wed, 01 Aug 2012 02:18:49 GMT

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.

OnColumnResize Client Side Event, Removing Columns and PostBack

adajani@najiasystems.com — Tue, 31 Jul 2012 14:05:40 GMT

Hi Hans,

Unfortunately I cannot use this approach in my code due to the nature of how we are creating the grid.

I now have another problem. When I initially load the grid, I am able to right click a column header and select "Remove This Column". The column is removed just fine. Then if I create another post back to try and change the columns, then, right click column header and chose "Remove This Column" The column disappears and reappears again with in a second. Have you ever encountered this? The same happens with resizing the column. The size just doesn't take.

To recreate:

1. Use the same grid markup above
2. Client side dynamically add a bunch of columns.
3. Try "Remove this column"
4. Then create a post back and change the columns from the server side
5. Try step 3 again.

Another thing I'd like to be able to do is call "Remove This Column" on any column from my JavaScript code. How can I do that? Example:

<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>

Thanks!

OnColumnResize Client Side Event, Removing Columns and PostBack

adajani@najiasystems.com — Thu, 26 Jul 2012 11:06:57 GMT

I am dynamically adding columns to my grid.

1. I am able to right click a column and choose "Remove this colum." Sometimes it works and removes, other times it doesn't. Have you ever had this behavior?

2. I'd like to be able to refresh the grid everytime a column is resized so I can do some processing on the server. If I do a grid refresh inside the OnColumnResize client side event, it seems the width of the column is still not set to the new width. When client event can I use to post back after OnColumnResize?

Thanks.

My Grid looks like this:

<ISWebGrid:WebGrid ID="myGrid" runat="server" Height="560px" Width="100%" UseDefaultStyle="true" EnableWebResources="Always"
                           DataSourceID="odsAccountLineList" CustomSchemaRetrieval="UseWebGrid">
            <RootTable GridLineStyle="NotSet" DataKeyField="account_line_id">
            </RootTable>
            <LayoutSettings DisplayDetailsOnUnhandledError="true"
                            InProgressUIBehavior="ChangeCursorToHourGlass" StatusBarVisible="true"
                            NewRowLostFocusAction="AlwaysUpdate"
			                RowLostFocusAction="AlwaysUpdate" 
                            AllowColumnMove="Yes"
			                AllowFilter="No" 
                            AllowGrouping="No" 
                            AllowSelectColumns="Yes" 
                            AllowSorting="No"
			                GroupByBoxVisible="false" 
                            AutoHeight="false" 
                            AutoWidth="true" 
                            PagingMode="None"
                            AllowEdit="Yes" 
                            AllowDelete="Yes"
                            AllowMultipleSelection="Yes"
                            UseRelativePositioning="true">
                <AlternatingRowStyle CustomRules="text-overflow: ellipsis; overflow-x: hidden" BackColor="LightGray" Wrap="false" Font-Size="8pt" Font-Names="Arial Monospaced"></AlternatingRowStyle>
                <RowStyle CustomRules="text-overflow: ellipsis; overflow-x: hidden" BackColor="White" Font-Size="8pt" Wrap="false" Font-Names="Arial Monospaced"></RowStyle>
                <ClientSideEvents OnRowContextMenu="myGrid_OnRowContextMenu" OnColumnContextMenu="myGrid_OnColumnContextMenu" 
                    OnColumnResize="myGrid_OnColumnResize" />
		    </LayoutSettings>
        </ISWebGrid:WebGrid>

Thanks.