[Klaus HParticipant]

Hello Dimitar,

I have tried that:

var cell = $("#jqxgrid").jqxGrid('getcellatposition', event.args.pageX, event.args.pageY);
rowindex = cell.row;
var data = $('#jqxgrid').jqxGrid('getrowdata', rowindex);
if(data.attribute == 3)
{
	$(this).jqxDragDrop('data', $('#jqxgrid').jqxGrid('getrowdata', rowindex));
}

The behaviour stays the same, the cursor obviously has the drag and drop sign and I can still move the cell for some reason, but not remove it from the source grid and add to the target grid as it is supposed to be.

I would still prefer a solution like my first approach, is there any event or behaviour that I can attach the same code I used in rendered for when rows are rendered due to scrolling or something like that?

Kind Regards
Klaus

[Klaus HParticipant]

Thank you, I will try that.

[Klaus HParticipant]

Hello Peter,

thank you for the reply. What would you suggest as a solution then, because database fields have a length and there is no flexibility. Check afterwards with cellendedit cellvaluechanging?

Kind Regards
Klaus

[Klaus HParticipant]

Hello Akshatha Raju,

I have used the Grid in an example to get all the Data from the grid, put it in one JSON object and transfer all the data in one request to the server. It’s all the same, you just use the JSON.stringify on an array. Here is how I did that.

var rows = $('#jqxGrid').jqxGrid('getrows');
$.ajax({
	url: "YourURL",
	cache: false,
	type: "POST",
	contentType: "application/json; charset=utf-8",
	async: false,
	dataType: "json",
	data: JSON.stringify(rows)
	}).done(function( data )
	{
		//your code here
	}).fail(function(){alert("fail");});

And in JAVA on the server side, you can read the String with request.getReader() via a String Buffer and then build a JSONArray object from that string and then process the data. I hope that helped and I understood your problem.

[Klaus HParticipant]

Hello Peter,

thank you for the additional information, I will keep that in mind.

[Klaus HParticipant]

Hello Peter,

thank you for the feedback, I don’t think a simple css solution would work, because it would need to be conditionial (if the cell has the classes jqx-grid-cell-selected and a class mandatory via the cellclassname property).

The closest I came to a solution was using two classes. One dummy class, I set to the column via cellclassname. Then, in the rowselect event I would trigger a setTimeout function because when the event is fired, the class is not yet selected and the columns don’t have the jqx-grid-cell-selected class. In the timeout function I would loop through all elements with the class jqx-grid-cell-selected and check if they have the dummy class and add the mandatory class. That worked well – but once I scroll in the grid, there is some kind of rendering going on and my change is gone.

Kind Regards
Klaus

Edit: My mistake, CSS can handle a rule when an element has two classes:

div.jqx-grid-cell-selected.mandatory
{
	border-color: 1px solid red;
}

I did not know that and never needed that before. So problem solved, Thank you again!

[Klaus HParticipant]

Hi,

you have to know the attribute name of the column as defined in the datasource, which looks something like this:

var source =
{
	localdata: data,
	datatype: "array",
	datafields:
	[
		{ name: 'firstname', type: 'string' },
		{ name: 'lastname', type: 'string' },
		{ name: 'productname', type: 'string' },
		{ name: 'available', type: 'bool' },
		{ name: 'quantity', type: 'number' },
		{ name: 'price', type: 'number' },
		{ name: 'date', type: 'date' }
	],
	updaterow: function (rowid, rowdata, commit) {
		// synchronize with the server - send update command   
		commit(true);
	}
};

The column then may or may not be displayed in the grid itself:

$("#jqxgrid").jqxGrid(
{
	columns: [
	  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
	  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
	  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
	  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellbeginedit: cellbeginedit},
	  { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd', cellbeginedit: cellbeginedit, 
		  validation: function (cell, value) {
			  var year = value.getFullYear();
			  if (year >= 2013) {
				  return { result: false, message: "Ship Date should be before 1/1/2013" };
			  }
			  return true;
		  }, cellsrenderer: cellsrenderer
	  },
	  { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput', 
		  validation: function (cell, value) {
			  if (value < 0 || value > 150) {
				  return { result: false, message: "Quantity should be in the 0-150 interval" };
			  }
			  return true;
		  },
		  initeditor: function (row, cellvalue, editor) {
			  editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
		  }, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer
	  },
	  { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
		  validation: function (cell, value) {
			  if (value < 0 || value > 15) {
				  return { result: false, message: "Price should be in the 0-15 interval" };
			  }
			  return true;
		  },
		  initeditor: function (row, cellvalue, editor) {
			  editor.jqxNumberInput({ digits: 3 });
		  }, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer
	  }
	]
});

That does not really matter. What you get back from getrowdata is a data object that is used to represent the row. So let’s assume I want to check available – First, here’s the example from the website:

var cellbeginedit = function (row, datafield, columntype, value) {
	if (row == 0 || row == 2 || row == 5) return false;
}

Change this to:

var cellbeginedit = function (row, datafield, columntype, value) {
	var data = $('#jqxGrid').jqxGrid('getrowdata', row);
	if(data.available == false)
		return false;
}

Use the three columns that you need to evaluate and then it should work, if you use the cellbeginedit: cellbeginedit attribute in the grid columns definition for every editable field.

[Klaus HParticipant]

Hello,

if I may – inside the cellbeginedit event, you can use args.rowindex to access the rowdata with

var data = $('#jqxGrid').jqxGrid('getrowdata', args.rowindex);

and then you can check the value with data.attributename for each of the columns.

[Klaus HParticipant]

Hi Peter,

the initrowdetails method is called again, after I force the grid to be rendered again (this is for layout reasons). If I delete a row in a nested grid and handle the deleterow just in the subset source (which in your nested grid example would be orderssource) and the grid is rendered again without reloading, I need to remove the record from the original datasource (in your example the ordersDataAdapter).

What is the best way to do this? I haven’t found an example on how to remove a record from a dataadapter? Or do I have to remove it via .records?

Kind regards
Klaus

[Klaus HParticipant]

Hello Peter,

the data adapter for the nested grid is built outside of the initrowdetails, the initrowdetails just selects the records and make a local source of the subset of necessary data.

But my thinking was off, I assumed the initrowdetails is called and the data selected each time the row details are opened and shown and hence I would need to delete the record from my original adapter. But my testing (without the syncronization to the database yet) after your comment shows if the data is deleted from my local source, that’s the right place to call the deleterow method.

May I say, nested grids are a very cool feature.

Kind Regards
Klaus

[Klaus HParticipant]

Hello,

I have a followup question to nested grids and didn’t want to open a new thread for that.

For bulding a nested grid I take the records of an adapter, filter the records to my need into a new array, make a source out of this subset and define the subset as source for the new grid. The result is that I have a resulting number of grids with the same id (“grid” ).

Now if I were to implement a cellsrenderer that generates me a delete button in each row of the nested grids and I would have the identifier of this rowdata, is there any way I can delete the data from that nested grid (would each nested grid have to have a seperate id for that?) and thereby the subset of the adapter records, the adapter records and thereby trigger the deleterow method of my original source to submit a request to the database.

Is there any way to accomplish that?

Kind Regards
Klaus

Edit: The ids of the nested grids are no longer a problem, that would be easy to fix in initrowdetails. So I would be able to remove the row from the grid, but can I trigger the deleterow method from the adapter?

[Klaus HParticipant]

Hello Peter,

thaknk you for the reply. I knew that the grids are independet, I thought maybe it is a general problem with the nested grid.

I used the nested grid example from your website to build my nested grid, but modified it by using two json requests. Then I wanted to build an example with the same effect using local variables for you to test and I had the same effect there. But before posting it, I looked at the text code some more and saw this section:

var orderssource = { datafields: [
    { name: 'EmployeeID' },
    { name: 'ShipName' },
    { name: 'ShipAddress' },
    { name: 'ShipCity' },
    { name: 'ShipCountry' },
    { name: 'ShippedDate' }
],

I added the types of the columns to this section and then it worked. I guess my date object was cast to string somewhere in the process. Maybe it would be good to add the types in the example, too – makes it easier to understand and to avoid the same mistake I made.

Kind Regards
Klaus

[Klaus HParticipant]

Hello Peter,

1. thank you very much, I will try it.
2. then you should fix the text in the API

Kind Regards
Klaus

[Klaus HParticipant]

Hello Peter,

no problem, I was just curious if that was where the deleterow parameter -1 came from, but that was not the case.

I had a second (almost similar) grid and the behaviour was the same, but the workaround also works there.

Kind Regards
Klaus

[Klaus HParticipant]

Hello Peter,

I succeeded in changing the uid for testing purposes with getrowdata and that mydata.uid, but that did not change the behaviour.

The rowid in the updaterow call is my id with uid beeing the identical value as my id colum and with uid beeing -1.

The rowid in the deleterow call is always -1 no matter what value is in uid according to the object given to me by getrowdata.

I seem to have a workaround now (with no idea why it didn’t work the first time I tried – see me edit above), so it’s not a big deal, but it is weird nonetheless.

Kind Regards
Klaus

[Author]

Posts