jQWidgets Forums

jQuery UI Widgets Forums Angular jqxGrid, 'selectedrow' edit mode.

Tagged: ,

This topic contains 4 replies, has 2 voices, and was last updated by  MrBonkeyDollax 6 years, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • jqxGrid, 'selectedrow' edit mode. #103654

    MrBonkeyDollax
    Participant

    Hi,

    I’ve been having trouble enabling ‘selectedrow’ edit on a jqxGrid.
    When using the default edit mode ‘click’ I can edit my data just fine.
    However I am using the ‘custom’ columntype feature to create dropdownlists and datetimeinputs in my cells and having these only instantiate when the user selects the specific cell makes for a rather awkward interface.
    I therefore am trying to use ‘selectedrow’ to enable all the rows widgets at once as seen in,

    https://www.jqwidgets.com/angular/angular-grid/#https://www.jqwidgets.com/angular/angular-grid/angular-grid-fullrowedit.htm

    I noticed that this example includes another script ‘grid_fullrowedit.bundle.js’ which is not included in the downloadable jqwidgets package. Is this file required for this feature to work?

    Thanks,

    jqxGrid, 'selectedrow' edit mode. #103736

    Martin
    Participant

    Hello MrBonkeyDollax,

    No, you don’t need to include additional files.
    What trouble do you have with ‘selectedrow’ editmode?

    You can also check this demo in StackBlitz, if this would help you.

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

    jqxGrid, 'selectedrow' edit mode. #103741

    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,

    jqxGrid, 'selectedrow' edit mode. #103776

    Martin
    Participant

    Hello MrBonkeyDollax,

    Looking at your code, I could not spot a mistake.
    Could you provide a working StackBlitz sample, it could be with some dummy demo data, so we can run the code
    and see what might be the issue?
    Thank you!

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

    jqxGrid, 'selectedrow' edit mode. #104033

    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,

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

You must be logged in to reply to this topic.