Edition data on nested grids

[damianpParticipant]

Hello,

jqwidgets-framework@4.6.2 with Angualar 4 application.
I have jqxGrid with nested jqxGrids and I need to check if cell is editable on nested level. I need to get row identifier and datafield then check in cell dictionary if cell is editable.
As I found there are 2 ways to implement this, maybe more?
1. onCellbeginedit Angular/TypeScript event attached to <jqxGrid (onCellbeginedit)="onCellbeginedit($event)" ...
In this case I have access to row data but I don’t know how to disable edition of cell.
Is any possibility to set something like event.cancel = true to prevent edition?
2. cellbeginedit attached to column cellbeginedit = (row, datafield, columntype, value): boolean
There I can disable edition by return false but I don’t know on which nested jqxGrid I try to edit cell.
Is any possibility to get sender reference?

On main level I can use second solution, because I have one reference.

mainItemCellBeginEdit = (row, datafield, columntype, value): boolean => {
    let dispRow = this.gridReference.getrowdata(row);
    let dataRow = this.mainItems.find(r => r.id === dispRow.id);
    if (dataRow != null) {
      return this.isCellEditable(datafield, dataRow);
    }
    return false;
}

Thank you for advice.

[HristoParticipant]

Hello damianp,

You should have some condition from which you will decide to stop editing a cell.
I would like to suggest you look at this demo, that shows how to prevent from editing.
It is the same approach that you start mention with cellbeginedit.
On some way that you decide which row will stop to edit then you could add to an array this row.
This collection you could use in the ‘cellbeginedit’ callback and disable these rows.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[damianpParticipant]

Hello Hristo,

Thank you for response. I see that demo earlier, but my problem is different.
I have opened two nested grids see that demo. And I have expanded two rows, next I want to make changes on one of nested grid.
Nested grids was created with the same columns collection.
When I have cellbeginedit = function (row, datafield, columntype, value) I see that there is row number, which column name, type and value.
But I need to know from which nested jqxGrid event was fired up.

Regards
damianp

[HristoParticipant]

Hello damianp,

Could give us more details of the scenario that you try?
You could add custom callback in the moment when init each one nested grid (as in this row if (grid != null) you could add another statement if (grid[0].id == 'grid1') { //Do something }).

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[damianpParticipant]

Hello Hristo,

Base on http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/nestedgrids.htm
I’ve created simple demo.

See on Plunker

scenario:
1. Expand two rows.
2. Edition of ShippedDate depends on ShipCountry – iseditable attached to column ShippedDate.

var iseditable = function (row, datafield, columntype, value) {
  var country = $('#whichNestedGrid').jqxGrid('getrowdata', row).ShipCountry;
  if (country === 'USA') {
	return true;
  }
  return false;
}

Which Nested Grid is currently edited? From which “id” (#whichNestedGrid) I should get row data?

Regards

[HristoParticipant]

Hello damianp,

Please, take a look at this example:

var initrowdetails = function (index, parentElement, gridElement, record) {
	var id = record.uid.toString();
	var grid = $($(parentElement).children()[0]);
	nestedGrids[index] = grid;
	var filtergroup = new $.jqx.filter();
	var filter_or_operator = 1;
	var filtervalue = id;
	var filtercondition = 'equal';
	var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
	// fill the orders depending on the id.
	var ordersbyid = [];
	for (var m = 0; m < orders.length; m++) {
		var result = filter.evaluate(orders[m]["EmployeeID"]);
		if (result)
			ordersbyid.push(orders[m]);
	}
	var orderssource = { datafields: [
		{ name: 'EmployeeID', type: 'string' },
		{ name: 'ShipName', type: 'string' },
		{ name: 'ShipAddress', type: 'string' },
		{ name: 'ShipCity', type: 'string' },
		{ name: 'ShipCountry', type: 'string' },
		{ name: 'ShippedDate', type: 'date' }
	],
		id: 'OrderID',
		localdata: ordersbyid
	}

	var currentNestedGrid = '';

	var iseditable = function (row, datafield, columntype, value) {
	  //var country = $('#whichNestedGrid').jqxGrid('getrowdata', row).ShipCountry;
	  var country = [];
	  if(currentNestedGrid == 'grid1') {
		var rowDataForSpecificGrid = $('#' + currentNestedGrid).jqxGrid('getrowdata', row);
		// Do something
	  }
	  
	  if (country === 'USA') {
		return true;
	  }
	  return false;
	}
	var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
	if (grid != null) {
	  currentNestedGrid = grid[0].id;
	  if(currentNestedGrid == 'grid1') {
		// Do something
	  }
	  
		grid.jqxGrid({
			source: nestedGridAdapter, width: 780, height: 200,
			editable: true, selectionmode: 'singlecell',
			columns: [
			  { text: 'Ship Name', datafield: 'ShipName', width: 200, editable: false },
			  { text: 'Ship Address', datafield: 'ShipAddress', width: 200, editable: false  },
			  { text: 'Ship City', datafield: 'ShipCity', width: 150, editable: false  },
			  { text: 'Ship Country', datafield: 'ShipCountry', width: 150, editable: false},
			  { text: 'Shipped Date', datafield: 'ShippedDate', width: 200, cellbeginedit: iseditable }
		   ]
		});
	}
}

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts