jQuery DataTables Editable - read only if empty value

Question

I'm using the jQuery DataTables Editable to be able to edit data in a table. (Using jQuery 1.7.2) The data is fetched from an Asp.net web service. (See the code below)

When a value is empty (for example if one item in the list doesn't have a category) I don't want the category of that specific item to be editable. So the category for that item should be read-only. I didn't find a way to do this, is this possible?

<table id="admin_list" cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr>
            <th>Title</th>
            <th>Category</th>
        </tr>                
    </thead>
    <tbody>
    </tbody>
</table>

<script type="text/javascript">
$(document).ready(function () {
    function renderTable(result) {
        var dtData = [];
        $.each(result, function () {
            dtData.push([
                this.title,
                this.category
            ]);
        });

        $('#admin_list').dataTable({
            'aaData': dtData
        }).makeEditable({
            sReadOnlyCellClass: "read_only",
            sUpdateURL:"Service.svc/update",
            "aoColumns":
            [
                {}, //title
                {} //category
            ]
        });
    }

    $.ajax({
        type: "GET",
        url: "Service.svc/list",
        dataType: "json", cache: false, data: {}, contentType: "application/json; charset=utf-8",
        success: function (data) {
            renderTable(data.d);
        },
        error: function (data) {}
    });
});
</script>

noob · Answer 1 · 2012-04-18T10:03:59.533

1

Yes there's a solution. I've also provided an example.

function renderTable(result) {
    var dtData = [];
    $.each(result, function () {
        dtData.push([
            this.title,
            this.category ? this.category : "&nbsp;"
        ]);
    });

    $('#admin_list').dataTable({
        'aaData': dtData
    }).makeEditable();
}
$.ajax({
    type: "GET",
    url: "Service.svc/list",
    dataType: "json", cache: false, data: {}, contentType: "application/json; charset=utf-8",
    success: function (data) {
        renderTable(data.d);
    },
    error: function (data) {}
});

$("#admin_list tr").live("mousedown", function() {
    console.log($(this).find("td:eq(1)").text());
    if (/^(?:\s+|Click to edit)?$/.test($(this).find("td:eq(1)").text())) {
        $(this)
            .find("td:eq(1)")
            .empty()
            .unbind();
    }
});

edited Apr 18 '12 at 10:03

answered Apr 18 '12 at 08:56

noob

8,982
4
37
65

Thanks! Just to make sure I explained it right: I want to disable editing of the Category column for a specific row if the category of that row is empty. Will this code fix this? – Martin Apr 18 '12 at 09:06
1

I think we misunderstand each other. With row you mean horizontal columns right? I mean row as each vertical row. So if a row has a category column where the category is empty I should not be able to edit the category of that row but I still need to be able to edit the categories of other rows. How can I make that? – Martin Apr 18 '12 at 09:35
@Martin to your first comment. Yes it will fix that. – noob Apr 18 '12 at 10:05

jQuery DataTables Editable - read only if empty value

1 Answers1