Dear all,
I'm working on an application ASP.MVC that has been migrated on Framework 4.8 (initially on 4.5.2) and globally working fine.
But i've encoutred three major problems with igGrids :
- the command EnableAddRow(true) never show the button. - Jscript events like grid.on("iggridupdatingrowdeleting", function (e, args) {…}) are never called. - When editing a row data they are never update them in BDD, idem when a row is deleted (event not called too).
At this stage i'm using a Trial version of IgniteUI but i've not found any limitation that can explain these problems.
Did you have any idea ?
Best regards.
Claudio.
Sample of code :
<%= Html.Infragistics() .Grid(Model.ListeEtiquette) .ID("GridListeEtiquette") .PrimaryKey("REF") .DataSourceUrl(Url.Action("GetEtiquette")) .AutoCommit(true) .AutoGenerateColumns(false) .Columns(column => { column.For(x => x.REF).HeaderText("N°d'étiquette").Width("280"); column.For(x => x.StatutString).HeaderText("Statut").Width("200"); }) .Features(features => { features.Paging().Type(OpType.Local); features.Sorting().Mode(SortingMode.Single).Type(OpType.Local); features.Updating() .EnableAddRow(true) .Locale(lc => lc.AddRowLabel("Ajouter des étiquettes") .AddRowTooltip("Ajouter des étiquettes")) .EnableDeleteRow(true) .StartEditTriggers(GridStartEditTriggers.DblClick) .EditMode(GridEditMode.Row) .ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("REF").ReadOnly(true); settings.ColumnSetting().ColumnKey("StatutString").ReadOnly(true); }); }) .DataBind() .Render()%>
Hello Aleksandar,
Thanks for your quick reply.But you have tested in an HTML5 project.My project loads only ASPX pages like sample bellow.
Can you try in this context please?
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<My.Business.Model.GestionTables.CodeLibelle>" %> <%@ Import Namespace="Infragistics.Web.Mvc" %> <%@ Import Namespace="My.Client.MvcApplication.Helpers" %> <asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server"> <%= Html.OpenBaliseScript() %> <%: Html.ClearValidationSummary("MyForm") %> <%: Html.AddValidationSummaryError("MyForm") %> <%= Html.CloseBaliseScript() %> <script type="text/javascript"> var grid = $('#CodeLibelle'); grid.on("iggridupdatingrowdeleting", null, function (e, args) { //Confirmation avant la suppression if (confirm('Etes vous sur de vouloir supprimer cette ligne ?\n\n Code : ' + args.rowID)) { var code = $("#CodeLibelle").igGrid("getCellValue", args.rowID, "Code"); //Vérifcation et suppression var url = "<%: Url.Action("DeleteCodeLibelle", "GestionTable") %>" + "?sCode=" + code; window.location.href = url; } else { return false; } }); $("#CodeLibelle").on("iggridupdatingeditrowstarting", null, function (event, ui) { if (!ui.rowAdding) { afficherPopup('createUpdatePopup', 'Modification d\'un élément', '<%=Url.Action("GetCodeLibelleUpdatePopup") %>', "CreateUpdateCodeLibelle", { sCode: ui.rowID }); } else { afficherPopup('createUpdatePopup', 'Ajout d\'un élément', '<%=Url.Action("GetCodeLibelleCreatePopup") %>?Type=<%=Model.Type%>', "CreateUpdateCodeLibelle"); } return false; }); /* Méthode appelée lorsque l'update par la pop up est un success. */ function updateSuccess(obj) { //ok tout s'est bien passé if (obj == true) { $('#createUpdatePopup').dialog("close"); //refresh de la grille $("#CodeLibelle").igGrid("dataBind"); } else { //on affiche le contenu de la réponse dans la pop up $('#createUpdatePopup').html(obj); } } </script> </asp:Content> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <h1><%:Model.Title %></h1> <% using (Html.BeginForm("Index", "GestionCodeLibelle", FormMethod.Post, new { id = "MyForm" })) { %> <div class="input_form"> <%: Html.ValidationSummary(false)%> </div> <div class="input_form"> <%= Html.Infragistics().Grid(Model.ListeCodeLibelle) .ID("CodeLibelle") .DataSourceUrl(Url.Action("GetCodeLibelle")) .AutoCommit(true) .PrimaryKey("Code") .AutoGenerateColumns(false) .EnableHoverStyles(true) .Columns(column => { column.For(x => x.Code).Width("90"); column.For(x => x.Description).Width("600"); }) .Features(features => { features.Paging() .Type(OpType.Local) .PageSize(20); features.Sorting() .Mode(SortingMode.Single) .Type(OpType.Local); features.Updating() .EnableAddRow(true) .EnableDeleteRow(true) .StartEditTriggers(GridStartEditTriggers.DblClick) .EditMode(GridEditMode.Row) .ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Code").ReadOnly(true); settings.ColumnSetting().ColumnKey("Description").ReadOnly(true); }); }) .DataBind() .Render()%> </div> <div id="createUpdatePopup"> </div> <% } %> </asp:Content>
Hello Claudio,
Could you please provide a small, isolated sample demonstrating the issue in order for me to be able to investigate this further and to find the root cause of the behavior.
Thank you for your cooperation.
Looking forward to hearing from you.
Regards,
Aleksandar Atanasov,
Infragistics.
Thanks for your reply, i'm sorry for the delay but i was in vacation these last weeks.I've attached a 7z archive with the project IgniteUIAspx that reproduce the problem of the event that is not fired when a row is deleted and also the problem for the "add row" button that is never shown.
To do this, run the IgniteUIAspx project and click on the menu item [Liste des étiquettes] to display the grid with records.
IgniteUIAspx.7z
Thank you for providing a runnable sample. After further investigation what I can suggest is to bound methods to the events by using the AddClientEvent. This could be achieved in the grid's definition as follows: .AddClientEvent("nameOfEvent", "JSFunction"). Additionally, a method could be bound to the rendered event, in order to set the enableAddRow property: $("#GridListeEtiquette").igGridUpdating("option", "enableAddRow", true).
Please test it on your side and let me know if you need any further information regarding this matter.
This behavior is caused by the “StartEditTriggers(GridStartEditTriggers.DblClick)” which allows the user to edit the grid after they double click the button/cell that they want to update. Adding new row by clicking only once on the button could be achieved by removing the StartEditTriggers property.
Regards, Aleksandar Atanasov,
Thank for your help, it seems working fine now .
I did however notice that the plus [+] button appears disabled and only works if I double click on it, any idea why I am having this behavior?
THANKS.
Sincerely.
After further investigation I was able to discover that in the Site.Master file all Infragistics js files are referenced, however, the Infragistics Loader is defined as well. This duplication is causing the described behavior. What I could suggest is to reference either only the js and css files or the loader. If the loader is used, the following resources should be added:
<%--infragistics--%>
<script src="<%: Url.Content("~/Scripts/infragistics/js/infragistics.loader.js") %>" type="text/javascript"></script>
<%= Html.Infragistics()
.Loader()
.ScriptPath(Url.Content("~/Scripts/Infragistics/js/"))
.CssPath(Url.Content("~/Content/Infragistics/css/"))
.LocalePath(Url.Content("~/Scripts/Infragistics/js/modules/i18n/"))
.Locale("fr")
.Regional("fr")
.Theme("infragistics2012")
.Render() %>
Additionally, a method could be bound to the “rowDeleting” event as follows:
.AddClientEvent("rowDeleting", "handleDelete")
Thank you for your reply, but i wasn't able to fix my problems with your proposals :(.
The rendering event is fired by adding the definition ".AddClientEvent("rendering", "OnGridRendered")" in the code but the option cannot be changed and an exception is thrown, the alert box is never showed.
For the rowdeleting event, i tryed by adding the definition "features.Updating().AddClientEvent("rowdeleting", "OnDeleteRow")" but this event is never fired :(.
Please, can you test on your part with my project if you can change the option and fire the rowdeleting event ?
Thank you for your help.
function OnGridRendered(evt, ui) { var grid = ui.owner; // Throw an exception $("#GridListeEtiquette").igGridUpdating("option", "enableAddRow", true); // Throw an exception grid.igGridUpdating("option", "enableAddRow", true); alert("OnGridRendered"); }