Announcement

Collapse
No announcement yet.

How to move Insert,delete,update from the left to the right column in editable grid.

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to move Insert,delete,update from the left to the right column in editable grid.

    After much searching I could not find a solution to position the insert,update,delete column that is by default on the left 1st column. so after solving I thought I would share how to do.

    you will have to make a virtual field mark as label and position far right.

    put this code in OnScriptini.

    echo "
    <script>
    $(document).ready( function() {

    $('[id^="hidden_field_data_sc_actions"]').each(function(){

    var id = $(this).attr('id').replace(/[^0-9]+/i,'');

    $(this).parent().children().last().remove();
    $(this).parent().prepend('<td></td>');
    $(this).appendTo($(this).parent());
    });

    var timer = 0;
    $('#sc_b_new_t').click(function() {

    do_ajax_form_your_form_name();

    timer = setInterval( function() {


    $('[id^="sc_ins_line_"]').each(function(){

    var id = $(this).attr('id').replace(/[^0-9]+/i,'');

    var td =$(this).parent();

    td.parent().children().last().remove();
    td.parent().prepend('<td></td>');
    td.appendTo(td.parent());
    clearInterval(timer);
    });


    }, 5);


    });

    });

    </script>
    ";

    Then in Onafterinsert

    sc_commit_trans()

    sc_redir(your_form_here);

    hope this may be of use to someone.
    Last edited by scottypaul; 06-09-2016, 10:54 AM.

  • #2
    Good post, i think some times is neccesary do it changes. (i posted with same problem some time ago but now i can see you solve it).

    Comment


    • #3
      scottypaul Thanks for your post. That's pretty impressive. It does work. I think I missed something here. when I implemented on my form it does partial job

      I have attached the screen shots of the form after implementing the script.

      1) on form load it shift the buttons on Right,
      2) clicking on add new it open the record as it is shown on picture but save and cancel stays on the left
      3) Edit works
      4) delete doesn't work

      You may be able to improvise on the previous script.


      Comment


      • #4
        Hello Naresh,

        I have made some improvements after writing this. new script is this

        echo "
        <script>
        $(document).ready( function() {

        var fcremoved = false;
        $('[id^="hidden_field_data_sc_actions"]').each(function(){

        if (!fcremoved) {
        $(this).parent().parent().children().first().child ren().first().remove();
        $(this).parent().parent().children().first().child ren().first().remove();
        $(this).parent().parent().children().first().child ren().first().remove();

        fcremoved = true;
        }

        var id = $(this).attr('id').replace(/[^0-9]+/i,'');

        $(this).parent().children().last().remove();
        // $(this).parent().prepend('<td></td>');
        $(this).appendTo($(this).parent());

        /*td.parent().parent().children().children().first( ).remove();
        td.parent().children().first().attr('moved',1);*/


        });

        var timer = 0;
        $('#sc_b_new_t').click(function() {




        timer = setInterval( function() {

        $('[id^="sc_ins_line_"]').each(function(){


        var id = $(this).attr('id').replace(/[^0-9]+/i,'');

        var td =$(this).parent();

        if (td.parent().children().first().attr('moved') != 1) {
        td.parent().parent().children().first().after(td.p arent());

        $('[id^="sc_canceli_line_"]').each(function(){

        $(this).parent()[0].onclick = null;
        $(this)[0].onclick = null;
        $(this).click(function() {

        iSeqVert = $(this).attr('id').replace(/[^0-9]+/i,'');
        var oTBodyOld = document.getElementById("hidden_bloco_0").tBodies[0];
        var oTROldLine = oTBodyOld.rows[1];
        oTBodyOld.removeChild(oTROldLine);
        ajax_destroy_tables(iSeqVert);
        scEnableNavigation();
        "."sc"."_insert"."_open = false;
        scAjaxHideErrorDisplay("table");
        });

        });



        td.parent().children().first().attr('moved', 1);
        td.parent().children().last().remove();
        //td.parent().prepend('<td id="empty"></td>');
        td.appendTo(td.parent());
        clearInterval(timer);
        }
        });


        }, 5);


        });

        });

        </script>
        ";


        it also moves the "Add New" to the top.

        one other thing to note is this, you have to reload the page after adding a new line, so will have to use this in onafterinsert

        sc_commit_trans()

        sc_redir(your_form);

        Comment


        • #5
          @scottypaul
          After using your code i have some error i.e.

          Parse error: syntax error, unexpected 'hidden_field_data_sc_actions' (T_STRING), expecting ',' or ';'

          please help

          Comment


          • #6
            Can you post full code here for me to see ?

            Comment


            • #7

              @scottypaul

              Thanks for the reply.

              Same code which you posted in the forum. if i need to do any changes in this please let me know.

              long with this i can attached the screenshot of my form.


              echo "
              <script>
              $(document).ready( function() {

              var fcremoved = false;
              $('[id^="hidden_field_data_sc_actions"]').each(function(){

              if (!fcremoved) {
              $(this).parent().parent().children().first().child ren().first().remove();
              $(this).parent().parent().children().first().child ren().first().remove();
              $(this).parent().parent().children().first().child ren().first().remove();

              fcremoved = true;
              }

              var id = $(this).attr('id').replace(/[^0-9]+/i,'');

              $(this).parent().children().last().remove();
              // $(this).parent().prepend('<td></td>');
              $(this).appendTo($(this).parent());

              /*td.parent().parent().children().children().first( ).remove();
              td.parent().children().first().attr('moved',1);*/


              });

              var timer = 0;
              $('#sc_b_new_t').click(function() {




              timer = setInterval( function() {

              $('[id^="sc_ins_line_"]').each(function(){


              var id = $(this).attr('id').replace(/[^0-9]+/i,'');

              var td =$(this).parent();

              if (td.parent().children().first().attr('moved') != 1) {
              td.parent().parent().children().first().after(td.p arent());

              $('[id^="sc_canceli_line_"]').each(function(){

              $(this).parent()[0].onclick = null;
              $(this)[0].onclick = null;
              $(this).click(function() {

              iSeqVert = $(this).attr('id').replace(/[^0-9]+/i,'');
              var oTBodyOld = document.getElementById("hidden_bloco_0").tBodies[0];
              var oTROldLine = oTBodyOld.rows[1];
              oTBodyOld.removeChild(oTROldLine);
              ajax_destroy_tables(iSeqVert);
              scEnableNavigation();
              "."sc"."_insert"."_open = false;
              scAjaxHideErrorDisplay("table");
              });

              });



              td.parent().children().first().attr('moved', 1);
              td.parent().children().last().remove();
              //td.parent().prepend('<td id="empty"></td>');
              td.appendTo(td.parent());
              clearInterval(timer);
              }
              });


              }, 5);


              });

              });

              </script>
              ";
              Destination.PNG

              Comment


              • #8
                Please help me to use above mentioned code for "how to move insert,delete, update from the left to the right column in editable grid.mn in editable grid"

                Comment

                Working...
                X