jQWidgets Forums

Forum Replies Created

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts

  • MrBonkeyDollax
    Participant

    Hi Martin,

    Aha! My syntax was a little off it seems..
    My initial attempt at using handlekeyboardnavigation can be seen here https://stackblitz.com/edit/github-jcfvl1-dvradr

    I understand this is more of a TS question than of jQWidgets, so I understand if you do not have time to explain, but why do these two different syntax’s behave so differently?

    Thanks again.


    MrBonkeyDollax
    Participant

    Hi Martin,

    Thanks for your help,

    You can find an example of this behaviour here: https://stackblitz.com/edit/github-uiqb8t
    Apologies for the messy code, a lot of formatting seems to have been lost in the copy + paste…

    Thanks,


    MrBonkeyDollax
    Participant

    Hi Martin,

    Thanks for the confirmation.
    The issue I’m having is, when I set editmode = ‘selectedrow’ I’m then unable to edit any cells in my grid.
    Setting editmode = ‘click’ works fine.
    I imagine it has something to do with how I’m implementing dropdown menus/input fields.
    Below is the section of my code that creates and manages the grid’s source/columns.
    I’m attempting to create a query editor screen, allowing users to create a query that is sent via rest and the results displayed.
    Part of this requires me to change the widget that is displayed in the ‘value’ field according to the selected ‘field’.
    I used the demo seen at https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/customrowcelledit.htm for a guideline on implementing this.
    I understand if this is a little too much code to look through, but hopefully I’ve just made a silly mistake that is easy to spot. 🙂

    queryEditor.component.html

    <div>
    	<jqxWindow #myWindow
    		[width]="700" [height]="395"
    		[minWidth]="700" [minHeight]="395"
    		[maxWidth]="700" [maxHeight]="395"
    		[autoOpen]="false">
    		<div #windowHeader>
    			<span>Query Editor</span>
    		</div>
    		<div style="padding: 10px">
    			<jqxGrid #myGrid
    				[width]="678" [height]="300"
    				[source]="myGridDataAdapter" [columns]="myGridColumns"
    				[editable]="true" [editmode]="'selectedrow'" [selectionmode]="'singlerow'"
    				(onCellvaluechanged)="myGridCellValueChange($event)"
    				(onCellendedit)="myGridCellEndEdit($event)">
    			</jqxGrid>
    			<div style="padding: 10px 0px 10px 0px">
    				<div style="float:left">
    					<jqxButton #myCancelButton
    						[width]="120" [height]="30" (onClick)="myCancelButtonClick($event)">
    						Cancel
    					</jqxButton>
    				</div>
    				<div style="float: right">
    					<jqxButton #myOKButton
    						[width]="120" [height]="30" (onClick)="myOKButtonClick($event)">
    						OK
    					</jqxButton>
    				</div>
    			</div>
    		</div>
    	</jqxWindow>
    </div>

    Section of queryEditor.component.ts

    @ViewChild('myWindow') myWindow: jqxWindowComponent
        @ViewChild('myGrid') myGrid: jqxGridComponent;
        @ViewChild('myOKButton') myOKButton: jqxButtonComponent;
        @ViewChild('myCancelButton') myCancelButton: jqxButtonComponent;
    
        myGridSource : any = {
            localdata: this.queryData,
            datatype: 'json',
            datafields:[
                { name: 'delete', type: 'string' },
                { name: 'field', type: 'string' },
                { name: 'comparison', type: 'string' },
                { name: 'value', type: 'string' },
                { name: 'conjunction', type: 'string'}
            ]
        };
        getEditorDataAdapter = (datafield: string): any => {
            let dataAdapter = new jqx.dataAdapter(this.myGridSource, { uniqueDataFields: [datafield] });
            return dataAdapter;
        }
        input: any;
        myGridDataAdapter : any = new jqx.dataAdapter(this.myGridSource);
        createConjunctionEditor = (row: number, cellValue: any, editor: any, cellText: any, width: any, height: any): void => {
            editor.jqxDropDownList({ autoDropDownHeight: true, width: width, height: height, source: this.conjunctionArray, theme: this.jqxTheme });
        }
        createComparisonEditor = (row: number, cellValue: any, editor: any, cellText: any, width: any, height: any): void => {
            editor.jqxDropDownList({ autoDropDownHeight: true, width: width, height: height, source: this.comparisonArray, theme: this.jqxTheme });
        }
        createFieldEditor = (row: number, cellValue: any, editor: any, cellText: any, width: any, height: any): void => {
            editor.jqxDropDownList({ autoDropDownHeight: true, width: width, height: height, source: this.fieldNames, theme: this.jqxTheme });
            
        }
        createValueEditor = (row: number, cellValue: any, editor: any, cellText: any, width: any, height: any): void => {
            var rowData = this.myGrid.getrowdata(row);
            var fieldType = this.getFieldType(rowData["field"]);
            switch(fieldType){
                case 'string':{
                    let container = document.createElement('input');
                    container.className = 'Value';
                    editor[0].appendChild(container);
                    let options = {
                        width: width, height: height,
                        displayMember: 'Value',
                        source: this.getEditorDataAdapter('Value'),
                        theme: this.jqxTheme
                    };
                    this.input = jqwidgets.createInstance('.Value', 'jqxInput', options);
                    break;
                }
                case 'boolean':{
                    let element: any = $('<div tabIndex=0 style="position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px;"></div>');
                    editor.append(element);
                    element.jqxCheckBox({ animationShowDelay: 0, animationHideDelay: 0, width: width, height: height, theme: this.jqxTheme });
                    break;
                }
                case 'date':{
                    editor.jqxDateTimeInput({ width: width, height: height, theme: this.jqxTheme });
                    break;
                }
                case 'time':{
                    editor.jqxDateTimeInput({ width: width, height: height, theme: this.jqxTheme, formatString: "'T'" });
                    break;
                }
                default :{ //Numbers
                    editor.jqxNumberInput({ width: width, height: height, theme: this.jqxTheme, inputMode: 'simple' });
                    break;
                }
            }
        }
        initConjunctionEditor = (row: number, cellValue: any, editor: any, cellText: any, width: any, height: any): any => {
            editor.jqxDropDownList('selectItem', cellValue);
            editor[0].onchange = function testing() {
                console.log("does this work");
            }
        }
        initComparisonEditor = (row: number, cellValue: any, editor: any, cellText: any, width: any, height: any): any => {
            editor.jqxDropDownList('selectItem', cellValue);
        }
        initFieldEditor = (row: number, cellValue: any, editor: any, cellText: any, width: any, height: any): any => {
            editor.jqxDropDownList('selectItem', cellValue);
        }
    
        initValueEditor = (row: number, cellValue: any, editor: any, celltext: any, pressedkey: any): any => {
            var rowData = this.myGrid.getrowdata(row);
            var fieldType = this.getFieldType(rowData["field"]);
            switch(fieldType){
                case 'string':{
                    if(this.input[row]==undefined){
                        if (pressedkey) {
                            this.input.value = pressedkey;
                            this.input.selectLast();
                        }else{
                            this.input.value = cellValue;
                            this.input.selectAll();
                        }
                    }else{
                        if (pressedkey) {
                            this.input[row].value = pressedkey;
                            this.input[row].selectLast();
                        }else{
                            this.input[row].value = cellValue;
                            this.input[row].selectAll();
                        }
                    }
    
                    break;
                }
                case 'boolean':{
                    var checkBoxHTMLElement = editor.find('div:first');
                    checkBoxHTMLElement.jqxCheckBox({ checked: cellValue.toString() == "true" });
                    break;
                }
                case 'date':{
                    editor.jqxDateTimeInput('val', cellValue);
                    break;
                }
                case 'time':{
                    editor.jqxDateTimeInput('val', cellValue);
                    break;
                }
                default :{ //Numbers
                    editor.jqxNumberInput('val', cellValue);
                    break;
                }
            }
        }
        gridEditorValue = (row: number, cellValue: any, editor: any): any => {
            return editor.val();
        }
    
        gridInputValue = (row: number, cellValue: any, editor: any): any => {
            var rowData = this.myGrid.getrowdata(row);
            var fieldType = this.getFieldType(rowData["field"]);
            if(fieldType == "string"){
                return editor[0].children[0].value;
            }else{
                return editor.val();
            }
        }
    
        myGridColumns : any[] = [
            { text: '', columntype:'button', datafield:null, width:'5%', editable: 'false',
                cellsrenderer: (): string => {
                    return 'X';
                },
                buttonclick: (row: number): void => {
                    // console.log('Delete button clicked!' + row);
                    // console.log(this.myGrid.getrowboundindex(row));
                    // console.log(this.myGrid.getrowboundindexbyid(row));
                    // console.log(this.myGrid.getrows());
                    if(this.myGrid.getrows().length > 1){
                        var rowid = this.myGrid.getrowid(row);
                        this.myGrid.deleterow(rowid);
    
                    }
                }
            },
            { text:'Field', columntype:'custom', datafield:'field', width:'30%', createeditor: this.createFieldEditor, initeditor: this.initFieldEditor, geteditorvalue: this.gridEditorValue },
            { text:'Comparison', columntype:'custom', datafield:'comparison', width:'15%', createeditor: this.createComparisonEditor, initeditor: this.initComparisonEditor, geteditorvalue: this.gridEditorValue },
            { text:'Value', columntype:'custom', datafield:'value', width:'35%', createeditor: this.createValueEditor, initeditor: this.initValueEditor, geteditorvalue: this.gridInputValue },
            { text:'Conjunction', columntype:'custom', datafield:'conjunction', width:'15%', createeditor: this.createConjunctionEditor, initeditor: this.initConjunctionEditor, geteditorvalue: this.gridEditorValue },
        ];

    Thanks,


    MrBonkeyDollax
    Participant

    Hi Hristo,

    Thanks for the quick response on this matter,

    Please keep me posted.

    Thanks again,

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