jQuery UI Widgets Forums Angular "getEverPresentRowWidgetValue" is not working

This topic contains 11 replies, has 2 voices, and was last updated by  Hristo 15 hours, 42 minutes ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author

  • ilywanzi
    Participant

    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.


    Hristo
    Participant

    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


    ilywanzi
    Participant

    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.


    Hristo
    Participant

    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


    ilywanzi
    Participant

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


    Hristo
    Participant

    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


    ilywanzi
    Participant

    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.


    Hristo
    Participant

    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

    • This reply was modified 4 days, 16 hours ago by  Hristo.

    ilywanzi
    Participant

    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/


    Hristo
    Participant

    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


    ilywanzi
    Participant

    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.


    Hristo
    Participant

    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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.