PDA

View Full Version : [CLOSED] GridPanel with RowExpander; Selecting Row



cwolcott
May 16, 2012, 6:46 PM
Is there anyway to be able to select in an expanded RowExpander area of a grid panel row and have the row selected? I use the RowExpander to show comments for the given row, but I can not select in the comment area and have to row selected.

Daniil
May 16, 2012, 7:43 PM
Hi,

Please set up:

<ext:GridPanel runat="server">
...
<View>
<ext:GridView runat="server" EnableTextSelection="true" />
</View>
</ext:GridPanel>

cwolcott
May 17, 2012, 1:45 PM
That isn't what I was looking for, but nice option.

When the grid row is expanded the only way to select the row is by clicking in the top 10 pixels of the row. If I try to click where the template information is the row does not capture that I am click in it.

I underestand that the row expander can show complicated information, but all I am showing is comments about the information in an HTML tag. Is there any way when I click over the comments area of the expanded row the row will be selected?

Based on the Sencha docs there is no property, but I didn't know if you had a trick.

Daniil
May 17, 2012, 2:34 PM
I've got the requirement now, thanks for the clarification.

I can suggest the following solution, please see the ItemMouseDown listener.

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();
}
}
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var onItemMouseDown = function (view, record, item, index, e) {
if (e.getTarget('div.x-grid-rowbody', view.el)) {
view.ownerCt.getSelectionModel().selectWithEvent(r ecord, e);
};
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<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 runat="server" Text="Test2" DataIndex="test2" />
<ext:Column runat="server" Text="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<Plugins>
<ext:RowExpander runat="server">
<Template runat="server">
<Html>
{test1} {test2} {test3}
</Html>
</Template>
</ext:RowExpander>
</Plugins>
<View>
<ext:GridView runat="server">
<Listeners>
<ItemMouseDown Fn="onItemMouseDown" />
</Listeners>
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel runat="server" AllowDeselect="true" />
</SelectionModel>
</ext:GridPanel>
</body>
</html>

cwolcott
May 17, 2012, 2:56 PM
Awesome, works perfectly. I would never have figured out the piece of code below:



<script type="text/javascript">
var onItemMouseDown = function (view, record, item, index, e) {
if (e.getTarget('div.x-grid-rowbody', view.el)) {
view.ownerCt.getSelectionModel().selectWithEvent(r ecord, e);
};
};
</script>


Please close the thread.