Hi,
I have a hierarchical RadGrid with 2 levels.
When the grid loads I populate the first level (MasterTableView) via javascript using json objects. What I want to achive it to have the second level (DetailsTable), editable by the end user.
Which means the end user should be able to manually add new rows. But the second level is not bound to any Data Source. The grid only has some pre-defined columns and the user can add rows to the grid.
The objective of this is to collect dynamic data from the end user. So it is not possible to predict how many child rows there will be for each parent row.
Can I do this with a RadGrid?
Hope this is clear.
Thank you.
I have a hierarchical RadGrid with 2 levels.
When the grid loads I populate the first level (MasterTableView) via javascript using json objects. What I want to achive it to have the second level (DetailsTable), editable by the end user.
Which means the end user should be able to manually add new rows. But the second level is not bound to any Data Source. The grid only has some pre-defined columns and the user can add rows to the grid.
The objective of this is to collect dynamic data from the end user. So it is not possible to predict how many child rows there will be for each parent row.
Can I do this with a RadGrid?
Hope this is clear.
Thank you.
7 Answers, 1 is accepted
0
Hello Lahiru,
I'm afraid that hierarchy with client-side binding is not supported. Also, RadGrid does not offer unbound mode as it is a databound control.
You could use a server-side binding to achieve something like this. The detail table can be bound to an empty datasource (meaning that it will have the columns defined, but there will be no rows) which the users can insert afterwards.
Regards,
Daniel
Telerik
I'm afraid that hierarchy with client-side binding is not supported. Also, RadGrid does not offer unbound mode as it is a databound control.
You could use a server-side binding to achieve something like this. The detail table can be bound to an empty datasource (meaning that it will have the columns defined, but there will be no rows) which the users can insert afterwards.
Regards,
Daniel
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Lahiru
Top achievements
Rank 1
answered on 07 Aug 2014, 06:02 AM
Hi Daniel,
I bound the details table to an empty datasource and made some progress. Also I enabled the "Batch" edit mode, so the user user can modify the data.
Now my issue is, I am unable to get the data entered into the details table by the user.
I can't set the "ClientDataKeyNames" as the details table is bound dynamically. I also tried, netstedView.getCellByColumnUniqueName() method. But that gives several html data as well.
Is there an easy way to retrieve the data on the details table?
Thank you,
Lahiru
I bound the details table to an empty datasource and made some progress. Also I enabled the "Batch" edit mode, so the user user can modify the data.
Now my issue is, I am unable to get the data entered into the details table by the user.
I can't set the "ClientDataKeyNames" as the details table is bound dynamically. I also tried, netstedView.getCellByColumnUniqueName() method. But that gives several html data as well.
Is there an easy way to retrieve the data on the details table?
Thank you,
Lahiru
0
Princy
Top achievements
Rank 2
answered on 07 Aug 2014, 08:57 AM
Hi Lahiru,
I guess you want to access the cell values on batch edit, please take a look at the following sample code snippet.
C#:
JS:
Thanks,
Princy
I guess you want to access the cell values on batch edit, please take a look at the following sample code snippet.
C#:
private
void
DefineGridStructure()
{
RadGrid RadGrid1 =
new
RadGrid();
RadGrid1.DataSourceID =
"SqlDataSource1"
;
RadGrid1.MasterTableView.DataKeyNames =
new
string
[] {
"CustomerID"
};
RadGrid1.MasterTableView.ClientDataKeyNames =
new
string
[] {
"CustomerID"
};
RadGrid1.Skin =
"Default"
;
RadGrid1.Width = Unit.Percentage(100);
RadGrid1.PageSize = 15;
RadGrid1.AllowPaging =
true
;
RadGrid1.AutoGenerateColumns =
false
;
RadGrid1.MasterTableView.EditMode = GridEditMode.Batch;
RadGrid1.ClientSettings.ClientEvents.OnHierarchyExpanded =
"HierarchyExpanded"
;
RadGrid1.ClientSettings.ClientEvents.OnBatchEditGetCellValue =
"BatchEditGetCellValue"
;
RadGrid1.MasterTableView.HierarchyLoadMode = GridChildLoadMode.Client;
//Add columns
GridBoundColumn boundColumn;
boundColumn =
new
GridBoundColumn();
boundColumn.DataField =
"CustomerID"
;
boundColumn.HeaderText =
"CustomerID"
;
RadGrid1.MasterTableView.Columns.Add(boundColumn);
boundColumn =
new
GridBoundColumn();
boundColumn.DataField =
"ContactName"
;
boundColumn.HeaderText =
"Contact Name"
;
RadGrid1.MasterTableView.Columns.Add(boundColumn);
//Detail table - Orders (II in hierarchy level)
GridTableView tableViewOrders =
new
GridTableView(RadGrid1);
tableViewOrders.DataSourceID =
"SqlDataSource2"
;
tableViewOrders.Name =
"Orders"
;
tableViewOrders.DataKeyNames =
new
string
[] {
"OrderID"
};
tableViewOrders.ClientDataKeyNames =
new
string
[] {
"OrderID"
};
tableViewOrders.HierarchyLoadMode = GridChildLoadMode.Client;
tableViewOrders.EditMode = GridEditMode.Batch;
GridRelationFields relationFields =
new
GridRelationFields();
relationFields.MasterKeyField =
"CustomerID"
;
relationFields.DetailKeyField =
"CustomerID"
;
tableViewOrders.ParentTableRelation.Add(relationFields);
RadGrid1.MasterTableView.DetailTables.Add(tableViewOrders);
//Add columns
boundColumn =
new
GridBoundColumn();
boundColumn.DataField =
"OrderID"
;
boundColumn.HeaderText =
"OrderID"
;
tableViewOrders.Columns.Add(boundColumn);
boundColumn =
new
GridBoundColumn();
boundColumn.DataField =
"OrderDate"
;
boundColumn.HeaderText =
"Date Ordered"
;
tableViewOrders.Columns.Add(boundColumn);
//Detail table Order-Details (III in hierarchy level)
GridTableView tableViewOrderDetails =
new
GridTableView(RadGrid1);
tableViewOrderDetails.DataSourceID =
"SqlDataSource3"
;
tableViewOrderDetails.Name =
"OrderDetails"
;
tableViewOrderDetails.DataKeyNames =
new
string
[] {
"OrderID"
};
tableViewOrderDetails.ClientDataKeyNames =
new
string
[] {
"OrderID"
};
GridRelationFields relationFields2 =
new
GridRelationFields();
relationFields2.MasterKeyField =
"OrderID"
;
relationFields2.DetailKeyField =
"OrderID"
;
tableViewOrderDetails.ParentTableRelation.Add(relationFields2);
tableViewOrders.DetailTables.Add(tableViewOrderDetails);
boundColumn =
new
GridBoundColumn();
boundColumn.DataField =
"UnitPrice"
;
boundColumn.HeaderText =
"Unit Price"
;
tableViewOrderDetails.Columns.Add(boundColumn);
boundColumn =
new
GridBoundColumn();
boundColumn.DataField =
"Quantity"
;
boundColumn.HeaderText =
"Quantity"
;
tableViewOrderDetails.Columns.Add(boundColumn);
//Add the RadGrid instance to the controls
this
.PlaceHolder1.Controls.Add(RadGrid1);
}
protected
void
Page_Init(
object
source, System.EventArgs e)
{
DefineGridStructure();
}
JS:
<script type=
"text/javascript"
>
function
HierarchyExpanded(sender, args) {
var
firstClientDataKeyName = args.get_tableView().get_clientDataKeyNames()[0];
alert(
"Item with "
+ firstClientDataKeyName +
":'"
+ args.getDataKeyValue(firstClientDataKeyName) +
"' expanded."
);
}
function
BatchEditGetCellValue(sender, args) {
//gets the ClientDataKeyName
var
clientDataKeyName = args._tableView.get_clientDataKeyNames()[0];
//gets the table
if
(args.get_tableView().get_name() ==
"Orders"
) {
//gets the UniqueName
var
columnUniqueName = args._columnUniqueName;
//get cell value
var
value = args._cell.innerText;
}
}
</script>
Thanks,
Princy
0
Lahiru
Top achievements
Rank 1
answered on 07 Aug 2014, 09:38 AM
Hi Princy,
Thank you for this code. But I am binding data to the details table of the client side.
1. So, is there a way to set the "ClientDataKeyNames" of the detail table via javascript?
2. I want to retrieve data once the user has done all the changes and after pressing a button outside the grid. So, is there a way to retrieve all the data after a button click?
Thank you,
Lahriu
Thank you for this code. But I am binding data to the details table of the client side.
1. So, is there a way to set the "ClientDataKeyNames" of the detail table via javascript?
2. I want to retrieve data once the user has done all the changes and after pressing a button outside the grid. So, is there a way to retrieve all the data after a button click?
Thank you,
Lahriu
0
Hello Lahriu,
1. There is no option to set the clientdatakeynames with javascript.
2. You could use the batch editing client-side API:
Batch Editing
Regards,
Daniel
Telerik
1. There is no option to set the clientdatakeynames with javascript.
2. You could use the batch editing client-side API:
Batch Editing
Regards,
Daniel
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Lahiru
Top achievements
Rank 1
answered on 14 Aug 2014, 05:22 PM
Hi Daniel,
I am using Batch Editing and so far I got what I need.
Basically, in my page when a button is pressed I show a RadWindow and the RadGrid is inside that. So when the RadWindow opens I populate the radgrid with data via javascript. Then the end user can add more rows to this (there is an hierarchy on this grid as well).
What I want to do now is, I want to clear/delete all the rows (including child rows) in this grid when the user closes the radwindow. So at the moment I loop through the dataitems in the grid and delete them. This works fine for the first time. But from the 2nd time onwards it won't delete anything.
Is there an easy way to rebuild or easily empty the data in a radgrid on client side?
Thank you,
Lahiru
I am using Batch Editing and so far I got what I need.
Basically, in my page when a button is pressed I show a RadWindow and the RadGrid is inside that. So when the RadWindow opens I populate the radgrid with data via javascript. Then the end user can add more rows to this (there is an hierarchy on this grid as well).
What I want to do now is, I want to clear/delete all the rows (including child rows) in this grid when the user closes the radwindow. So at the moment I loop through the dataitems in the grid and delete them. This works fine for the first time. But from the 2nd time onwards it won't delete anything.
Is there an easy way to rebuild or easily empty the data in a radgrid on client side?
Thank you,
Lahiru
0
Hi Lahiru,
You can use the batch editing api to delete the items in a given tableview:
Regards,
Daniel
Telerik
You can use the batch editing api to delete the items in a given tableview:
function
deleteAllItems() {
.....
while
(tableView.get_dataItems().length > 0) {
firstItem = tableView.get_dataItems()[0];
radGrid.get_batchEditingManager().deleteRecord(tableView, firstItem.get_id());
}
}
Regards,
Daniel
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.