Any Automatic Client-Side DataGrid Functionality?

A

Alex Maghen

Hi. Is there any client-side functionality built in to the DataGrid control
that I can just "turn on"? For example, when the user rolls over or clicks on
a row, can any of the effects for what happens when they do that stuff be
done on the client side with JavaScript that I don't have to write myself?

Also, I'm confused about how to "enable" a DataGrid control to present these
"buttons" that the documentation talks about for "editing", "deleting", etc.
 
J

John Saunders

Alex Maghen said:
Hi. Is there any client-side functionality built in to the DataGrid
control
that I can just "turn on"? For example, when the user rolls over or clicks
on
a row, can any of the effects for what happens when they do that stuff be
done on the client side with JavaScript that I don't have to write myself?

Also, I'm confused about how to "enable" a DataGrid control to present
these
"buttons" that the documentation talks about for "editing", "deleting",
etc.

Alex, all of the client-side functionality you're talking about is stuff
you'll have to do on your own. This is typically done in the ItemCreated
event of the DataGrid or in the ItemDataBound event if the customization
needs to know what data the new item will be bound to.

For instance, if you want to add an OnMouseOver event handler that just
changes the appearance of the row, you can use:

private void MyGrid_ItemCreated(object sender, DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==
ListItemType.AlternatingItem)
{
e.Item.Attributes.Add("OnMouseOver", "setCssClass(this,
\"mouseOverClass\")'");
e.Item.Attributes.Add("OnMouseOut", "setCssClass(this,
\"mouseOutClass\");");
}
}

If you needed access to the data, you could do something like this:

private void MyGrid_ItemDataBound(object sender, DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==
ListItemType.AlternatingItem)
{
string alert = string.Format("alert(\"Are you sure you want to
delete row {0}?\");", MyGrid.DataKeys[e.Item.ItemIndex]);
e.Item.Attributes.Add("OnClick", alert);
}
}

The "buttons" you're talking about are different kinds of column. An
EditCommandColumn for Edit/Update/Cancel, or a ButtonColumn for Delete (or
anything else like it). You set the CommandName property to "Select" for a
Select button, "Delete", etc. Look at the DataGrid.UpdateCommandName field,
etc. for the names you can use to get predefined behavior. You can also use
your own names and catch the events in the ItemCommand event of the
DataGrid.

I hope that helps get you started.

John Saunders
 
P

Patrick.O.Ige

Good explanation John:)


John Saunders said:
Alex Maghen said:
Hi. Is there any client-side functionality built in to the DataGrid
control
that I can just "turn on"? For example, when the user rolls over or clicks
on
a row, can any of the effects for what happens when they do that stuff be
done on the client side with JavaScript that I don't have to write myself?

Also, I'm confused about how to "enable" a DataGrid control to present
these
"buttons" that the documentation talks about for "editing", "deleting",
etc.

Alex, all of the client-side functionality you're talking about is stuff
you'll have to do on your own. This is typically done in the ItemCreated
event of the DataGrid or in the ItemDataBound event if the customization
needs to know what data the new item will be bound to.

For instance, if you want to add an OnMouseOver event handler that just
changes the appearance of the row, you can use:

private void MyGrid_ItemCreated(object sender, DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==
ListItemType.AlternatingItem)
{
e.Item.Attributes.Add("OnMouseOver", "setCssClass(this,
\"mouseOverClass\")'");
e.Item.Attributes.Add("OnMouseOut", "setCssClass(this,
\"mouseOutClass\");");
}
}

If you needed access to the data, you could do something like this:

private void MyGrid_ItemDataBound(object sender, DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==
ListItemType.AlternatingItem)
{
string alert = string.Format("alert(\"Are you sure you want to
delete row {0}?\");", MyGrid.DataKeys[e.Item.ItemIndex]);
e.Item.Attributes.Add("OnClick", alert);
}
}

The "buttons" you're talking about are different kinds of column. An
EditCommandColumn for Edit/Update/Cancel, or a ButtonColumn for Delete (or
anything else like it). You set the CommandName property to "Select" for a
Select button, "Delete", etc. Look at the DataGrid.UpdateCommandName field,
etc. for the names you can use to get predefined behavior. You can also use
your own names and catch the events in the ItemCommand event of the
DataGrid.

I hope that helps get you started.

John Saunders
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,774
Messages
2,569,596
Members
45,139
Latest member
JamaalCald
Top