Make a row not editable?

Make a row not editable?

ptaylorptaylor Posts: 28Questions: 7Answers: 0

Is there a hook somewhere in Editor so that I can make a given row uneditable based on the value of one of the items in the row? If so, can a pop-up notify the user that the item can't be edited? I see the "initEdit" hook, but don't see how I can use that to throw a pop-up and abort the edit.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,805Questions: 1Answers: 10,119 Site admin
    Answer ✓

    The preOpen event could potentially be used for this as it provides the ability to stop an Editor window being displayed. You would get the data for the row being edited (modifier() and row().data()) and make the decision on if it should be allowed to display.

    Moreover, if you want to display a message saying that the row can't be edited, allow the Editor form to display, but hide all of the fields (hide()) and show a message (message()) stating whatever you need to say to the end user. buttons() can then be used to modify the buttons for the form so that there would only be a close button (close()).

    Going to be good use of the API this one :-)

    Allan

  • ptaylorptaylor Posts: 28Questions: 7Answers: 0
    edited June 2015

    Removed comment

  • ptaylorptaylor Posts: 28Questions: 7Answers: 0
    edited June 2015

    I think I'm figuring this out with preOpen:

        editor.on( 'preOpen', function ( e )  {
            var modifier = editor.modifier();
            if ( modifier ) {
                var data = table.row( modifier ).data();
                console.log( data );
                // do something with data
            }
        } );
    

    Took that from your example code for modifier, but "table" is not defined?

  • ptaylorptaylor Posts: 28Questions: 7Answers: 0
    edited June 2015
        editor.on( 'preOpen', function ( e )  {
            var modifier = editor.modifier();
            if ( modifier ) {
                // Get data for this row
                //var data = table.row( modifier ).data();
                //console.log( data );
                // if ( data.condition = false) {
                editor.message('This row can not be altered');
                editor.hide();  // Hides all the fields
                editor.buttons( { label: 'Close', fn: function () { this.close(); } } );
                //}
            }
        } );
    

    The above mostly works. It sets the message the users sees, hides all the fields, and gives the user only a Close button. I just haven't gotten the data yet to see if I need to keep the user from editing this row.

    I initialize my editor and table like this:

        editor = new $.fn.dataTable.Editor( {
            ajax: "/lte_sim/modems.php",
            table: "#modems",
    
    [Code removed]
    
            $('#modems').dataTable( {
            dom: "Tfrtip",
            ajax: {
    

    Is this as simple as assigning a variable name to my table, then accessing it in preOpen? If so, what is the syntax to do that? (I'm not very experienced in Javascript, so sorry for the newbie question)

    In place of the above, I tried:

            table = new $('#modems').dataTable( {
    

    And everything seems to work as usual, but I still can't get the data from that row using the code (in the preOpen) :

    var data = table.row( modifier ).data();
    
  • ptaylorptaylor Posts: 28Questions: 7Answers: 0
    edited June 2015

    Disregard this comment

  • ptaylorptaylor Posts: 28Questions: 7Answers: 0
    edited June 2015

    Ok, finally got it working...

    Here's my preOpen code:

        editor.on( 'preOpen', function ( e )  {
            var modifier = editor.modifier();  // Gets the selected row of the table
            if ( modifier ) {
                // Get data for this row
                var data = table.row( modifier ).data();
                console.log( data );
                if ( data.modems.store_id > 9999 ) {
                    editor.message('This row can not be altered');
                    editor.hide();  // Hides all the fields
                    editor.buttons( { label: 'Close', fn: function () { this.close(); } } );
                } else {
                    editor.show();  // Show the fields
                }
            }
        } );
    

    So, what is the difference between:

    var table = $('#modems').DataTable( {
    

    and

    var table = $('#modems').dataTable( {
    

    ?

    With the top one, I CAN access the the "table.row" function to get the data. With the bottom one, I can not. With either, the table looks the same.

  • allanallan Posts: 61,805Questions: 1Answers: 10,119 Site admin

    $().DataTable() returns a DataTables API instance - $().dataTable() returns a jQuery instance. Second top FAQ - possibly a poor naming decision on my part while trying to deal with the legacy interface.

    Allan

  • ptaylorptaylor Posts: 28Questions: 7Answers: 0

    Ok - Thank you for the details. I'm up and working. Although I hit little bumps of frustration (mostly due to my lack of JS experience), I always seem to be able to get everything to work the way I want. Thanks for a great product.

This discussion has been closed.