PDA

View Full Version : [CLOSED] Adding Css to grid column



vmehta
Jun 10, 2014, 2:26 PM
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.


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

I tried another approach, using GetRowClass (as in below sample) , which did not work. Please let me know if I am missing something here.

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.LongDescript ion);">
</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({selectedOn ly: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>

geoffrey.mcgill
Jun 10, 2014, 4:14 PM
Hello,

Please separate your questions into two threads. This will make it easier for us to track the thread to ensure each question in answered properly.

As well, please ensure all code samples are reduced down to the minimum required to reproduce the problem. Remove all code that is not directly related to the problem.

Daniil
Jun 10, 2014, 4:17 PM
Hi @vmehta,

A ImageCommandColumn defines a Renderer internally. So, it should not be overridden.

Your GetRowsClass approach is good.

Please do the following:

1. Set this for the ImageCommandColumn:

TdCls="long-description"

2. Change the CSS rule to:

<style>
.greenCell td.long-description {
background-color: Green;
}
</style>

3. Also I would suggest to change the getRowClass function a bit.

var getRowClass = function (record) {
if(!Ext.isEmpty(record.data.LongDescription)) {
return "greenCell";
}
};



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.

Please keep one issue per thread.

vmehta
Jun 11, 2014, 8:23 AM
Thanks. It worked. But there is a small issue I guess. I already have another style applied which will change the background colour of the row to gray when some conditioIn is true. Now, I have added this new condition which gets overridden by the other condition I guess. I tried using !important next to it but still gray style takes the precedence.
Is there a way to set both the styles giving equal precedence?



.gray .x-grid-cell, .new-row .x-grid-rowwrap-div
{
background: #E4DFE0 ;
}

.greenCell td.long-description { background-color: Green;}


var getRowClass = function (record) {

if (record.data.Highlight) {
return "gray";
}


if(!Ext.isEmpty(record.data.LongDescription))
if(record.data.LongDescription)
{
return "greenCell";
}
};

Daniil
Jun 11, 2014, 2:36 PM
I think you should not return "gray" from the getRowClass function if you need "greenCell" to be applied to a row.

vmehta
Jun 11, 2014, 2:43 PM
I need to do both. 'Gray' is on some condition and 'greencell' for some other condition. I need to apply both the styles on different condtions.

Daniil
Jun 11, 2014, 2:56 PM
I need to do both.

But there is background color in both. How is it going to work? I mean how can you apply two background colors?

vmehta
Jun 11, 2014, 3:29 PM
Ok. Let me explain.

I have two fields called 'Long Description' - an image button column and 'Highlight' - a checkbox column on a grid.

What I am already doing :

Setting the background color of the entire row to gray if the 'Highlight' is checked. I do this using GetRowClass like this -


var getRowClass = function (record) {

if (record.data.Highlight)
{
return "gray";
}
};


.gray .x-grid-cell
{
background: #E4DFE0 ;
}

What I need to do :

I need to set the background of the cells on Long Description column to green if Long Description has a value. Plus whatever I am already doing (as described above).

Case 1. When Long Description =" Long Description1", Highlight = false
I need to set background color of Long Description column cell green for that record, indicating that Long Descritpion has a value
Hightlight is false, hence I need not set the background of entire row to gray

Case 2. When Long Description ="", Highlight = true
I need to set the background color of the entire row to gray
Long Description is empty, hence I need not set background of the cell Long Description to green

Case 3: When Long Description =" Long Description1", Highlight = true
First I need to set the background of Long Description column cell to green and
Highlight is true, hence set the background of the entire row to gray

I want to achieve this. Green on Long Description column's cell and other cells on the row gray.

Case 4: When Long Description ="", Hightlight = false
Nothing

Let me know if you need more clarity.

Thanks

Daniil
Jun 12, 2014, 5:04 AM
If you need both CSS classes at the same time, you should do

return "gray greenCell";
in the getRowClass function.

vmehta
Jun 12, 2014, 7:48 AM
It works for all conditions except this one.

When Highlight is true and LongDecsription is empty, it still makes the cell green. It makes the background of row gray though.
But it should not make the Long Description green.

vmehta
Jun 12, 2014, 11:03 AM
I did something like this to make it work.


if((!Ext.isEmpty(record.data.LongDescription)) && (record.data.Highlight))
{
return "greenCell grayCell";
}



.greenCell td.long-description
{
background-color: Green;
}

.grayCell td.highlight
{
background-color: #E4DFE0;
}
and had to set tdCls="grayCell" on every column except LongDescription

Daniil
Jun 12, 2014, 11:53 AM
The solution looks good.

vmehta
Jun 12, 2014, 2:02 PM
It is working fine but for Long Description column since I am setting background to green using tdCls, it can only be green when condition is true. But when condition is false it will not to be set to gray if Highlight is true.

Is there an option to set the cell color based on conditions

If I have say 3 columns A,B,C. B and C hold some conditions

if C is true, B is false
then set cells of A,C to color gray and B to no color for that row

If C is true, B is true
then set cells of A,C to color gray and B to green for that row

If C is false, B is true

then set cells of A,C to no color and B to green for that row

If C is false, B is false
then set cells of A,B,C to no color

Daniil
Jun 13, 2014, 8:13 AM
Please provide a test case. Remove everything that is not related to the problem, i.e. simplify that test case as possible as you can.

Then please provide exact steps to reproduce the problem. The only problem, not many.