Hi, i am currently trying to use igGrid on my project, i am using entity framework.
What i am trying to acheive is a simple delete the select rows.
So i select the rows, then the button delete becomes enable, i press it and a igDialog appear asking for confirmation.
if button ok is press the row is delete from database and the grid is refresh, if button cancel, it reloads the grid..
in this moment i am having some problems when interaction with the grid...
here is my code..
index.cshtml view
@model IEnumerable<LicenciamentoMVC.Models.Cliente>@using Infragistics.Web.Mvc@{ ViewBag.Title = "Index";}<script type="text/javascript"> $(function () { $("#grid1").dblclick(function (event) { // row html element var row = $(event.target).closest('tr'); // data key value var key = row.attr("data-id"); alert(key); // cell values var Nome = row.find('td:eq(0)').text(); alert(Nome); // get the next cell value by changing eq index argument. For example :eq(3) will return four element } ); $("#addRow").igButton({ labelText: $("#addRow").val(), disabled: false }); $("#delRow").igButton({ labelText: $("#delRow").val(), disabled: true }); $("#grid1").on("iggridupdatingrowdeleted", function (e, args) { $("#delRow").igButton("option", "disabled", false); $("#addRow").igButton("option", "disabled", true); }); $("#dialogButtonOk").on('click', function (e) { $("#grid1").igGrid("commit"); $("#grid1").igGrid("saveChanges"); $("#igDialog1").igDialog("close"); $("#grid1").igGrid("dataBind"); return false; }); $("#dialogButtonCancel").on('click', function (e) {
$("#igDialog1").igDialog("close"); $("#grid1").igGrid("dataBind"); return true; }); $("#delRow").on('igbuttonclick', function (e) { $("#igDialog1").igDialog("open");
$(this).igButton("disable"); $("#addRow").igButton("enable"); return true; } ); });</script>@(Html .Infragistics() .Dialog() .State(DialogState.Closed) .ContentID("igDialog1") .CloseOnEscape(true) .HeaderText("Eliminar Registos?") .ShowCloseButton(true) .Width("400px") .Render())
@( Html.Infragistics().Grid<LicenciamentoMVC.Models.Cliente>() .AutoGenerateColumns(true) .Caption("Clientes") .ID("grid1") .PrimaryKey("IDCliente") .Columns(column => { column.For(x => x.IDCliente).DataType("int").Hidden(true); column.For(x => x.Nome).DataType("string").HeaderText("Nome"); }) .Features(features => { features.Paging().PageSize(20).PrevPageLabelText("Previous").NextPageLabelText("NEXT"); features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Nome").AllowSorting(true);
}); features.Selection().MultipleSelection(false).Mode(SelectionMode.Row); features.Filtering().Mode(FilterMode.Simple); features.Updating() .EnableAddRow(false) .EnableDeleteRow(true) .EditMode(GridEditMode.None);
}) .DataSourceUrl(Url.Action("ListarClientes")) .UpdateUrl(Url.Action("DeleteClientes")) .Width("100%") .DataBind() .Render()) <input type="button" id="addRow" class="button-style" value="Criar Novo" /> <input type="button" id="delRow" class="button-style" value="Eliminar" /> <div id="igDialog1"><h1>Deseja Eliminar os registos selecionados?</h1><br /> <input type="button" id="dialogButtonOk" class="button-style" value="OK" /> <input type="button" id="dialogButtonCancel" class="button-style" value="Cancelar" /> </div>
Cliente Controller
using LicenciamentoMVC.Models;using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using Infragistics.Web.Mvc;using System.Data.SqlTypes;
namespace LicenciamentoMVC.Controllers{ public class ClienteController :BaseController { private MvcApplication1Context db = new MvcApplication1Context(); // // GET: /Cliente/
public ActionResult Index() { return View(); }
// // GET: /Cliente/Details/5
public ActionResult Details(int id) { return View(); }
// // GET: /Cliente/Create
public void DeleteClientes() { GridModel gridModel = new GridModel(); List<Transaction<Cliente>> transactions = gridModel.LoadTransactions<Cliente>(HttpContext.Request.Form["ig_transactions"]); foreach (Transaction<Cliente> t in transactions) { if (t.type == "deleterow") { Cliente delCliente = db.Clientes.Find(Int32.Parse(t.rowId)); delCliente.TStamp = GetDateTimeFromSqlSytem(); delCliente.Rem = 1; db.SaveChanges(); }
} }
[GridDataSourceAction]public ActionResult ListarClientes(){return View(LicenciamentoMVC.Models.ClienteModel.GetListaClientes());}}}
Model class
using System;using System.Collections.Generic;using System.ComponentModel.DataAnnotations;using System.Linq;using System.Web;
namespace LicenciamentoMVC.Models{ public class Cliente { [Key] public int IDCliente { get; set; } public string Nome { get; set; } public string Morada { get; set; } public string CPostal { get; set; } public string Localidade { get; set; } public string Freguesia { get; set; } public string Conselho { get; set; } public string Distrito { get; set; } public string Pais { get; set; } public string Telefone { get; set; } public string Telemovel { get; set; } public string Fax { get; set; } public string Email { get; set; } public string Nif { get; set; } public string Observacoes { get; set; } public int IDP { get; set; } public int IDU { get; set; } public DateTime TStamp { get; set; } public int Rem { get; set; } public String TipoCliente { get; set; }
} public class ClienteModel { private static Cliente entity; public static IQueryable<Cliente> GetListaClientes() { MvcApplication1Context db = new MvcApplication1Context();
var customers = from c in db.Clientes orderby c.IDCliente descending where c.Rem==0 select c;
return customers.AsQueryable<Cliente>(); }
// public static void DeleteCliente(int ID) // { // MvcApplication1Context db = new MvcApplication1Context(); // var deleteCliente = //from c in db.Clientes where c.IDCliente == ID //select c;
// if (deleteCliente.Count() > 0) // { // db.Clientes.Attach(deleteCliente); // db.Clientes.Remove(employer); // db.SaveChanges(); // } // }
}}
So when i load the grid for the first time, it load ok, i select 3 rows to be delete and i confirm my decision, what happen is that there is a post to the action with all the 3 rows and the DeleteClientes action is being call and on sql server the rows are being deleted, the way to confirm this is by check rem(Remove) field 1 is delete, 0 is normal.
After grid bind, the pager sais that only one of the tree rows were deleted,if i try the select again one of the other 2 rows it gives me error because the row doesnt exist...
When the button cancel is pressed i want to reload the grid, but this error appear
Error: Grid has pending transactions which may affect rendering of data. To prevent exception, application may enable "autoCommit" option of igGrid, or it should process "dataDirty" event of igGridUpdating and return false. While processing that event, application also may do "commit()" data in igGrid.
Thanks in advance...
Hello Hugo,
If you have any further questions feel free to contact me again.
Hello,
Thank you for posting in our community!
A detailed sample which represents how row editing could be implemented might be found at the following resource:
http://igniteui.com/grid/basic-editing
There are some additional functionalities added here such as undo/redo of grid rows editing. Changes are saved by the following javascript function (see the bolded line):
$("#saveChanges").on('igbuttonclick',
function (e) {
grid.igGrid("saveChanges");
$("#undo").igButton("disable");
$(this).igButton("disable");
return false;
}
);
Then the controller method defined in the grid .UpdateUrl() setting is automatically invoked and the update transactions are processed like that:
public ActionResult OrdersSaveData()
{
GridModel gridModel = new GridModel();
List<Transaction<Order>> transactions = gridModel.LoadTransactions<Order>(HttpContext.Request.Form["ig_transactions"]);
var orders = RepositoryFactory.GetOrderRepository();
foreach (Transaction<Order> t in transactions)
…
JsonResult result = new JsonResult();
Dictionary<string, bool> response = new Dictionary<string, bool>();
response.Add("Success", true);
result.Data = response;
return result;
It is not needed to handle manually events triggered by pressing the “Done” or “Cancel” buttons. The igGrid("saveChanges")method automatically send the transactions to the controller.
Hope this helps. If you need any further assistance feel free to update this forum thread.