In each row of a grid with EditType = "Row", I'm trying to show/hide the column editor controls based on data in that row. When some rows are in edit mode (after being clicked on), they will display a text box, checkbox, etc. approporiate for that particular row. Other rows will hide that option in the same column.
For the entire column, edit controls can be shown/hidden based on the column's ReadOnly field. Can this be turned on/off for individual rows?
Would prefer to handle this server-side. Trying to avoid managing dynamically added controls based on data conditions and instead simply turn on/off editing in specific cells of each row.
In the example below, when a row is in edit mode, I want the edit text box in the MilkType column to only display if the Product for that row is Milk. Otherwise the cell should be read-only when the row is in edit mode.
Thanks!
-Matt
(posting code separately - having problems submitting new thread with code blocks)
5 Answers, 1 is accepted
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"ContentPlaceHolder1"
runat
=
"server"
>
<
telerik:RadGrid
ID
=
"TestGrid"
runat
=
"server"
AllowMultiRowSelection
=
"True"
OnNeedDataSource
=
"TestGrid_OnNeedDataSource"
>
<
MasterTableView
EditMode
=
"Batch"
BatchEditingSettings-EditType
=
"Row"
AutoGenerateColumns
=
"False"
>
<
Columns
>
<
telerik:GridBoundColumn
ReadOnly
=
"True"
DataField
=
"Product"
HeaderText
=
"Product"
UniqueName
=
"Product"
DataType
=
"System.String"
></
telerik:GridBoundColumn
>
<
telerik:GridNumericColumn
ColumnEditorID
=
"ShortEditbox"
ReadOnly
=
"False"
UniqueName
=
"Quantity"
DataField
=
"Quantity"
NumericType
=
"Number"
HeaderText
=
"Quantity"
DataType
=
"System.Int32"
/>
<
telerik:GridBoundColumn
ColumnEditorID
=
"TextEditbox"
ReadOnly
=
"False"
UniqueName
=
"MilkType"
DataField
=
"MilkType"
HeaderText
=
"MilkType"
DataType
=
"System.String"
/>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
<
telerik:GridNumericColumnEditor
ID
=
"ShortEditbox"
runat
=
"server"
>
<
NumericTextBox
Width
=
"50px"
BackColor
=
"#edffc3"
NumberFormat-DecimalDigits
=
"0"
ShowSpinButtons
=
"True"
MinValue
=
"0"
/>
</
telerik:GridNumericColumnEditor
>
<
telerik:GridTextBoxColumnEditor
ID
=
"TextEditbox"
runat
=
"server"
>
<
TextBoxStyle
BackColor
=
"#edffc3"
></
TextBoxStyle
>
</
telerik:GridTextBoxColumnEditor
>
</
asp:Content
>
01.
using
System;
02.
using
System.Collections.Generic;
03.
using
System.Data;
04.
using
System.Linq;
05.
using
System.Web;
06.
using
System.Web.UI;
07.
using
System.Web.UI.WebControls;
08.
using
Telerik.Web.UI;
09.
10.
namespace
Foo
11.
{
12.
public
partial
class
Sandbox1 : App_Code.BasePage2
13.
{
14.
protected
void
Page_Load(
object
sender, EventArgs e)
15.
{
16.
17.
}
18.
19.
protected
void
TestGrid_OnNeedDataSource(
object
sender, GridNeedDataSourceEventArgs e)
20.
{
21.
TestGrid.DataSource = CurrentData;
22.
}
23.
24.
protected
List<ShoppingListItem> CurrentData
25.
{
26.
get
27.
{
28.
List<ShoppingListItem> data =
new
List<ShoppingListItem>();
29.
ShoppingListItem item =
new
ShoppingListItem();
30.
item.Product = GroceryItemTypes.Bread;
31.
item.Quantity = 1;
32.
item.MilkType =
null
;
33.
data.Add(item);
34.
35.
item =
new
ShoppingListItem();
36.
item.Product = GroceryItemTypes.Milk;
37.
item.Quantity = 1;
38.
item.MilkType = MilkTypes.TwoPercent;
39.
data.Add(item);
40.
41.
item =
new
ShoppingListItem();
42.
item.Product = GroceryItemTypes.Eggs;
43.
item.Quantity = 6;
44.
item.MilkType =
null
;
45.
data.Add(item);
46.
47.
return
data;
48.
}
49.
}
50.
}
51.
52.
public
class
ShoppingListItem
53.
{
54.
public
GroceryItemTypes Product {
get
;
set
; }
55.
public
int
Quantity {
get
;
set
; }
56.
public
MilkTypes? MilkType {
get
;
set
; }
57.
}
58.
59.
public
enum
GroceryItemTypes { Eggs, Milk, Bread }
60.
public
enum
MilkTypes { Whole, TwoPercent, Skim }
61.
}
Please try the following code snippet I tried to hide the TextBox when bread row is clicked.
ASPX:
<
telerik:RadGrid
ID
=
"TestGrid"
runat
=
"server"
AllowMultiRowSelection
=
"True"
OnNeedDataSource
=
"TestGrid_OnNeedDataSource"
>
<
MasterTableView
EditMode
=
"Batch"
BatchEditingSettings-EditType
=
"Row"
AutoGenerateColumns
=
"False"
>
....
</
MasterTableView
>
<
ClientSettings
>
<
ClientEvents
OnBatchEditOpened
=
"OnBatchEditOpened"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
Javascript:
<script type=
"text/javascript"
>
function
OnBatchEditOpened(sender, args) {
var
cardStatusCell = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(),
"Product"
);
if
(cardStatusCell.innerHTML ==
"Bread"
) {
sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(),
"MilkType"
).getElementsByTagName(
"input"
)[0].style.display =
"none"
;
}
}
</script>
Thanks,
Shinu.