That's my grid
<div
ui-grid="myAPI.myGrid"
ui-grid-pinning
ui-grid-pagination
ui-grid-resize-columns
class="gridMid">
</div>
How can I detect "myAPI.myGrid" within the grid?
(Click on row/column/cell/button/whatever/.. should e.g. alert "myAPI.myGrid")
The value of the ui-grid directive attribute is called gridOptions, you can retrieve the options property straight from the grid object: grid.options.
You can use the grid object in your custom templates flawlessly, just refer to it, as explained in the tutorial:
In the cellTemplate you have access to grid, row and column, which
allows you to write any of a range of functions.
So just calling grid.options inside your template should do it, and if you need to get the data array just go with grid.options.data
If you need to get a reference to the grid object elsewhere you can get it from your gridApi objects (look here for more info about gridApi) simply with gridApi.grid
EDIT: Added plunker and clarification.
I've built a plunker where I pass the object to a clickFn inside of the controller's scope, just need to click on any cell in the last column.
Beware that when I talked about the grid's name in my comment to your question, I was quite inaccurate: there is no concept like a grid name, but, as I said before in this answer, what you called myApi.myGrid is just a reference to an object, so you can only pass/retrieve that object, not the name you gave to that reference.
I guess this is not a problem, since what you will eventually need is the object. If you want to inspect it, just place a breakpoint inside clickFn in my plunkr.
EDIT: Added new plunker
I created a new plunkr where clickFn function behaves like a "Delete" button.
Related
[tldr] How to make a button in a column template call a method from the controller surrounding the grid when the grid is wrapped in a custom directive? [ktxbye]
To explain, here's 3 plunkrs:
P1) Basic action column in ui-grid
http://plnkr.co/edit/nYqZsKRYbTA0aFXVZOoV
P2) same but with Controller as vm
http://plnkr.co/edit/b7x4Jjec5utkzSCrShMA
P3) wrapping ui-grid in my-grid (the action button doesn't work anymore)
http://plnkr.co/edit/74AdcFywgNZgeGJn4nrb
In my app things are more complicated, and I did manage to make the button in the custom column call a method on the controller of my-grid (via grid.appScope.vm.FunctionName; in P3 above my-grid doesn't even have a controller, this is a simplified example), but figured I might be digging too deep in wrong directions, so...
how would you make the buttons in the grid column in P3 call the MainCtrl::Test method?
After some help from swalters (via ui-grid glitter chat), I think I have a decent answer.
As documented ui-grid (3.x) uses isolated scopes but allows your templates to reach for the outer scope via $scope.grid.appScope.
What I did not realize is that when you set up your grid options, you can override what grid.appScope will return by setting the appScopeProvider option, and that this can be easily set to a scope you may have handy as you're constructing the grid.
Hence, for the scenario in my previous plunkrs, here's a solution by just adding appScopeProvider: $scope to the grid options
http://plnkr.co/edit/0THPYZXPmqhfWYGo2ebE
I have an ng-grid that utilizes the showSelectionCheckbox: true property with a custom checkboxCellTemplate.
If I remove checkboxCellTemplate I get the functionality I want where only one checkbox can be clicked at a time and clicking another checkbox will remove the selection from the previous one.
I need the template to call a specific function so my question comes down to what property to I have to pass in the template so it can be aware of the multiselect property?
The plunker can be found at http://plnkr.co/edit/nULoI4?p=preview.
So to clarify you're wondering if you can get all the values that are selected when you call a function? Don't you already have this setup in the $scope.selections. You could pass this in the function of the template by doing something like this ng-click="getDeliveryLocation({{selections}})".
Another thought is that you use afterSelectionChange:function(){} and add in whatever you need instead of the ng-click on the checkmarks. This will remove some of the odd issues you have between the different selects.
To check the validity of a form in my page, I test this property in my controller's scope:
$scope.formName.$valid
The problem is that when I add forms dynamically to the page (based on a model property), the $scope.newFormName property is not added to the scope.
This plnkr illustrate the problem
Click the 'Add form' button to add forms to the page
Click the 'Search forms' to update the list with the forms found in the $scope
Note that the added forms are not found in the scope
Is there any way to make this work? How can I check the validity of this dynamically added forms?
So your code adds a list of identical forms. And you want to see whether this list is valid or not.
The solution is to use ngForms within a parent form. See this Plunkr (my modified version of yours).
Form input values are bound to objects in the $scope.dynamicData array, which also is used by ngRepeat to create the list of forms.
Invalid fields are shown with a solid red border, and invalid forms have a dashed red border.
When forms are nested like this, the parent form is invalid when any of its child forms are invalid.
I'd use angular.element(). I would also personally get it via ID rather than name, but that is just me. View this plunker to see what I did: http://plnkr.co/edit/b87HJt
I'm using angular.element() to get the element by the name, getElementsByName and then using the $attr directive to get at the name.
Is ng-model allowed inside element of a table? Will angular automatically update the model if I change a particular column(i.e. view)?
If you are making the table cells directly editable using the HTML contenteditable attribute, ng-model won't work automatically as by default it's only for form elements.
It is possible to make it work with contenteditable though. There is an working example of how to do it on the angular website at http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
ng-model is allowed wherever typical form elements exist that can use the directive (input, select and textarea)
One thing I will say about ng-model that can make it a bit tricky is that you will want to bind ng-model to a property of an object rather than just a simple scope variable. I have run into several instances where I bind $scope.foo to ng-model and use it in an input control. Then, if you clear the input field, the binding is lost and it stops updating the variable. Use something like $scope.fooObj.modelProp where fooObj is an object and it will work fine.
I'm actually not sure if this is possible, but I will ask it anyway. I have a group of accordion controls, and within the content body of each I need to display a grid panel. The grid panel needs to have a click event attached to it. I have tried simply creating the grid panel and setting the html property of the accordion to it, but this produces no content.
Is there somehow I can achieve the above?
You cannot have html content (inserted by the property) along with any other content. If you add any item the html property value will not set/overriden. But for sure you can place anything you want into one accordion panel. Even a grid. But for that case, and based on the last question, I would recommend you to reference the view into the grid. You may do this simply by using a ComponentQuery
The click events can be applied by using the control function of the controller.
For your basic understanding:
In ExtJS you seldom use plain html code. In most scenarios you use any sort of component. All is nested within the items-array or dockedItem-array. Items within these arrays get also processed by the layout system.
Some Query examples applicable to the control function
In the following this refers to the controller itself.
You know the Id of the grid (normally you didn't do this). Id's are marke by a starting #
control({'#yourId': {itemclick: this.onItemclick }});
You know the xtype and that there is only one instance of this type. You can also describe a path by using spaces between the xtypes.
control({'grid': {itemclick: this.onItemclick }});
You have set a custom property to grid (you can refer any property this way). This one is fully compatible the the one above. I recommend this one in your case
control({'grid[customIdent=accordionGrid]': {itemclick: this.onItemclick }});
This are just some ways to use ComponentQueries, there are more. For a more detailed explanation you should refer the sencha API for ComponentQuery
Also note that every component implements the up() and down() methods which also support ComponentQueries.
I forgot to mention: For a control the query strictly need to return just one result (only the first one will be taken) a ComponentQuery on the other hand can return multiple results.
This is perfectly possible but the accordion's body is not the place to put that in. You'll need to add it to the items: [] array of the accodion. The body (or html) only accepts html.
Example:
http://docs.sencha.com/ext-js/4-1/#!/example/layout/accordion.html
this one has a grid within it.