Jun 10, 2014, 1:26 PM
[CLOSED] Adding Css to grid column
Hello,
I am looking for two things to be implemented in a grid. I am using a grid with an image button on one of its columns which will open a textArea on click populating Long Description field.
1. I need to change the background color of the cell of this image button column when LongDescription is not empty.
I tried using Renderer function to do this, it changed the background color but it made the image button invisible.
This is what I did.
2. I am looking for a mouse over event on image button. when the user mouse overs on this button, i need to show a window. Right now, it is happening on button click. Please let me know if there is a way to do it on mouse over.
Below is the sample code.
I am looking for two things to be implemented in a grid. I am using a grid with an image button on one of its columns which will open a textArea on click populating Long Description field.
1. I need to change the background color of the cell of this image button column when LongDescription is not empty.
I tried using Renderer function to do this, it changed the background color but it made the image button invisible.
This is what I did.
<ext:ImageCommandColumn ID="imgbtnDescp" runat="server" Text="Long Description" DataIndex="LongDescription" >
<Renderer Fn="getColour"></Renderer>
<Commands>
<ext:ImageCommand CommandName="LongDescription" Icon="TextAlignLeft" >
</ext:ImageCommand>
</Commands>
</ext:ImageCommandColumn> var getColour = function (value, metadata)
{
if(value)
{
metadata.style = "background-color:green;";
}
};2. I am looking for a mouse over event on image button. when the user mouse overs on this button, i need to show a window. Right now, it is happening on button click. Please let me know if there is a way to do it on mouse over.
Below is the sample code.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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 id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:XScript ID="XScript1" runat="server">
<script>
var topicValues = function (value)
{
var r = #{StoreCombo}.getById(value);
if (Ext.isEmpty(r))
{
return "";
}
return r.data.TopicName;
};
function saveLongDescriptionToGrid() {
var longDescription = #{txtArLongDesp}.getRawValue(),
selectedRow = #{GridPanel1}.getSelectionModel().getSelection()[0];
selectedRow.data.LongDescription = longDescription; }
</script>
</ext:XScript>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
//DataSource for StoreCombo
List<object> StoreComboData = new List<object>
{
new {TopicID="1",TopicName="Topic1"},
new {TopicID="2",TopicName="Topic2"},
new {TopicID="3",TopicName="Topic3"}
};
StoreCombo.DataSource = StoreComboData;
StoreCombo.DataBind();
//DataSource for GridBox
List<object> gridData = new List<object>
{
new {TopicID = "1", TopicName = "Topic1", ShortDescription="Test1", LongDescription="LongDescription1" },
new {TopicID = "3", TopicName = "Topic3", ShortDescription="Test2", LongDescription=""}
};
Store1.DataSource = gridData;
Store1.DataBind();
}
}
[DirectMethod]
protected void btnSave_Click(object sender, DirectEventArgs e)
{
string json = e.ExtraParams["Values"];
Dictionary<string, string>[] dctTopics = JSON.Deserialize<Dictionary<string, string>[]>(json);
string strTopicName = string.Empty;
string strTopicDescp = string.Empty;
string strTopicID = string.Empty;
foreach (Dictionary<string, string> row in dctTopics)
{
foreach (KeyValuePair<string, string> keyValuePair in row)
{
if (keyValuePair.Key == "TopicName")
{
strTopicName = keyValuePair.Value;
}
}
}
}
protected void btnAdd_Click(object sender, DirectEventArgs e)
{
List<object> gridData = new List<object>
{
new {TopicID = "1", TopicName = "", ShortDescription="" },
};
this.Store1.Add(gridData);
this.GridPanel1.GetStore().CommitChanges();
}
</script>
<script language="javascript" type="text/javascript">
var getRowClass = function (record) {
if(record.data.LongDescription)
{
return "greenCell";
}
};
</script>
<style>
.greenCell
{
background-color: Green ;
}
</style>
<ext:ResourceManager ID="rmPrelimIdeas" runat="server" />
<ext:Store ID="StoreCombo" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="TopicID">
<Fields>
<ext:ModelField Name="TopicID" />
<ext:ModelField Name="TopicName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="3">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="TopicID" />
<ext:ModelField Name="TopicName" />
<ext:ModelField Name="ShortDescription" />
<ext:ModelField Name="LongDescription" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column4" runat="server" Text="Topic" DataIndex="TopicID">
<Renderer Fn="topicValues" />
<Editor>
<ext:ComboBox ID="ComboBox1" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
ValueField="TopicID" />
</Editor>
</ext:Column>
<ext:Column ID="Column1" runat="server" Text="Short Description" DataIndex="ShortDescription"
>
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
</Editor>
<EditorOptions>
<Listeners>
<StartEdit Handler="this.field.validate();" />
</Listeners>
</EditorOptions>
</ext:Column>
<ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Text="Long Description">
<Commands>
<ext:ImageCommand CommandName="LongDescription" Icon="TextAlignRight" ToolTip-Text="Long Description">
</ext:ImageCommand>
</Commands>
<Listeners>
<Command Handler="#{window2}.show(); #{txtArLongDesp}.reset(); #{CheckboxSelectionModel1}.select(record.index); #{txtArLongDesp}.setValue(record.data.LongDescription);">
</Command>
</Listeners>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" StripeRows="true">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server">
</ext:CellEditing>
</Plugins>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" />
</SelectionModel>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="btnSave" runat="server" Icon="Disk">
<DirectEvents>
<Click OnEvent="btnSave_Click">
<ExtraParams>
<ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true}))"
Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="Button1" runat="server" Icon="Add">
<DirectEvents>
<Click OnEvent="btnAdd_Click">
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
<ext:Window ID="window2" runat="server" Hidden="true" Width="510px">
<Items>
<ext:TextArea ID="txtArLongDesp" Width="500px" EmptyText="Enter Long Description"
MaxLength="2000" AutoScroll="true" runat="server" />
</Items>
<Listeners>
<Close Handler="saveLongDescriptionToGrid()">
</Close>
</Listeners>
</ext:Window>
</div>
</form>
</body>
</html>
Last edited by Daniil; Jun 20, 2014 at 4:17 AM.
Reason: [CLOSED] [#510]
