The example "Edit On Focus Cell Selection Example" in ng-grid website works fine on Chrome, but it didn't work on IE 10 and 11, when i lost focus on the edit cell, the cell did not go back to readonly state.
Can anyone help and give me a better work round for it?
Thanks in advance!
http://angular-ui.github.io/ng-grid/
This is because ng-grid has added an 'unselectable' attribute in the template, this attribute only works in IE, it will make the section unselectable.
The newly version ui-grid does not has it.
Just added some removing logic in the controller to remove it is ok.
//Remove unselectable attribute which is added by ngGrid
$timeout(function () {
var ngViewPorts = angular.element.find('.ngViewport');
angular.forEach(ngViewPorts, function(ngViewPort){
if(ngViewPort.getAttribute('unselectable') === 'on') {
ngViewPort.removeAttribute('unselectable');
}
});
});
Related
I have a grid with a checkbox selection model and tall cells due to custom html renderers. The problem is when any cell is clicked the grid jerks because the selected cell is scrolled into the focus.
Here is a fiddle with the problem, try scrolling the table manually halfway first and then clicking on the cells to see the grid jumping (it's not consistent, might need to try a few times): https://fiddle.sencha.com/#view/editor&fiddle/1vma
Is there a way to disable row focusing on click, or disable row selection on click if thats the root cause (so you would have to use checkboxes to select rows).
If your grid row contains text that needs to be editable/selectable you can use:
viewConfig: {
navigationModel: {}
}
I have found that returning false from the "beforecellmousedown" event listener function prevents the behavior you are trying to avoid.
listeners: {
beforecellmousedown: function () {
return false;
}
}
Here is the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1vq3
Suggested earlier answers work for Modern Toolkit only.
For Classic this code helps:
listeners: {
cellclick: function () {
this.blur();
}
}
How do I get the grid cell value into modal by clicking on a cell inside Angular ui-grid?
I am using the UI-Grid plugin.
yes thanks for your response #Meir, i can't provide code because getting data into grid from back end without back end data we can't test , but finally got the solution using row.entity.columnvalue[coming from backend), by doing this i am getting value into template
$scope.gridOptions = {
columnDefs: [
{ name: 'username', cellTemplate: '<div class="ui-grid-cell-contents" ng-model="row.entity.username" ng-click="grid.appScope.showMe(row.entity.username)">{{row.entity.username}}</div>'}]
};
It depends if the cell is editable or not. If it is, listen to a beginCellEdit event, you should get the row and column in the event and you can get the actual value and open your modal.
If you prefer not to use and editable grid, use a cellTemplate with ng-click="..." that passes as a parameter the column name. Note that you might need to use appScope in your ng-click code.
If you put a more specific example, I might be able to narrow down the answer.
I need activate the last tab in tabpanel in extjs. I have a button that adds new tabs and I need to change the last added.
You can get the length of the items array and setActiveTab using that.
var last = tabPanel.items.length -1;
tabPanel.setActiveTab(last)
Here is fiddle demonstrating a simple working example.
Sencha docs is a huge help in figuring these things out.
I am having a issues with a checkbox column in a grid.
I have a grid with multiple checkbox columns. When I check the box, the dirty tick is not there, however when I click on the cell that contains the checkbox, but not the check box and then click the checkbox, I get the dirty tick mark.
Has anyone see this before? I would like it to be a bit more consistent because after a few clicks the dirty marks for some rows disappear.
This just seems odd.
Thanks!
Indeed first you need to click on the cell to enter 'edit' mode and then you can check/unched the actual checkbox. For better user experience you can implement your checkboxes just the same way they are implemented in this code library article. (If you are not using ASP.NET MVC wrappers - no worries just open the project go under Views/Home/Index.cshtml and you can copy/paste the code - it is all JavaScript.
The code library also includes how to create checkboxe 'Select all' in the column header.
The way I solved it was to make the fields in the model to be non-editable, so it forces the click event to fire and then I just update the values and set the dirty property. The thing was if you clicked the cell, the edit event was fired vs the click and vice versa, so instead of having two things fire, I just disabled one. Some would call it a hack, but I can't see how else to prevent both events from firing.
Please try this one:
//Cell click Checkbox select
$('#grd' + gridName).on("click", "td", function (e) {
var selectedTd = $(e.target).closest("td");
var grdChkBox = selectedTd.parents('tr').find("td:first").find('input:checkbox');
grdChkBox.prop('checked', !grdChkBox.prop('checked'));
});
Yes, I see this quite often: depends on how you implemented the checkboxes. If you tick directly a checkbox you modify the input but not the model. If you tick the cell and then the checkbox then Kendo UI toggle to edit mode and (in background) it replaces the checkbox with an editable version of the checkbox that is managed (event handler) by Kendo UI that allows to modify the model.
EDIT: If you want your checkbox always clickable then you might do:
var grid = $("#stocks_tbl").kendoGrid({
dataSource: new kendo.data.DataSource({
...
schema: {
model: {
id : "id",
fields: {
active: { type: "boolean" }
}
}
}
}),
editable : "incell",
columns : [
{
field : "active",
title : "Active",
template: '<input type="checkbox" data-bind="source: active" #= active ? checked="checked" : ""# />'
},
...
]
}).data("kendoGrid");
Here, you define an input that is always clickable.
$(document).on("change", "[type='checkbox']", function(ev) {
var item = grid.dataItem($(this).closest("tr"));
item.set("active", ev.srcElement.checked);
});
with this, we define a handler for intercepting changes on the input and reflect them in the model.
This saves you having to play with editable
I am using angular button in a ng-grid. I need to know how can i identity which button was clicked from within the grid.
I guess part of the complexity is that the button is clicked before the row is selected (Just my analysis,probably wont help with the solution :)
A snap shot of how the grid looks
A plunker illustrating the problem here
I have been able to find out how to resolve my question,basically pass in "row" as an argument on your function for ng-click. ng-click="save(row)"
Before
.. ng-click="edit(selectedItem)" >Edit</button> '
After
.. ng-click="edit(row)" >Edit</button> '
I have updated the plunker here to reflect the same
row.entity will give me the entity bound to this row of the grid
#Shai Aharoni You can prevent the row from being selected by passing $event as the first argument to the click handler:
.. ng-click="edit($event, row)">Edit</button>
and then calling stopPropagation() on the event from inside the handler.
$scope.edit = function(event, row) { event.stopPropagation(); }