edit image button

[omerix]

Hello Param,
 
I have an issue as below. I will appreciate if you can advise. Thank you in advance.
 
I want to post the data in a row and I am using  "editorKeyDown event" than I am running "update()" function with "keyUp+keyDown" buttons and save it. (Code-1)

I am also adding a button to run "update()" function at the end of grid as some users need that. (Code-2)

Now I want to use "Delete button" and "Update button" in the row. Could you please advise which way is suitable I have listed below:

   
    1) I have used "refresh event"  that I saw on Paramquery demo page.
        I wrote Code-3.
        This Works for one time , but it does not Works for second time just after I save the row.

    2) I have tried "cellClick event"
        I wrote Code-4.It Works fine bıt I would like to know if this is correct way.

 
Besides my page Works slow. I am calling paramquery within iframe in 4 tab. I have save a video and it took 8 seconds. New records and UPDATE Works fast but first Show is slow . Could you please advise a way to run this faster? (Video link  http://youtu.be/luMpEtXn_zo )



   Code-1
   

Code: [Select]

,editorKeyDown : function( event, ui ) {
keyCode = event.keyCode;
//console.log(keyCode);
if (keyCode == 40 || keyCode == 38) {
update(ui.rowIndx, ui.colIndx,keyCode);
}
}
   
   Code-2 / edit_btn iconu
   

Code: [Select]

    ,{title: "İşlem", editable: false, minWidth: 60, sortable: false
, render: function (ui) {
return "<img src='../QImg/i16/ok.png' class='i16 el edit_btn' title='Save'/><img src='../QImg/i16/sil.png' class='i16 el delete_btn' title='Delete'/>";
}
}
   
   
   Code-3
   

Code: [Select]

,refresh: function (event, ui) {
//console.log('refresh run');
if (!$grid) {
return;
}
                //Delete Function
                $grid.find("img.delete_btn")
                    .unbind("click")
                    .bind("click", function (evt) {
                        var $tr = $(this).closest("tr"),
                            rowIndx = $grid.pqGrid("getRowIndx", {
                                $tr: $tr
                            }).rowIndx;
                        deleteRow(rowIndx);
                    });
                //Update Function
                $grid.find("img.edit_btn")
                    .unbind("click")
                    .bind("click", function (evt) {
                        var $tr = $(this).closest("tr"),
                            rowIndx = $grid.pqGrid("getRowIndx", {
                                $tr: $tr
                            }).rowIndx;
//console.log(rowIndx);
update(rowIndx,0,38);
                    });
             }
   
   
   
   Code-4
   

Code: [Select]

    ,{title: "#", editable: false, minWidth: 30, sortable: false,dataIndx:"BTNKAYDET"
, render: function (ui) {
return "<img src='../QImg/i16/ok.png' class='i16 el' title='Kaydet'/>";
}
}
    ,{title: "#", editable: false, minWidth: 30, sortable: false,dataIndx:"BTNSIL"
, render: function (ui) {
return "<img src='../QImg/i16/sil.png' class='i16 el' title='Sil'/>";
}
}

,cellClick: function( event, ui ) {
if (ui.column.dataIndx=="DURUM") {
var rowData = $grid.pqGrid("getRowData", { rowIndx: ui.rowIndx });
FnDurum(rowData['ID'],rowData['DURUM'],ui.rowIndx);
}
else if (ui.column.dataIndx=="BTNKAYDET") {
update(ui.rowIndx,0,38);
}
else if (ui.column.dataIndx=="BTNSIL") {
deleteRow(ui.rowIndx);
}
}


[paramvir]

Omer

Please ask one question at a time and subject line should match with the message of the post. Thanks for your understanding.

[omerix]

Hello Param,

I'm sorry for the confusion.

This code works only 1 once

Code: [Select]

,refresh: function (event, ui) {
//console.log('refresh run');
if (!$grid) {
return;
}
                //Delete Function
                $grid.find("img.delete_btn")
                    .unbind("click")
                    .bind("click", function (evt) {
                        var $tr = $(this).closest("tr"),
                            rowIndx = $grid.pqGrid("getRowIndx", {
                                $tr: $tr
                            }).rowIndx;
                        deleteRow(rowIndx);
                    });
                //Update Function
                $grid.find("img.edit_btn")
                    .unbind("click")
                    .bind("click", function (evt) {
                        var $tr = $(this).closest("tr"),
                            rowIndx = $grid.pqGrid("getRowIndx", {
                                $tr: $tr
                            }).rowIndx;
//console.log(rowIndx);
update(rowIndx,0,38);
                    });
             }


[paramvir]

Omer

To ensure that the button binding code runs whenever the view is refreshed as well as when the row is refreshed, bind it to both refresh and refreshRow events.

Example: line 244 in editing demo:

//use refresh & refreshRow events to display jQueryUI buttons and bind events.
    $grid.on('pqgridrefresh pqgridrefreshrow', function () {


Please let me know if you have any further question on this.