Custom Keybindings to Override existing ones

Question

Hi guys I am creating a web app with an editable jqGrid (v4.4) and by default when you are in edit mode (inline editing) and you press the Enter key it invokes the saveRow method of the jqGrid, which actually tries to save the row.

The problem is that I have been using a custom way of saving my rows and I only use saveRow after I do some other stuff first.

I created a keybinding for Enter like this:

$(document).keyup(function (e) {
                if (e.keyCode == 13) {
                    if (lastsel) {
                        jQuery('#list').jqGrid('saveRow', lastsel, false, 'clientArray');
                        var rowData = jQuery('#list').jqGrid('getRowData', lastsel);
                        // alert(rowData);
                       // alert(JSON.stringify(rowData));
                        jQuery.post('Home/Save?inputEmployee=', JSON.stringify(rowData));
                        lastsel = false;
                    }
                }
              });

The problem is that it does both what jqGrid had defined for the binding AND what I do above.

Is there any way I can get rid of the previous binding for Enter before I use mine?

EDIT: I inculed my HomeController Save method:

public void Save(string inputEmployee)
{
    Employee employeeData = JsonConvert.DeserializeObject(inputEmployee.ToString(), typeof(Employee)) as Employee;
    var context = new EmployeeDataContext();
    Employee employee = context.Employees.Single(e => e.ID == employeeData.ID);
    employee = employeeData;
    context.SubmitChanges();
}

So what I do is I have created a LINQ to SQL model and I use it's context to get/set data from/to database. So I thought I'd pass an Employee stringified object as a parameter and then deserialize it with my controller.

score 1 · Accepted Answer · answered Feb 07 '13 at 09:27

1

It seems to me that you chosen not the best way of implementation of your requirements. One can see from the code which you posted that you want to use local editing (url: "clientArray" option of editRow), but you want additionally do some additional action after saving of the row. In the case the best choice could be to use aftersavefunc callback. So the call of editRow could be something like

onSelectRow: function (id) {
    var $this = $(this);
    ...
    $this.jqGrid("editRow", id, {
        keys: true,
        url: "clientArray",
        aftersavefunc: function (rowid) {
            $.post("Home/Save",
                JSON.stringify($this.jqGrid("getRowData", rowid)));
        }
    });
    ....
}

I was not sure how you wanted to send the data to the Home/Save URL. You used inputEmployee parameter without any value. You can adjust the above code corresponds to your exact requirements.

answered Feb 07 '13 at 09:27

Oleg

220,925
34
403
798

This could help me out I think. I have updated my question with my Save method from my HomeController so you can comment on my jQuery post if you can. – xray1986 Feb 07 '13 at 09:58
@PanagiotisPalladinos: I think that you should use something like `$.post("Home/Save", {inputEmployee: JSON.stringify($this.jqGrid("getRowData", rowid))});` or `$.post("Home/Save", JSON.stringify({inputEmployee: $this.jqGrid("getRowData", rowid)}));` depend on your other settings. – Oleg Feb 07 '13 at 10:15
Great! The first option worked. Now I'm having issues with actually Updating a row with LINQ to SQL but thats another story since the data are passed correctly to the controller hehe. Thank you for your answer! – xray1986 Feb 07 '13 at 12:15
@PanagiotisPalladinos: You are welcome! By the way you have right to vote up 30 helpful questions and answers **per day** (see [here](http://meta.stackexchange.com/a/5213/147495)) which you find on the stackoverflow. The goal of the right is mostly not for increasing of reputation of the answers. **Voting are used by searching engine for sorting**. So if you want to help other visitors to find helpful information of the stackoverflow you should more use your right to vote. – Oleg Feb 07 '13 at 12:30

score 0 · Answer 2 · edited May 23 '17 at 11:53

You can make use of jQuerys .data() Method to get the existing event Handlers for an element

Basically you

Get the old Handler
Remove the event
Add you Own Handler
- execute the original handler if neccessary

Heres an Example

    var el = $(document)
    el.on("keydown",function (e) {
       console.log("First Event"); //Set the first Handler
    });

    var h = jQuery._data( document, "events" ).keydown[0].handler; //The (first) Handler

    el.off("keydown",h)

    el.on("keydown",function (e) {
        console.log("Second Handler")
        h(e);
    });

Then the output would look like

//Second Handler
//First Handler

I rember that i used to do this like el.data("events") but that seems deprecated

Custom Keybindings to Override existing ones

2 Answers2