| RadGrid for ASP .NET version |
Q4 2006
|
| RadControls for ASP .NET AJAX version |
2008.1.415 and later |
| .NET version |
2.0 and later
|
| Visual Studio version |
2005 and later
|
| Programming language |
C#, JavaScript
|
| Browser support |
all supported by RadGrid for ASP .NET
all browsers supported by RadControls for ASP .NET AJAX
|
PROJECT DESCRIPTION
Some complicated application scenarios may require that you render some item-specific data to the client-side, access that data with JavaScript to provide rich user experience, modify the data and send the modifications back to the server.
The easiest way to do that is to render hidden TextBox controls in your items. Those controls' value can be modified with JavaScript and the new values will be available in their Text property when the form is posted back to the server.
The example adds text boxes in each group header item and hides them using the
display: none CSS rule:
| protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) |
| { |
| if (e.Item is GridGroupHeaderItem) |
| { |
| GridGroupHeaderItem header = (GridGroupHeaderItem)e.Item; |
| AddValuePlaceholder(header); |
| } |
| } |
| |
| protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e) |
| { |
| if (e.Item is GridGroupHeaderItem) |
| { |
| GridGroupHeaderItem header = (GridGroupHeaderItem)e.Item; |
| AddValuePlaceholder(header); |
| } |
| } |
| |
| private void AddValuePlaceholder(GridGroupHeaderItem item) |
| { |
| if (item.FindControl("GroupValuePlaceholder") != null) |
| return; |
| |
| TextBox placeholder = new TextBox(); |
| placeholder.ID = "GroupValuePlaceholder"; |
| placeholder.Style[HtmlTextWriterStyle.Display] = "none"; |
| item.Cells[0].Controls.Add(placeholder); |
| |
| placeholder.PreRender += delegate(object sender, EventArgs args) |
| { |
| GridItem[] children = item.GetChildItems(); |
| if (children.Length > 0) |
| { |
| GridDataItem dataItem = children[0] as GridDataItem; |
| |
| string customerID = item.OwnerTableView.DataKeyValues[dataItem.ItemIndex]["CustomerID"].ToString(); |
| placeholder.Text = customerID; |
| } |
| }; |
| } |
| |
We can access the text boxes on the client by searching through all HTML input elements in the grid table row and finding the right one:
| protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) |
| { |
| if (e.Item is GridGroupHeaderItem) |
| { |
| GridGroupHeaderItem header = (GridGroupHeaderItem)e.Item; |
| AddValuePlaceholder(header); |
| } |
| } |
| |
| protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e) |
| { |
| if (e.Item is GridGroupHeaderItem) |
| { |
| GridGroupHeaderItem header = (GridGroupHeaderItem)e.Item; |
| AddValuePlaceholder(header); |
| } |
| } |
| |
| private void AddValuePlaceholder(GridGroupHeaderItem item) |
| { |
| if (item.FindControl("GroupValuePlaceholder") != null) |
| return; |
| |
| TextBox placeholder = new TextBox(); |
| placeholder.ID = "GroupValuePlaceholder"; |
| placeholder.Style[HtmlTextWriterStyle.Display] = "none"; |
| item.Cells[0].Controls.Add(placeholder); |
| |
| placeholder.PreRender += delegate(object sender, EventArgs args) |
| { |
| GridItem[] children = item.GetChildItems(); |
| if (children.Length > 0) |
| { |
| GridDataItem dataItem = children[0] as GridDataItem; |
| |
| string customerID = item.OwnerTableView.DataKeyValues[dataItem.ItemIndex]["CustomerID"].ToString(); |
| placeholder.Text = customerID; |
| } |
| }; |
| } |
| |
The sample sets a dummy string -- the current date and time when the user hovers a row. That value is available on the server. We access it in the ItemCommand event by locating the TextBox control:
| protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e) |
| { |
| if (e.Item.ItemType == GridItemType.GroupHeader) |
| { |
| TextBox placeHolder = e.Item.FindControl("GroupValuePlaceholder") as TextBox; |
| RadGrid1.ResponseScripts.Add(string.Format("alert('{0}');", placeHolder.Text)); |
| } |
| } |
Click the group expand/collapse (+/-) image button to trigger an ItemCommand postback.