I've been playing a little with ng-grid, and tried to understand how to use the editCellTemplate option.
I tried to make a cell editable in the form of a select component, and it works pretty awesomely, but after I finish editing and focus out of the cell, it remains in the state of selection, instead of returning to its default state.
Here's a Plunker of what I tried to do (click on height cells to edit).
Does anyone have an idea how I can make the editable cell go back to its default mode?
a great solution
ng-grid: Editable cell templates remain in edit mode on loss of focus v2.0.7
[2]:https://groups.google.com/forum/#!topic/angular/5MZITMG_HLo
<select ng-class="'colt' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" data-placeholder="-- Select One --">
<option>nl</option>
<option>fr</option>
<option>en</option>
</select>
Related
I am importing XML content and based on data inside want to update the selected option in the dropdown. Drop Down selection is getting updated but ng-value I have bound is not getting updated automatically. The same thing works when I use UI and update drop-down selection using a mouse click. below is code I am using:
<select [(ngModel)]="mypage.DataList[i].PO" [id]="'objml-'+i" [ngModelOptions]="{standalone: true}" (change)="updateLcso(i, $event)">
<option *ngFor="let x of poList; trackBy:trackByIndex;" [ngValue]="x" >{{x.po_tag}}</option>
So using the above code works fine when using mouse click and change option in the dropdown. and when I read mypage.DataList[i].PO content, data accurately updated.
I want to update the drop-down option programmatically and using the below code.
(document.getElementById("objml-" + index.toString()) as HTMLSelectElement).selectedIndex = 1;
using the above logic, on UI page drop-down option is getting updated but when I read mypage.DataList[i].PO content, data is still not updated
Help is appreciated, Thanks in advance.
We use textboxes on celltemplates instead using an editableCellTemplate.
http://plnkr.co/edit/M8Do1p?p=preview
<input class="grid_textbox text-center"
ng-blur="grid.appScope.quantityChanged(row.entity)"
ng-model="MODEL_COL_FIELD" style="width:80%"/>
We identify changes by catching ng-blur on the textboxes. However, we noticed that when the textbox is out of view when the user scrolls, it does not trigger the ng-blur on the correct textbox.
To reproduce in plnkr
Click on first textbox.
Click on the second textbox, this will display info on the Blur event. This is the expected behavior
To reproduce the error, click Clear and click on the first textbox again.
Scroll down until up to mid-bottom and click on a textbox. It won't output the same message as above.
Is there a way to fix this or a workaround to get the row that was edited?
Update:
I've tried Guranjan's solution and it worked, but another problem came up. I'm not sure if this should be another question but it's still related to scrolling and blur.
To replicate
Click on 1st textbox and input a number
Scroll until it's out of view.
Click on another textbox and edit.
This time just scroll. You can see the cursor focusing on other textboxes and not triggering blur.
Edit one. Then scroll again (mouse wheel or dragging scrollbar). Edit then scroll.
Click on one textbox to trigger blur. It will not display all of the edits.
This is the plunker of Guranjan to try it.
http://plnkr.co/edit/RWM2y7NLC7821c9vQDO6?p=preview
This is because ui-grid reuses the elements. One way to fix your issue is, store the value of current row on focus and use that on blur. For example, create variable in you app scope:
$scope.currentValue = {};
and then you can update this on input focus:
ng-focus="grid.appScope.currentValue = row.entity"
and you can then use $scope.currentValue to do whatever you need to do with it.
Updated Plnkr
I am creating a multiselect combobox(extjs 6.0.1 version). A textbox has been embedded in it. On clicking in the textbox the combobox collapses.The same issue was happening for select all checkbox but it worked fine after using combo.expand().Also on clicking the Deselect all, the scrollbar goes to the end. This works fine in extjs version 4.1.1 Fiddle below
https://fiddle.sencha.com/#view/editor&fiddle/1kn2
Why adding a text field in the first place?
Shouldn't suffice a normal extjs combo box with editable set to true?
http://docs.sencha.com/ext/6.2.0/classic/Ext.form.field.ComboBox.html
I want a ui-grid where you can edit directly without changing the template.
I tried to override the cellTemplate with the standard of the editable celltemplate, but it isnt getting dirty now.
<div><form name="inputForm"><input type="INPUT_TYPE" ng-class="'colt' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD"></form></div>
So i dont want to show the cellTemplate instead i want to show the editable cellTemplate only.
It looks totally possible to me, just make sure your field attribute contains no unusual symbols (dash or dots mainly, use only letters to be on the safe side).
Look at this plunkr.
I have an infragistics ultragrid control in a windows form. There is an 'Add New' button outside to insert new rows to the grid.
The problem I faced is, when I click the button outside the grid, while I'm editing a cell inside the grid, the cell doesn't lose focus. Because of this the edited new value is not updated to its underlying data source.
I need this cell to lose focus and update it's underlying data source, because the 'Add New' button creates a new row with this particular column having a default value which is calculated based on the previous row's edited value.
So any ideas on how to unfocus the ultragrid cell? This situation may apply to normal GridView also.
If your button is on a Toolbar, then the behavior you are seeing is expected because toolbars don't take focus. If this is the case before performing your logic you can use the PerformAction method of the grid and pass in UltraGridAction.CommitRow to force the row that was being editor to commit its updates.
For example:
this.ultraGrid1.PerformAction(UltraGridAction.CommitRow);
I used myUltraGrid.ActiveRow.Cells[0].Activate(); which also works. But the solution by #alhalama is better one I guess.