.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
david stephan
Gaurav Pal
Post New Web Links

Style a grid in a DataGrid

Posted By:      Posted Date: May 22, 2011    Points: 0   Category :JQuery

Does anyone know how to style cell/row borders(i.e. separators) in a DataGrid?

Setting borders on DataGridCell and DataGridRow does not do the trick. It just adds a new inner border

I can style separators in ColumnHeaders but cannot find anything that can do the same in the grid itself



View Complete Post

More Related Resource Links

GridView: Move Over DataGrid, There's a New Grid in Town!


When incorporating the ASP.NET DataGrid control into your Web apps, common operations such as paging, sorting, editing, and deleting data require more effort than you might like to expend. But all that is about to change. The GridView control--the successor to the DataGrid-- extends the DataGrid's functionality it in a number of ways. First, it fully supports data source components and can automatically handle data operations, such as paging, sorting, and editing, as long as its bound data source object supports these capabilities. In addition, the GridView control offers some functional improvements over the DataGrid. Here DataGrid expert Dino Esposito introduces the GridView and explains all its long-awaited features.

Dino Esposito

MSDN Magazine August 2004

DataGrid: Tailor Your DataGrid Apps Using Table Style and Custom Column Style Objects


One of the most enduring challenges in writing user interfaces is figuring out how to display large amounts of data efficiently and intuitively without bewildering the user. The problem becomes particularly thorny when the interface must reflect hierarchical relationships within the data that the user needs to modify. The Windows Forms DataGrid control gives developers a powerful and flexible tool to meet this challenge. This article explains its basic operations and shows how to extend the DataGrid to display columns of data in an application-appropriate manner.

Kristy Saunders

MSDN Magazine August 2003

Defining a custom style for a derived DataGrid

Hi all, Please tell me what I could be missing here. I am trying to define a very basic style for a derived DataGrid and it doesn't seem to take! In my dll project, I have this in the Generic.xaml: <Style TargetType="{x:Type local:MyDataGrid1}" BasedOn="{StaticResource {x:Type DataGrid}}"> <Setter Property="RowBackground" Value="#AAEAEFF4"/> <Setter Property="AlternatingRowBackground" Value="#00FFFFFF"/> </Style>  .. and this is how the derived grid is currently (pretty empty until I have this figured out): public class MyDataGrid1 : DataGrid   {     static MyDataGrid1()     {       DefaultStyleKeyProperty.OverrideMetadata(typeof(MyDataGrid1), new FrameworkPropertyMetadata(typeof(MyDataGrid1)));     }   } And in my Sample App's MainPage.xaml, I simply have this: <mygrids:MyDataGrid1 x:Name="dataGrid1" /> But, the alternating colors are not applied! Interestingly, in debugger I see that the properties are set to these values in this instance, but the for some reason while rendering, these values were not used! Please help. Thanks

WPF - Visual Basic 2008 - Grid vs. DataGrid vs. Timeline vs. Gantt Chart


I am relatively new here but here goes. I am working with Windows XP, Visual Studio 2008, SQL Server 2005, WPF. I am working on a Payroll System and trying to create a work schedule grid. I have searched for timelines and datagrids and Gantt Charts to see if anything like this has been done but can't seem to find anything. What I am trying to do is I have a Crosstab query that goes against two tables. Table 1 is Employee Number, Employee Name, Employee Location. Table 2 has Employee number, Date, Hours. The query gives me Header Row 1, Employee Name in Column 1, then each date (1/1, 1/2, 1/3, etc.) for the following columns. So Row 2 is Joe Smith in Column 1, 8 hours in Column 2, 0 hours in column 3, etc.

I need this information displayed in a grid format that could be scrolled. I couldn't find timeline views or datagrids views. Can anyone point me in the right direction? I have checked other sites but there doesn't appear to be any examples anywhere.

WPF Data Grid - set style based on value

Hello All,
I am using a DataGrid and want to set the background of the row to certain color based on value. Example
One of the columns is Time Taken. If the value is less than 5, then no change. If it's between 6 and 10 then yellow and if greater than 10, then red.
I am looking for "OnDataBound" event - don't see any.
I am looking for something like
foreach(Row row in DataGrid1.Rows).... <-- not there.
How do I do it?
I am new to all this...sorry if this looks like a stupid question.

Dynamic Grid Selected row style


Hi friends,I have some problem in creating dynamic gridview and setting the selected row border style to Dotted Other then Back color nothing is effecting in selected row style.The code part is bellow

 SqlConnection con = new SqlConnection("server=ADAPT31;database=maruttest;uid=sa;pwd=sa");

        SqlDataAdapter adp = new SqlDataAdapter("select * from addressbook", con);
        DataTable dt = new DataTable();

        GridView GD = new GridView();
        GD.ID = "GD";
        GD.AutoGenerateColumns = false;
        GD.ShowFooter = false;
        GD.BorderStyle = BorderStyle.Solid;
        GD.SelectedRowStyle.BorderStyle = BorderStyle.Dotted;
        GD.SelectedRowStyle.BorderColor = System.Drawing.Color.Blue;
        GD.SelectedRowStyle.BackColor = System.Drawing.Color.BlueViolet;
        GD.GridLines = GridLines.Horizontal;
        GD.BorderColor = System.Drawing.Color.CornflowerBlue;
        GD.BorderWidth = 5;
        BoundField bound = null;

        foreach (DataColumn dc in dt.Columns)
            bound = new BoundField();
            bound.DataField = dc.ColumnName;
            bound.HeaderText = dc.ColumnName;

Edit a DataGrid row's style by Javascript when a control is clicked.


I have a datagrid I am working with which has a few columns, but one checkbox with a javascript onclientclip event.

I want to highlight the row that the checkbox is clicked, highlighting for the user that this record has changed.

I have a CSS Class of "GrdHiglight" that can be used to override the "GrdNorm" and "GrdAlt" classes, or if I have to manually change the style for the row that is fine.

How do I reference the one row which the checkbox resides in, in the datagrid, to modify this?

WPF DataGrid Style Templates to make it look like the Silverlight DataGrid



Many of you might have noticed that the WPF DataGrid looks very blah compared to the Silverlight DataGrid.

Here are the WPF DataGrid Screenshot and Silverlight DataGrid Screenshot.

See how in the Silverlight DataGrid the lines are better, there are alternating row backgrounds and the selected row also looks better.

I am surprised the WPF DataGrid doesn't use the same styles by default as the Silverlight.

Has anyone styles the WPF DataGrid to make it look like the Silverlight DataGrid and if so can you share the templates with me?

Or is there a built-in theme in WPF DataGrid that looks close to the Silverlight DataGrid?



Building a grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanel

I've posted an update to this post to apply on demand loading of Details data using ASP.NET AJAX PageMethods. I'm demonstrating the usage if CollapsiblePanelExtender client events on the new post. Check it out.

I admit, Matt Berseth is really inspiring me! Few days ago I pass through 2 of his great posts:

.Surrounding your Data Table and Dialog Controls with ComponentArt Styled Panels
.Building a Grouping Grid with the ASP.NET 3.5 LinqDataSource and ListView Controls
The first one is pure design tips one which I used for making good presentation of my demo here. The 2nd post is actually the idea.

How to format and update GridView and DataGrid rows using JQuery

The behavior described in this question is as expected. When you set text of a cell in grid, it directly affects HTML that is going to be rendered. When you set text value of a cell, it means that you are setting innerText of the cell. The column that GridView creates for command fields (Edit, Delete and Select) are a (anchor) or button elements. So you can see what will happen if you set text value in that cell. It will wipe out those link or button controls and replace them with simple text string.

ASP.NET repeater control - databind with style

even used the inline editing features, which I at the time thought was the coolest way possible to write ASP.NET code ( I managed to write code to hide all other rows and only show the current one - the row being edited). With a nice looking EditTemplate it looked indeed very slick but it really turned into giant and hard to manage code behind files.

Use Jquery with repeater, gridview, datagrid

Before we talk about jquery inside any itemtemplate (repeater, gridview, datagrid), we need to understand the basic use of jquery functions

A Simple and Extensible Radio Button Style GridView

The GridView is one of the significant controls in ASP.NET 2.0 and later versions. No doubt it reduces a lot of work time. However, customizing the GridView control is not an easy task. For example, it's hard to add a radio button column to the GridView. This article demonstrates the reason why a radio button column cannot act as normal and how to create a simple and extensible radio button GridView.

ListBox tricky to set in a DataGrid/GridView

Listboxes are very tricky to set selected items in grid - there is no real nice way to do it. It would have been great if Microsoft included a property that accepts an array or comma separated values - or anything! But they only allow each item in the list to be selected individually. The way to do this in a grid is a bit messy, but it is fairly simple to implement. When a row is created (as per the event), select the items of the listbox as per the datagrid source data:

How to highlight datagrid or GridView row on mouse over?

This article will show how you can Ajax with GridView to display popup messages when mouse moves over certain column. In the demo project I have added first column as an image column with a help icon in it. This kind of implements a feature that if you want more information about the row you can move mouse over this icon, a asynchronous request is sent to server for data about that row and when call returns the returned message is show as a popup message.

jQuery grid view plugin

jqGridView is new, client-rich, XML-based, ajax grid plugin for jQuery library. jqGridView provides professional solution for representing and editing tabular data on the web. Carefully designed, with powerful script API, this editable DHTML grid is easy configurable with XML, and shows convincing results working with large amounts of data. jqGridView allows easy implementation of nice looking(managed through css). jqGridView is not platform-depending plug-in, it can be used with different web -programming platforms like: ASP .NET/ASP, PHP, JAVA, CGI scripts etc. jqGridView has hight bowser compatibility.

Multiple Column Dropdownlist for the ASP.NET DataGrid

Based on my previous control "Multiple Column DropDownList for ASP.NET", I received many emails asking for the same control to be used in the DataGrid for web applications. Here we go.. This control can be used as the regular MS DropDownList in the DataGrid and also as a regular dropdownlist. It has all the properties, like DataTextField, DataValueField, DataSource, SelectedIndex etc. The download file contains the samples both in VB.NET and C#. In this sample, I have used the Northwind database of SQL Server.
ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  Silverlight  Others  All   

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend