Making column Read Only/Disabled

Ebbs

Hi All,

I have a fully functional jeditable table. I got a request a week ago to make one specific column non - editable/read only/disabled. However, I need all the other colums to retain the original jeditable functionallity, that when the user clicks on a cell, it should be editable in a textbox.

I have gone through all the properties, examples, searches on this site and google searches I can think of, but have come up empty handed.

Can anyone help me?

Alan

I've also been thinking about this and have come up with the following solution.

Add a class of 'readonly' to those cells that you don't want to be editable and then, if your code is like mine, change the bit that reads;
[code]
$('td', this.fnGetNodes()).editable( 'datatables.asp', {
[/code]
etc.

to [code]
$('td[class!="readonly"]', this.fnGetNodes()).editable( 'datatables.asp', {
[/code]

This has the effect of only making those cells without a class of readonly as editable.

Regards,

Alan.

Ebbs

Awesome, thanks Alan! That did the trick :)

Ebbs

Okay, I spoke a little too soon.

When I add a new row to the table, that new row ignores the readonly class.

The part that works is:
[code]
$(function () {
$(document).ready(
function () {

var oTable = $('#example').dataTable({
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bLengthChange": false,
"bSearchable": false,
"bProcessing": true,
"bStateSave": true,
"bAutoWidth": false,
"aoColumns": [{ "bVisible": false }, {}, {}, {}, {}]
});

$('td[class!="readonly"]', oTable.fnGetNodes()).editable('update_resources.aspx', {
"callback": function (sValue, y) {
var aPos = oTable.fnGetPosition(this);
var result = jQuery.parseJSON(sValue);

oTable.fnUpdate([result["ID"], result["Resource"], result["QTY"], result["HRS"], result["Comments"]], aPos[0], aPos[1]);
},
"submitdata": function (value, settings) {
return {
"column": oTable.fnGetPosition(this)[2],
"row_info": oTable.fnGetData(oTable.fnGetPosition(this)[0]).toString()
};
},
"height": "14px"
});
});
});
[/code]
As you can see, I do some serverside processing. I also have an Add button to add a new row. I don't want the user to be able edit the first available column, so that's why I want it read only. When I add a new row though, the column is still fully editable.

I tried adding the sClass property, but it seems to just ignore it.

The code as I have it now for the button is:
[code]
function addbutton() {
var oTable = $('#example').dataTable();

// Adds new row to table
var a = oTable.fnAddData(['0_0', 'New Resource', '0', '0.0', 'Please change a value to save']);

// Adds JEditable Handle to the table
$('td[class!="readonly"]', oTable.fnGetNodes()).editable('update_resources.aspx', {
"callback": function (sValue, y) {
var aPos = oTable.fnGetPosition(this);
var result = jQuery.parseJSON(sValue);

oTable.fnUpdate([result["ID"], result["Resource"], result["QTY"], result["HRS"], result["Comments"]], aPos[0], aPos[1]);
},

"submitdata": function (value, settings) {
return {
"column": oTable.fnGetPosition(this)[2],
"row_info": oTable.fnGetData(oTable.fnGetPosition(this)[0]).toString()
};
}
});
}
[/code]

Any ideas?

Alan

Hmm. I've not got round to adding the Add row button to my code yet. It's on my todo list. Are you sure that the new row has the readonly class associated with the correct cell? Do you need to call the fnDrawCallback function to redraw the table after adding the new row?

I was planning to have the Add Row button display a form in a dialog box that entered details into the database first and on success read that new record into the table. I'll have a play with this over the next couple of days and get back to you.

Alan.

Ebbs

I tried two ways:

1. I explicitly add the class to the td in the html as in the example above. ()
2. I added { "sClass": "readonly" } to the aoColumns property.

The readonly class is defined as a empty class:
.readonly
{
}

I think I understand why the first one doesn't work: I'm adding my new row with JSON. I'm not sure if there is a way to add properties to a new row with JSON when I am doing a oTable.fnUpdate?

I think the second method worked the same way as the first one: When I loaded the page for the first time, the column I expected to be readonly was actually readonly, but when I added the new row one of 2 things happened:
1. Either I added the row and instantiated it with var oTable = $('#example').dataTable(); and this would have the same result as no 1 above.
2. Or I added the new row with
var oTable = $('#example').dataTable("aoColumns": [{ "bVisible": false }, { "sClass": "readonly" }, {}, {}, {}]);
and the new row would still have the column that should be readonly as editable.

The reason I don't use the dialog box you spoke of earlier is that I was having problems with it and materpages in ASP.net.

I've not really used the fnDrawCallback function before. I'll look into it.

Would you like me to set up a demo project which I could email to you so you could see exactly what I am trying to do?

Alan

I've had a quick play with the sClass function and couldn't get it to work as I would have expected. As you might have guessed I'm new to DataTables and am still feeling my way around. I'm populating my table initially by querying a database in standard ASP / ADO and then writing the table. As I'm doing so I simply add the class 'readonly' to my rid column as I don't want the record id to be changed.

It might be useful to see your demo project and hopefully, between the two of us, we can make some progress. I'm not going to have too much time though over the next couple of days though as I'm now involved in another project.

Ebbs

I think the two of us are basically on the same level with datatables. It sounds like we're doing the same thing with our datatables, but I'll just make up a static html grid for demo purposes.

Okay, cool. So how do I contact you?

Alan

Thanks for the email. I'll look forward to seeing the code.

allan

Hi Alan, Ebbs,

I think you are really code with your code there, it just looks like the jQuery selector for the 'not' that is tripping it up. I've just tried the following modification of my server-side processing with jEditable example and it appears to do the job nicely:

[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/server_processing.php",
"fnDrawCallback": function () {
$('#example tbody td:not(.noteditable)').editable( '../examples_support/editable_ajax.php', {
"callback": function( sValue, y ) {
/* Redraw the table from the new data on the server */
oTable.fnDraw();
},
"height": "14px"
} );
},
"aoColumnDefs": [
{ "sClass": "noteditable", "aTargets": [0] }
]
} );
} );
[/code]
Regards,
Allan

Ebbs

Hi Allan,

Thank you for your response. It helped somewhat by showing me some code that I unecessarily included, but my problem still persists.

I slightly modified my code with yours to instantiate the table:
[code]
$(document).ready(
function () {
var oTable = $('#example').dataTable({
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bLengthChange": false,
"bSearchable": false,
"bProcessing": true,
"bStateSave": true,
"bAutoWidth": false,
"aoColumns": [{ "bVisible": false }, {}, {}, {}, {}],
"fnDrawCallback": function () {
$('#example tbody td:not(.readonly)').editable('update.aspx', {
"callback": function (sValue, y) {
/* Redraw the table from the new data on the server */
var aPos = oTable.fnGetPosition(this);
var result = jQuery.parseJSON(sValue);

oTable.fnUpdate([result["A"], result["B"], result["C"], result["D"], result["E"]], aPos[0], aPos[1]);

oTable.fnDraw();
},
"submitdata": function (value, settings) {
return {
"column": oTable.fnGetPosition(this)[2],
"row_info": oTable.fnGetData(oTable.fnGetPosition(this)[0]).toString()
};
},
"select": true,
"height": "14px"
});
}
});
});
[/code]

It works perfectly for the table when it is instantiated (As in all the columns are editable except the one I would like to keep read only)

However, the problem comes in when I add a new line with the following code:
[code]
+ resource:   

  


function addbutton() {
var oTable = $('#example').dataTable();

// Adds new row to table
var a = oTable.fnAddData(['New Sample A', $('#txtNewResource').val(), 'New Sample C', 'New Sample D', 'New Sample E']);
}

[/code]
The way I understand it, with the line [code]var oTable = $('#example').dataTable();[/code], all the properties if the table shoulkd be inherited into the oTable object, so when you pass it a new row with fnAddData, it will automatically assume those properties?

How do I add this new line so that the second column is read only?

If you feel it is necessary, I could send you the demo solution that I am working on?

Thanks
Ebbs

allan

From your code example you aren't setting sClass - therefore the cells won't have the 'readonly' class. You could try adding the class like this:

[code]
"aoColumnDefs": [
{ "sClass": "readonly", "aTargets": [1] }
]
[/code]

Ebbs

That's brilliant! Kinda makes me feel stupid as I have looked at something similar before :P

Thanks for an awesome plugin! I will definitely be using your services in the future...

allan

Excellent to hear that does the job :-). Look forward to hearing how you use DataTables in future.

Regards,
Allan

rajsir

I tried with "aoColumnDefs": [
{ "sClass": "readonly", "aTargets": [1] }
] --- but the column still editable... I dont know where I am going wrong...

this is my full code:


$(document).ready(function() {
/* Init DataTables */
oTable = $('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "processor?action=select&table=acctrollups",
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true
}).makeEditable({
sUpdateURL: "processor?action=update&table=acctrollups",
sUpdateHttpMethod: "POST",
sAddURL: "processor?action=new&table=acctrollups",
sAddHttpMethod: "POST",
sDeleteHttpMethod: "POST",
sDeleteURL: "processor?action=delete&table=acctrollups",
"aoColumns": [ {
},

{
cssclass: "required",
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'submit',

},
{
cssclass: "required",
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'submit',

}],
"aoColumnDefs": [
{ "sClass": "readonly", "aTargets": [0] }

],
"aaSorting": [ [0,'desc'], [1,'asc'] ],
sAddNewRowFormId: "formAddNewRow",
oAddNewRowButtonOptions: { label: "+ Add", icons: {primary:'ui-icon-plus'}},
oDeleteRowButtonOptions: { label: "X Remove", icons: {primary:'ui-icon-trash'}},
oAddNewRowFormOptions: {
title: 'Add New Parent Child Account Mappings',
show: "blind",
hide: "explode",
modal: true} ,
sAddDeleteToolbarSelector: ".dataTables_length"});

//oTable.fnSetColumnVis( 0, false );
} );

rajsir

one more issue.... when I update any column it saving the data, but it displays a bank message box...

rajsir

picture : https://picasaweb.google.com/rajsir/Public#5634528442077471426

dvnandover

Hi Ebbs,
would you mind sharing the codes in your update.aspx? I got the edit part to shown but confused about the saving part using aspx file. I am assume that the update.aspx file will do the saving to database with the new data but how do i get the data to the aspx file?

Anyone with the sample codes to share please do.

Thank you in advance.

fbas

to make a column read-only with the editable plugin, set the column def to null. using an empty object probably won't work.

[code]
"aoColumns": [
null, // CHANGE EMPTY COLUMN DEF TO null

{
cssclass: "required",
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'submit',

},
{
cssclass: "required",
indicator: 'Saving...',
tooltip: 'Click to edit',
onblur: 'submit',
},
// etc.
[/code]

dvnandover

How do i pass the data to my update.aspx file so i can write to database?

Anyone ?

fbas

specify sUpdateUrl in makeEditable()

[code]
.makeEditable({
sUpdateURL: "update.aspx",

// etc.
[/code]

dvnandover

fbas,
I am interested as what the update.aspx looks like? How how do get the new value in the update.aspx? Is it Request.QueryString[""]? Need a value from the primary key column in order to update the record, how do i pass that column into my update.apsx?
Thanks

fbas

read the manual at http://code.google.com/p/jquery-datatables-editable/

dvnandover

I did not know this. I have been trying to use jeditable plugin which did not come with the add and remove row feature.
Thank you for the link fbas.

fbas

yes, the editable plugin for datatables uses jeditable but adds some structure to add/delete/edit of data.

dvnandover

Hi fbas,

Couple questions:
1. How can i hide a column. I used "aoColumnDefs": [
{ "bVisible": false, "aTargets": [0] },
{ "bVisible": false, "aTargets": [1] }
],
It didn't seem to work
2. When i select a row i did not see the effect of seeing the background color of the row changed.
3. I have master page which has already have a tag defined and it seem to create a problem with the popup form for create a new row, how do i get around it?
Thanks

allan

1. Can you show us an example please? That should work.

2. Have you got something adding a 'selected' class, and the CSS defined for that class?

3. Not 100% sure - that might be one to post as an issue against the editable plug-in.

Allan

dvnandover

hi allan,
1. If i used this oTable.fnSetColumnVis(0, false); then the column is hidden so it is for now.
2. Yes. row_selected is defined in the css file and being call from .js file but i can't seem to figure out why it did highlight the selected row for me.
3. I just have create a page without using the masterpage for now but it woul be nice if there is a work around for it.

Below are declaration writing the changes to my database:
sUpdateURL: "UpdateResourcePager.aspx?action=update",
sUpdateHttpMethod: "POST",
sAddURL: "UpdateResourcePager.aspx?action=new",
sAddHttpMethod: "POST",
sDeleteURL: "UpdateResourcePager.aspx?action=delete",
sDeleteHttpMethod: "POST",

but instead i want to this: sUpdateURL: "UpdateResourcePager.aspx?action=update&RecordID=rowId",
How do i get the value of the first column to pass it in?

ganeshansh

To make a column read-only with the editable plugin 1.3 wont support.
Column Def :
{
sTitle: 'Browser',
sClass: 'read_only'
}

if (properties.aoColumns != null) {
for (var i = 0; i < properties.aoColumns.length; i++) {
if (properties.aoColumns[i] != null) {
cells = $("td:nth-child(" + (i + 1) + ")", aoNodes);
var oColumnSettings = oDefaultEditableSettings;
oColumnSettings = $.extend({}, oDefaultEditableSettings, properties.aoColumns[i]);
var sUpdateURL = properties.sUpdateURL;
try {
if (oColumnSettings.sUpdateURL != null)
sUpdateURL = oColumnSettings.sUpdateURL;
} catch (ex) {
}
//cells.editable(sUpdateURL, oColumnSettings);
cells.each(function () { // This line need to be modified
if (!$(this).hasClass(properties.sReadOnlyCellClass)) {
$(this).editable(sUpdateURL, oColumnSettings);
}
});
}
}
} else {
cells = $('td:not(.' + properties.sReadOnlyCellClass + ')', aoNodes);
cells.editable(properties.sUpdateURL, oDefaultEditableSettings);

}