[jluParticipant]

Thank you, fetch() is the function I was looking for, but it’s not published on the API documentation.

[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!

[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.

[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!

[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!

[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!

[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!

[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!

[jluParticipant]

Never mind, there was a typo with the upper case of the var name, this works:

          initwidget: (row: any, column: any, value: any, htmlElement: HTMLElement): void => {
              console.log(htmlElement.id);
          }

[jluParticipant]

I have just encountered another problem when I go to the next page of the grid. It looks like the original row.bounddata was permanently bound to the click handler, thus clicking on the 2nd page returns the 1st-page data.

I know I can use the initwidget() callback to update the widget, can you provide an example? I need the Angular version.

I have tried this to figure out what htmlElement is:

          initwidget: (row: any, column: any, value: any, htmlElement: HTMLElement): void => {
              console.log(HTMLElement.id);
          }

I got an error:
error TS2339: Property ‘id’ does not exist on type ‘{ new (): HTMLElement; prototype: HTMLElement; }’.

How can I update this make use of it?

Thanks!

[jluParticipant]

Never mind, I got this work by creating a closure:

              vButton.addEventHandler('click', (function (dlg) {
                  return function (event) {
                      const dialogConfig = new MatDialogConfig();
                      dialogConfig.disableClose = true;
                      dialogConfig.autoFocus = true;
                      dialogConfig.data = row.bounddata;
                      
                      dlg.open(DeploymentPartnerDetailComponent, dialogConfig);
                  }
              })(this.dialog), false);

[Author]

Posts