jqxGrid column using createwidget causes "Invalid Selector" error

[jluParticipant]

I am

    columns: any[] =
    [
         { text: 'Action', datafield: 'id', editable: false, filterable: false,
          createwidget: (row: any, column: any, value: string, htmlElement: HTMLElement): void => {

              const vContainer = document.createElement('div');
              const vId = 'btnLocationView_' + row.bounddata.id;
              vContainer.id = vId;
              htmlElement.appendChild(vContainer);

              
              console.log(htmlElement);     // #1 correctly prints the html element
              
              const vOptions = {
                  value: "<i class='ion ion-android-search' title='View Details' aria-hidden='true'></i>" };
              
              const vButton = jqwidgets.createInstance('#'+ vId, 'jqxButton', vOptions);
              
              console.log("after create...");  // #2 never gets here

In the code above, the first console.log() correctly prints the element, but 2 lines later I got an error about ERROR Error: Invalid Selector #___! Please, check whether the used ID or CSS Class name is correct – if that valid element is not in the DOM yet, how can I avoid the error and create a jqxButton in this column??

Thanks!

[TodorParticipant]

Hello jlu,

Please change const vId = 'btnLocationView_' + row.bounddata.id; with const vId = 'btnLocationView_' + row['bounddata'].uid; and check if it will work.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[jluParticipant]

Hi Todor,

No matter what vId I use, it doesn’t work.

I have tried:

const vId = ‘btnLocationView_’ + row[‘bounddata’].uid;
const vId = ‘123’;

It looks like after “htmlElement.appendChild(vContainer);” the vContainer is not always immediately ready to be used for jqwidgets.createInstance().

Thanks!

[TodorParticipant]

Hello jlu,

I’ve made an example with your code and it’s working. Could you please review it?

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[jluParticipant]

Hi Todor,

I modified your example to make the problem reproducible for you: modified example

I added more columns to the display list, also used different options for the grid in app.component.html.

Thanks!

[TodorParticipant]

Hello jlu,

The problem is that you’re using percentages for grid’s width. I fixed it by making a custom function which calculates and turns the percentage into pixels. You could review the example.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[jluParticipant]

Hi Todor,

Is percentage not supported for a grid’s width?

It works fine if I comment out the first two columns: working example with 99% width

Your example would not work for us because our grid is not the sole element on the web page, we will need a way to set its width in relation to its parent container.

This looks like a bug to me, could you escalate it to the development team to address it?

Thanks!

[TodorParticipant]

Hello jlu,

I would like to suggest you to review the following demo. I think it would work for you and it doesn’t have the columns problem.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[jluParticipant]

Hi Todor,

Your suggested working demo doesn’t help. Our app doesn’t use the same exact # of columns, doesn’t show the same data, and doesn’t use the same exact configuration as your demo.

I have been spending my time to help you reproduce the bug, it’s 100% reproducible, do you see the problem with my modifications to your examples/demo or not?

Here I am doing another modification to your latest suggested demo that uses the getWidth() and the problem still exist: problem exists using getWidth()

Please escalate the issue to the development team to address this, thank you!

[TodorParticipant]

Hello jlu,

The latest demo that I’ve sent is using cellsrender instead of createwidget and there is no issue with getWith().
Also we will create a work item about the createwidget and getWidth() behavior.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[jluParticipant]

Hi Todor,

We have to use createwidget() because there are 5 buttons in our table column. It doesn’t make sense to create 5 different columns, each for one kind of button because the extra vertical gridlines make the table look too busy.

Here is the demo you are referring to:

    columns = [

        {
            text: 'Edit', datafield: 'Edit', columntype: 'button',
            cellsrenderer: (): string => {
                return 'Edit';
            },

Can you tell me if I can squeeze 5 buttons into cellsrenderer?

Thanks!

[TodorParticipant]

Hello jlu,

No, but you could style the columns in the way that is looking as one column.
You could review the following example.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[jluParticipant]

Hi Todor,

We cannot get the columntype of ‘button’ to work with icons.

Here is what we currently have using createwidget – no gridlines between each icon, one single column header at the top:

Any idea? Thanks.

[TodorParticipant]

Hello jlu,

Please review the following example whether it fits your needs. It uses cellsrenderer with img, also has click event.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[jluParticipant]

Hi Todor,

It doesn’t work for us because:

1. We cannot place a column header “Actions”
2. There are extra vertical gridlines in the header rows
3. We cannot generate all the images we have been using that are icons (https://ionicons.com/cheatsheet.html), the icons are auto-scaled base on the browser’s zoom-level and conformed to the theme color which can be changed.

Please let me know how I can track the bug fix for createwidget? We like to apply it right away as soon as you have a fix.

Thank you!

[Author]

Posts