This is a migrated thread and some comments may be shown as answers.

[Solved] AJAX Master-Detail Table - inserting to Child Table

4 Answers 192 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Mark Davis asked on 13 Sep 2010, 05:07 PM

Hi there,

I am creating a form similar to the one in the client selection example. The difference is that I want to do inline editing of the child form.

The code for the form is below:

<h3>Test Plugins</h3>

<%

Html.Telerik().Grid<TestPluginSetupModel>()

.Name("TestPluginGrid")

.ToolBar(commands => commands.Insert())

.DataKeys(keys => keys.Add(o => o.Id))

.DataBinding(dataBinding => dataBinding.Ajax()

.Select("SelectAjaxTestPlugin", "TestParameterSetup")

.Insert("InsertAjaxTestPlugin", "TestParameterSetup")

.Update("SaveAjaxTestPlugin", "TestParameterSetup"))

.Columns(columns =>

{

columns.Bound(o => o.Id).Width(35).ReadOnly();

columns.Bound(o => o.TypeName).Width(120);

columns.Bound(o => o.Description).Width(120);

columns.Bound(o => o.AssemblyName).Width(250);

columns.Bound(o => o.UpdateUser).Width(100).ReadOnly();

columns.Bound(o => o.UpdateDateTime).Format("{0:yyyy-MM-dd HH:mm:ss}").Width(70).Title("Update Date").ReadOnly();

columns.Bound(o => o.Active)

.ClientTemplate("<input type='checkbox' disabled='disabled' name='Active' <#= Active? checked='checked' : '' #> />").Width(50);

columns.Command(commands =>

{

commands.Edit();

}).Width(80).Title("Commands");

})

.Editable(editing => editing.Mode(GridEditMode.InLine))

.Scrollable()

.Selectable()

.ClientEvents(events => events.OnRowSelect("onRowSelected"))

.Filterable()

.Render();

%>

<br />

<h3>Test Parameters for <span id="testPluginTypeName">[Not Selected]</span></h3>

<%

Html.Telerik().Grid<TestParameterSetupModel>()

.Name("TestParameterGrid")

.ToolBar(commands => commands.Insert())

.DataKeys(keys =>

{

keys.Add(o => o.Id).RouteKey("id");

keys.Add(o => o.TestPluginId).RouteKey("testPluginId");

})

.DataBinding(dataBinding => dataBinding.Ajax()

.Select("SelectAjaxTestParameter", "TestParameterSetup")

.Insert("InsertAjaxTestParameter", "TestParameterSetup")

.Update("SaveAjaxTestParameter", "TestParameterSetup"))

.Columns(columns =>

{

columns.Bound(o => o.Name).Width(160);

columns.Bound(o => o.Description).Width(120);

columns.Bound(o => o.ValidationRegEx).Width(250);

columns.Bound(o => o.UpdateUser).Width(100).ReadOnly();

columns.Bound(o => o.UpdateDateTime).Format("{0:yyyy-MM-dd HH:mm:ss}").Width(70).Title("Update Date").ReadOnly();

columns.Bound(o => o.Active)

.ClientTemplate("<input type='checkbox' disabled='disabled' name='Active' <#= Active? checked='checked' : '' #> />").Width(50);

columns.Command(commands =>

{

commands.Edit();

}).Width(80).Title("Commands");

})

.Editable(editing => editing.Enabled(true))

.Scrollable()

.Filterable()

.Render();

Html.EndForm();%>

<p />

</asp:Content>

<asp:Content ID="TestParameterSetupHead" ContentPlaceHolderID="HeadContent" runat="server">

<script type="text/javascript">

function onRowSelected(e) {

var testParameterGrid = $('#TestParameterGrid').data('tGrid');

var testPluginId = e.row.cells[0].innerHTML;

var testPluginTypeName = e.row.cells[1].innerHTML;

// update ui text

$('#testPluginTypeName').text(testPluginTypeName);

// rebind the related grid

testParameterGrid.rebind({

testPluginId: testPluginId

});

}

</script>

</asp:Content>

The Edit works great for updating, but my issue is with the insert - I can't pass the Id(s) of the master table to the action method on the controller. Is there something I am doing wrong..? The "Master" Id's are null when I try to insert. Is there a known solution to this problem. I want to avoid server binding if possible. Thanks!

4 Answers, 1 is accepted

answered on 16 Sep 2010, 08:54 AM

Hi Mark

Here is what you need. In the child grid's DataBinding section change to:

.DataBinding(dataBinding => dataBinding.Ajax()

.Select("SelectAjaxTestParameter", "TestParameterSetup")

.Insert("InsertAjaxTestParameter", "TestParameterSetup", new { masterId = "<#= Id #>" })

.Update("SaveAjaxTestParameter", "TestParameterSetup"))

Then, in your controller, the Insert action should be like:

[GridAction]

public ActionResult InsertAjaxTestParameter(long masterId)

{

..... whatever your insert code is ....

return View(new GridModel ... .. ... .. . bleh bleh bleh

}

I hope this helps you.

Cheers

answered on 01 Dec 2010, 08:34 PM

Hello!

I am doing something wrong then! I have tried as many ways as I can think of to capture the EmployeeId without success when doing an "Insert". Updating the child record works perfectly! Insert will compile and run successfully with the code commented out as shown in the controller, otherwise it will generate an object instance error. Even though it runs successfully it will only create records for EmployeeId=0. Obviously I am not doing something right.

Really could use some expertise on this, please!

~LL

Grid:

.Insert("_InsertEmployeeProgram", "SWFPasswords", new { EmployeeId = "<#=

EmployeeId #>" })

Controller:

[GridAction]

public ActionResult _InsertEmployeeProgram(int EmployeeId) {

EmpPrgPasswordMtx Matrix = new EmpPrgPasswordMtx {

Matrix.EmployeeId = EmployeeId

}

if (ModelState.IsValid) {

// if (Matrix.Program.ProgramName.Equals("MS Exchange Email")) {

// if (Matrix.EffectiveDate != null) {

// Matrix.ExpirationDate = (Matrix.EffectiveDate + TimeSpan.FromDays(45));

// };


//     };

this.epdc.EmpPrgPasswordMtxes.InsertOnSubmit(Matrix);

this.epdc.SubmitChanges();

};

return View(new GridModel(GetPrgsForEmp(Matrix.EmployeeId)));

}

EmployeeProgram.ascx (EditorTemplate):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<EmployeeProgram>" %>

<input type="hidden" name="EmpPrgMtxId" value="<%=Model.EmpPrgMtxId %>" />

<input type="hidden" name="EmployeeId" value="<%=Model.EmployeeId %>" />

<ul>

<li>

<%= Html.LabelFor(x => x.ProgramName)%>

<select name="ProgramId">

<% foreach (Program Program in (List<Program>)ViewData["ListPrograms"]) { %>

<option value="<%=Program.ProgramId %>"<%=App.Selected(Program.ProgramId, Model.ProgramId) %>><%=Program.ProgramName %></option>

<% }; %>

</select>

</li>

<li>

<%= Html.LabelFor(x => x.UserName) %>

<%= Html.TextBox("UserName", Model.UserName, new {style="width:10em" }) %>

</li>

<li>

<%= Html.LabelFor(x => x.Password) %>

<%= Html.TextBox("Password", Model.Password, new {style="width:10em" }) %>

</li>

<li>

<%= Html.LabelFor(x => x.EffectiveDate) %>

<%= Html.Telerik().DatePicker()

.Name("EffectiveDate")

.MinDate(new DateTime(2000, 1, 1))

.MaxDate(new DateTime(2019, 12, 31))

.ShowButton(true)

.Value(Model.EffectiveDate)

%>

</li>

<li>

<%= Html.LabelFor(x => x.ExpirationDate) %>

<%= Html.Telerik().DatePicker()

.Name("ExpirationDate")

.ShowButton(false)

.Enable(false)

.Value(Model.ExpirationDate)

%>

</li>

</ul>