Here's what I need to happen. When the user clicks on a command column, my Command DirectEvent handler needs to unbold every other row and bold the row whose command was just clicked. Is this possible?
Printable View
Here's what I need to happen. When the user clicks on a command column, my Command DirectEvent handler needs to unbold every other row and bold the row whose command was just clicked. Is this possible?
Hi jmcantrell,
I think it's possible.
I would suggest you to use the getRowClass method of GridPanel's View.
Here is an example how to use it.
https://examples1.ext.net/#/GridPane...rking_Records/
Needs to create respective css class (-es) and returns them depending on the record's property (for example, record.bold).
These property can be set in a Command's handler.
I'm not sure but there may be a better solution.
I saw that example. I do have some unanswered questions though.
So let's say I have a field in my store called "marked" which is just a Boolean.
- From the DirectEvent, how do I get the row index so I can access it the store?
- How do I then modify that item in the store to set "marked" to true?
- How do I set all the others to false?
- Do I need to tell the grid to update, being that I'm altering the data in the store?
- Also, I've tried editing the CSS class directly using my browser's developer tools to set the font-weight to bold, but it has no effect. Other things like background color and text color do work, however. Can bold be done?
Hi,
Please look at the example.
Example
Code:<%@ 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", true},
new object[] {"test2", false},
new object[] {"test3", false}
};
store.DataBind();
}
}
protected void Command(object sender, DirectEventArgs e)
{
Store store = this.GridPanel1.GetStore();
int rowIndex = int.Parse(e.ExtraParams["rowIndex"]),
count = int.Parse(e.ExtraParams["count"]);
for (int i = 0; i < count; i++)
{
store.UpdateRecordField(i, "bold", false);
}
store.UpdateRecordField(rowIndex, "bold", true);
store.CommitChanges();
}
</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 Example</title>
<script type="text/javascript">
var getRowClass = function (record) {
if (record.get("bold")) {
return "myBoldClass";
}
}
</script>
<style type="text/css">
.myBoldClass.x-grid3-row td {
font-weight: bolder;
font-size: large;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" />
<ext:RecordField Name="bold" Type="Boolean"/>
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1" />
<ext:Column Header="Bold" DataIndex="bold" />
<ext:CommandColumn>
<Commands>
<ext:GridCommand CommandName="command1" Icon="Accept" />
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
<DirectEvents>
<Command OnEvent="Command">
<ExtraParams>
<ext:Parameter Name="rowIndex" Value="rowIndex" Mode="Raw"/>
<ext:Parameter
Name="count"
Value="#{GridPanel1}.getStore().getCount()"
Mode="Raw"/>
</ExtraParams>
</Command>
</DirectEvents>
</ext:GridPanel>
</form>
</body>
</html>
Hi,
Please see the following sample
Code:<%@ 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)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72},
new object[] { "Alcoa Inc", 29.01},
new object[] { "Altria Group Inc", 83.81},
new object[] { "American Express Company", 52.55},
new object[] { "American International Group, Inc.", 64.13}
};
}
}
protected void ClickCommand(object sender, DirectEventArgs e)
{
if (e.ExtraParams["cmd"] == "Bold")
{
GridPanel1.View[0].Set("boldId", e.ExtraParams["recordId"]);
GridPanel1.RefreshView();
}
}
</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 Example</title>
<style type="text/css">
.bold-row .x-grid3-cell-inner{
font-weight:bold;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
StripeRows="true"
Title="Array Grid"
TrackMouseOver="true"
Width="600"
Height="350"
AutoExpandColumn="company">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
<ext:Column Header="Price" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:CommandColumn>
<Commands>
<ext:GridCommand Icon="TextBold" CommandName="Bold" />
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<GetRowClass Handler="return record.id == this.boldId ? 'bold-row' : '';" />
</ext:GridView>
</View>
<DirectEvents>
<Command OnEvent="ClickCommand">
<ExtraParams>
<ext:Parameter Name="cmd" Value="command" Mode="Raw" />
<ext:Parameter Name="recordId" Value="record.id" Mode="Raw" />
</ExtraParams>
</Command>
</DirectEvents>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true" />
</SelectionModel>
</ext:GridPanel>
</body>
</html>
Fantastic! This worked like a charm.
Thanks again, guys. :)
I tried Vladimir's code using v3.
it works fine except for the style
I don't have "grid3" style, but just grid.HTML Code:<style type="text/css">
.bold-row {
font-weight: bold;
}
</style>
Thanks
Hello @bbros!
I believe you posted just what's left to fix in recent Ext.NET versions, right?.. If you're in actual trouble with this using Ext.NET v3, don't hesitate on posting (if so please post a new thread in v3 forums as this one is quite old and focused on version 1).
Hello Fabricio.
Everything is alright. I posted only for people like me which copies old solutions to new projects and starts debugging :)
thanks.