I want to define a DataTables multi column Edit form

I want to define a DataTables multi column Edit form

mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
edited October 2012 in Editor
Hi
I wish to create a multi column Edit popupf. I like the way that DataTables handles this at the moment but want a diffrent layout.
What I want is something like this.

Name : xxxxxxx Surname : yyyyyyyyyyyyyy
DOB: dd/mm/yyy Gender : x Nationality : zzzzzzzzzz
etc.

I can find nothing in the documentation about this unless it is Display Controllers which I don't want to get into if it is not required..
Can someone give me a guide and/or point me to an exmple.

Thanks in advance
Roger

Replies

  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin
    Interestingly this question came up yesterday as well. This is my reply: http://datatables.net/forums/discussion/12166/data-entry-screen#Item_2 .

    Allan
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    Hi Allan

    Here's another thought. In addition to doing your Edit form as you do now why not allow us to define an edit form with straight HTML and you pop that form up instead? This way the clunky css to position fields is lost and we will have complete freedom on how the form looks. The form would be populated as at present.
    This thought came to me because I now want to put boxes around related fields and maybe change background color. I haven't tried yet but I suspect this is going to take some doing.
    BTW I am suprised that the formating of an edit form hasn't reared it's ugly head before this as it is a basic requirement of any commercial app.

    Regards
    Roger
  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin
    edited October 2012
    What you propose is actually an option at the moment through the use of the Editor API. What you would do is create your form in regular HTML as you suggest, and then use the Editor API (the `edit` , `set` and `submit` methods) to take the information from your form and submit it through Editor. That way you would have complete control over the form.

    Regards,
    Allan
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    Hi Allan,
    Oh dear, don't I feel an arse. Just so much new stuff to get my head around!!!
    I will look into this right now.
    Thanks for the heads up.

    Regards
    Roger
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    Hi Allan

    I have now got my Edit form the way I want it. Thanks for the tip. I battled for a while because I didn't have all the required js files included, wasn't even aware they were needed, found out by looking at the example's HTML in the browser. (A hint for your new documentation)
    On that note jquery.min.js and jquery.js are different (I am assuming the the jquery.min is a minimised version of the jquery), using the min breaks the code.
    On a positive note - goodby the positioning css (thank goodness)

    My next question is - Can I assign the form to the normal Editor buttons by declaration. If not I was wondering if I could use "fnClick": function ( nButton, oConfig, oFlash ) in any way or MUST I do it as you suggest above?

    Regards
    Roger
  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin
    > On that note jquery.min.js and jquery.js are different (I am assuming the the jquery.min is a minimised version of the jquery), using the min breaks the code.

    In what way does it break? It should work just fine.

    > My next question is - Can I assign the form to the normal Editor buttons by declaration

    Not to the Editor buttons, but you can to the TableTools buttons (of which the Editor buttons actually are, but you wouldn't want to override the default Editor ones, when you can just create custom buttons to do exactly what you want).

    So yes, use fnClick to trigger the action you want to occur on a click.

    Allan
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    Hi Allan
    I sorry to be a pain but I just don't know what to do with this update form problem of mine. Can you point me to an example where a formatted form is used for updating a selected row.
    I just can't believe that lots of code is required and that is the direction I am heading.

    Regards Roger
  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin
    > Can you point me to an example where a formatted form is used for updating a selected row.

    Sorry I don't have one available at the moment.

    However, I would suggest that is should look something like this:

    [code]
    editor.edit( tr, null, null, false ); // where tr is the row to edit
    editor.set( 'name', $('#myCustomForm .name').val() );
    editor.set( 'access', $('#myCustomForm .access').val() );
    // ... more fields
    editor.submit();
    [/code]

    So it sets Editor into edit mode without showing the Editor display - sets a bunch of fields, and then submits it.

    Allan
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    Hi Allen
    I have done as you suggest. I get the row (checked in FireBug) but none of my fields get set. The form is not displayed even when I change the editor.edit( $row, null, null, false ) to editor.edit( $row, null, null, true ). I don't want to submit the form at this point but have left the submit in for now.
    It returns
    POST http://opm.picturenet.co.za/opm/matter/php/formOnlyData.php 404 Not Found
    which makes sense but note the default file name!!! Could this be a clue?

    I define the matterEditForm inline with display:none
    I have moved the stuff to a server so you can see the code in source view.
    http://opm.picturenet.co.za/opm/matter/matter.tpl.php

    Can you help me? I am ready to throw in the towel, I just can't afford any more time to do something that should be really simple. I'm sorry to say your documentation is amongst the worst I have ever seen, you must be loosing potential users.

    Regards Roger.
  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin
    > Safari can't find the server opm.picturenet.co.za

    So, sorry, I can't say what is wrong with it.

    > POST http://opm.picturenet.co.za/opm/matter/php/formOnlyData.php 404 Not Found which makes sense but note the default file name!!! Could this be a clue?

    Possibly - but without being able to see the code, I don't really know. It sounds like you have copied one of the Editor examples and haven't changed the 'ajaxUrl' parameter?

    I'm sorry you aren't enjoying working with Editor and its documentation. If I could actually see your page, I might be able to see what is going wrong, why and as a result be able to improve the documentation to help meet requirements such as your own.

    Allan
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    Ok a little more progress. The POST result is because I had not uncommented or replaced the ajaxURL. However when i look at the POST data[...] in FireBug the fields are all undefined except if I put a literal in the set command. So clearly the $('#matterEditForm.ID').val() etc is not finding a field so it could be because of the way, or place, I define the matterEditForm.
  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin
    > $('#matterEditForm.ID').val()

    What exactly are you using for the selector and the HTML? In the example you posted there, that would match an element which has something like `` which probably isn't what you want?

    Perhaps something a bit more like:

    [code]
    $('#myCustomForm input[name="id"]').val()
    [/code]

    would be appropriate? But I'm just guessing without being able to actually see what you are working with :-).

    Allan
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    A heads up
    The link http://editor.datatables.net/options/Editor.models.displayController.html is broken on page
    http://editor.datatables.net/options/
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    Hi Allan
    Ok I have got the Edit form populated. It turned out to be simple once I got the syntax figured out

    I remember reading somewhere that edit.submit is a straight passthrough to jquery. Well with
    editor.set($('#matterEditForm input[name="matterDesc"]'). val( $data['matterDesc'] )); I get an error

    ...].apply(c,b)}:e});return b};d.prototype.fields=function(){for(var a=[],c=0,b=thi... editor.js line 33

    But no errors with
    $('#matterEditForm input[name="matterDesc"]'). val( $data['matterDesc'] );
    so that's what I've gone with.

    Maybe I misunderstood something. BTW I've never mentioned this, I have always written my own JS and ajax type code as I started my stuff many many years ago so even the JS code is new to me, but I have got tired of enhancing it hence my move.

    Now all I've got to do is get the form inside the 'envlope'. I think this involes messing with a controller. Am I correct?

    Regards Roger.
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    Hi Allan
    Did a little more tonight and have got further again but I am sure I have gone in the incorrect direction.
    Please help. I just can't get the controller code to work for me.
    The Edit details are being displayed with the correct values but not inside the 'envelope' and not the correct width but I'm sure that will correct itself once inside an 'envelope'. They display like a 'detail' form.
    The url is http://www.lawvault.co.za/opm/matter/matter.tpl.php so you can look at by code in the browser source view
    Regards Roger.
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    Another heads up

    On Editor -> Tutorial -> Display controllers http://editor.datatables.net/tutorials/display_controllers

    This link returns a blank page
    settings namespace
    http://editor.datatables.net/docs/current/DataTable.Editor.models.settings.html
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    Hi Allan
    Hi Allan
    Sorry for all the posts but I am hoping you will see the error of my ways.
    My next attempt. I have been following the Example. What I am trying to do is get my Edit form inside the standard 'envelope'

    This gives 'TypeError: $opmEditor.models is undefined' on this line
    $opmEditor.display.details = $.extend( true, {}, $opmEditor.models.displayController, {
    $opmEditor is obviously instantiated but not .models.

    I expected the models to be instantiated with this line
    var $opmEditor = new $.fn.dataTable.Editor( {

    [code]
    $(document).ready( function () {
    var envelopeConf = $.fn.dataTable.Editor.display.envelope.conf,
    $tableId = '#opmTable';
    envelopeConf.attach = 'head';
    envelopeConf.windowScroll = false;

    var $opmEditor = new $.fn.dataTable.Editor( {
    //"ajaxUrl": "php/formOnlyData.php",
    "domTable": $tableId,
    "display": 'envelope'
    } );

    $opmEditor.display.details = $.extend( true, {}, $opmEditor.models.displayController, {
    "init": function ( dte ) {
    // Init function
    return $opmEditor.display.details;
    },

    "open": function ( dte, append, callback ) {
    // Show form
    var table = $(dte.s.domTable).dataTable();
    $opmEditor.display.details.close( dte );
    if ( callback ) {
    callback();
    }
    },

    "close": function ( dte, callback ) {
    // Hide form
    var table = $(dte.s.domTable).dataTable();
    var openRows = table.fnSettings().aoOpenRows;

    // Call fnClose on the DataTable
    if (openRows.length > 0) {
    var openRow = openRows[0].nParent;
    table.fnClose( openRow );
    if ( callback ) {
    callback();
    }
    }
    }
    } );
    [/code]
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    Hi Allan
    I am desperate. Everyone, client included, is on my back. If a solution is not found for this problem I will have to revert to the css positioning method which I don't want to do as it is messy or else go another route

    Regards
    Roger
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    Hi Again
    I have found a fix to get me on. It is very messy but will suffice for now but this problem must be solved before I write a live system. So looking forward to your advice.
    Is there a way I can mail you so that it doesn't appear in the Forum? This one has got long with unhelpful blogs for other people. When we find a solution I will post it as a working example with your guidence, perhaps with a link to my test site if required.

    Regards Roger
  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin
    Hi Roger,

    I've just set you an email and I'll update this thread for others interesting in this discussion when we reach a conclusion :-)

    Allan
  • mcgrevymcgrevy Posts: 35Questions: 0Answers: 0
    Hi Allan

    Thanks for the response.

    In FireBug it stalls and when I press continue the console gives me
    var envelopeConf = $.fn.dataTable.Editor.display.envelope.conf;

    Without FireBug I get "Assert Failure" it hangs and the Browser console gives me
    [10:33:30.702] The Web Console logging API (console.log, console.info, console.warn, console.error) has been disabled by a script on this page.
    [10:33:36.546] GET http://opm.picturenet.co.za/opm/matter/matter.tpl.php [HTTP/1.1 200 OK 11ms]
    [10:33:36.779] Use of Mutation Events is deprecated. Use MutationObserver instead. @ chrome://firebug/content/chrome/tabContext.js:589
    [10:33:36.794] TypeError: $.fn.dataTable is undefined @ http://opm.picturenet.co.za/opm/matter/matter.tpl.php:104

    The links
    [code]







    <!---->
    <!---->
    <!---->














    <!---->
    <!---->





    [/code]

    The code. I have tried the first 3 lines inside the .ready as well - same result

    [code]
    var envelopeConf = $.fn.dataTable.Editor.display.envelope.conf;
    envelopeConf.attach = 'head';
    envelopeConf.windowScroll = false;
    $(document).ready( function () {
    var editor = new $.fn.dataTable.Editor( {
    "ajaxUrl": "php/formOnlyData.php",
    "domTable": "#example",
    "display": 'envelope',
    "fields": [
    {"label": ID,
    "name": 0,
    "type": "hidden"},
    {"label": MATTER_DESC,
    "width": "50px",
    "name": 4},
    {"label": NAME,
    "name": 2},
    {"label": MATTER_TYPE,
    "width": "20px",
    "name": 3},
    {"label": MATTER_CODE,
    "name": 4},
    {"label": CLIENT_REFERENCE,
    "name": 5},
    {"label": INSTRUCTION_DATE,
    "name": 5},
    {"label": NON_BILLABLE,
    "name": 6,
    "type": "checkbox",
    "ipOpts": [{"label": "", "value": "1"}]},
    {"label": DEPARTMENT,
    "name": 7}
    ]
    } );

    var oTable = $('#example').dataTable( {
    "sDom": "<'row-fluid'<'span5'RT><'span3'l><'span4'f>r>t<'row-fluid'<'span6'i><'span5'p>>",
    //"sScrollY": "545px",
    "bScrollCollapse": true,
    "iDisplayLength": 10,
    "aLengthMenu": [[10, 20, 40, -1], [10, 20, 40, "All"]],
    "bInfo": true,
    "sPaginationType": "full_numbers",
    "bAutoWidth":false,
    "bLengthChange": true,
    "aaSorting": [[ 2, "asc" ]],
    "aoColumns": [
    {"bSortable": false, //0 actions
    "sWidth": "85px"},
    {"bSortable": false, //1 ID
    "bVisible": false},
    null, //2 client
    {"sWidth": "90px"}, //3 state
    null, //4 matter
    null, //5 attorney
    {"sWidth": "90px"}, //6 mandateSigned
    ],
    "oTableTools": {
    "sSwfPath": "../swf/copy_csv_xls_pdf.swf",
    "sRowSelect": "single",
    "aButtons": [
    {"sExtends": "editor_create", "editor": editor},
    {"sExtends": "editor_edit", "editor": editor},
    {"sExtends": "editor_remove", "editor": editor},
    "print",
    "csv",
    "xls",
    "pdf"
    ]
    }
    }
    ).makeEditable( {
    sAddNewRowFormId: "matterEditForm",
    sUpdateURL: "UpdateData.php",
    sAddURL: "AddData.php",
    sDeleteURL: "DeleteData.php"
    });
    } );

    [/code]
This discussion has been closed.