jQWidgets Forums
Forum Replies Created
-
Author
-
February 19, 2019 at 11:30 am in reply to: jqxGrid, strange Tab key behaviour after editing cell jqxGrid, strange Tab key behaviour after editing cell #104053
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-dvradrI 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.
February 18, 2019 at 3:21 pm in reply to: jqxGrid, 'selectedrow' edit mode. jqxGrid, 'selectedrow' edit mode. #104033Hi 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,
January 29, 2019 at 1:04 pm in reply to: jqxGrid, 'selectedrow' edit mode. jqxGrid, 'selectedrow' edit mode. #103741Hi 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,
April 26, 2018 at 11:42 am in reply to: jqxInput 'OnChange' Event Triggering multiple times jqxInput 'OnChange' Event Triggering multiple times #99925Hi Hristo,
Thanks for the quick response on this matter,
Please keep me posted.
Thanks again,
-
AuthorPosts