Author Topic: button next() method doesn't render Cancel button next to Update  (Read 5095 times)

Soumya

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 23
    • View Profile
button next() method doesn't render Cancel button next to Update
« on: February 11, 2015, 02:21:59 am »
Hi,

I am following the pro demo for in line editing.

i have the below code for editrow

 function editRow(rowIndx, $gridMain)
            {
                //debugger;
                $gridMain.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
                $gridMain.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });

                //change edit button to update button and delete to cancel.
                var $tr = $gridMain.pqGrid("getRow", { rowIndx: rowIndx }),
                    $btn = $tr.find("button.edit_btn");
             
                $btn.button("option", { label: "Update", "icons": { primary: "ui-icon-check" } })
                    .unbind("click")
                    .click(function (evt)
                    {
                        evt.preventDefault();
                        return update(rowIndx, $gridMain);
                    });

                $btn.next().button("option", { label: "Cancel", "icons": { primary: "ui-icon-cancel" } })
                .unbind("click")
                .click(function (evt)
                {
                    $gridMain.pqGrid("quitEditMode")
                        .pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-edit' })
                        .pqGrid("rollback");
                });

             
            }

for some reason I can only Update button and not the cancel button in the row.
can you guide if i am missing something here.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: button next() method doesn't render Cancel button next to Update
« Reply #1 on: February 11, 2015, 09:05:35 am »
Have you made any other changes in the source code.

Just find out what $btn.next() is pointing to by console.log?

Code: [Select]
var $next = $btn.next();
console.log( $next.length );
console.log( $next[0] );

$btn.next().button("option", { label: "Cancel", "icons": { primary: "ui-icon-cancel" } })
                .unbind("click")
                .click(function (evt)
                {
                    $gridMain.pqGrid("quitEditMode")
                        .pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-edit' })
                        .pqGrid("rollback");
                });

Soumya

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 23
    • View Profile
Re: button next() method doesn't render Cancel button next to Update
« Reply #2 on: February 11, 2015, 08:27:39 pm »
length is 0 and it says undefined

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: button next() method doesn't render Cancel button next to Update
« Reply #3 on: February 11, 2015, 08:37:03 pm »
Have you added the markup for the buttons in render callback of buttons column.

 render: function (ui) {
         return "<button type='button' class='edit_btn'>Edit</button>\
             <button type='button' class='delete_btn'>Delete</button>";
   }

Soumya

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 23
    • View Profile
Re: button next() method doesn't render Cancel button next to Update
« Reply #4 on: February 11, 2015, 08:43:22 pm »
Yes i did . And so the update button shows up atleast once i click the Edit

render: function (ui)
                 {
                     return "<button type='button' class='edit_btn'>Edit</button>";
                 }

Attached the picture.
« Last Edit: February 11, 2015, 08:45:38 pm by Soumya »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: button next() method doesn't render Cancel button next to Update
« Reply #5 on: February 11, 2015, 09:18:45 pm »
I don't see delete button in your render callback.

Soumya

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 23
    • View Profile
Re: button next() method doesn't render Cancel button next to Update
« Reply #6 on: February 11, 2015, 09:24:52 pm »
I don't need the delete button as we are not doing any deletions on the records. The user can only for do update on the record.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: button next() method doesn't render Cancel button next to Update
« Reply #7 on: February 11, 2015, 10:16:39 pm »
so you can hide it in render with inline style= display: none;

and show it in editRow() function

$btn.next().show()

Soumya

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 23
    • View Profile
Re: button next() method doesn't render Cancel button next to Update
« Reply #8 on: February 12, 2015, 12:14:59 am »
That worked. The button has to be initialized as well in the grid pqgridrefresh event.

Thanks for the help