jQWidgets Forums
jQuery UI Widgets › Forums › Angular › jqxGrid, 'selectedrow' edit mode.
This topic contains 4 replies, has 2 voices, and was last updated by MrBonkeyDollax 6 years, 4 months ago.
-
Author
-
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,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,
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,
MartinjQWidgets Team
http://www.jqwidgets.com/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,
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,
MartinjQWidgets Team
http://www.jqwidgets.com/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,
-
AuthorPosts
You must be logged in to reply to this topic.