I am using angular ui.grid my problem is when I using like below click the row its selected
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false
after i changed to
enableRowSelection: true,
enableRowHeaderSelection: true,
multiSelect: false
now only select checkbox working but did not work click row please help...
this issue has supposedly long been fixed (https://github.com/angular-ui/ui-grid/commit/679b615bd19ff71ff1e835d7f6066e7a919f279a), but it still persisted for me in angular-ui-grid version 3.1.1
There's a fresh issue about it (https://github.com/angular-ui/ui-grid/issues/5474) with a workaround to override a css rule with this one:
.ui-grid-cell.ui-grid-disable-selection.ui-grid-row-header-cell {
pointer-events: auto;
}
See this issue: https://github.com/angular-ui/ng-grid/issues/2254
Currently both row header selection and row selection do not work in concert. I believe the former was intended as a work-around having row selection when cell navigation was being used.
The change is listed as an enhancement so it's on the roadmap, just not slated for the 3.0 release.
Update:
OK, here's how you can do it (though relying on an unreleased beta module for something that's "urgent" is not a great idea, IMO).
Take the code from the selection feature's uiGridCell directive, rip it out, and put it into your own module. Specifically this code here: https://github.com/angular-ui/ng-grid/blob/v3.0.0-rc.20/src/features/selection/js/selection.js#L757
Here's some unfinied example code. You'll want to make sure that you don't bind on row header cells or the checkbox selection won't work.
angular.module('ui.grid.custom.rowSelection', ['ui.grid'])
.directive('uiGridCell', function ($timeout, uiGridSelectionService) {
if ($scope.col.isRowHeader) {
return;
}
registerRowSelectionEvents();
function selectCells(evt) { ... }
function touchStart(evt) { ... }
function touchEnd(evt) { ... }
function registerRowSelectionEvents() { ... }
});
And lastly here's a plunker that demonstrates the whole thing. You can just copy this code and tweak it as you like: http://plnkr.co/edit/44SYdj19pDDaJWiSaPBt?p=preview
Related
A checkbox in ExtJs Form Panel is not binding properly , i.e when the value is changed from checked(value is 1) to unchecked (value is 0) the value in model for the respective field is still checked(1). This issue occurs in version 6.2.0.981, but the issue is not reproducible in latest version 6.2.1.167. Here is the fiddle for the same, toggle between the versions and check the issue. please let us know if there are any workaround for this issue in 6.2.0.981 version. Also in release notes of 6.2.1.167 its told that "EXTJS-21886 - Checkboxes don't return the correct value" is fixed, but how to have this fix in previous versions?
CheckBox Bind issue Fiddle
You can fix this by adding
uncheckedValue: 0
to your checkbox config. Excerpt from the docs:
By default this is undefined, which results in nothing being submitted for the checkbox field when the form is submitted
The bug was that nothing was submitted during model update as well, and since nothing was provided, the value of the model was not updated.
In ExtJS 6.6 I was still trying to figure this out and it wasn't as straight forward as I'd hoped (Having the checkbox bind to the model and pass 1 for true and 0 for false to the binding). I wanted to avoid having a formula with a middle man binding in the model because I'd have to have a formula for every checkbox and that seemed silly.. Extending the combo box class and overriding getValue method like below. The accepted answer worked ok for unchecked but I was still getting true on checked.
Ext.define('Components.BinaryCheckBox', {
extend: 'Ext.form.field.Checkbox',
xtype: 'binary-checkbox',
getValue: function () {
if (this.value) {
return 1;
} else {
return 0;
}
},
});
I've been trying to use the ng-grid 3.0 (ui-grid). I have managed to populate my grid and it's been very responsive and it's features are really amazing. But I'm trying to customize my column headers, as I need more info there.
I can create a custom header cell template, as indicated in the docs, but I don't seem able to use a Bootstrap Dropdown there, it gets cropped and I can't use it at all. Some googling got me thinking it is probably some issue with the overflow attributes, but still I can't solve it. My grid options is as follows:
$scope.columnDefs = [
{ name:'name', displayName: 'Vdd', headerCellTemplate: 'headerTemplate.html' },
{ name:'gender', headerCellTemplate: 'headerTemplate.html' },
{ name:'company' }
]
$scope.gridOptions = {
columnDefs: $scope.columnDefs,
rowTemplate: 'rowTemplate.html',
data: 'data'
};
I have forked an example in plunkr and managed to reproduce my issue:
http://plnkr.co/edit/qdrFiifiz18fxB8w6Aja?p=preview
I want to replace the built-in dropdown menu (since it doesn't seem to allow nesting and sub-menus) and add another one (so in the end, I'd have two dropdown menus in each header cell)
Any help is appreciated =)
I am proud to say I think I've figured it out. I've been digging through ui-grid's source code and narrowed it down to this block (lines: 2847 - 2852).
function syncHorizontalHeader(scrollEvent){
var newScrollLeft = scrollEvent.getNewScrollLeft(colContainer, containerCtrl.viewport);
if (containerCtrl.headerViewport) {
containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid);
}
}
I noticed that containerCtrl.headerViewport.scrollLeft was never getting set to newScrollLeft. A quick google search led me to this StackOverflow thread which says that you can't set the scrollLeft property of an element if it's overflow is set to visible.
My solution was to replace containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid); with containerCtrl.headerViewport.style.marginLeft = -gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid) + 'px'; which just sets a negative margin on the header. Then add an overflow:hidden; style to .ui-grid-render-container-body to hide headers that extend beyond the main grid viewport.
Doing this messed up the placement of column menus, but there is an easy fix. On line 514 replace var containerScrollLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].scrollLeft; with var containerScrollLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].style.marginLeft; to use the margin instead of the scroll value in the menu placement calculation.
I'm trying to add to my grid the RowExpander plugin.
Seems everything was going great with just one row, but when adding a second row the following rows are indented.
I have created a Sencha Fiddle: https://fiddle.sencha.com/#fiddle/87d
I'm doing it exactly as Sencha Examples, maybe because I have a datetime column first I get that issue.
Any help is welcome.
You can't specify your component widget.dailytimesummary and then only add a plugin to it when you instantiate it or it won't get initialized as desired.
Instead, your plugin should be a part of the initial definition of your widget:
See your corrected jsfiddle here: https://fiddle.sencha.com/#fiddle/87m
...
enableColumnHide: false,
enableColumnMove: false,
// this needs to be configured with the initial component
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: ['{Date}']
}],
selModel: {
enableKeyNav: false
},
...
I am newbie to Angular and Kendo,My case is like buttons other than edit must disappear for other users in the query screen and it should appear for the owner of the query alone.
Now it disappears after some time lag say one minute,why this lag occur?
Any help on this is greatly helpful for me....
On analysis,identified the below points:
-the function called in ng-show is not triggered immediately where ng-show is wrapped inside a template,then checked by assigning a constant value for ng-show still there is a delay in triggering the ng-show.But fixed style worked correctly example style=display:none..
-then i identified that angularjs directives are not invoked immediately after rendering kendoui grid row template, there is some delay to invoke the angularjs directives
Code:
$scope.showButton = function(userId){
if($scope.loggedInUserId == userId)
{
return true;
}
else
{
return false;
}
};
$scope.model.columns = [
{ field: "name",title:"Name", width: 300},
{ field: "userId",title:"User Id", width: 100},
{ field: "lastModified",title:"Last Modified Date", width: 200},
{ field: "visibility",title:"Visibility", width: 100},
{ template: "<img title='Edit' src='content/images/glacier/2.0.1/generic/normal/png21/d_040_edit_normal.png' onmouseover=\"this.src='content/images/glacier/2.0.1/generic/active/png21/d_040_edit_active.png'\" onmouseout=\"this.src='content/images/glacier/2.0.1/generic/normal/png21/d_040_edit_normal.png'\" ng-click='viewQuery(#=id#);disableSave(\"#=userId#\")' alt='Edit'><img title='Make Public' src='content/images/glacier/2.0.1/generic/normal/png21/d_150_team_normal.png' onmouseover=\"this.src='content/images/glacier/2.0.1/generic/active/png21/d_150_team_active.png'\" onmouseout=\"this.src='content/images/glacier/2.0.1/generic/normal/png21/d_150_team_normal.png'\" ng-click='makePublic(#=id#)' ng-show='showButton(\"#=userId#\")' alt='Public'><img title='Make Private' src='content/images/glacier/2.0.1/generic/normal/png21/d_118_user_normal.png' onmouseover=\"this.src='content/images/glacier/2.0.1/generic/active/png21/d_118_user_active.png'\" onmouseout=\"this.src='content/images/glacier/2.0.1/generic/normal/png21/d_118_user_normal.png'\" ng-click='makePrivate(#=id#)' ng-show='showButton(\"#=userId#\")' alt='Private'><img title='Delete' src='content/images/glacier/2.0.1/generic/normal/png21/d_030_delete_normal.png' onmouseover=\"this.src='content/images/glacier/2.0.1/generic/active/png21/d_030_delete_active.png'\" onmouseout=\"this.src='content/images/glacier/2.0.1/generic/normal/png21/d_030_delete_normal.png'\" ng-click='deleteQuery(#=id#)\' ng-show='showButton(\"#=userId#\")' alt='Delete'>", title: "Operations" },
];
$scope.model.gridOpts = {
columns: $scope.model.columns,
filterable: { extra: false },
scrollable: true,
height: "230%",
pageable: true,
batch: false,
reorderable: true,
sortable: true,
editable: "inline",
};
Without having a JSFiddle to analyze, it will be hard to pin down the problem. But I'll provide a possible solution that you can at least investigate.
Angular is only able to hide those buttons after it, and everything it depends on, has started up. Which means downloading the angular code, waiting for everything else to load, parsing the HTML, resolving any data dependencies, etc. At that point it will make modifications to the DOM (which is when your buttons hide).
There are several ways to handle this, from using ng-cloak, not showing anything on the screen until it's been modified appropriately, or hiding all the optional controls and just showing what the user does have access to after Angular loads.
Here is one option which I just used in a project. Add this code at the TOP of your entry file (like index.html, default.html, whatever):
.ng-hide {
display: none !important;
}
Now apply the ng-hide class to any of those buttons you don't want to show until you know what they have access to.
By placing this at the top of the default file, it won't show at all until it's told to. If you place it in a .css file, then it will sometimes appear briefly until the .css file it loaded, parsed and applied.
Another option is to look at ng-cloak. You can try out it out here: http://plnkr.co/edit/?p=preview
The fact that it's taking upwards of 60 seconds I believe you said, leads me to believe that maybe it is waiting for required data to get resolved before it can analyze permissions.
If you don't understand how the resolve statement works in routes, you can read about here:
http://www.undefinednull.com/2014/02/17/resolve-in-angularjs-routes-explained-as-story/
I'm not sure if that will fix your problem, but once you can create a jsfiddle then you'll have many more people jumping in to answer this question.
I have a following grid defined in my View
<div class="gridStyle hide" ng-grid="resultsOptions" id="resultsGrid"></div>
And I want to allow multiSelect only if a ctrl key is pressed. So I define multiSelect attribute as false in the Controller.
$scope.resultsOptions = {
data: 'searchData',
selectedItems: $scope.mySelections,
multiSelect: false,
enableHighlighting: true,
enableRowSelection: true
};
In the same controller I have the following code that sets multiSelect to true.
$("#resultsGrid").keydown(function (e) {
if (e.ctrlKey) {
$scope.resultsOptions.multiSelect = true;
$scope.$apply();
}
});
When I launch the application multiSelect value changes after pressing ctrl. But I am still can not make a multiple selection.
I tried to use variable for multiSelect, but it doe not change a thing.
The following example also does not change multiSelect attribute. But it changes the grid header.
http://plnkr.co/edit/RwYSG4?p=preview
Is there any simple solution? Or what do I miss in my code?
The approved "hacky" answer wasn't clean enough for us so we built a slightly more robust version relying on the event parameter on beforeSelectionChange instead of doing nasty key bindings.
This also works for any grid you add this event callback to as it does not need to reference any specific custom CSS classes or IDs, but just uses reliable ng-grid classes.
beforeSelectionChange: function(rowItem, event){
if(!event.ctrlKey && !event.shiftKey && $scope.multiSelect &&
!$(event.srcElement).is(".ngSelectionCheckbox"))
{
angular.forEach($scope.myData, function(data, index){
$scope.gridOptions.selectRow(index, false);
});
}
return true;
}
What this does is simply checking if we are doing a multiselect operation (holding ctrl key, shift key or using the multiselect checkbox), if yes, let multiselect happen.
If the user is just clicking anywhere else on a row, and multiselect is active we remove any current selection so just the one target row will be selected afterwards.
Since it is impossible to change some grid options on the fly
(https://github.com/angular-ui/ng-grid/issues/386). I decided to manually deselect every element if ctrl is not pressed in beforeSelectionChange attribute of the grid.
The solution is durty, but it works.
Based of mabi's comment...
Without support for Shift key
With support for Shift key