DropDown Show on GRID

[Meharwan SinghParticipant]

Hi,
I am trying to show drop select drop down at grid but its work but if i am going to click on select then its not showing select option exactly select is going to open but quickly close also its not remain open until we are not selecting any select option in same way if i clicked on any cell which is edit mode then again vist to select this time its work perfectly

here is code

function grid() {
console.log(“grid”);
//var theme = getTheme();
data = QuotationMasterData(no_pages, false, value);
var customsortfunc = function (column, direction) {
var sortdata = new Array();
if (direction == ‘ascending’) direction = true;
if (direction == ‘descending’) direction = false;
if (direction != null) {
for (i = 0; i < data.length; i++) {
sortdata.push(data[i]);
}
}
else sortdata = data;
var tmpToString = Object.prototype.toString;
Object.prototype.toString = (typeof column == “function”) ? column : function () { return this[column] };
if (direction != null) {
sortdata.sort(compare);
if (!direction) {
sortdata.reverse();
}
}
source.localdata = sortdata;
$(“#jqxgrid”).jqxGrid(‘databind’, source);
Object.prototype.toString = tmpToString;
}

// custom comparer.

var compare = function (value1, value2) {
value1 = String(value1).toLowerCase();
value2 = String(value2).toLowerCase();

try {
var tmpvalue1 = parseFloat(value1);
if (isNaN(tmpvalue1)) {
if (value1 < value2) { return -1; }
if (value1 > value2) { return 1; }
}
else {
var tmpvalue2 = parseFloat(value2);
if (tmpvalue1 < tmpvalue2) { return -1; }
if (tmpvalue1 > tmpvalue2) { return 1; }
}
}
catch (error) {
var er = error;
}
return 0;
};

var source =
{
localdata: data,
sort: customsortfunc,
datatype: “array”,
// updaterow: function (rowid, rowdata, commit) {
// // synchronize with the server – send update command
// // call commit with parameter true if the synchronization with the server is successful
// // and with parameter false if the synchronization failder.
// commit(true);
// },
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
commit(true);
}
};

var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = 0;

$(“#jqxgrid”).bind(‘columnresized’, function (event) {

});

var Numberrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
value = value + 1;
return ‘<div>’ + value + ‘</div>’;
}
$(“#jqxgrid”).bind(‘rowselect’, function (event) {
rowindex = event.args.rowindex;
});
var productNames =
[
“No Action”, “View Details”, “Edit”, “Delete”, “Print”
];
var renderlist = function (row, column, value) {
var buildList = ‘<select id=”Select’ + row + ‘” onChange=”selectionChanged(event)”>’;
for (var i = 0; i < productNames.length; i++) {
if (value == productNames[i]) {
buildList += ‘<option selected=”true”>’ + productNames[i] + ‘</option>’;
}
else {
buildList += ‘<option>’ + productNames[i] + ‘</option>’;
}
}
buildList += ‘</select>’;
return buildList;
}
// TempColumn for edit always
var TempColumn = function (row, column, value) {
var buildList = ‘<input type=”text” id=”txtTempCol’ + row + ‘”/>’;
return buildList;
}
// end of tempcolumn
$(“#jqxgrid”).jqxGrid(
{
width: ‘99%’,
height: ‘99%’,
source: dataAdapter,
//theme: theme,
columnsresize: true,
sortable: true,
pageable: true,
altrows: true,
autoheight: true,
autorowheight: true,
showfilterrow: true,
filterable: true,
enabletooltips: true,
editable: true,
//selectionmode: ‘singlecell’,
// forceFit: true,
//rowNum: 10,
pagesizeoptions: [’10’, ’20’, ’50’, ‘100’],
handlekeyboardnavigation: function (event) {
var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
if (key == 27) {
$(“#jqxgrid”).jqxGrid(‘begincelledit’, 0, ‘Condition’);
return true;
}
},
columns: [
{ text: ‘Condition’, dataField: ‘Condition’, filtertype: ‘textbox’, width: ‘8%’, cellsrenderer: TempColumn, editable: true, hidden: true },
{ text: ‘SrNo’, dataField: ‘Srno’, columntype: ‘number’, filtertype: ‘textbox’, width: ‘5%’, cellsrenderer: Numberrenderer },
{ text: ‘Quo Out No’, dataField: ‘QuotationOutId’, filtertype: ‘textbox’, width: ‘8%’ },
{ text: ‘Ref No’, dataField: ‘RefrenceNumber’, filtertype: ‘textbox’, width: ‘8%’ },
{ text: ‘Quo Out Dt’, dataField: ‘QuotationDate’, filtertype: ‘textbox’, width: ‘8%’ },
{ text: ‘Party Name’, dataField: ‘PartyName’, filtertype: ‘textbox’, width: ‘10%’ },
{ text: ‘Contact Type’, dataField: ‘ContactType’, filtertype: ‘textbox’, width: ‘10%’ },
{ text: ‘Contact Person’, dataField: ‘ContactPerson’, width: ‘10%’ },
{ text: ‘Due Date’, dataField: ‘DueDate’, filtertype: ‘textbox’, width: ‘13%’ },
{ text: ‘Excise Duty’, dataField: ‘ExciseDutyPerc’, width: ‘11%’ },
{ text: ‘Delivery’, dataField: ‘Delivery’, width: ‘11%’ },
{ text: ‘Cst/Vat’, dataField: ‘CstVatPerc’, width: ‘11%’ },
{ text: ‘Price Quote’, dataField: ‘PriceQuote’, width: ‘11%’ },
{ text: ‘Validity’, dataField: ‘Validity’, width: ‘11%’ },
{ text: ‘Payment Terms’, dataField: ‘PaymentTerms’, width: ‘11%’ },
{ text: ‘PF Charges’, dataField: ‘PFCharges’, width: ‘11%’ },
{ text: ‘Freight’, dataField: ‘Freight’, width: ‘11%’ },
{ text: ‘Total Amount’, dataField: ‘TotalAmount’, width: ‘11%’ },
{ text: ‘Remarks’, dataField: ‘Remarks’, filtertype: ‘textbox’, width: ‘21%’ },
{ text: ‘Status’, dataField: ‘Status’, width: ‘11%’ },
{ text: ‘Action’, editable: false, dataField: ”, filterable: false, width: ‘7%’, cellsrenderer: renderlist, pinned: true }
]
});

function deleterow() {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
var commit = $(“#jqxgrid”).jqxGrid(‘deleterow’, id);
}
}

function update() {
$.ajax({
type: “POST”,
url: “AdsarService.asmx/DeleteQuotationOut”,
data: “{quotaionOutId:” + QuotationOutId + “}”,
contentType: “application/json”,
async: false,
error: OnGetMemberError,
success: function (data) {
if (data.d == “true”) {
$(“#jqxgrid”).jqxGrid(‘deleterow’, editrow);
}
}
});
}
}

function update1() {
$.ajax({
type: “POST”,
url: “AdsarService.asmx/DeleteQuotationOut”,
data: “{quotaionOutId:” + QuotationOutId + “}”,
contentType: “application/json”,
async: false,
error: OnGetMemberError,
success: function (data) {
if (data.d == “true”) {
$(“#jqxgrid”).jqxGrid(‘deleterow’, editrow);
}
}
});
}
// for always edit mode
$(‘#jqxgrid’).on(‘rowunselect’, function (event) {
$(“#jqxgrid”).jqxGrid(‘begincelledit’, 0, ‘Condition’);
});

// end always edit mode

Thank You!

[Peter StoevKeymaster]

Hi Meharwan Singh,

In order to create custom column editor using “select” tag or something else, then please look at this sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellcustomediting.htm?arctic. It illustrates how to implement custom editors for jqxGrid.

Best Regards,
Peter Stoev

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

[Meharwan SinghParticipant]

Hi Peter Stoev,
Thank you but i didn’t get source of that grid also exactly what i need I have Four field
1)View
2)Delete
3)Edit
4)Print
These four option i want to Show on Action Column of jQxGrid Which used by Select like this

var renderlist = function (row, column, value) {
var buildList = ‘<select id=”Select’ + row + ‘” onChange=”selectionChanged(event)”>’;
for (var i = 0; i < productNames.length; i++) {
if (value == productNames[i]) {
buildList += ‘<option selected=”true”>’ + productNames[i] + ‘</option>’;
}
else {
buildList += ‘<option>’ + productNames[i] + ‘</option>’;
}
}
buildList += ‘</select>’;
return buildList;
}

And These options are static not dynamic.
On Selection Change Event I want to perform task by their related function.
Even i am success to do this and working fine in previous version of Jqxgrid but here new updated version sucked us and getting problem on this dropdwon select please help me out its urgent.

Thanks and Regard
Meharwan Singh

[Author]

Posts