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.
Thank's for your help.
The method GetListe is called, I check this with a breakpoint into.
Here is Network data from Firefox :
Called URL : http://localhost:49944/GestionTable/GetListe?%24select=Site%2CDescription%2CNom%2CAdresse1%2CAdresse2%2CCodePostal%2CVille%2CContact%2CTelephone%2CSiret&_=1349940603856
Detail of request :
GET /GestionTable/GetListe?%24select=Site%2CDescription%2CNom%2CAdresse1%2CAdresse2%2CCodePostal%2CVille%2CContact%2CTelephone%2CSiret&_=1349940332693 HTTP/1.1Host: localhost:49944User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:15.0) Gecko/20100101 Firefox/15.0.1Accept: */*Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3Accept-Encoding: gzip, deflateConnection: keep-aliveX-Requested-With: XMLHttpRequestReferer: http://localhost:49944/GestionTable/GestionSitesIndexCookie: ASP.NET_SessionId=1jd2qf5kiaq52hqtm152t2fp; .ASPXAUTH=311A505BE37B42A4C2F7A461CB028D64A648744F85DA592BDEA6497896543FE70DED039B43B3D0513D8DAB9615DBDFB97BCC4A194B66555DA96F5A12FF4205102ADCEE5D51C75E05E6692DC8949A6839658A18D1D31293AE48F2D5522761A2310D4CDADEC58AD23F276AA28A39B22CE42DC5ADD919C345623A10FD349FF5B1B4
Detail of response :
HTTP/1.1 200 OKServer: ASP.NET Development Server/10.0.0.0Date: Thu, 11 Oct 2012 07:21:54 GMTX-AspNet-Version: 4.0.30319X-AspNetMvc-Version: 3.0Cache-Control: private, s-maxage=0Content-Length: 0Connection: Close
Response Data : XML analysis error : no found element : moz-nullprincipal:{417d9ec4-3d25-4e3a-b64a-aaba08b58abb} Numéro de ligne 1, Colonne 1 :
Grid initialization code in page source code :
<script type="text/javascript">$.ig.loader('igGrid.Paging.Sorting.Updating', function() {$('#Sites').igGrid({ dataSource: '/GestionTable/GetListe',autoGenerateColumns: false,autoGenerateLayouts: false,responseDataKey: 'Records', generateCompactJSONResponse: false, columns: [ { key: 'Site', dataType: 'string', headerText: 'Site', width: '45' }, { key: 'Description', dataType: 'string', headerText: 'Description', width: '150' }, { key: 'Nom', dataType: 'string', headerText: 'Nom', width: '100' }, { key: 'Adresse1', dataType: 'string', headerText: 'Adresse 1', width: '100' }, { key: 'Adresse2', dataType: 'string', headerText: 'Adresse 2', width: '100' }, { key: 'CodePostal', dataType: 'string', headerText: 'Code postal', width: '100' }, { key: 'Ville', dataType: 'string', headerText: 'Ville', width: '90' }, { key: 'Contact', dataType: 'string', headerText: 'Contact', width: '90' }, { key: 'Telephone', dataType: 'string', headerText: 'Téléphone', width: '90' }, { key: 'Siret', dataType: 'string', headerText: 'Siret', width: '90' } ], features: [ { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging', type: 'local', pageSize: 20 }, { sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', name: 'Sorting', mode: 'single' }, { columnSettings: [ { columnIndex: -1, columnKey: 'Site', readOnly: true }, { columnIndex: -1, columnKey: 'Description', readOnly: true }, { columnIndex: -1, columnKey: 'Nom', readOnly: true }, { columnIndex: -1, columnKey: 'Adresse1', readOnly: true }, { columnIndex: -1, columnKey: 'Adresse2', readOnly: true }, { columnIndex: -1, columnKey: 'CodePostal', readOnly: true }, { columnIndex: -1, columnKey: 'Ville', readOnly: true }, { columnIndex: -1, columnKey: 'Contact', readOnly: true }, { columnIndex: -1, columnKey: 'Telephone', readOnly: true }, { columnIndex: -1, columnKey: 'Siret', readOnly: true } ], name: 'Updating', enableAddRow: true, enableDeleteRow: true, editMode: 'row' } ], autoCommit: true, primaryKey: 'Site', enableHoverStyles: false, localSchemaTransform: false });});</script>
I found something weird : if i remove the GridDataSourceAction attribute in controller action method, i get some readable data in DataSource action url 's response.
I hope this will be useful for you.
Thanks for these details. So that we can test this, can you tell us your what NA for jQuery version and build number you are using (also jQuery and jQuery UI versions). Thanks!
Version of Infragistics : 3.12.1.1010
Net advantage 2012.1
Version of JQuery : 1.5.1
Version of JQuery UI : 1.8.1
Regards
Thank you for this update and detaisl. I am testing this issue and will follow-up youw with an update.