button next() method doesn't render Cancel button next to Update

[Soumya]

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]

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]

length is 0 and it says undefined

[paramvir]

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]

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.

[paramvir]

I don't see delete button in your render callback.

[Soumya]

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]

so you can hide it in render with inline style= display: none;

and show it in editRow() function

$btn.next().show()

[Soumya]

That worked. The button has to be initialized as well in the grid pqgridrefresh event.

Thanks for the help