Custom Cell edit / render

[LeeWatsonParticipant]

Hi,

I’ve two use cases that I need to support – I’ll try to use low res graphics to demonstrate.

1. In a single column, I need to have an editable textbox and a combo dropdown:

|some text [dropdown]|

2. In a single column, I need to bring up a popup div containing a number of checkboxes, where the user can select one or more options:

|clickme|

on click, the user would see a popup box:

[x] one
[ ] two
[x] three

So two very specific editors. The examples you have using cellbeginedit tend to focus on editor.jqx xxxxxxx editors.

Is there a way to achieve the above use cases?

Thanks,

Lee

[HristoParticipant]

Hello Lee,

You could visualize those elements by createwidget callback.
Please, take a look at this example:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?light

About your second question I would suggest looking at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/popupediting.htm?light
(You could bind on cellclick event and open the window when clicking on the desired column)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[LeeWatsonParticipant]

Hi Hristo,

Thanks for the info – will give it a go.

Cheers

Lee

[LeeWatsonParticipant]

Hi Hristo,

In which version was this feature added?

I’m currently using 3.8.2.

Thanks,

Lee

[HristoParticipant]

Hello Lee,

We recommend to using the latest version (v4.5.0) because there are all new features with their best options.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[LeeWatsonParticipant]

Hi Hristov,

Upgraded to attempt your suggestions.

I have the following code, which displays an input with a button.

The problem is that I cannot type text into the input box. The button click works.

Any ideas?

Thanks,

Lee

createwidget: function (row, column, value, htmlElement) {

var textbox = $(‘<span style=”display:inline-block; margin-left: 20px” class=”wrapper”><input style=”width: 200px” /><button onclick=”alert(\’x\’);”>GO</button></span>’);
$(htmlElement).append(textbox);

[HristoParticipant]

Hello Lee,

You could try to add them separately.

var button = $("<div style='border:none;'>" + img + "<div class='buttonValue'>" + value + "</div></div>");
var input = $('<input type="text"/>');

$(htmlElement).append(input);
$(htmlElement).append(button);

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[LeeWatsonParticipant]

Hi Hristo,

Thanks for the super quick reply.

I’ve just tried the following:

createwidget: function (row, column, value, htmlElement) {
var input = $(‘<input type=”text”/>’);
$(htmlElement).append(input);

Which translates to:

<div role=”gridcell” style=”left: 646px; z-index: 743; width:300px;” class=”jqx-grid-cell jqx-item”>
<div class=”jqx-grid-widget” style=”opacity: 0.99; position: absolute; width: 100%; height:100%; top: 0%; left: 0%; padding: 0px;” hidefocus=”true”>
<input type=”text” class=”jqx-grid-widget”>
</div>
</div>

The input is still disabled. By the way, I’m using version v4.2.1.

Will keep investigating, but not sure why this would be disabled. Could there be any clues in the generated HTML?

Thanks,

Lee

[LeeWatsonParticipant]

Hi,

This is odd.

I can enter certain characters, e.g. \ / . ? but not alphanumeric and not shift+numeric key – e.g. ! ” etc.

Thanks,

Lee

[LeeWatsonParticipant]

Hi Hristo,

Traced it down to some logic we have handling keystrokes.

I think I have it working from here for now.

Thanks for all your help!

Lee

[HristoParticipant]

Hello Lee,

I assume that everything is fine if you have any other questions please write.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts