[Solved] Insert detail and master rows together in ajax hierarchical grid

[Donna Stewart]

Is it possible to insert detail rows under a newly created master row in an ajax hiearchical grid?  Actually, what I would like to do is have the user add all the data at once - the user hits the New Record button and an empty row appears for the master row and a button or something to add new detail rows.  Once all data is entered, the user hits the Save button and an action is called sending all rows (master and detail).  I am using in cell editing.  Is this at all possible?  If not, should I switch to pop-up editing - or is this possible with server-side hierarchy?  Any guidance is very much appreciated.  My code follows:

Grid:

<%= Html.Telerik().Grid(Of GMC_Hub_and_Spoke.WebQueryInputModel).Name("InputPropertiesGrid").HtmlAttributes(New With {.style = "width:95%;"}) _
    .DataKeys(Function(key) key.Add(Function(k) k.WQI_Key)) _
    .ToolBar(Function(commands) commands.Custom().Text("New Input Parameter and Properties").) _
    .ToolBar(Function(commands) commands.SubmitChanges()) _
    .ClientEvents(Function(events) events.OnError("onGridError")) _
    .ClientEvents(Function(events) events.OnEdit("onGridEdit")) _
    .DataBinding(Function(dataBinding) dataBinding.Ajax().Select("GetWQInputs", "WebQuery", New With {.id = Model.selectedWebQuery.QueryKey}).Update("UpdateWQInputs", "WebQuery")) _
    .Editable(Function(editing) editing.Mode(GridEditMode.InCell)) _
    .Columns(Function(cols) cols.Bound(Function(c) c.ParameterName)) _
    .Columns(Function(cols) cols.Bound(Function(c) c.DisplayOrder)) _
    .Columns(Function(cols) cols.Bound(Function(c) c.QueryKey).Hidden(True)) _
    .Columns(Function(cols) cols.Bound(Function(c) c.WQI_Key).Hidden(True)) _
    .DetailView(Function(detailView) detailView.ClientTemplate( _
        Html.Telerik().Grid(Of GMC_Hub_and_Spoke.WQInputPropertyModel).Name("Properties_<#= WQI_Key #>") _
            .DataKeys(Function(key) key.Add(Function(kk) kk.WQIP_Key)) _
            .ToolBar(Function(commands) commands.Insert()) _
            .ToolBar(Function(commands) commands.SubmitChanges()) _
            .DataBinding(Function(dataBinding) dataBinding.Ajax().Select("GetInputProperties", "WebQuery", New With {.wqid = Model.selectedWebQuery.QueryKey, .wqipid = "<#= WQI_Key #>"}) _
                             .Update("UpdateInputProperties", "WebQuery")) _
            .Editable(Function(editing) editing.Mode(GridEditMode.InCell)) _
            .ClientEvents(Function(events) events.OnEdit("onWQIPGridEdit")) _
            .ClientEvents(Function(events) events.OnRowDataBound("onWQIPRowDataBound")) _
            .Columns(Function(col) col.Bound(Function(cc) cc.PropertyName)) _
            .Columns(Function(col) col.Bound(Function(cc) cc.PropertyValue)) _
            .Columns(Function(col) col.Bound(Function(cc) cc.NoEdit).Hidden(True)) _
            .Columns(Function(col) col.Bound(Function(cc) cc.WQI_Key).Hidden(True)) _
            .Columns(Function(col) col.Bound(Function(cc) cc.WQIP_Key).Hidden(True)) _
            .ToHtmlString()))
%>

Models:

Imports com.gmcps.GMCDataModel

Public Class WebQueryInputModel
    Public Property WQI_Key As Integer
    Public Property QueryKey As Integer
    Public Property ParameterName As String
    Public Property DisplayOrder As Integer
    Public Property WebQueryInputProperties As List(Of WQInputPropertyModel)
End Class


Public Class WQInputPropertyModel
    Public Property WQIP_Key As Integer
    Public Property WQI_Key As Integer
    Public Property PropertyValue As String
    Public Property PropertyName As String
    Public Property NoEdit As Boolean
End Class

 
Thank you!
Donna

[Georgi Tunev]

Hi Donna,

The Grid component does not support this in any built-in editing mode. You could try achieving the desired result by implementing a custom editing logic.

 

Kind regards,
Georgi Tunev
the Telerik team

[Donna Stewart]

Hi Georgi,

Thank you for your response.  Believe me, I have looked at trying to implement a custom editing logic for this.  I have searched the forums for 2 or 3 days.  I'm sure I am missing something.  I would like to keep the in cell editing and have a custom popup window for inserting.  I have looked at using the custom toolbar command, but it looks to me like you can only call an action from it, not javascript.  I'm not sure how to tell it to pop up a window from an action. Again, I'm sure I am missing something.  Do you have an example of something similar to what I am requesting?

Thank you so much,
Donna

[Eduardo]

Hi,

I had the same problem some weeks ago, where my ViewModel represent two entities: MainType with his fields being properties of the ViewModel, and a property of type IEnumerable<OtherType> that represent the other entity, and I need to perform each CRUD operation in one single transaccion, so I solve that with a grid for ViewModel with another grid in the details for AnotherType, and an editor template wich have some inputs for MainType's properties, and a grid for AnotherType.

The problem was how to pass that grid data to the server so I can make an action in the controller with a parameter of type ViewModel and have the collection IEnumerable<OtherType> fill. The solution was to subscribe to OnSave method and put:

for (var i = 0; i < grid_for_anothertype.length; i++) { 
var teamMember = teamMembers[i]; 
// Send the FirstName 
    e.values["TeamMembers[" + i + "].FirstName"] = teamMember.FirstName;
// Send the LastName 
    e.values["TeamMembers[" + i + "].LastName"] = teamMember.LastName; 
}

This is done so that MVC Model Binding can fill the collection, but I was thinking that if the grid can generate inputs with id='Teammembers[i].FirstName', so I'm asking if it is possible for you to create a new method for this functionality.

Thanks