PDA

View Full Version : [CLOSED] GridPanel column DirectEvent config



cwolcott
Mar 12, 2013, 2:59 PM
Hopefully this is easy enough without an example, but I can cut a CD and move it over from our private network if needed.

I have a GridPanel with a column that is current hidden=true and visible=false. Thus I can not see the column in the GridPanel and it is not listed as an available column to be shown in the Columns dropdown. I added a button that when clicked calls a DirectEvent and trys to make the column visible

DateColumn1.Visible = true
But it does not show up in the Columns dropdown so I can check it and unhide it.


In the Page_Load I can perform

DateColumn1.Visible = true
and the column is shown in the Columns dropdown so I can check it and unhide it, but I can not get it to work in a DirectEvent.

What have I forgotten or doing wrong?

Daniil
Mar 12, 2013, 4:11 PM
Hi Chris,

We didn't produce any JavaScript on change of the Visible property.

If Visible was false initially, then a control is not rendered at all.

So, a control must be rendered.


someControl.Visible = true;
someControl.Render();

But it won't work in this case with a Column.

I would suggest you not to add a Column at all and add it using the AddColumn or InsertColumn methods as here.
http://examples2.ext.net/#/GridPanel/ColumnModel/Reconfigure/

Even the following appears to be working well. But it might be tricky. So, I would prefer not to define the Column in the markup at all.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
store.DataBind();
}
}

protected void Show(object sender, DirectEventArgs e)
{
this.GridPanel1.InsertColumn(1, this.Column2);
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column
ID="Column2"
runat="server"
Text="Test2"
DataIndex="test2"
Visible="false" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
</ext:GridPanel>
<ext:Button runat="server" Text="Test" OnDirectClick="Show" />
</form>
</body>
</html>

Here is another approach.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", "test2", "test3" },
new object[] { "test4", "test5", "test6" },
new object[] { "test7", "test8", "test9" }
};
store.DataBind();
}
}

protected void Show(object sender, DirectEventArgs e)
{
this.Column2.Hidden = false;
this.Column2.Hideable = true;
X.Js.AddScript(string.Format("clearMenu({0})", this.GridPanel1.ClientID));
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var clearMenu = function (grid) {
var view = grid.getView();

view.headerCt.menu.destroy();
delete view.headerCt.menu;
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column
ID="Column2"
runat="server"
Text="Test2"
DataIndex="test2"
Hidden="true"
Hideable="false" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
</ext:GridPanel>
<ext:Button runat="server" Text="Test" OnDirectClick="Show" />
</form>
</body>
</html>

Please note it all is possible to do on client side. Sure, unless you need any data from sever.

cwolcott
Mar 12, 2013, 5:39 PM
So for this example I decided to define the column as visible in the markup and during the direct event attempt to remove the column if the user does not have the correct role. The role information is being passed through the MessageBus as part of the data from the parent to the child.



if (!privsCRM && !privsJDS) RequestDetailsStatusItems.RemoveColumn("ColumnStatusItemId");


It is being called everytime I need to refresh the gridpanel's data, but only being removed once since after the first time it does not exist anymore. I would rather perform the action during the user controls Page_Load, but I can't figure out how to determine the users role during the page load.

Daniil
Mar 13, 2013, 5:05 AM
There should be a way to remove a Column during Page_Load.

Please provide a simplified test case to reproduce the scenario.

Daniil
Mar 13, 2013, 5:37 AM
Maybe these examples will help.
http://forums.ext.net/showthread.php?23897&p=104588&viewfull=1#post104588