Grid Databinding from ICollection
Hi guys,
I am using EJ2, VisualStudio, EF6, MVC5. I am having problems to show/edit data from an ICollection in the data received.
Related models:
public partial class clientes
{
public clientes()
{
this.contatos = new HashSet<contatos>();
}
public int cliente_id { get; set; }
public string nome ...
public virtual ICollection<contatos> contatos { get; set; }
}
{
public partial class contatos
{
public int contato_id { get; set; }
public string nome { get; set; }
public string setor { get; set; }
public ...
public Nullable<int> cliente_id { get; set; }
public virtual clientes clientes { get; set; }
}
}
Controller is working fine to retrieve data ondemand...
public ActionResult UrlDatasource([FromBody]DataManagerRequest dm)
{
IEnumerable DataSource = (from l in db.clientes
select new
{
cliente_id = l.cliente_id,
razao_social = l.razao_social,
nome = l.nome,
end_rua = l.end_rua,
end_numero = l.end_numero,
end_bairro = l.end_bairro,
end_cidade = l.end_cidade,
end_estado = l.end_estado,
end_pais = l.end_pais,
end_cep = l.end_cep,
observacoes = l.observacoes,
contatos = (from m in db.contatos
where m.cliente_id == l.cliente_id
select new {
cliente_id = m.cliente_id,
contato_id = m.contato_id,
nome = m.nome
})
}).ToArray();
... all operations to search, sort, paging are working fine
return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
Controller action for CRUD is working fine! PS. I'm updating few fields just for testing purposes...
public ActionResult CrudUpdate(clientes value, string action, int? key)
{
string msg;
if (action == "update")
{
clientes clienteTemp = db.clientes.Where(x => x.cliente_id == value.cliente_id).First();
foreach (var contato in value.contatos)
{
contatos contatoTemp = db.contatos.Where(x => x.contato_id == contato.contato_id).First();
contatoTemp.cliente_id = contato.cliente_id;
contatoTemp.nome = contato.nome;
db.Entry(contatoTemp).State = EntityState.Modified;
}
clienteTemp.razao_social = value.razao_social;
clienteTemp.nome = value.nome;
db.Entry(clienteTemp).State = EntityState.Modified;
db.SaveChanges();
msg = "Registro atualizado com sucesso!";
}
else if (action == "insert")
{
db.clientes.Add(value);
db.SaveChanges();
msg = "Registro alterado com sucesso!";
}
else
{
var data = db.clientes.Find(key);
db.clientes.Remove(data);
db.SaveChanges();
msg = "Registro excluído com sucesso!";
}
return Json(value, JsonRequestBehavior.AllowGet);
}
Client View:
<div>
@Html.EJS().Grid("Clientes").DataSource(dataManager => { dataManager.Url("/Cliente/UrlDatasource").CrudUrl("/Cliente/CrudUpdate").Adaptor("UrlAdaptor"); }).AllowPdfExport(true).ToolbarClick("toolbarClick").DetailTemplate("#detailtemplate").Columns(col =>
{
col.Field("cliente_id").HeaderText("Cliente ID").IsPrimaryKey(true).AllowEditing(false).Width("70").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("razao_social").HeaderText("Razão social").Width("200").Add();
col.Field("nome").HeaderText("Nome").Width("200").Add();
col.HeaderText("Gerenciar").Width("60").Commands(commands).Add();
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).ShowDeleteConfirmDialog(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).AllowSorting().AllowFiltering().Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "PdfExport", "Print", "Search" }).DetailDataBound("detailDataBound").Render()
</div>
So I have folowing questions:
1 - How to show/add/edit data from "Contatos" (it's contained in "Clientes" as an ICollection) in the child grid?
2 - How to show/add/edit selected "Clientes" data in a popup, even those columns not shown in the main grid?
3 - How to pass a message string from CRUD action and show it in a Badge component?
Many thanks.
SIGN IN To post a reply.
11 Replies
Hi Farook, thanks for your answers!
Unfortunatelly the code you suggested is not what I expected.
Please, let me explain a little more.
- I send all data (master and detail) to the grid in one json file from action urlDatasource as follow:
And the grid returns data to the controller for CRUD as below:
On the cliente side users will be able to change "Clientes" data and "Contatos" data. I wish they do that in the following way:
1 - For the question #1 the example you sent suggested to bind childGrid to other datasource and execute a new query from "Contatos" controller in order to get data. I think we don't need that because we already have all related "Contatos" data in the grid datamanager (UrlDatasource action returned "Contatos" in "Clientes"). The question is how to get "Contatos" data from "Clientes" and fill in the childGrid? Should fields access be like "clientes.contatos.nome" etc?
2 - Main grid is showing 3 out of 11 columns but I need to edit all 11 columns (even those not shown in grid). How to show/edit all 11 columns in a popup window?
3 - I'd like to show messages coming from controller in Badge components for CRUD actions. How to do it?
public ActionResult CrudUpdate(clientes value, string action, int? key)
{
string msg;
if (action == "update")
{
... all operations here...
db.SaveChanges();
msg = "Registro atualizado com sucesso!";
}
else if (action == "insert")
{
db.clientes.Add(value);
db.SaveChanges();
msg = "Registro alterado com sucesso!";
}
else
{
var data = db.clientes.Find(key);
db.clientes.Remove(data);
db.SaveChanges();
msg = "Registro excluído com sucesso!";
}
return Json(value, JsonRequestBehavior.AllowGet);
}
}
Thanks!
Question #1: Sorry, it doesn't work:
I updated code like bellow:
I get no records, it should show 5 records
I get this error:
I'm really concerned about this solution because I planned to implement many others views using this approach.
Question #2: It worked!
@Html.EJS().Toast("element").Content(@ViewBag.msg).Render()
@Html.EJS().Toast("element").Content(ViewBag.msg).Render()
Both show empty toast.
Code bellow worked sometime but it stopped working just after building the app. Page doesn't load page after building...
@Html.EJS().Toast("element").Content(TempData["Message"].toString()).Render()
Thank you!!!
Query #1: Hi Farook,
I am still having the same problem.
When using the code bellow I get no results from controller.
load: function (args) {
this.query = new ej.data.Query().where("cliente_id", "equal",rowData['contatos']['cliente_id']);
Looking at DataManagerRequest in UrlDatasource action I see a null value coming from rowData[...][...] always!
After changing that to Query().where("cliente_id", "equal", rowData['cliente_id']); the action receives parameters correctly and returns data correctly as well. In this case the child grid renders just one line and it doesn't show all 5 lines for contacts data. Remember that the structure's data received is the same as the main grid receives, client data contains all related contacts data (for the test bellow client id=3 contains five contacts).
function load(args) {
var rowData = args.data;
var childGrid = new ej.grids.Grid({
dataSource: new ej.data.DataManager({
url: "/Cliente/UrlDatasource",
CrudUrl: "/Cliente/CrudUpdate",
adaptor: new CustomAdaptor()
}),
load: function (args) {
this.query = new ej.data.Query().where("cliente_id", "equal", rowData['cliente_id']); //filtering operation to show related data in childGrid
},
actionBegin: function (args) {
if (args.requestType == 'save') {
args.data.cliente_id = args.data.contatos.cliente_id;
}
},
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
columns: [
{ field: 'contatos.contato_id', headerText: 'Contato ID', isPrimaryKey: true, width: 120 },
{ field: 'cliente_id', headerText: 'Cliente ID', width: 120 },
{ field: 'contatos.nome', headerText: 'nome', width: 120 },
{ field: 'contatos.fone', headerText: 'fone', width: 120 }
]
});
childGrid.appendTo(args.detailElement.querySelector('#gridparent')); }
Farook:
1 - As I mentioned before we already have all clients and contacts data when main grid loads its pages. Couldn't childgrid be filled by using already loaded data? clients.contacts.contactId or something like this...
Thank you.
Hi Farook, many thanks for your replies. Unfortunatelly I couldn't get out of this simple problem so far. I'm sorry for my "not so clear" english because I speak portuguese and sometimes is hard to explain things using a foreign language ;).
“this.query = new ej.data.Query().where("contatos.EmployeeID", "equal", rowData['EmployeeID']);”
Farrok, I believe that here the problem is the sintax you suggest, it never worked to get data (contacts.cliente_id) or (rawData['contacts']['cliente_id']) or (clients.contact.contact_id). It didn't work as well as many others sintaxes I tried. I can't get or set any contacts data contained in the client already loaded. Is it really impossible to do it?
Farook, I am trying to do things this way because I believe that the best approach is to get pages of clients and contacts together, make all changes/inserts needed and send them back together to CRUD.
Actually I never thought it could be so hard to show a really simple 1:n data in a grid. My project has many others views not implemented yet in which I need to show many related data (even m:n!). Now I'm really concerned because I am not sure if your grid component is the best choice...
Because I can't get stuck in this problem I tried other solution. I've made some crud tests and all is working fine, please check if it could fail for any reason:
- 1) I implemented separated actions for load and crud data for contacts:
2 - And changed childGrid script like bellow:
3 - Now I have the results rendered correctly:
4 - Do you think the above solution is a valid solution?
5 - I tried to get childGrid Instance by its Id but I realize that its Id is null, how to set an Id to the childGrid?
6 - A new question: I am from Brazil so I need buttons, messages, etc in portuguese. For main grid I used the following:
And I needed to add a lot of translated messages to the script in page:
So the question: How to use it in chilGrid? Isn't there a better way to get mesages translated?
Query #2: Sorry but I can't believe that loading all data (lets say 100k records plus 100k * n contacts) is the best approach. I believe that the paging is the best solution for performance and optimizations, am I right?
Hi Farook, now I have all working fine!
The custom column I added as follow:
1 - I created a list of custom columns;
2 - got the list in script
3 - added the list to the child grid column
It's working fine, do you suggest any modifications?
Thank you so much for your support.
SIGN IN To post a reply.
