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,
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://ko.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.
Sincerely,
Tsanna
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) {
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!