Add custom grid to your web page
| << Previous page | Next page >> |
If you have added the WITControlsLibrary to your VS2005 toolbox, you can simply drag and drop the control on your web page. When you use the source view of your web page, take the following steps:
1. Register the library
<%@ Register TagPrefix=”wit” Namespace=”WITControlsLibrary”
Assembly=”WITControlsLibrary” %>
2. Add the grid to your web page:
<wit:WITGrid ID=”gridExample” runat=”server” DataSourceID=”SqlDataSource1″
HighLightSelectedRow=”true”
ShowDeleteColumn=”true”
ShowEditColumn=”true”
ShowOrderColumn=”true”
NoRecordsText=”No records where found.”
CssClass=”GridView”
DataKeyName=”participantId”
OnRowCommand=”gridExample_RowCommand”
OnRowDataBound=”gridExample_RowDataBound”
ConfirmDeleteText=”This record will be deleted. Continue?”>
<wit:BoundField HeaderText=”id” DataField=”participantId”
CssClass=”grid-column-small” />
<wit:BoundField HeaderText=”name” DataField=”participantName”
CssClass=”grid-column-max” />
<wit:BoundField HeaderText=”e-mail” DataField=”participantEMail”
CssClass=”grid-column-medium” />
<wit:CheckBoxField HeaderText=”locked” DataField=”participantLocked”
CssClass=”grid-column-small” />
</wit:WITGrid>
The parameters:
HighLightSelectedRow: High light the row when the mouse pointer hovers over it
ShowDeleteColumn: Show the column with a delete button per row. Clicking on the button will pop-up a confirmation question. The row will not be deleted by the grid, but can be deleted in the OnRowCommand-event.
ShowEditColumn: Shows the column with an edit button per row. Clicking on the button will trigger the OnRowCommand event.
ShowOrderColumn: Shows a column with an up and down button per row. Also triggers the OnRowCommand event.
NoRecordsText: The text to display when no records are returned by the data source
CssClass: The Css style.
DataKeyName: The data field containing the key. This key is returned in a OnRowCommand event.
OnRowCommand: This event is triggered when the user clicks on a row, delete, edit, up or down button. This parameter links the event to a handler in the code behind (see below for more information)
OnRowDataBound: This event is triggered when each row is created. This enables you to change the final information displayed. See below for more info.
ConfirmDeleteText: The text that will appear in the confirmation message box
DataSourceID: The data source’s ID (SqlDataSource, ObjectDataSource)
3. Define the event handlers in the code behind
protected void gridExample_RowCommand(object sender,
WITGridRowCommandEventsArgs e)
{
//Handles a row click event
//e.CommandName – the row command
//e.SelectedKey – the key of the selected row
// (value of data field specified in DataKeyName)
//e.SelectedRow – the DATA row selected (first data row = 0)
switch (e.CommandName)
{
case “row”: // row clicked
case “edit”: // edit clicked
break;
case “delete”: //delete clicked and confirmed
break;
case “up”: // up clicked
break;
case “down”: // down clicked
break;
}
}
protected void testrow(object sender, WITGridRowEventArgs e)
{
//Evaluate and/or change the final content of the row
//e.Row.Cells – the created row’s cells
//e.Row.DataItem – the row’s related data item
//string sampleDataFieldValue = ((DataRowView)e.Row.DataItem)
// ["participantId"].ToString();
//string sampleCell = e.Row.Cells[1].Text;
}
}
Css Styles
I have used the following Css styles in the example:
.overview /* overview div */
{
text-align: left;
vertical-align: top;
background-color: #F0F0F0;
border: solid 1px #d0d0d0;
margin: 0px 0px 0px 10px;
padding: 5px 5px 5px 10px;
font-family: Tahoma, Arial;
font-size: 11px;
line-height: 18px;
min-height: 50px;
}
.gridview
{
background-color: White;
}
.gridview th /* grid’s header */
{
border-top: solid 1px #833e1c;
border-bottom: solid 1px #833e1c;
padding-left: 4px;
color: White;
background-color: #a57259;
line-height: 18px;
}
.gridview th a /* links stay the same color */
{
color: White;
}
.gridview td /* Per cell */
{
padding-left: 4px;
}
.gridview-empty /* message style when no records are found */
{
font-weight: bold;
color: Red;
}
.gridview-highlight /* highlighted row */
{
cursor: pointer;
background-color:#FFFFCC;
}
.grid-column-max
{
width: auto;
text-align: left ;
}
.grid-column-small
{
width: 40px;
max-width: 40px;
text-align: left ;
}
.grid-column-medium
{
width: 80px;
max-width: 80px;
text-align: left;
}
| << Previous page | Next page >> |
vasiharan said
I need full code for this article
suresh said
i need full code of this article. how can i create the n – level as well as n-child custom grid view control of my own? do you have code for this?
if you have, send to my email address
aspknowledgebase said
@Vasiharan: you do not only programm commands but also talk in commands?
The article is ready so you have want you want
aspknowledgebase said
@Suresh: you mean a nested control of the same type? I have not tried that. For nested controls you could use a templated custom control. See Building Templated Custom ASP.NET Server Controls for more information.
suresh said
hi,
i got 2 errors in WITGrid.cs and WITGridDesigner.cs
i give you the code where i get the error and the error message.
i tried to solve the error. but i can’t. please help me to solve this.
WITGrid.cs
==========
Code
CheckBoxField cbf = (CheckBoxField)gf;
if (cbf.DataField == null) throw (new NullReferenceException(“The data field for ‘” + cbf.ID + “‘ is not defined.”));
Errors
1. Cannot convert type ‘WITControlsLibrary.GridField’ to ‘System.Web.UI.WebControls.CheckBoxField’ E:\sureshnotes\samplecustomcontrol\samplecuscontrol\WITConLib\WITControlsLibrary\WITGridDesigner.cs
2. System.Web.UI.WebControls.CheckBoxField’ does not contain a definition for ‘ID’ E:\sureshnotes\samplecustomcontrol\samplecuscontrol\WITConLib\WITControlsLibrary\WITGrid.cs
WITGridDesigner.cs
==================
Code
s += “[" + ((CheckBoxField)(gf)).DataField + "]“;
Errors
Cannot convert type ‘WITControlsLibrary.GridField’ to ‘System.Web.UI.WebControls.CheckBoxField’ E:\sureshnotes\samplecustomcontrol\samplecuscontrol\WITConLib\WITControlsLibrary\WITGridDesigner.cs
regards,
suresh
aspknowledgebase said
Hi Suresh,
I forgot to add the CheckBoxField class. I have added it to the page about ‘Inner’ elements.
This should solves the two errors.
Best Regards, Jan
suresh said
hi,
sorry, again i get caught with error.
My solution has web form. this web form uses the WITControlsLibrary.dll(inside bin folder) and i set the reference to this dll.
firstly, In the same solution, i have WITControlsLibrary Project. after building this project, i take the WITControlsLibrary.dll and put it in bin of the solution.
it is compiled with out any error. But during run time, it gives error.
i got the following exception. i have given both aspx and error message. what is the problem? any thing i missed?. if not possible to solve, can you give the code to test the control?
Exception
=========
System.FormatException: String was not recognized as a valid Boolean.
aspx code
=========
Untitled Page
sorry again,
thank you
regards,
s.suresh
aspknowledgebase said
Hi S.Suresh,
Most likely your problem has something to do with the single quotes. The weblog editor changed all the quotes (double and single) into so called ’smart’ quotes. You probably already changed the double quotes into their regular version because they will result in errors when building the project. Please replace the ’smart’ single quotes also with their regular versions (throughout the whole solution). They do not cause an error directly, but they are used for the HTML attributes (onclick, the designer, etc.) and will result in problems later on. If you have replaced all quotes, the custom grid should work (it does on my pc).
The easiest way to incorporate the grid into your page is to create a Release version of the library (change configuration to ‘release’ in the Solution Property Pages). This way the grid will automatically be added to your toolbox. Now you can drag-and-drop the grid onto your web page in design view and you are sure that the DLL is copied and the right reference is set.
I hope you do not mind, but I have deleted the large comments with your code. I cannot replicate your error because I do not have your database. The source code is now included in the article (last page). I hope this will help you in finding the error.
Regards, Jan