Custom Column.Title and Row unfocus save

[omerix]

Hello Param

Video : https://plus.google.com/115081374029716301454/posts/1qnxw3ETV9x

Code : http://jsfiddle.net/tfH4L/1/

I have more issues I need you to help. Those are not new issues. I will appreciate if you can hep. If needed I can pay.
I have uploaded a new video for this. Please click on the link.

* 23rd second of the video: I am entering a value on 4th column and I am calling relevant sizes number on the column headres (colM[1].title...colM[30].title) when I double clik on this cell. But I need rhose size number come as soon as the cell content changed. (change event)

* 02:06th seond of the video: When I call the size number as I have expained above there are many empty column cells after the ones I have called. I need those empty cells to be disapeared. 
  Please also note that titles may be in different number for each rows as you can see on 01:36 second of the video.

* 01:23rd second of the video: If I enter a value on the grid and hit up and down arrow key it saves the data. But after I enter data and clik on any other place it does not save. Please help me to solve when I hit any other place other then the row I need it save it. 
  (No  need Multi row save, I just need save each row individually)

Thanks

[paramvir]

1) If you want to refresh any visual property (i,e title) of header, please use http://paramquery.com/pro/api#method-refreshHeader

2) If you need to remove empty cells / columns, please mark the corresponding columns as hidden and use refresh method from the API.

3)

When you click any other part, it doesn't save the cell.

Either you can use the code from this post http://paramquery.com/forum/index.php?topic=607.msg3570#msg3570 or version 2.0.5 which supports saving cells when clicked anywhere else and this version would be out shortly.

[omerix]

Hello Param,

Thank you very much for the replies. I have succeed on hide-show column titles. That's cool now.

However I think I could not make you understand on my SAVE issue.
I am saving data on a row with below code. It saves when up or down arrow keys hit.

Code: [Select]


$grid.on("pqgridcelleditkeydown", function( event, ui ) {
keyCode=event.keyCode;
if (keyCode==40 || keyCode==38) {
update(ui.rowIndx,ui.colIndx);
}
});

But as you can see the video I have attached below, if user make changes on more than one row by clicking the cells to be changed without hitting arrow key, and click anywhere else, it does not save anything.

What I need, when user make changes in a row, I needed to be saved as soon as user go out (Row Unfocus)  of this row, either by clicking any other place by running code:  "update(ui.rowIndx,ui.colIndx);"


Video: http://youtu.be/bh1TMuZn4F8

Full Code: http://jsfiddle.net/rv72G/


Update Code

Code: [Select]

function update(rowIndx, colIndx) {
             if (!$grid.pqGrid("saveEditCell")) {
                 return false;
             }

             var rowData = $grid.pqGrid("getRowData", {
                 rowIndx: rowIndx
             });
             var isValid = $grid.pqGrid("isValid", {
                 rowData: rowData
             }).valid;
             if (!isValid) {
                 return false;
             }
             var isDirty = $grid.pqGrid("isDirty");
             if (isDirty) {
                 var recIndx = $grid.pqGrid("option", "dataModel.recIndx");

                 var url = "<%=dosya%>?isl=GridKaydet";
                 if (rowData[recIndx] == null) {
                     url = "<%=dosya%>?isl=GridKaydet";
                 }
                 $.ajax($.extend({}, ajaxObj, {
                     url: url,
                     data: rowData,
                     success: function (data, textStatus, jqXHR) {
                         if (data.prkod == 0) {
                             $grid.pqGrid("removeClass", {
                                 rowIndx: rowIndx,
                                 cls: 'ui-state-error'
                             });
                             var recIndx = $grid.pqGrid("option", "dataModel.recIndx");
                             if (rowData[recIndx] == null) {
                                 rowData[recIndx] = data.recIndx;
                             }
                             rowData['DFIYAT'] = data.DFIYAT;
                             rowData['RprMiktar'] = data.RprMiktar;
                             rowData['RprTutar'] = data.RprTutar;
                             $grid.pqGrid("commit");
                             $grid.pqGrid("editCell", {
                                 rowIndx: (rowIndx + 1),
                                 colIndx: colIndx
                             });
                         }
                         else {
                             $grid.pqGrid("addClass", {
                                 rowIndx: rowIndx,
                                 cls: 'ui-state-error'
                             });
                             $('<div></div>').html('Hata Kodu:' + data.prkod + '<br>' + data.prnot).dialog({
                                 position: ['center', 'top'],
                                 modal: true,
                                 zindex: 9002,
                                 title: 'Kayıt Hatası'
                             });
                         }
                     }, //success
                     beforeSend: function (jqXHR, settings) {}, //beforeSend
                     error: function (jqXHR, textStatus, errorThrown) {
                         $('<div></div>').html('Hata Kodu:' + jqXHR.status + '<br>' + jqXHR.statusText).dialog({
                             position: ['center', 'top'],
                             modal: true,
                             zindex: 9002,
                             title: textStatus
                         });
                     }, //error
                     complete: function (jqXHR, textStatus) {} //complete
                 }));

                 $grid.pqGrid("editCell", {
                     rowIndx: rowIndx,
                     colIndx: colIndx
                 });
             }
             else {
                 $grid.pqGrid("refreshRow", {
                     rowIndx: rowIndx
                 });
             }
         }

Thanks.

[paramvir]

you can use getEditCell and getCellIndices API to get indices of the blurred editor and call the update function.

Code: [Select]

$(document).on("blur", ".pq-editor-focus", function (evt) {
            var $grid = $(this).closest(".pq-grid");

            var $td = $grid.pqGrid("getEditCell").$td;
            var obj = $grid.pqGrid("getCellIndices", { $td: $td });
            update( obj.rowIndx, obj.colIndx );
 });

Please note that the above code is not tested and you may need to make necessary changes to it.

[omerix]

Hello Param,

I have apply the code you have given and it makes possibe to save the cell content when update any cell in a row.  ( http://youtu.be/dgQkf22lh5w ) Thus there is no data loss. But servers work load increase too much. It would be great if update() function runs just after unfocus from <tr>.

Or as another solution; as you can see in the video ( http://youtu.be/AwIvb4E5mvc ), it marks the rows which include the cells I have updated.

If you can remove the flags and leave the others this will help as well. When flags go off data of the row will be saved as well.

When I “$grid.pqGrid("commit")” the update() function, after I made changes in 3 rows, and when I save the 2nd row flags go off, and datas on row 1 and 3 are not saved.

If I use “$grid.pqGrid("commit",{type:'update',rows: rowIndx})” as you can see the video afer I save the data on the row 2, flags does not go off. And all flags go off If I go over any row.
It will also help if the flags go off on the row if it is save and other flags can be remain on the rows not saved.

Full Code: http://jsfiddle.net/D7seJ/

[omerix]

Hello Param,

Is thereany suggestion for  below issue?