Width of jqxDateTimeInput in everpresent row

[trandmaParticipant]

I am using everpresentrow to enter new records into the table. For date fields, the everpresentrow has the jqxDateTimeInput widget configured. For the most part it works as expected but there is a problem with the width of the widget when the table is first rendered.

When the column width is set as a number, the widget correctly sets itself to the same width. However when the column width is set as a percentage, the jqxDateTimeWidget sets its width too small and the result does not look good. The rest of the columns do not use custom widgets in the everpresentrow and set their width correctly.

Once I try to resize any of the columns, the jqxDateTimeWidget in the everpresentrow also snaps into correct size. So I assume it just does not know how to resize itself at initialization.

I have tried calling myGrid.render() and myGrid.refresh() after my binding is complete but it looks like the column.createEverPresentRowWidget() function is called even after the binding is finished. Could you please advise on how to set up the jqxDateTimeWidget with dynamic width or how to trigger the column width refresh that would snap the widget to correct width.

My code for setting up the widget is:

    private addEverPresentDateFieldToColumn(col) {
        col.everPresentInput = {};
        col.createEverPresentRowWidget = (datafield: string, htmlElement: HTMLElement, popup: any, addCallback: any): HTMLElement => {
            console.log('GridComponent.addEverPresentDateFieldToColumn -> createEverPresentRowWidget.column: ' + col.datafield);
            let container = document.createElement('div');
            container.id = 'everPresent_' + col.datafield;
            container.style.border = 'none';
            htmlElement[0].appendChild(container);

            let options = {
                width: '100%', height: 30, value: null,
                popupZIndex: 999999, placeHolder: 'Enter Date: ',
                formatString: col.cellsformat
            };
            col.everPresentInput.options = options;
            col.everPresentInput.widget = jqwidgets.createInstance('#' + container.id, 'jqxDateTimeInput', options);
            let inputElement = col.everPresentInput.widget.element.getElementsByTagName('input');
            if (!_.isNil(inputElement) && inputElement.length > 0) {
                inputElement[0].className = inputElement[0].className + ' jqx-grid-cell-add-new-row';
            }

            return container;
        };
        col.initEverPresentRowWidget = (datafield: string, htmlElement: HTMLElement): void => {
        };
        col.getEverPresentRowWidgetValue = (datafield: string, htmlElement: HTMLElement, validate: any): any => {
            let value = col.everPresentInput.widget.val();
            return value;
        };
        col.resetEverPresentRowWidgetValue = (datafield: string, htmlElement: HTMLElement): void => {
            col.everPresentInput.widget.val(null);
        }
    }

Thank you

[trandmaParticipant]

I forgot to mention that my table width is also set at 100%

[HristoParticipant]

Hello trandma,

I tested the example that you provide and it seems to work fine.
I set the column with the jqxDateTimeInput in the ‘everpresentrow’ in percentage and also, the whole grid is in percentage.
Could you clarify it? Did you receive any error message in the console?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[trandmaParticipant]

Thank you for taking the time to test it out. I did some more testing of my own and in a normal situation the problem does not arise. However I create the jqxGrid programatically and the initialization process related to that might be the cause of my problems. I have created a smallish CLI example app to demonstrate the issue.

https://drive.google.com/open?id=1HpKJ_gAR4otGla4tpdWYbWQyVOwvpV84

Initially when the page loads on my Chrome browser, the date field is much narrower than the column. Once you resize either the column or the browser window, the input snaps to correct size.

Any advice on how to work around this issue would be greatly appreciated.

[HristoParticipant]

Hello trandma,

This is one project with many rows of code and a little bit confusing.
We do not have practice to debugging such source code.
But I would like to suggest you one approach – you could update the jqxGrid in the bindingcomplete event.
Please, take a look at this example:

firstBind = true;
    bindingcomplete(event) {
        console.log('bindingcomplete -> event: ');
        this.bindInit = true;
        if (this.firstBind) {
            this.firstBind = false;
            this.myGrid.updatebounddata();
        }
    }

Also, I think this tutorial could be helpful:
https://www.jqwidgets.com/angular-components-documentation/documentation/angular-dynamic-components/index.htm?search=

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[trandmaParticipant]

Thank you for the tip. It led me to a working solution. When I used the code you suggested initially, it gave me the following error message: ERROR Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler

However when I set a minimal timeout to execute the updatebounddata AFTER the bindingcomplete event has finished, it worked as expected and the grid got refreshed and the everpresentrows correctly resized from the get-go:

setTimeout( () => this.myGrid.updatebounddata(), 1);

[Author]

Posts