I want to mark the border of the selected row.
I have css attached.
I also activate the RowSelectionChanged.
When the user selects a row, it does a post back, and the row's border doesnt get colored.
only second time he selects the row , when the row has already been selected, and therefore post back does not happen, does the border being colored.
I think it is connected somehow to using border-collapse: collapse
.igg_ActiveRow, ActiveRowClass,tbody.ActiveRowClass > tr > td { background-color: inherit; border-color: rgb(37,112,152) !important; border-width: 2px !important; border-style: solid !important; margin: 5px; } .igg_Control table, .tblEdit { border-collapse: collapse !important; }
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GIFXOptionPricer_Pricer.aspx.cs" Inherits="OptionPricer.GIFXOptionPricer_Pricer" %>
<%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.EditorControls" TagPrefix="ig" %> <%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.ListControls" TagPrefix="ig" %> <%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI" TagPrefix="ig1" %> <%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.GridControls" TagPrefix="ig" %> <%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.LayoutControls" TagPrefix="ig" %>
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <title></title>
<link href="~/css/InfragisticsDefs.css" rel="stylesheet" type="text/css" /> </head>
<body> <form id="form1" runat="server" dir="rtl"> <ig1:WebScriptManager ID="WebScriptManager1" runat="server"> </ig1:WebScriptManager> <div id="page-container"> <ig:WebDataGrid ID="PricerDataGrid" runat="server" Width="100%" Height="100%" ViewStateMode="Enabled" ClientIDMode="Static" EnableDataViewState="True" AutoGenerateColumns="False" EnableAjax="False" OnRowSelectionChanged="PricerDataGrid_RowSelectionChanged1" EnableAjaxViewState="False" > <Columns> <ig:BoundDataField DataFieldName="OrderInList" DataType="System.String" Key="OrderInList" > <Header Text="No." /> </ig:BoundDataField> </Columns> <Behaviors> <ig:Selection RowSelectType="Single" CellClickAction="row" Enabled="true"> <AutoPostBackFlags RowSelectionChanged="True" /> </ig:Selection> <ig:Activation ActiveRowSelectorCssClass="ActiveRowClass" > </ig:Activation> </Behaviors> </ig:WebDataGrid> </div> </form> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using Infragistics.Web.UI.EditorControls; using Infragistics.Web.UI.GridControls; using OptionPricerCalculator.Objects; using OptionPricerCalculator;
using System.Globalization;
namespace OptionPricer { public partial class GIFXOptionPricer_Pricer : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) { List<OptionValues> ls = new List<OptionValues>(); OptionValues opt = new OptionValues(); ls.Add(opt); OptionValues opt1 = new OptionValues(); ls.Add(opt1);
PricerDataGrid.DataSource = ls; PricerDataGrid.DataBind(); }
protected void PricerDataGrid_RowSelectionChanged1(object sender, SelectedRowEventArgs e) {
}
} }
using System; using System.Collections.Generic; using System.Linq; using System.Web;
namespace OptionPricerCalculator.Objects { /// <summary> /// Summary description for OptionValues /// </summary>
[Serializable] public class OptionValues {
public int OrderInList { get { return 1; } }
Hello drpoalim,
I am still following your case. Have you been able to resolve the issue?
If you have any concerns or questions, please feel free to contact me, I will be glad to help you.
Thank you for choosing Infragistics components!
Sincerely,
Tsanna
If you have disabled Ajax, then you will get a full page postback and the active cell will change. Therefore I suggest you to set the SelectedCellCssClass property of the Selection behavior in order the selected cell/row styles to persist after full postback. Note also that it may be necessary to force the style properties in your css classes with “important” in order to avoid overriding of css propeperties. I’m attaching you the same sample with the described modifications. If you have any further questions, please feel free to ask.
I change a little your code.
I add EnableAjax="False", and <AutoPostBackFlags RowSelectionChanged="True" /> and _RowSelectionChanged
Then you will notice, then the row's border doesnt seem selected when you select it for the first time.
<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px"
EnableAjax="False" OnRowSelectionChanged="WebDataGrid1_RowSelectionChanged1"> <Behaviors> <ig:Activation Enabled="true" ActiveRowCssClass="activeRowCss"> </ig:Activation> <ig:Selection CellClickAction="Row" Enabled="true" RowSelectType="Single"> <AutoPostBackFlags RowSelectionChanged="True" /> </ig:Selection> </Behaviors> </ig:WebDataGrid>
protected void WebDataGrid1_RowSelectionChanged(object sender, SelectedRowEventArgs e) {
ActiveRowSelectorCssClass property you're applying stylizes the RowSelector of the active cell, not the row of the active cell itself. Therefore I would suggest you to use ActiveRowCssClass property instead and also you can take a look at the following article of the WebDataGrid styling guide for your reference what style classes are available for the grid: http://es.infragistics.com/community/blogs/engineering/archive/2010/08/25/webdatagrid-css-styling-guide.aspx Attached is also a sample with similar scenario. If you have any further questions, please feel free to contact me.