style grid cell in edit mode

[jahnvi25Participant]

how can i set the custom style when cell is in edit mode.?

[DimitarParticipant]

Hello jahnvi25,

Please clarify. Do you mean:

a) you wish to enter HTML and CSS code during edit mode which to be applied when the cell has left edit mode?
If so, note that HTML markup is supported in the default cell editor, i.e., if you enter:

<em>Chai</em>

it will be output as:

Chai

You can try this in the Default Functionality demo.

b) you wish the editor to be styled.
In this case, you can style it in the createeditor callback function. In the demo Custom Column Editor, you can change the first column to:

columns: [
    {
        text: 'First Name', columntype: 'template', datafield: 'firstname', width: 80, createeditor: function (row, cellvalue, editor, cellText, width, height) {
            // construct the editor.
            var inputElement = $("<input style='color: Red;'/>").prependTo(editor);
            inputElement.jqxInput({ source: getEditorDataAdapter('firstname'), displayMember: "firstname", width: width, height: height });
        },
        initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
            // set the editor's current value. The callback is called each time the editor is displayed.
            var inputField = editor.find('input');
            if (pressedkey) {
                inputField.val(pressedkey);
                inputField.jqxInput('selectLast');
            }
            else {
                inputField.val(cellvalue);
                inputField.jqxInput('selectAll');
            }
        },
        geteditorvalue: function (row, cellvalue, editor) {
            // return the editor's value.
            return editor.find('input').val();
        }
    },

and the font colour of the editor will be red.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[jahnvi25Participant]

i am sorry for confusion.. but all i want is set the border around editor. i am using default editor.. (cell is text). i just want to set the border around the editing cell..

how can i do that ?

[DimitarParticipant]

Hi jahnvi25,

Then you should follow the second approach. In the Custom Column Editor demo, change the first column to (note the createeditor callback function):

columns: [
    {
        text: 'First Name', columntype: 'template', datafield: 'firstname', width: 80, createeditor: function (row, cellvalue, editor, cellText, width, height) {
            // construct the editor.
            var inputElement = $("<input style='border: 2px solid Red;' />").prependTo(editor);
            inputElement.jqxInput({ source: getEditorDataAdapter('firstname'), displayMember: "firstname", width: width - 4, height: height - 4 });
        },
        initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
            // set the editor's current value. The callback is called each time the editor is displayed.
            var inputField = editor.find('input');
            if (pressedkey) {
                inputField.val(pressedkey);
                inputField.jqxInput('selectLast');
            }
            else {
                inputField.val(cellvalue);
                inputField.jqxInput('selectAll');
            }
        },
        geteditorvalue: function (row, cellvalue, editor) {
            // return the editor's value.
            return editor.find('input').val();
        }
    },

Now when you enter edit mode, the input will be with a red border around it.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[jahnvi25Participant]

Thanks for reply. but its not working properly in my case.. i have to set data at run time. so getEditorDataAdapter(..) gives me u.localdata undefined error..

is there any other way to get the column Data adapter ?

[jahnvi25Participant]

so i am doing following.. and it seem to be working.. but i dont know whether its correct..
basically i am not setting source.. would that be fine ?

var inputElement = $(“<input style=’border:1px solid #6F93B9;box-shadow: inset 0 0 2px 2px #E5E5E5;border-radius:0′ />”).prependTo(editor);
inputElement.jqxInput({width: width – 4, height: height – 4 });

[DimitarParticipant]

Hi jahnvi25,

The source setting has nothing to do with the styling of the editor. I sent you this sample code so that you can update the demo Custom Column Editor with it and see the result right away. Thus, your implementation is correct.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts