Hi,
I was investigating on GenerateCompactJSONResponse property. I set it to true during GridModel creation, but runtime I get this error:
SCRIPT5007: Impossible to get 'Idxxx' property. Null or undefined reference infragistics.templating.js, Riga 22 Carattere 7095
Is it something I forgot during referencing some IG js file?I tired it on 50'000 records and the erro is the same as 10 records. Disabling that property everything works right. But I would like to turn ON that property...
Thanks in advance
Flavio
PS I noticed that te problem can be the following one. I have a cusotm column in my grid. Nothing strange, just a customized one defined in this way:
var col = new GridColumn() { HeaderText = "HeaderText", Key = "BoundingKeyColumn", Width = "20%", Template = "<img src='/imgPath/myImage.png' " + "onclick=\"doSomething()\"" }; gm.Columns.Add(col); //gm is my GridModel
Hi Flavio,
I'm not sure what the problem is, because I couldn't reproduce the issue.Since the error is in the templating engine you may try to skip it by using formatter function.Here is an example code.
var col = new GridColumn()
{
HeaderText = "HeaderText",
Key = "BoundingKeyColumn",
Width = "20%",
FormatterFunction = "<img src='/imgPath/myImage.png' " +
"onclick=\"doSomething()\""
};
Note that GenerateCompactJSONResponse will work only if LocalSchemaTransform(false).
Hope this helps,Martin PavlovInfragistics, Inc.
Hi Martin,
thanks for your answer.
Of course you're right about LocalSchemaTransform(false). I reviewed the code, and probably the error was my mistake, because now I can't see it anymore. Although situation is problematic... I put 2 different behaviors, with the option disabled and without it.
GenerateCompactJSONResponse FALSE
var gm = new GridModel();gm.DataSource = ds.AsQueryable();gm.AutoGenerateColumns = false;gm.PrimaryKey = "IdArticoloSocieta";
gm.Columns.Add(new GridColumn("Id", "IdArticoloSocieta", "number", ""));gm.Columns.Add(new GridColumn("Codice Articolo", "CodiceArticolo", "string", ""));gm.Columns.Add(new GridColumn("Descrizione", "Descrizione", "string", ""));gm.Columns.Add(new GridColumn("Descrizione Breve", "DescrizioneBreve", "string", ""));gm.Columns.Add(new GridColumn("Barcode", "Barcode", "string", ""));var c= new GridColumn(){HeaderText = "Dettaglio",Key = "UrlImmagineDettaglio",Template = "<img src=\"${UrlImmagineDettaglio}\" onclick=\"visualizzaDettaglioArticolo()\"></img>"};gm.Columns.Add(c); gm.AutoGenerateLayouts = false;gm.DataBind();
What I can see...
How the datasource is...
What javascript renders...
// {"Records":[...],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":7200000}},dataSourceType: 'json',autoGenerateColumns: false,autoGenerateLayouts: false,mergeUnboundColumns: false, responseDataKey: 'Records', generateCompactJSONResponse: false, enableUTCDates: true, columns: [ { headerText: 'Id', key: 'IdArticoloSocieta', dataType: 'number', width: '' }, { headerText: 'Codice Articolo', key: 'CodiceArticolo', dataType: 'string', width: '' }, { headerText: 'Descrizione', key: 'Descrizione', dataType: 'string', width: '' }, { headerText: 'Descrizione Breve', key: 'DescrizioneBreve', dataType: 'string', width: '' }, { headerText: 'Barcode', key: 'Barcode', dataType: 'string', width: '' }, { headerText: 'Dettaglio', key: 'ImmagineDettaglio', template: '' } ], features: [ { filterExprUrlKey: 'filter', filterLogicUrlKey: 'filterLogic', name: 'Filtering', type: 'local' }, { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging', pageSize: 50, showPageSizeDropDown: false, pageSizeList: [ 10, 15, 20, 50, 100 ], type: 'local', visiblePageCount: 5 }, { name: 'Selection', mode: 'row' }, { name: 'Updating', enableAddRow: false, enableDeleteRow: true, startEditTriggers: null, editMode: 'none' } ], primaryKey: 'IdArticoloSocieta', width: '100%', localSchemaTransform: false });}); // ]]> // 0 ? $("#__ig_wm__") : $('
GenerateCompactJSONResponse TRUE
var gm = new GridModel();gm.DataSource = ds.AsQueryable();gm.AutoGenerateColumns = false;gm.PrimaryKey = "IdArticoloSocieta";gm.LocalSchemaTransform = false;gm.GenerateCompactJSONResponse = true;
<script type="text/javascript">$.ig.loader('igGrid.Filtering.Paging.Selection.Updating', function() {$('#grid_anagrafica_articoli').igGrid({ dataSource: {"Records":[...],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":7200000}},dataSourceType: 'json',autoGenerateColumns: false,autoGenerateLayouts: false,mergeUnboundColumns: false, responseDataKey: 'Records', generateCompactJSONResponse: true, enableUTCDates: true, columns: [ { headerText: 'Id', key: 'IdArticoloSocieta', dataType: 'number', width: '' }, { headerText: 'Codice Articolo', key: 'CodiceArticolo', dataType: 'string', width: '' }, { headerText: 'Descrizione', key: 'Descrizione', dataType: 'string', width: '' }, { headerText: 'Descrizione Breve', key: 'DescrizioneBreve', dataType: 'string', width: '' }, { headerText: 'Barcode', key: 'Barcode', dataType: 'string', width: '' }, { headerText: 'Dettaglio', key: 'UrlImmagineDettaglio', dataType: 'string', template: '<img src="${UrlImmagineDettaglio}" onclick="visualizzaDettaglioArticolo()"></img>' } ], features: [ { filterExprUrlKey: 'filter', filterLogicUrlKey: 'filterLogic', name: 'Filtering', type: 'local' }, { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging', pageSize: 50, showPageSizeDropDown: false, pageSizeList: [ 10, 15, 20, 50, 100 ], type: 'local', visiblePageCount: 5 }, { name: 'Selection', mode: 'row' }, { name: 'Updating', enableAddRow: false, enableDeleteRow: true, startEditTriggers: null, editMode: 'none' } ], localSchemaTransform: false, primaryKey: 'IdArticoloSocieta', width: '100%' });});</script><script type='text/javascript'>(function ($) {$(document).ready(function () {var wm = $("#__ig_wm__").length > 0 ? $("#__ig_wm__") : $('<div id="__ig_wm__"></div>').appendTo(document.body);wm.css({position: 'fixed',bottom: 0,right: 0,zIndex: 1000}).addClass('ui-igtrialwatermark');});}(jQuery));</script>
// "Records":[...],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":7200000}},dataSourceType: 'json',autoGenerateColumns: false,autoGenerateLayouts: false,mergeUnboundColumns: false, responseDataKey: 'Records', generateCompactJSONResponse: true, enableUTCDates: true, columns: [ { headerText: 'Id', key: 'IdArticoloSocieta', dataType: 'number', width: '' }, { headerText: 'Codice Articolo', key: 'CodiceArticolo', dataType: 'string', width: '' }, { headerText: 'Descrizione', key: 'Descrizione', dataType: 'string', width: '' }, { headerText: 'Descrizione Breve', key: 'DescrizioneBreve', dataType: 'string', width: '' }, { headerText: 'Barcode', key: 'Barcode', dataType: 'string', width: '' }, { headerText: 'Dettaglio', key: 'UrlImmagineDettaglio', dataType: 'string', template: '' } ], features: [ { filterExprUrlKey: 'filter', filterLogicUrlKey: 'filterLogic', name: 'Filtering', type: 'local' }, { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging', pageSize: 50, showPageSizeDropDown: false, pageSizeList: [ 10, 15, 20, 50, 100 ], type: 'local', visiblePageCount: 5 }, { name: 'Selection', mode: 'row' }, { name: 'Updating', enableAddRow: false, enableDeleteRow: true, startEditTriggers: null, editMode: 'none' } ], localSchemaTransform: false, primaryKey: 'IdArticoloSocieta', width: '100%' });}); // ]]> // 0 ? $("#__ig_wm__") : $('
Notes:
So, I think the problem is related to the template column, but I need to show that image with an onclickJavscript. How to solve it?
Finally I solved ;-)
You were right aboutFormatterFunction, it solved my problem. I was just using it in a wrong way. I post my solution, if someone would like to do the same thing as me:
var c = new GridColumn{ HeaderText = "Dettaglio", Key = "UrlImmagineDettaglio", FormatterFunction = String.Format("function(val) {{ return \"<img src='/media/img/interface_skinning/default/icone/dettaglio.png' onclick='visualizzaDettaglioArticolo()' />\";}}")};gm.Columns.Add(c);
or
var c = new GridColumn{ HeaderText = "Dettaglio", Key = "UrlImmagineDettaglio", FormatterFunction = String.Format("function(val) {{ return \"<img src=\" + val + \" onclick='visualizzaDettaglioArticolo()' />\";}}")};gm.Columns.Add(c);
if the value of the Key Column is the path to the image...
But, finally, let me ask one last thing. If GenerateCompactJSONResponse = TRUEit is impossible to use sorting, filtering and grouping, right? Or is there a way to use them? And what about Updating?
Thanks
Hello Flavio,
Currently sorting, filtering and grouping do not work when GenerateCompactJSONResponse = TRUE (I didn't check the other features but probably they will not work too). The problem comes from the fact that the grid features rely on the column keys which in the GenerateCompactJSONResponse = TRUE are not available. I'll ask my colleagues whether we will support the grid features with this option in the future and will let you know.
Best regards,
Martin Pavlov
Infragistics, Inc.
Very good,
I will wait for some news from you ;-)
Thanks again!
Flavio M.