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.
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.
Best regards,
This works great !
Notice that GridDataSourceActionAttribut shall not annotate the GetList method.
Thank you very much for your help.
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.