jQuery UI Widgets › Forums › Grid › on jqxgrid cell click open new jqxgrid in popupwind
Tagged: data grid, datagrid, datagrid component, grid, grid component
This topic contains 3 replies, has 4 voices, and was last updated by Hristo 5 years, 3 months ago.
-
Author
-
on main grid cells click a new grid is open in a popup window but its not showing loading icon while binding data.please help.when i write popup grid code in function its not binding on clcik button .data is not binding and grid become hang.
<script type=”text/javascript”>$(document).ready(function () {
var accountDataTable;
var dataTable;
var AccountNameList = { accountname: ‘dfghjk’, accountname: ‘234567’ };
var AccountCodeList = { accountcode: ’02-01-001-001-00002′, accountcode: ’02-01-001-001-00002′ };
var RefList = [];
var balanceDataTable;////////////////////////////////////////// grid main////////////////////////////////////////////////////////////////////////////////////////////
var data = {};
var code_ = “0”;var source =
{
localdata: data,
datatype: “local”,
datafields:
[
{ name: ‘AccountCode’, type: ‘string’ },
{ name: ‘AccountName’, type: ‘string’ },
{ name: ‘RefNo’, type: ‘string’ },
{ name: ‘Actions’, type: ‘string’ },
{ name: ‘CheqNo’, type: ‘string’ },
{ name: ‘CheqDate’, type: ‘string’ },
{ name: ‘Remarks’, type: ‘string’ },
{ name: ‘RefBillAmt’, type: ‘string’ },
{ name: ‘Amount’, type: ‘number’ }],
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
//CalculateTotal();
},
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);
//CalculateTotal();
},
updaterow: function (rowid, newdata, 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 failed.
commit(true);
//CalculateTotal();
}
};
var isedit = false;
var dataAdapter = new $.jqx.dataAdapter(source);
var jqxGridHeight = 260;
if (screen.height >= 1024)
jqxGridHeight = 300;
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: ‘99%’,
height: jqxGridHeight,
source: dataAdapter,
showtoolbar: true,
showstatusbar: true,
statusbarheight: 25,
showaggregates: true,
columnsresize: true,
editable: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“<div id=\’imgRow\’ style=’margin: 5px;’></div>”);
toolbar.append(container);
container.append(‘‘);
container.append(‘‘);
container.append(‘‘);
container.append(‘‘);
container.append(‘‘);
container.append(‘‘);
$(“#addrowbutton”).jqxButton();
$(“#imgdebitnotelist”).jqxButton();
$(“#WindowRepeat”).jqxButton();
$(“#WindowExcel”).jqxButton();
$(“#attachment”).jqxButton();
$(“#AccountBalance”).jqxButton();},
columns: [
{ text: ”, datafield: ”, width: 18, columntype: ‘number’, cellsrenderer: function () {
return ‘<div style=”width: 100%”></div>’;
}
},
{ text: ‘Account Code’,datafield: ‘AccountCode’,editable: true,cellEdit:true, width: 120 ,columntype: ‘combobox’,
createeditor: function (row, column, editor) {
var list = AccountCodeList;
editor.jqxComboBox({ dropDownHeight: 200, source: list, promptText: “Please Choose:” });
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {//RefNo= [];
$(‘#divdebitnotegrid’).jqxGrid(‘clear’);}
},
{ text: ‘Account Name’, datafield: ‘AccountName’, editable: true,cellEdit:true, width: 150,columntype: ‘combobox’,
createeditor: function (row, column, editor) {
var list = AccountNameList;
editor.jqxComboBox({ dropDownHeight: 200, source: list, promptText: “Please Choose:” });
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {RefNo= [];
$(‘#divdebitnotegrid’).jqxGrid(‘clear’);}
},
{ text: ‘Amount’, datafield: ‘Amount’,cellsformat: ‘d2’, width: 110, cellsalign: ‘right’, aggregates: [‘sum’]},
{ text: ‘Ref. No.’, datafield: ‘RefNo’, width: 100 },
{ text: ‘Action’, datafield: ‘Actions’ , editable: true,cellEdit:true, width: 80,columntype: ‘combobox’,
validation: function (cell, value) {
if (value == “”)
return true;if (value==”NORM” || value==”DFO” || value==”AP”) {
return true;
}
else{
return { result: false, message: “Invalid Action Value” };
}},
createeditor: function (row, column, editor) {
// assign a new data source to the combobox.
var list = [‘NORM’, ‘DFO’, ‘AP’];
editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: “Please Choose:” });
},
// update the editor’s value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == “”)
{
return “”;
}
}},
{ text: ‘Cheq No.’, datafield: ‘CheqNo’, width: 80 },
{ text: ‘Cheq Date’, datafield: ‘CheqDate’,columntype: ‘datetimeinput’,cellsformat: ‘dd-MM-yyyy’, width: 80 },
{ text: ‘Remarks’, datafield: ‘Remarks’ },
{ text: ‘Ref Bill Amt’,width: 110, datafield: ‘RefBillAmt’ }]
});
/////////////////////////////////////////////////////Grid Click Events/////////////////////////////////////////////////////////////////////////////
//////// here i m opening popupwindow with empty grid.
$(“#jqxgrid”).on(“celldoubleclick”, function (event) {
var args = event.args;
var columnindex = args.columnindex;if (columnindex == 4) {
var rowBoundIndex = args.rowindex;
var rowid = $(‘#jqxgrid’).jqxGrid(‘getrowid’, rowBoundIndex);
// @param row id
var data = $(‘#jqxgrid’).jqxGrid(‘getrowdatabyid’, rowid);
$(‘#divdebitnotegrid’).jqxGrid(‘clear’);
$(“#popupaccountcode”).html(data.AccountCode);
$(“#popupaccountname”).html(data.AccountName);
$(“#popuppaymentamount”).html(data.Amount);
$(“#popupselectedtotal”).html(”)
globaltotal = 0;
/// here i m opening second grid in popup window,but empty grid is not showing in popup
$(“#popupwindow2”).jqxWindow(‘open’);}
});///////////////////////////////////////////////////// grid ref////////////////////////////////////////////////////////////////////////////////
var globaltotal = 0;
var DebitNote_data = {};//this is my second grid which i m tring to open in popup window with empty row.then when some button in popup window clcick so it bind data.
function grid(){
$(“#divdebitnotegrid”).jqxGrid(‘clear’);
DebitNote_source =
{
localdata: DebitNote_data,
datatype: “json”,
datafields:
[
{ name: ‘CB’, type: ‘string’ },
{ name: ‘RefNo’, type: ‘string’ },
{ name: ‘RefAmount’, type: ‘number’ },
{ name: ‘Amount’, type: ‘number’ },
{ name: ‘Action’, type: ‘string’ }],
addrow: function (rowid, rowdata, position, commit) {
commit(true);
},
deleterow: function (rowid, commit) {
commit(true);
},
updaterow: function (rowid, newdata, commit) {
commit(true);
}
};
var DebitNote_dataAdapter = new $.jqx.dataAdapter(DebitNote_source);
$(“#divdebitnotegrid”).jqxGrid(
{
width: ‘420px’,
height: ‘370px’,
source: DebitNote_dataAdapter,
showaggregates: true,
columnsresize: true,
editable: true,
showfilterrow: true,
pageable: true,
pagesize: 10,
filterable: true,
showstatusbar: true,
statusbarheight: 25,
columns: [
{ text: ”, columntype: ‘checkbox’, datafield: ‘CB’, width: 50 },
{ text: ‘Ref. No.’, datafield: ‘RefNo’, width: 120, editable: false },
{ text: ‘Ref. Amount’, datafield: ‘RefAmount’, cellsformat: ‘d2’, width: 120, cellsalign: ‘right’ },
{
text: ‘Amount’, datafield: ‘Amount’, cellsformat: ‘d2’, width: 130, cellsalign: ‘right’
},
{ text: ‘Action’, datafield: ‘Action’, width: 50 },
]
});}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///here i am giving data to grid on some button clcik.
$(“#db”).click(function () {
debugger;alert(2);
$(“#divdebitnotegrid”).jqxGrid(‘showloadelement’);
$.ajax({
type: “Post”,
dataType: “json”,
url: “List.ashx”,
data: {
type: ‘GetTest’,
ListType: ‘Payment’
},
success: function (data) {
debugger;
//DebitNote_data = data.AccountANDDebitNote.dataTable;
// DebitNote_source.localdata = data.AccountANDDebitNote.dataTable;
// $(“#divdebitnotegrid”).jqxGrid(‘updatebounddata’, ‘cells’);
//grid();//$(“#divdebitnotegrid”).on(‘bindingcomplete’, function (event) {
// alert(1);
//$(“#divdebitnotegrid”).jqxGrid(‘updatebounddata’, ‘cells’);
$(“#divdebitnotegrid”).jqxGrid(‘hideloadelement’);
//});},
error: function (e) {
alert(“some error” + e.message);
$(“#jqxgrid”).jqxGrid({ disabled: false });
}
});})
$(document).ready(function () {$(‘#db’).bind(“click”, function () {
alert(1);$(“#divdebitnotegrid”).jqxGrid(‘showloadelement’);
$.ajax({
type: “Post”,
dataType: “json”,
url: “List.ashx”,
data: {
type: ‘GetTest’,
ListType: ‘Payment’
},
success: function (data) {
debugger;
DebitNote_data = data.AccountANDDebitNote.dataTable;
$(“#divdebitnotegrid”).jqxGrid(‘clear’);
DebitNote_source =
{
localdata: DebitNote_data,
datatype: “json”,
datafields:
[
{ name: ‘CB’, type: ‘string’ },
{ name: ‘RefNo’, type: ‘string’ },
{ name: ‘RefAmount’, type: ‘number’ },
{ name: ‘Amount’, type: ‘number’ },
{ name: ‘Action’, type: ‘string’ }],
addrow: function (rowid, rowdata, position, commit) {
commit(true);
},
deleterow: function (rowid, commit) {
commit(true);
},
updaterow: function (rowid, newdata, commit) {
commit(true);
}
};
var DebitNote_dataAdapter = new $.jqx.dataAdapter(DebitNote_source);
$(“#divdebitnotegrid”).jqxGrid(
{
width: ‘420px’,
height: ‘370px’,
source: DebitNote_dataAdapter,
showaggregates: true,
columnsresize: true,
editable: true,
showfilterrow: true,
pageable: true,
pagesize: 10,
filterable: true,
showstatusbar: true,
statusbarheight: 25,
columns: [
{ text: ”, columntype: ‘checkbox’, datafield: ‘CB’, width: 50 },
{ text: ‘Ref. No.’, datafield: ‘RefNo’, width: 120, editable: false },
{ text: ‘Ref. Amount’, datafield: ‘RefAmount’, cellsformat: ‘d2’, width: 120, cellsalign: ‘right’ },
{
text: ‘Amount’, datafield: ‘Amount’, cellsformat: ‘d2’, width: 130, cellsalign: ‘right’, validation: function (cell, value) {if (value == “”)
return { result: false, message: “Invalid Amount” };var rowBoundIndex = cell.row;
var rowid = $(‘#divdebitnotegrid’).jqxGrid(‘getrowid’, rowBoundIndex);
var data = $(‘#divdebitnotegrid’).jqxGrid(‘getrowdatabyid’, rowid);
if ((parseFloat(data.RefAmount) > 0 && data.Action == ‘NORM’) && (parseFloat(value) > parseFloat(data.RefAmount) || parseFloat(value) < 0))
return { result: false, message: “Invalid Amount” };
else if ((parseFloat(data.RefAmount) < 0 && data.Action == ‘NORM’) && (parseFloat(value) > 0 || Math.abs(parseFloat(value)) > Math.abs(parseFloat(data.RefAmount))))
return { result: false, message: “Invalid Amount” };/*if(data.Action==’DFO’ && (parseFloat(value)>0 || Math.abs(parseFloat(value)) > Math.abs(parseFloat(data.RefAmount)) ) )
return { result: false, message:”Invalid Amount” };
*/
if ((data.Action == ‘DFO’) && (Math.abs(parseFloat(value)) > Math.abs(parseFloat(data.RefAmount))))
return { result: false, message: “Invalid Amount” };
/*else if( data.Action==’DFO’ && ( parseFloat(value)<0 || Math.abs(parseFloat(value)) > Math.abs(parseFloat(data.RefAmount)) ) )
return { result: false, message:”Invalid Amount” };*/
return true;}
},
{ text: ‘Action’, datafield: ‘Action’, width: 50 },
]
});},
error: function (e) {
alert(“some error” + e.message);
$(“#jqxgrid”).jqxGrid({ disabled: false });
}
});
});});
</script>Hi fatima12,
It is possible that the loading icon is with lower z-index. You can update the CSS setting for the Grid loading icon and set the z-index to a very high value like 99999 i.e higher than the popup window’s z-index.
Best Regards,
Peter StoevjQWidgets Team
https://www.jqwidgets.comHello everyone,
I’ve implemented the tree grid hierarchy from the below link.
https://www.c-sharpcorner.com/article/using-tree-grid-with-asp-net-mvc-4/
Now the thing is I want to add the new column icon as “View” and on click on that particular view cell it should popup the model and show the existing image inside in it.NOTE: In that link the tree grid is generated using with entity framework and i have done without entity framework.
PLease anyone there to help me ??
Hello Gaurav@123,
You could find a similar discussion below that already is started:
https://www.jqwidgets.com/community/topic/jqxscrollview-image-rotate-left-and-right/#post-107126
Also, you will find there some suggestions and hints.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.