Hello,
I have a problem when calling igGrid("Databind') method on igGrid to refresh Data after having add a new record.
Here is the configuration of igGrid :
<%= Html.Infragistics().Grid(Model.ListeSites).ID("Sites").DataSourceUrl(Url.Action("GetListe")).AutoCommit(true).PrimaryKey("Site").AutoGenerateColumns(false).EnableHoverStyles(false).Columns(column => { column.For(x => x.Site).HeaderText("Site").Width("45"); column.For(x => x.Description).HeaderText("Description").Width("150"); column.For(x => x.Nom).HeaderText("Nom").Width("100"); column.For(x => x.Adresse1).HeaderText("Adresse 1").Width("100"); column.For(x => x.Adresse2).HeaderText("Adresse 2").Width("100"); column.For(x => x.CodePostal).HeaderText("Code postal").Width("100"); column.For(x => x.Ville).HeaderText("Ville").Width("90"); column.For(x => x.Contact).HeaderText("Contact").Width("90"); column.For(x => x.Telephone).HeaderText("Téléphone").Width("90"); column.For(x => x.Siret).HeaderText("Siret").Width("90"); }) .Features(features => { features.Paging().Type(OpType.Local).PageSize(20); features.Sorting().Mode(SortingMode.Single); if (User.IsInRole(((int)Andra.PriscaND.Business.Model.RoleName.Administrateur).ToString())) { features.Updating() .EnableAddRow(true) .EnableDeleteRow(true) .EditMode(GridEditMode.Row) .ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Site").ReadOnly(false).EditorType(ColumnEditorType.Text).Required(true).Validation(true) .EditorOptions(@"validatorOptions: {requiredMessage: 'Site obligatoire'}, maxLength:3"); settings.ColumnSetting().ColumnKey("Description").EditorType(ColumnEditorType.Text).Required(true) //.EditorOptions(@"validatorOptions: {errorLabel: 'GridValidation', onChange: true}"); .EditorOptions(@"validatorOptions: {requiredMessage: 'Description obligatoire'}, maxLength:250"); settings.ColumnSetting().ColumnKey("Nom").ReadOnly(false).EditorOptions("maxLength:50"); settings.ColumnSetting().ColumnKey("Adresse1").ReadOnly(false).EditorOptions("maxLength:50"); settings.ColumnSetting().ColumnKey("Adresse2").ReadOnly(false).EditorOptions("maxLength:50"); settings.ColumnSetting().ColumnKey("CodePostal").ReadOnly(false).EditorOptions("maxLength:20"); settings.ColumnSetting().ColumnKey("Ville").ReadOnly(false).EditorOptions("maxLength:50"); settings.ColumnSetting().ColumnKey("Contact").ReadOnly(false).EditorOptions("maxLength:50"); settings.ColumnSetting().ColumnKey("Telephone").ReadOnly(false).EditorOptions("maxLength:20"); settings.ColumnSetting().ColumnKey("Siret").ReadOnly(false).EditorOptions("maxLength:14"); }); } }).DataBind().Render()
Then the JS code that generates error :
$("#Sites").igGrid("dataBind");
Here is the error from Firefox :
Error: There was an error parsing/evaluating the JSON string: JSON.parse: unexpected characterhttp://localhost:49944/Scripts/infragistics.jsLine 51
And loading panel remains turning around and nothing more happens.
Tank's by advance.
Regards,
Hardis
Hi Hardis,
In your code you're binding to data in two ways at the same time.
First is by passing a IEnumerable to the Grid method and calling DataBind() with this code:
When you use DataBind() you're forcing igGrid to bind to data on the server side and the data is then serialized as part of the igGrid JavaScript code and then send to the browser.
Second is by using DataSourceUrl(). When using DataSourceUrl() alone igGrid configuration code is serialized and send to the browser. When this code is executed in the browser the igGrid makes and AJAX call to the server to get the data.
At the end igGrid doesn't know how to re-bind.
So in order to fix your code you have to choose which data bind method you will use. I don't see UpdateUrl in your grid configuration so I guess you're using your custom method to post the new records of the grid to the server. If this is your situation then you should choose DataSourceUrl() data bind method, so you should remove .DataBind() from your grid initialization code OR do not pass anything to the View in your controller:
Example:
Hope this helps,
Martin Pavlov
Infragistics, Inc.
Hello Martin,
Indeed I have implemented my own code to update, add and delete.
I tried your solution.
First I removed DataBind() in grid's definition :
Html.Infragistics().Grid(Model.ListeSites).ID("Sites").DataSourceUrl(Url.Action("GetListe")).AutoCommit(true).PrimaryKey("Site").AutoGenerateColumns(false).EnableHoverStyles(false).Columns(column => { column.For(x => x.Site).HeaderText("Site").Width("45"); column.For(x => x.Description).HeaderText("Description").Width("150"); column.For(x => x.Nom).HeaderText("Nom").Width("100"); column.For(x => x.Adresse1).HeaderText("Adresse 1").Width("100"); column.For(x => x.Adresse2).HeaderText("Adresse 2").Width("100"); column.For(x => x.CodePostal).HeaderText("Code postal").Width("100"); column.For(x => x.Ville).HeaderText("Ville").Width("90"); column.For(x => x.Contact).HeaderText("Contact").Width("90"); column.For(x => x.Telephone).HeaderText("Téléphone").Width("90"); column.For(x => x.Siret).HeaderText("Siret").Width("90"); }) .Features(features => { features.Paging().Type(OpType.Local).PageSize(20); features.Sorting().Mode(SortingMode.Single); if (User.IsInRole(((int)Andra.PriscaND.Business.Model.RoleName.Administrateur).ToString())) { features.Updating() .EnableAddRow(true) .EnableDeleteRow(true) .EditMode(GridEditMode.Row) .ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("Site").ReadOnly(true); settings.ColumnSetting().ColumnKey("Description").ReadOnly(true); settings.ColumnSetting().ColumnKey("Nom").ReadOnly(true); settings.ColumnSetting().ColumnKey("Adresse1").ReadOnly(true); settings.ColumnSetting().ColumnKey("Adresse2").ReadOnly(true); settings.ColumnSetting().ColumnKey("CodePostal").ReadOnly(true); settings.ColumnSetting().ColumnKey("Ville").ReadOnly(true); settings.ColumnSetting().ColumnKey("Contact").ReadOnly(true); settings.ColumnSetting().ColumnKey("Telephone").ReadOnly(true); settings.ColumnSetting().ColumnKey("Siret").ReadOnly(true); }); } }).Render()
Then I wrote controller side method :
public ActionResult GestionSitesIndex() { IGestionSitesServices allSites = ServiceProxy.BusinessServiceFactory.GetBusinessService<IGestionSitesServices>(); SitesDTO sites = allSites.GetAllSites(); // Mise en session du DTO si aucune erreur remontée if (!TreatDTO(sites)) RegisterSessionDTO<SitesDTO>(sites); return View("GestionSiteView", sites); } [GridDataSourceAction] public ActionResult GetListe() { IGestionSitesServices allSites = ServiceProxy.BusinessServiceFactory.GetBusinessService<IGestionSitesServices>(); return View("GestionSiteView", allSites.GetAllSites()); }
I tried several way for GetListe method : return IQueryable<ListeSitesVO> or the view.
But now data are never loaded. The loading panel still turning around and i get the following JS error :
TypeError: data is undefinedhttp://localhost:49944/Scripts/modules/infragistics.ui.grid.framework.jsLine 25
Great! I'm glad that your issue is resolved.
Please, note that this workaround works only when you have local paging and sorting.
In remote paging and sorting scenario GridDataSourceAction is handling those operations behind the scenes so it is mandatory.
Best regards,
This works great !
Notice that GridDataSourceActionAttribut shall not annotate the GetList method.
Thank you very much for your help.
From what I see in the Firefox network data allSites.GetAllSites() data is not serialized at all. However if that is the case you should get an error on the server side. In Firebug you can check the Net tab -> XHR -> Response or Net tab -> XHR -> HTML. Usually there you'll see the yellow screen of death.
GridDataSourceAction is using JavaScriptSerializer behind the scenes to serialize the data. As an alternative you can try to serialize the data by using action which returns JsonResult.
Here is an example code:
Note: You should also modify your grid initialization code to include the method : .ResponseDataKey(""). This is because the Json is returned as an array so there is not response data key.
Try it and tell me if it works.
Thank you for this update and detaisl. I am testing this issue and will follow-up youw with an update.
Version of Infragistics : 3.12.1.1010
Net advantage 2012.1
Version of JQuery : 1.5.1
Version of JQuery UI : 1.8.1
Thank's for your help.
Regards