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
Hi Hardis,I haven't seen this error before so I'm not sure where the problem is.It is worth checking if the communication between browser and server is working as expected.Open your favourite browser debugger tool(I use Chrome Developer Tools: F12->Network->XHR) and check if the igGrid is making AJAX(XHR) request to the server (look for GetListe).If there is a request then you should check what the response is (Alternatively you can put bookmark in the GetListe action and see if it breaks).If all of the above is working then it is client side problem and you should tell me what NA for jQuery version and build number you are using(also jQuery and jQuery UI versions), so I cantest with this specific version.Another thing you can check is what igGrid initialization code is generated on the client side. Open page view source and search for the string "$('#Sites')". This is the jQuery selector for your grid. After you find igGrid initialization code look for dataSourceUrl and dataSource properties.dataSource property should have valid Url. If not, it will be very helpful if you paste igGrid client initialization code for me to inspect.
Hope this helps,Martin PavlovInfragistics, Inc.
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