[Solved] Changes to make Datagrid show ediatable fields always

[Darrel]

Hello,

I have an easyui datagrid that works great. But now however I want to make it editable, so I referred the example on the Demo page in the datagrid section: "Row Editing in DataGrid".

However I had wanted that the datagrid would always show the textboxes for editing for all the rows of the datagrid, where the user will not have to select any row to display the editable textboxes as shown in the demo. Basically I have two questions:

1) Is it possible to achieve the same and how??

2) Also how will I be able to fetch the data from the edited textboxes in the grid on an event of submitting the form that contains the datagrid??

Regards,
Darrel

[stworthy]

If you really want to do that, you can call 'beginEdit' method on all rows.

Code:

$('#dg').datagrid({
  onLoadSuccess:function(data){
    for(var i=0; i<data.rows.length; i++){
      $(this).datagrid('beginEdit', i);
    }
  }
});

The cell editing may be more suitable for you. It allows you navigate all the cells and edit them. This extension can be downloaded from http://www.jeasyui.com/extension/datagrid_cellediting.php

[Darrel]

Hello stworthy,

Thanks a lot for your reply. I did try the solution you gave, but it did not work for me since I had to perform some additional validations and stuff on the editable fields that would be visible in the datagrid.

So thinking of a solution to solve the problem I came up with my own. I would like to share it with all of you.

I was going through the documentation section for the datagrid on the EasyUI website, when I suddenly came upon the "formatter" column property of the datagrid. I had used it earlier to make a hyperlink on the datagrid titled as "Using Formatter in JSON object with Datagrids" in the Forums section (reference to same is: http://www.jeasyui.com/forum/index.php?topic=5480). So I thought, why not make use of this property to create my dynamic textboxes like I was able to do with the help of the earlier mentioned url link. So a few days in the working, I came up with this solution. I managed to create a json object as shown below in my java code by identifying the columns for which I wanted to create as an editable textbox on the datagrid:

JSON object:

Code:

{"COL_LIST":
       {"COL_DATA":
       [
              {"field":"CHKSELECT","title":"Select","hideCheckbox":"true","checkbox":"true"},
              {"field":"col_0","title":"Column 0","width":"12.5%","sortable":"true","align":"left","halign":"center"},
              {"field":"col_1","title":"Column 1","width":"12.5%","sortable":"true","align":"left","halign":"center"},
              {"field":"col_2","title":"Column 2","width":"12.5%","sortable":"true","align":"left","halign":"center"},
              {"field":"col_3","title":"Column 3","width":"12.5%","sortable":"true","align":"left","halign":"center"},
              {"field":"col_4","title":"Column 4","width":"12.5%","sortable":"true","align":"left","halign":"center","formatter":"createTextbox"},
              {"field":"col_5","title":"Column 5","width":"12.5%","sortable":"true","align":"left","halign":"center"},
              {"field":"col_6","title":"Column 6","width":"12.5%","sortable":"true","align":"left","halign":"center","formatter":"createTextbox"},
              {"field":"col_7","title":"Column 7","width":"12.5%","sortable":"true","align":"left","halign":"center"}
       ]
       }
}

Please Note: The "formatter" section in the above JSON object for the fields that I want to make editable!!!

Once this was done, next I managed to create the datagrid in my webpage/javascript file as follows:

Code:

var ajax_url= "your_url"; //ajax url to load the grid data

data = "";//the above mentioned JSON object is stored here. Please note that this is related to the column of the datagrid and not the actual data

//parsing the data to JSON type
data = JSON.parse(data);

//time to iterate and identify the columns that use the formatter property
var columns = data.COL_LIST.COL_DATA;

var col_length = columns.length;
for(var key=0; key < col_length; key++)
{
	columns[key].formatter = eval(columns[key].formatter);
}

var col_data = [columns];		//once done iterating, store the columns after formatting.

//call to load the datagrid and it's data
$('#dg').datagrid({
	columns: col_data,
	url: ajax_url,
	singleSelect:false,
	pagination: true,
	pagePosition: 'both',
	pageSize:10,
	multiSort:true,
	remoteSort:false,
	striped:true,
	selectOnCheck: false,
	checkOnSelect: false,
	onCheck:onCheck,
	onUncheck:onUncheck,
	onLoadSuccess:function(){
		alert("Grid Has Loaded Successfully");
	}
});

The ajax_url in the above mentioned code, returns the JSON object as follows:

Code:

{
	"total": 2,
	"rows": [{
		"chkBoxVal": "45;ABCD",
		"col_0": "45",
		"col_1": "ABCD",
		"col_2": "TEST",
		"col_3": "",
		"col_4": "strFld_10#18#Hello World",
		"col_5": "23\/07\/2008",
		"col_6": "strFld_11#30#Hello and Bye World",
		"col_7": "QWERTY",
		"col_8": "1"
	}, {
		"chkBoxVal": "46;EFGH",
		"col_0": "46",
		"col_1": "EFGH",
		"col_2": "TEST",
		"col_3": "",
		"col_4": "strFld_20#18#Hello World 2",
		"col_5": "23\/07\/2008",
		"col_6": "strFld_21#30#Hello and Bye World 2",
		"col_7": "QWERTY",
		"col_8": "2"
	}]
}

That's it for loading the datagrid. However, please note that I needed to create a function that is used as the value against the "formatter" key in the JSON object. The javascript function that I created was similar to this:

Code:

function createTextbox(value, row, extra)
{
	var fieldVal = value;
	var arr_field_val = fieldVal.split("#");
	var field_id = arr_field_val[0];
	var field_size = arr_field_val[1];
	var field_value = arr_field_val[2];

	var htmlString = '<input type="text" id="' + field_id + '" name="'+ field_id + '" style="width:100%" ' +
		' onchange=\'doSomething("' + field_id + '");\' value ="' + field_value + '">';

	console.log("createTextbox htmlString: " + htmlString);

	return htmlString;
}

Now as I have finished explaining the way I came about this solution, go ahead and customize it as your own. Hope this helps others.

Again thanks a lot stworthy for your reply. It was due to your reply that I was able to conceive that the solution is possible!!!!

Regards,
Darrel.