Making column Read Only/Disabled
Making column Read Only/Disabled
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?
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?
This discussion has been closed.
Replies
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.
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?
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.
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?
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.
Okay, cool. So how do I contact you?
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
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
[code]
"aoColumnDefs": [
{ "sClass": "readonly", "aTargets": [1] }
]
[/code]
Thanks for an awesome plugin! I will definitely be using your services in the future...
Regards,
Allan
{ "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 );
} );
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.
[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]
Anyone ?
[code]
.makeEditable({
sUpdateURL: "update.aspx",
// etc.
[/code]
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
Thank you for the link 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
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
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?
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);
}