Grid

[Apeksha SinghParticipant]

Hi

I have used JqxGrid in my code in which i am using cellrender function to display a lock image in place of checkboxes.

There are different such types of grid for different tabs.Now when we move from one tab to another the lock image is not getting displayed sometime according to me cellrender funtion is not called properly.

Thanks & Regards

Priyanka jain

[Peter StoevKeymaster]

Hi Apeksha,

cellsrenderer is a custom function which is called when a cell needs to be rendered. According to us, the method is called correctly. I suggest you to check the implementation of the method on your side.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[priyankajainParticipant]

Hello sir,

var dataAdapter = new $.jqx.dataAdapter(source);
columnCheckBox = null;
var updatingCheckState = false;
if ((chartclass === undefined) || (chartclass === ‘All’)) {
gridid = ‘#tableAll’;
} else {
gridid = ‘#table’ + chartclass;
}
var cellsrenderer2 = function (row, columnfield, value, defaulthtml, columnproperties) {
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘;”>’ + value + ‘</span>’;
};

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
var islocked_value = $(update_grid).jqxGrid(‘getcellvalue’, row, “islocked”);
//var islocked_value =$(gridid).jqxGrid(‘getcellvalue’, row, “chart_debit_flag”);
console.log(“islocked_value: “, islocked_value, ” value: “, value, “gridid: “, gridid, “update_grid: “, update_grid);
if (islocked_value === true) {
var formattedValue = value;
if (columnproperties.cellsformat !== “”) {
formattedValue = $.jqx.dataFormat.formatnumber(formattedValue, columnproperties.cellsformat);
}
return ‘‘;
}
};

//console.log(“grid id :”+gridid);
// initialize jqxGrid
$(gridid).jqxGrid({
width: ‘97.7%’,
autoheight: true,
source: dataAdapter,
//sortable: true,
altrows: true,
//enabletooltips: true,
editable: true,
pageable: true,
pagesizeoptions: [’10’, ’20’, ’30’, ’40’, ’50’],
selectionmode: ‘none’,
theme: ‘metro’,
showtoolbar: true,
rendertoolbar: function (toolbar) {
//jshint unused:vars
var me = this;
var container = $(“<div style=’margin: 5px;’></div>”);
toolbar.append(container);
var input = $(“<input class=’jqx-input jqx-widget-content jqx-rc-all’ id=’searchField’ type=’text’ placeholder=’Search’ style=’height: 23px; float: right; width: 150px;’ />”);
var combobox = $(“<div id=’selectSearchField’></div>”);
container.append(input);
container.append(combobox);
var source = [“Code”, “Name”, “Description”,”Type”,”TaxRate”];
combobox.jqxComboBox({
source: source,
selectedIndex: -1,
promptText: “Select Column”,
width: “20%”,
height: “20”,
theme: “ui-start”
});
combobox.on(“change”, function () {
input.val(“”);
$(update_grid).jqxGrid(‘clearfilters’);
});
$(combobox).on(“select”, function (event) {
var args = event.args;
if (args) {
var item = args.item;
// get item”s label and value.
var label = item.label;
//alert(“ssds”+label);
if (label === “Code”) {
searchDatafield = “chart_code”;
} else if (label === “Name”) {
searchDatafield = “chart_name”;
} else if (label === “Description”) {
searchDatafield = “chart_description”;
} else if (label === “Type”) {
searchDatafield = “chart_type_name”;
} else {
searchDatafield = “tax_rate_name”;
}
}
});
//var searchDatafield = “number”;
combobox.on(“keyup”, function (event) {
//alert(“asdh”);
searchDatafield = “”;
$(update_grid).jqxGrid(“clearfilters”);
});
input.on(“change”, function (event) {
var searchText = input.val();
var filtertype = ‘stringfilter’;
if (searchText === “”) {
//alert(“in”);
$(update_grid).jqxGrid(“clearfilters”);
} else {
$(update_grid).jqxGrid(“removefilter”, searchDatafield);
var filtergroup = new $.jqx.filter();
var filterOrOperator = 1;
var filtervalue = searchText;
var filtercondition = “contains”;
var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
filtergroup.addfilter(filterOrOperator, filter);
console.log(“filters——“,filter);
$(update_grid).jqxGrid(“addfilter”, searchDatafield, filtergroup);
$(update_grid).jqxGrid(“applyfilters”);
}
});
},
columns: [

{
text: ”,
columntype: ‘checkbox’,
datafield: ‘item’,
checked: true,
threestatecheckbox: false,
cellsrenderer: cellsrenderer,
width: ‘9%’,
renderer: function () {
return ‘<div style=”float:left;margin-left: 34.5%; margin-top: 5px;”></div>’;
},
rendered: function (element) {
$(element).jqxCheckBox({
theme: ‘metro’,
width: 16,
height: 16,
animationShowDelay: 0,
animationHideDelay: 0
});
columnCheckBox = $(element);
$(element).on(‘change’, function (event) {

/*30-06-2013: Parul –> Grid ID used is the one selected with the
28-06-2013: Puspendra –> Function to get selected rows on select all-defined in js/globals/global.js
*/
update_grid = ‘#table’ + gridValue;
common_gridid = update_grid.replace(‘#’, ”);
console.log(“update_grid: “, update_grid);
console.log(“common_gridid:”, update_grid);

// $.trim(gridid);
// console.log(“grid id is”,gridid);
var final_checked_rows = getGridCheckedRows_lock(event, updatingCheckState, common_gridid);
console.log(“final value is”, final_checked_rows);
x = final_checked_rows;
gridSelcetedVal[gridIndex] = final_checked_rows;
console.log(“gridSelcetedVal[gridIndex]:”, gridSelcetedVal[gridIndex]);

//$(“div.item_label label”).text(x );
$(“div.item_label label”).text(gridSelcetedVal[gridIndex]);
$(update_grid).jqxGrid(‘endupdate’);
}); // END of $(element).on(‘change’)
} // END of rendered
}, {
text: ‘Id’,
datafield: ‘id’,
width: ‘8%’,
editable: false,
hidden: true
}, {
text: ‘Code’,
datafield: ‘chart_code’,
editable: false,
width: ‘6%’,
cellsrenderer: cellsrenderer2
}, {
text: ‘Name’,
datafield: ‘chart_name’,
editable: false,
width: ‘21%’,
cellsrenderer: cellsrenderer2
}, {
text: ‘Description’,
datafield: ‘chart_description’,
editable: false,
cellsrenderer: cellsrenderer2
}, {
text: ‘Type’,
datafield: ‘chart_type_name’,
editable: false,
width: ‘15%’,
cellsrenderer: cellsrenderer2
}, {
text: ‘Tax Rate’,
datafield: ‘tax_rate_name’,
editable: false,
width: ‘15%’,
cellsrenderer: cellsrenderer2
}, {
text: ‘charts_schedule_id’,
datafield: ‘charts_schedule_id’,
editable: false,
width: ‘15%’,
hidden: true
}
]
});

It is my code.
Please guide me how i can resolve this problem.

Regards
Priyanka jain

[Author]

Posts