[MickaGauMember]

Thanj you very much.
It works fine

[MickaGauMember]

Hi Peter,
you are right, I use a custom cell editor based on a ddl for the datagrid.
Find below the js to create grid and his contextual menu. Don’t know if it can help.

	$("#jqxgridDT").jqxGrid(
                {
                	width: 500,
                	source: dataAdapter,
                	editable: true,
                	theme: 'ui-sunny',
                	columnsresize: true,
                	editmode: 'click',
                	autoheight: true,
                	altrows: true,
                	columns: [
                      { text: '@Resource.Txt_DT_Entry', dataField: '@Resource.Txt_DT_Entry', displayfield: 'DTCID', align: 'center', width: 170, columntype: 'dropdownlist', cellclassname: cellclass,
                      	createeditor: function (row, value, editor) {
                      		editor.jqxDropDownList({ source: ddlDTContentAdapter, displayMember: 'DTCode', valueMember: 'DTCID', autoOpen: true });
                      	},
                      	// 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 oldvalue;
                      	}
                      },
											{ text: '@Resource.txt_DurationMinutes', dataField: '@Resource.txt_DurationMinutes', columntype: 'numberinput', align: 'center', width: 75, cellclassname: cellclass,
												createeditor: function (row, cellvalue, editor) {
													editor.jqxNumberInput({ decimalDigits: 0, digits: 3, spinButtons: false });
												}
											},
                      { text: '@Resource.Txt_ProdMstr_STime', dataField: '@Resource.Txt_ProdMstr_STime', align: 'center', width: 70, cellclassname: cellclass,
                      	validation: function (cell, value) {
                      		if (getCookie("_culture") == "fr-FR")
                      			return /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(value);
                      		else
                      			return /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(value);
                      	}
                      },
                      { text: '@Resource.Txt_ProdMstr_ETime', dataField: '@Resource.Txt_ProdMstr_ETime', align: 'center', width: 70, cellclassname: cellclass,
                      	validation: function (cell, value) {
                      		if (getCookie("_culture") == "fr-FR")
                      			return /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(value);
                      		else
                      			return /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(value);
                      	}
                      }
                    ]
                });
		$("#addrowbutton, #deleterowbutton").jqxButton({ theme: 'ui-sunny' });
		$("#addrowbutton").on('click', function () {
			var commit = $("#jqxgridDT").jqxGrid('addrow', null, {});
		});
		$("#deleterowbutton").on('click', function () {
			var selectedrowindex = $("#jqxgridDT").jqxGrid('getselectedrowindex');
			var rowscount = $("#jqxgridDT").jqxGrid('getdatainformation').rowscount;
			if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
				var id = $("#jqxgridDT").jqxGrid('getrowid', selectedrowindex);
				var commit = $("#jqxgridDT").jqxGrid('deleterow', id);
			}
		});
		// create context menu
		var contextMenuDT = $("#GridContextMenuDT").jqxMenu({ width: 200, height: 60, autoOpenPopup: false, mode: 'popup', theme: 'ui-sunny' });
		$("#jqxgridDT").on('contextmenu', function () {
			return false;
		});
		// handle context menu clicks.
		$("#GridContextMenuDT").on('itemclick', function (event) {
			var args = event.args;
			var rowindex = $("#jqxgridDT").jqxGrid('getselectedrowindex');
			var rowvalue = $('#jqxgridDT').jqxGrid('getrowdata', rowindex);
			if ($.trim($(args).html()).indexOf("Dlg_DTAdd") >= 0)
				var commit = $("#jqxgridDT").jqxGrid('addrow', null, {});
			else if ($.trim($(args).html()).indexOf("Dlg_DTDelete") >= 0) {
				var rowid = $("#jqxgridDT").jqxGrid('getrowid', rowindex);
				$("#jqxgridDT").jqxGrid('deleterow', rowid);
			}
		});
		$("#jqxgridDT").on('rowclick', function (event) {
			if (event.args.rightclick) {
				$("#jqxgridDT").jqxGrid('selectrow', event.args.rowindex);
				var scrollTop = $(window).scrollTop();
				var scrollLeft = $(window).scrollLeft();
				contextMenuDT.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
				return false;
			}
		});

And below is the div which is appended at the body and not remoived once the destroy method is called

<div id="menuWrapperGridContextMenuDT" class="jqx-menu-wrapper" style="z-index:20000; border: none; background-color: transparent; padding: 0px; margin: 0px; position: absolute; top: 0; left: 0; display: block; visibility: visible;">

Let me know if you need more info
Thanks

Best regards
Mickael

[MickaGauMember]

Hello
i also use jqxmenu on datagrid displayed in a dialog box.
On the beforeclose event of the dialog, i do a destroy

$(".openDialogBtn, .openDialogLink").live("click", function (e) {
		//Below code will prevent default action from occuring when openDialog anchor is clicked
		e.preventDefault();
		//This is the actual implementation of the dailog
		$("<div></div>")
		//To the div created for dialog we will add class named dialog
		//this is done so that we can refer to the dialog later
		//we will see this in a short while why it is important
					.addClass("dialogMGA")
		//add attribute add id attribute
		//note id attribute is assigned the same value as data_dialog_id
		//attribute in openDialog anchor
					.attr("id", $(this).attr("data_dialog_id"))
		//below code appends this div to body
					.appendTo("body")
		//below code describes the attribute for the dialog
					.dialog({
						//below code assigns title to the dialog
						//here we use same title as data_dialog_title attribute
						//in openDialog anchor tag
						title: $(this).attr("data_dialog_title"),
						width: $(this).attr("data_dialog_Width"),
						height: $(this).attr("data_dialog_Height"),
						//this will append code to close the dialog
						//and also put close cross(x) in dialog
						//we press ESC key in keyboard will also close dialog
						close: function () {
							$(this).remove();
						},
						beforeClose: function( event, ui ) {
											$('.jqxGridMGADlg').jqxGrid('destroy');
											$('.ctxMenuDlgMGA').jqxMenu('destroy');},
						//below code defines that the dialog is modal dialog
						modal: $(this).attr("dialog_Modal")
					})
		//below code says take href from openDialog anchor
		//which is ActionURL and load it to the modal dialog
					.load($(this).attr("href"));
	});

I checked and the code is effectively called but i still have div with class => jqx-menu-wrapper
As you see i also use a jqxgrid with a column ddl type
$(‘.jqxGridMGADlg’).jqxGrid(‘destroy’);

After destroy, i still have

<div id="listBoxdropdownlisteditorjqxgridDTSaisirarret" style="overflow: hidden; background-color: transparent; border: medium none; position: absolute; display: none; width: 193px; height: 225px;">

Is there something i do wrong?

Thank you.

PS i use 3.0.2, firefox 23.0.1, aspnet mvc 4.0 vs2010

[MickaGauMember]

Better solution as it put the cell in edit mode, in the addrow method of the jqxgrid source

addrow: function (rowid, rowdata, position, commit) {

commit(true);
var columndatafield = $(“#jqxgridSC”).jqxGrid(‘getcolumnat’, 0).datafield;
$(“#jqxgridSC”).jqxGrid(‘begincelledit’, rowid, columndatafield);
}

[MickaGauMember]

Hello,
finally i used following solution

var rows = $(‘#jqxgridSC’).jqxGrid(‘getrows’);
var columndatafield = $(“#jqxgridSC”).jqxGrid(‘getcolumnat’, 0).datafield;
$(“#jqxgridSC”).jqxGrid(‘selectcell’, rows.length – 1, columndatafield);

Let me know if there is a better solution

Thank you

[MickaGauMember]

Hello Peter,
it works fine with jqxwindow.
I don’t know how to set this topic as solved.

Thank you
Mickael

[Author]

Posts