End User add row to non-data bound grid

[Lahiru]

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.

[Daniel]

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

 

 

[Lahiru]

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

[Princy]

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#:

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

[Lahiru]

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

[Daniel]

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

 

 

[Lahiru]

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

[Daniel]

Hi Lahiru,

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