"getEverPresentRowWidgetValue" is not working

[ilywanziParticipant]

Hi, I am using ever present row in jqxGrid, and need to use datetimeinput in one of the column, but getEverPresentRowWidgetValue cause the problem.
Here is that column’s config:

            config['cellsformat'] = 'MM/dd/yyyy hh:mm tt';
            config['createEverPresentRowWidget'] = (
              field: string,
              htmlElement: HTMLElement,
              popup: any,
              addCallback: any
            ): HTMLElement => {
              const container = document.createElement('div');
              container.id = 'myDateTimeInput';
              container.style.border = 'none';
              htmlElement[0].appendChild(container);
              const options = {
                popupZIndex: 999999,
                placeHolder: 'Enter Date: ',
                showTimeButton: true,
                showCalendarButton: true,
                formatString: 'MM/dd/yyyy hh:mm tt'
              };

              this.dateTimeInputForEverPresentRow = jqwidgets.createInstance(
                '#myDateTimeInput',
                'jqxDateTimeInput',
                options
              );

              return container;
            };
            config['initEverPresentRowWidget'] = (
              field: string,
              htmlElement: HTMLElement
            ): void => {};
            config['getEverPresentRowWidgetValue'] = (
              field: string,
              htmlElement: HTMLElement,
              validate: any
            ): any => {
              const value = this.dateTimeInputForEverPresentRow.val();
              console.log('value: ', value);
              return new Date(value);
            };

Html:

            <jqxGrid
              [width]="'100%'"
              [source]="dataAdapter"
              [columns]="columns"
              [showeverpresentrow]="true"
              [everpresentrowposition]="'top'"
              [everpresentrowactions]="'addBottom '"
              [everpresentrowactionsmode]="'columns'"
            >
            </jqxGrid>

Now I can see the calendar and timepicker in ever present row, and I am able to select date or time, but when I click the “Add” button, this error shows:

ERROR TypeError: G.addnewrowwidget.attr is not a function
    at HTMLButtonElement.<anonymous> (jqx-all.js:90)
    at HTMLButtonElement.dispatch (jquery.js:5183)
    at HTMLButtonElement.elemData.handle (jquery.js:4991)
    at Object.trigger (jquery.js:8249)
    at HTMLButtonElement.<anonymous> (jquery.js:8327)
    at Function.each (jquery.js:354)
    at jQuery.fn.init.each (jquery.js:189)
    at jQuery.fn.init.trigger (jquery.js:8326)
    at HTMLDivElement.<anonymous> (jqx-all.js:90)
    at HTMLDivElement.dispatch (jquery.js:5183)

If I remove the getEverPresentRowWidgetValue from column, and click “Add”, the error won’t show, but I can’t get the value.
Please help me to figure out this issue, thanks.

[HristoParticipant]

Hello ilywanzi,

I tested this example and it seems to work fine:
https://www.jqwidgets.com/angular/angular-grid/angular-grid-everpresentrowwithcustomwidgets.htm?light
Could you provide us with one simplified example that demonstrates this?
If it possible in stackblitz or provide to the Support Team simple project without the “node_modules” folder.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[ilywanziParticipant]

Hi, Hristo, thanks for replying my question!
I made some changes based on your example to reproduce the problem, please check this example.
Please check line 70, if I use validateeverpresentrowwidgetvalue inside column config(even if this function only return true), then click “Add” button, will cause the error I mentioned at the beginning: ERROR Error: G.addnewrowwidget.attr is not a function. If remove validateeverpresentrowwidgetvalue, the error will gone. But Actually I need this one to implement the ever present row validation.
Could you please check this issue? Thanks.

[HristoParticipant]

Hello ilywanzi,

Thank you for this example.
I will create a work item for this case.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[ilywanziParticipant]

Hi, Hristo, thanks, I really need that solution.

[HristoParticipant]

Hello ilywanzi,

You could try as a workaround you could bind to the valueChanged event (in the createEverPresentRowWidget callback) of the jqxDateTimeInput and it is fired show tooltip with a message.
In that way, you could notify the user before clicking on the Add button.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[ilywanziParticipant]

Hi, Hristo, could you please provide some examples about the valueChanged and the way of showing tooltip base on my example?
Also I found an issue when using createEverPresentRowWidget. If my current route is localhost:9000/#product/${productId}, then I select a date from the date column which created by createEverPresentRowWidget, and click “Add”. In source’s addrow callback function I make an add-row request, then insert the new row into grid if the request is success. The request is success but the page is redirected to localhost:9000/#. You can also check this issue here. You can edit the Stackblitz right side browser’s url to this https://github-r2eepm.stackblitz.io/#/product/123, then select a date and click “Add”, the page will redirect to https://github-r2eepm.stackblitz.io/#.

So I have two issues that need to be resolved:
1. The error when using validateeverpresentrowwidgetvalue and createEverPresentRowWidget together in column config;
2. The redirect issue I mentioned above.

Thanks.

[HristoParticipant]

Hello ilywanzi,

As I mentioned before I created a work item for this case already.
You could check the progress on this page:
https://github.com/jqwidgets/jQWidgets/issues/306
About the integration of the jqxTooltip please, take a look at this example:
https://stackblitz.com/edit/github-r2eepm-ts15jb
Also, I checked your example and did not find redirection, it stays on the same page.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[ilywanziParticipant]

Hi, Hristov, thanks for you answer, but I don’t think using jqxTooltip is a good idea because in your example, you are using static mouse coordinate, but after I check this post, I found we can not get the dynamic grid cell coordinate, please check: https://www.jqwidgets.com/community/topic/clicked-cell-position/

[HristoParticipant]

Hello ilywanzi,

Depends on the widget you could recognize on which column the user has typed something and show tooltip there.
It is just a suggestion, please let me know if you have any other questions.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[ilywanziParticipant]

Hi, Hristo, thanks for you reply.
Could you please provide a way to recognize column position where the user has typed? I tried to use the event callback from addEventHandle, but both of pageX and pageY are undefined.

And I have one more question about the render speed issue if use multiple jqxgrids in one page, and I created a new post: https://www.jqwidgets.com/community/topic/render-speed-issue-if-use-5-grids-in-one-page/, could you please help? Thanks.

[HristoParticipant]

Hello ilywanzi,

I mean that if the columns are fixed and you should know their positions.
But yes you are right.
Please, take a look at this example:
https://stackblitz.com/edit/github-r2eepm-cluftc

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts