Jqgrid and jqxeditor integration

Question

I'm trying to integrate jqx editor with jqgrid. It works fine for the row edit part (get operator), but I'm still having problems for the add part (set operator). The dialog window appears with the editor, but I don't know how to get the data from the jqxeditor. How should I implement my custom_value function in this case (text field)? Thanks!

$Notegrid.jqGrid({
        url: al.rooturl + suffix,
        datatype: "json",
        mtype: "POST",
        loadonce: false,
        altRows: false,
        colNames: ["ID", "Note","Liée à","Actions"],
        colModel: [
            { name: "id", index: "id", width: 80, align: "center",sorttype: "int" },
            { name: "text", index: "text",editable: true, edittype:"custom", editoptions:{
                    custom_element:function( value, options) {
                        elm = $('<div id="'+options.id+'"></div>');                         
                        // give the editor time to initialize
                        setTimeout( function() {
                            elm.jqxEditor({ 
                                tools: 'bold italic underline size', 
                                width: '100%', 
                                height: '100%'
                            });
                            elm.val( value );
                            }, 100
                        );

                        return elm;
                    },
                    custom_value:function( element, oper, gridval) {    
                        if(oper === 'set'){
                            // how to set the data ?
                        }else{
                            if(oper === 'get') {
                                return element.jqxEditor('val');
                            }
                    }

                    }}, width: 500, formatter: formatText },...

Answer 1

I don't know jqxEditor, but debugging of your demo shows that editing works, but saved text contains double text. To fix the problem you can try to use

return element.jqxEditor('val')[0];

instead of

return element.jqxEditor('val');

See http://jsfiddle.net/OlegKi/nfo2aaj1/18/

UPDATED: I understand now better your problem. First of all you tried to use form editing of local data which is not supported out of the box in jqGrid 4.6. It's implemented in jqGrid starting with 4.7 version. The next problem is the usage of div created in custom_element for jqxEditor. The problem is the following. One have to create an DOM element and return it (or jQuery wrapper on it like you do) from custom_element callback. jqGrid assign then id and name to the element. So assigning id in your implementation of custom_element callback is not required. The problem, which one have in form editing, is jqxEditor seems to overwrite the attributes. As the workaround I suggest to create additional outer <div> together with the main <div> forwarded to jqxEditor. The corresponding code will be

custom_element: function (value, options) {
    var elm = $("<div><div></div></div>");                          
    // give the editor time to initialize
    setTimeout(function() {
        elm.children("div").jqxEditor({ 
            tools: 'bold italic underline size', 
            width: '100%', 
            height: '100px'
        });
        elm.children("div").val(value);
    }, 100);

    return elm;
},
custom_value: function (element, oper, gridval) {   
    if (oper === 'set') {
        // how to set the data ?
    } else {
        if (oper === 'get') {
            return element.children("div").jqxEditor('val');
        }
    }
}

The corresponding demo http://jsfiddle.net/OlegKi/nfo2aaj1/23/ seems to work. I used the latest version (4.9.2) of free jqGrid in the demo. It support form editing of local data. The demo sees both inline and form editing and both seems to work without any problem.