Export grid with Render Cells

[rsantosMember]

Good morning,

How can i export a grid that contain render cells?

When i export the grid the values exported are the original and not the modified.

Ex: If i had a column that had integer values that represent a status (1- Ok, 2- Not Ok, etc.). In the grid the column shows the text correctly, but when i export it exports the integer values.

This is supported? or what can i do to put this working?

Best regards

Ricardo Santos

[Peter StoevKeymaster]

Hi Ricardo ,

Please, provide a sample code which demonstrates your scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[rsantosMember]

// unblock when ajax activity stops
$(document).ajaxStop($.unblockUI);

$(document).ready(function () {

var source = {
datatype: “local”,
ddatafields: [
{ name: ‘ClientName’, type: ‘string’ },
{ name: ‘LocDesig’, type: ‘string’ },
{ name: ‘Address’, type: ‘string’ },
{ name: ‘City’ , type: ‘string’},
{ name: ‘Telephone’ , type: ‘string’},
{ name: ‘LongitudString’, type: ‘string’ },
{ name: ‘LatitudeString’, type: ‘string’ },
{ name: ‘State’, type: ‘string’ },
{ name: ‘IMEI’, type: ‘string’ },
{ name: ‘MotivoManutencao’, type: ‘string’ }
],
pagesize: 20,
pager: function (pagenum, pagesize, oldpagenum) {
// callback called when a page or page size is changed.
}
};

var StatusRender = function (row, datafield, value) {

switch(value)
{
case 0:
return ‘

‘;
case 1:
return ‘

‘;
case 2:
return ‘

‘;
case 3:
return ‘

‘;
case 5:
return ‘

‘;
case 6:
return ‘

‘;
case 7:
return ‘

‘;
case 8:
return ‘

‘;
}
}

//Preparing the data for use
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
$(“#jqxgrid”).jqxGrid({
width: ‘100%’,
source: dataAdapter,
theme: ‘classic’,
pageable: true,
autoheight: true,
altrows: true,
enabletooltips: false,
editable: false,
selectionmode: ‘none’,
filterable: true,
sortable: true,
pagesizeoptions: [’20’, ’50’, ‘100’],
autoshowfiltericon: true,
ready: function () {
//addfilter();
var localizationObject = {
filterstringcomparisonoperators: [”, ”],
// filter numeric comparison operators.
filternumericcomparisonoperators: [”, ”],
// filter date comparison operators.
filterdatecomparisonoperators: [”, ”],
// filter bool comparison operators.
filterbooleancomparisonoperators: [”, ”],
pagergotopagestring: ”,
pagershowrowsstring: ”,
pagerrangestring: ”,
pagernextbuttonstring: ”,
pagerpreviousbuttonstring: ”,
sortascendingstring: ”,
sortdescendingstring: ”,
sortremovestring: ”,
groupbystring: ”,
groupremovestring: ”,
decimalseparator: ”,
thousandsseparator: ”,
filterclearstring: ”,
filterstring: ”,
filtershowrowstring: ”,
filterorconditionstring: ”,
filterandconditionstring: ”,
groupsheaderstring: ”
}

$(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘DepId’);
$(“#jqxgrid”).jqxGrid(‘localizestrings’, localizationObject);
},
updatefilterconditions: function (type, defaultconditions) {
var stringcomparisonoperators = [‘CONTAINS’, ‘DOES_NOT_CONTAIN’];
var numericcomparisonoperators = [‘LESS_THAN’, ‘GREATER_THAN’];
var datecomparisonoperators = [‘LESS_THAN’, ‘GREATER_THAN’];
var booleancomparisonoperators = [‘EQUAL’, ‘NOT_EQUAL’];
switch (type) {
case ‘stringfilter’:
return stringcomparisonoperators;
case ‘numericfilter’:
return numericcomparisonoperators;
case ‘datefilter’:
return datecomparisonoperators;
case ‘booleanfilter’:
return booleancomparisonoperators;
}
},
updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
columnfilter, filtertype, filterconditions) {
var index1 = 0;
var index2 = 0;
if (columnfilter != null) {
var filter1 = columnfilter.getfilterat(0);
var filter2 = columnfilter.getfilterat(1);
if (filter1) {
index1 = filterconditions.indexOf(filter1.comparisonoperator);
var value1 = filter1.filtervalue;
filterinputfield1.val(value1);
}
if (filter2) {
index2 = filterconditions.indexOf(filter2.comparisonoperator);
var value2 = filter2.filtervalue;
filterinputfield2.val(value2);
}
}
filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
},
altrows: true,
columns: [
{ text: ”, dataField: ‘ClientName’, editable: false,cellsalign: ‘center’ , width: 200, type: ‘string’ },
{ text: ”, dataField: ‘LocDesig’,editable: false, cellsalign: ‘center’ , type: ‘string’, width:300 },
{ text: ”, dataField: ‘Address’,editable: false, cellsalign: ‘center’ , width: 200, type: ‘string’ },
{ text: ”, dataField: ‘City’,editable: false, cellsalign: ‘center’, width: 150, type: ‘string’ },
{ text: ”, dataField: ‘Telephone’,editable: false, cellsalign: ‘center’, width: 150, type: ‘string’ },
{ text: ”, dataField: ‘LongitudString’,editable: false, cellsalign: ‘center’, width: 100 , type: ‘string’},
{ text: ”, dataField: ‘LatitudeString’,editable: false, cellsalign: ‘center’, width: 100, type: ‘string’ },
{ text: ”, dataField: ‘State’,editable: false, cellsalign: ‘center’, width: 120, cellsrenderer:StatusRender, type:’string’ },
{ text: ”, dataField: ‘MotivoManutencao’,editable: false, cellsalign: ‘center’,width: 150, type:’string’}

]

});

$(“#btnSearch”).click(function () {

$.blockUI({ message: ‘ ‘ });

var id = ;
var clienteCode = $(‘#’).val();
var mes = $(‘#’).val();
var ano = $(‘#’).val();

var jsonText = JSON.stringify({ id: id, code: clienteCode, mes: mes, ano:ano });
$.ajax({
type: ‘POST’,
dataType: ‘json’,
async: true,
url: ”+tipo,
data : jsonText,
cache: false,
contentType: ‘application/json; charset=utf-8’,
success: function (data) {
source.datatype = “json”;
source.localdata = data.d;

$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
},
error: function (err) {
alert(‘Error’);
}
});

}
}

$(“#Export”).click(function () {

var today = new Date();
var exportname = ‘Indicadores_’ +today.getFullYear() +’_’+ (today.getMonth()+1) +’_’+ today.getDate();

$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, exportname);
});

});

The column Status receive a number exemple 0 ou 1 ou 2 ou 3 and i use the cellsrenderer:StatusRender to change the value to a text
It works when showing the grid, but when exporting the value that is exported is the 0 or the 1 and not the text.

[Peter StoevKeymaster]

Hi rsanson,

jqxGrid exports the Cells Values. It will not export the custom rendered strings by the cellsrenderer function as the function may return any HTML content.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts