I'm working with 'angular-scrollable-table' because it has fixed-headers:
GitHub.
How can I use 'resizable' directive?
Just add the attribute resizable:
<scrollable-table resizable>
Related
I need to add a custom error message to cell when it is in editable mode, basically i just need to add message to the editable html template as follow
<a href=\'#\' data-toggle=\'tooltip\' data-placement=\'top\' title=\'error!\' ng-show=\'!inputForm.$valid\'>errMsg - {{customMsg}}</a>
i have just bind the customMsg to the global scope just for testing purposes , but still it doesnt seems to be appearing. sample plunker added here, it would be a great help if you can tell me what i am doing wrong here
Thanks
You might want to take a look at this answer
https://stackoverflow.com/a/28127498/1585304
When you are working with the ui-grid, you are actually working in an isolated scope.
This means that you cannot access to the parent scope simply by type the name of the var into your html.
In order to access to your customMsg variable, you need to refer to the parent scope using grid.appScope.
Your column definition should look more like this.
{
field: 'company',
displayName: 'Company',
enableColumnMenu: false,
editableCellTemplate: "<div><form name=\"inputForm\">
<input type=\"INPUT_TYPE\" ng-class=\"'colt' + col.uid\"
ui-grid-editor ng-model=\"MODEL_COL_FIELD\" minlength=3
maxlength=10 required><a href=\'#\' data-toggle=\'tooltip\'
data-placement=\'top\' title=\'error!\'
ng-show=\'!inputForm.$valid\'>errMsg - {{grid.appScope.customMsg}}
</a></form></div>"
}
The only problem is that is really hard to see the message since the form is almost completely hidden by the row.
Hope this helps.
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
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
},
...
This appears on all of the columns in my grid:
Chrome 28.0.1500.72 m:
Firefox 21.0:
All of the columns in my table look something like this:
{
text: 'Audit Type',
width: 100,
sortable: true,
dataIndex: 'requestType'
},
I have no idea what's causing this. The javascript console shows no errors about missing images either.
Any help that could point me in the right direction would be greatly appreciated
More info
I'm using Chrome Version 28.0.1500.72 m and Extjs 4.2.1.883
My app is run on my own computer... so a local server. I'm using Play Framework with Scala on my backend.
Oh what silliness.
I did this earlier:
.x-panel {margin: 8em;}
This ended up moving the entire grid except for the menu shadows.
Giving the grid an id property in its definition and having this instead in my stylesheet solves the problem:
#grid {margin: 8em;}
I am trying to display sample data in a ng-grid via AngularJS. Everything looks correct to me. If I pass 'ngGrid' in the module definition within my local project the columns are getting stacked one below the other. I tried doing this in plunker , but it's not rendering properly.
Here is the sample code.
http://plnkr.co/edit/AHQUjbus908HBLxUaIWr
The issue is with the references to the external nggrid files. A lot of times referencing github files doesn't work very well. I've moved the nggrid js and css into local plunkr files and forked your plunkr. It now works.
http://plnkr.co/edit/N5T0Ys3Fc58NymAvzMFj?p=preview
Try adding
minWidth: 50,
width: '*'
in you columnDefs like,
{
field: 'severity',
displayName: 'Severity',
resizable: true,
minWidth: 50,
width: '*'
}
It worked for me.