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

Grid Editor Popup Custom Template - Nested Object Update/Create Issue

2 Answers 527 Views

Grid

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

hüseyin altun asked on 27 Aug 2013, 01:36 PM

Hi ,

I have a Model which have a complex structure/nested objects.
Account object have child objects called Addresses.

Like Account.Addresses[0].StreetName etc.

How can i set Addresses from editor popup custom template so i get the list from controller to update or insert.

My Controller :

[HttpPost]

public ActionResult AccountPopup_Create([DataSourceRequest] DataSourceRequest request, Account account )

{

var result;

return new JsonResult() { Data = result };

}

[HttpPost]

public ActionResult AccountPopup_Update([DataSourceRequest] DataSourceRequest request, Account account )

{

var result;

return new JsonResult() { Data = result };

}

My custom Template :

@model Account

<table>

<tr class="nameEditor">

<td class="editor-label">Dosya Adı

</td>

<td class="editor-field">

@Html.TextBoxFor(model => model.Name, new { disabled = "disabled" })

</td>

</tr>

<tr class="nameEditor">

<td class="editor-label">Kaynak Adı

</td>

<td class="editor-field">

@Html.DropDownListFor(model => model.SourceId, new SelectList(GetSources(), "IntId", "Name"), new { disabled = "disabled" })

</td>

</tr>

<tr class="nameEditor">

<td class="editor-label">Kaynak Profil Id

</td>

<td class="editor-field">

@Html.TextBoxFor(model => model.SourceAccountId, new { disabled = "disabled" })

</td>

</tr>

<tr class="nameEditor">

<td class="editor-label">Vergi Dairesi

</td>

<td class="editor-field">

@Html.TextBoxFor(model => model.TaxOffice, new { disabled = "disabled" })

</td>

</tr>

<tr class="nameEditor">

<td class="editor-label">Vergi Numarası

</td>

<td class="editor-field">

@Html.TextBoxFor(model => model.TaxNo, new { disabled = "disabled" })

</td>

</tr>

<tr class="nameEditor">

<td class="editor-label">Web Sitesi

</td>

<td class="editor-field">

@Html.TextBoxFor(model => model.Website, new { disabled = "disabled" })

</td>

</tr>

<tr class="nameEditor">

<td class="editor-label">E-Posta

</td>

<td class="editor-field">

@Html.TextBoxFor(model => model.EMail, new { disabled = "disabled" })

</td>

</tr>

<tr class="nameEditor">

<td class="editor-label">Telefon Numarası

</td>

<td class="editor-field">

@Html.TextBoxFor(model => model.Tel, new { disabled = "disabled" })

</td>

</tr>

<tr class="nameEditor">

<td class="editor-label">Fax

</td>

<td class="editor-field">

@Html.TextBoxFor(model => model.Fax, new { disabled = "disabled" })

</td>

</tr>

<tr class="nameEditor">

<td class="editor-label">Profil Çeşidi

</td>

<td class="editor-field">

@Html.DropDownListFor(model => model.AccountType, new SelectList(ConfigModel.EnumToSelectList(typeof(AccountType)), "Value", "Text"), new { disabled = "disabled" })

</td>

</tr>

<tr class="nameEditor">

<td class="editor-label">Senaryo Tipi

</td>

<td class="editor-field">

@Html.DropDownListFor(model => model.ScenarioType, new SelectList(ConfigModel.EnumToSelectList(typeof(ScenarioType)), "Value", "Text"))

</td>

</tr>

<tr>

<td colspan="2" style="height: 10px;"></td>

</tr>

<tr>

<td colspan="2" style="padding-left: 20px;"><strong>Adres</strong></td>

</tr>

<tr>

<td colspan="2" style="height: 10px;"></td>

</tr>

<tr class="nameEditor">

<td class="editor-label">Bina Adı

</td>

<td class="editor-field">

@Html.TextBoxFor(model => model.Addresses[0].CityName)

</td>

</tr>

<tr class="nameEditor">

<td class="editor-label">Hesap Adı

</td>

<td class="editor-field">

@Html.TextBoxFor(model => model.Addresses[0].AccountId)

</td>

</tr>

<tr class="nameEditor">

<td class="editor-label">Mahalle Adı

</td>

<td class="editor-field">

@Html.TextBoxFor(model => model.Addresses[0].CitySubdivisionName)

</td>

</tr>

</table>

My Grid :

@(Html.Kendo().Grid(GetAccounts(AccountType.Customer))

.Name("accountsGrid")

.Columns(columns =>

{

columns.Bound(Account => Account.Name).HeaderTemplate("Profil Adı").Filterable(filterable => filterable.UI("accountNameFilter")).HtmlAttributes(new { title = " #= Name # " });

columns.Bound(Account => Account.TaxNo).HeaderTemplate("Vergi No").Filterable(filterable => filterable.UI("taxNoFilter")).Width(120);

columns.ForeignKey(Account => Account.SourceId, GetSources(), "IntId", "Name").Title("Kaynak Adı").Width(200);

columns.Bound(Account => Account.AccountType).HeaderTemplate("Hesap Tipi").Width(120);

columns.Command(command => { command.Edit().Text("Güncelle").UpdateText("Güncelle").CancelText("İptal"); }).Width(105);

})

.Filterable(filterable => filterable

.Extra(false)

)

.ToolBar(toolbar => toolbar.Create().Text("Yeni kayit ekle"))

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AccountEditPopup"))

.Pageable(pager => pager

.Messages(messages => messages.Display("{0} - {1}. Toplam {2} kayıt")

.ItemsPerPage("")

.First("İlk sayfa")

.Last("Son sayfa")

.Next("Sonraki")

.Page("Sayfa")

.Previous("Önceki")

.Refresh("Yenile"))

)

.Sortable()

.Scrollable()

.Events(e => e.Edit("onEdit"))

.ClientDetailTemplateId("template")

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(30)

.Model(model =>

{

model.Id(p => p.IntId);

})

.Events(events => events.Error("error_handler"))

.Create(update => update.Action("AccountPopup_Create", "Config"))

.Read(read => read.Action("AccountPopup_Read", "Config"))

.Update(update => update.Action("AccountPopup_Update", "Config"))

)

2 Answers, 1 is accepted

Accepted

answered on 06 Sep 2013, 08:23 AM

addnewaccount.jpg

itshowslikeaddressupdatedbut.jpg

newaccountandemptyaddress.jpg

butaddressnotupdated.jpg

updateaddress.jpg

whenicloseaddresseditpopupdoingnothing.jpg

Hi Vladimir ,

I solved it in a different way .

Now i have another issue .
I used a detail view for displaying address for account and an edit option for address.
When i add a new account , i add an empty address for it .
after adding address , i try to update it but update event can not trigger the controller function.
the code is below.
Another problem is when i open the address edit popup and close it without doing anything ,
kendo try to update the row and it fails because of parameters cannot provided. ( .Read(read => read.Action("AccountDetail_Address_Read", "Config", new { accountId = "#=IntId#", accountType = "#=AccountType#" })) )

I add the screenshots step by step.
When i debug the code update button never triggered the controller function.

Controller :

[HttpPost]

public ActionResult Account_AddressPopup_Update([DataSourceRequest] DataSourceRequest request, ConfigModel.AddressDisplayModel addressDisplayModel)

{

//_log.Debug("CCCCCCCCCCCC" + "BBBBBBBBBBB");

if (addressDisplayModel != null)

{

var account = GetAccount(addressDisplayModel.AccountId, addressDisplayModel.AccountType);

account.Addresses[0] = new Address

{

AccountId = addressDisplayModel.AccountId,

BuildingName = addressDisplayModel.BuildingName,

BuildingNumber = addressDisplayModel.BuildingNumber,

CityName = addressDisplayModel.CityName,

CitySubdivisionName = addressDisplayModel.CitySubdivisionName,

CountryName = addressDisplayModel.CountryName,

IntId = addressDisplayModel.IntId,

IsPrimary = addressDisplayModel.IsPrimary,

PostalZone = addressDisplayModel.PostalZone,

Room = addressDisplayModel.Room,

SourceAddressId = addressDisplayModel.SourceAddressId,

SourceId = addressDisplayModel.SourceId,

StreetName = addressDisplayModel.StreetName

};

var result = SetAccount(account);

if (result > 0)

addressDisplayModel.AccountId = result;

}

return Json(new[] { addressDisplayModel }.ToDataSourceResult(request, ModelState));

}

View:

@(Html.Kendo().TabStrip()

.Name("tabstrip")

.Items(tabstrip =>

{

tabstrip.Add().Text("Hesaplar")

.Selected(true)

.Content(@<text><div class="mainGridDiv" id="dvAccount">

<div id="txtsearch">

<input type="text" id="txtSearch" />

</div>

<div id="pinar" style="width: 10px; height: 10px; float: left; left: 345px; top: 158px; z-index: 5; position: absolute;">

<img src="~/Images/search.png" style="width: 30px; height: 30px;" />

</div>

@(Html.Kendo().Grid(GetAccounts())

.Name("accountsGrid")

.Columns(columns =>

{

columns.Bound(Account => Account.Name).HeaderTemplate("Hesap Adı").Filterable(filterable => filterable.UI("accountNameFilter")).HtmlAttributes(new { title = " #= Name # " });

columns.Bound(Account => Account.TaxNo).HeaderTemplate("Vergi No").Filterable(filterable => filterable.UI("taxNoFilter")).Width(120);

columns.ForeignKey(Account => Account.SourceId, PortalCore.Instance.ProductManager.GetSources(), "IntId", "Name").Title("Kaynak Adı").Width(200);

columns.Bound(Account => Account.AccountType).HeaderTemplate("Hesap Tipi").Width(120);

columns.Command(command => { command.Edit().Text("Güncelle").UpdateText("Güncelle").CancelText("İptal"); }).Width(105);

})

.Filterable(filterable => filterable

.Extra(false)

)

.ToolBar(toolbar => toolbar.Create().Text("Yeni kayit ekle"))

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AccountEditPopup"))

.Pageable(pager => pager

.Messages(messages => messages.Display("{0} - {1}. Toplam {2} kayıt")

.ItemsPerPage("")

.First("İlk sayfa")

.Last("Son sayfa")

.Next("Sonraki")

.Page("Sayfa")

.Previous("Önceki")

.Refresh("Yenile"))

)

.Sortable()

.Scrollable()

.Events(e => e.Edit("onEdit"))

.ClientDetailTemplateId("template")

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(30)

.Model(model =>

{

model.Id(p => p.IntId);

})

.Events(events => events.Error("error_handler"))

.Create(update => update.Action("AccountPopup_Create", "Config"))

.Read(read => read.Action("AccountPopup_Read", "Config"))

.Update(update => update.Action("AccountPopup_Update", "Config"))

)

</div>

</text>);

})

)

<script id="template" type="text/kendo-tmpl">

@(Html.Kendo().Grid<AddressDisplayModel>()

.Name("grid_#=IntId#")

.Columns(columns =>

{

columns.Bound(o => o.CityName).Title("Şehir");

columns.Bound(o => o.CitySubdivisionName).Title("Semt");

columns.Bound(o => o.CountryName).Title("Ülke");

columns.Bound(o => o.PostalZone).Title("Posta Kodu").Width(100);

columns.Bound(o => o.StreetName).Title("Sokak Adı");

columns.Bound(o => o.BuildingName).Title("Bina Adı").Width(100);

columns.Bound(o => o.BuildingNumber).Title("Bina No").Width(70);

columns.Bound(o => o.Room).Title("Daire").Width(70);

columns.Command(command => { command.Edit().Text("Güncelle").UpdateText("Güncelle").CancelText("İptal"); }).Width(110);

})

.Events(e => e.DataBound("onAddressRowDataBound"))

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AddressEditPopup"))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Model(model =>

{

model.Id(p => p.IntId);

})

.Read(read => read.Action("AccountDetail_Address_Read", "Config", new { accountId = "#=IntId#", accountType = "#=AccountType#" }))

.Events(events => events.Error("err"))

.Update(update => update.Action("Account_AddressPopup_Update", "Config"))

)

.Pageable()

.Sortable()

.Events(e => e.Edit("onAddressEdit"))

.ToClientTemplate())

</script>