How to make Angular UI Grid row editable when button is clicked - angularjs

I am using angular ui grid.
I have edit button showing for each row as last column. I want to change row to edit mode when edit button clicked.
Appreciated if someone can guide me.
{
field: 'edit',
displayName: '',
enableFiltering: false,
enableSorting: false,
width: '5%'
},
Right now i have made it editable for each cell individually using the following line
<div class="grid testGrid" ui-grid="GridOptions" ui-grid-edit ui-grid-row-edit style="width: 100%;"></div>

The only way to do this in ui-grid, as for now, is to avoid using ui-grid-edit and implementing some custom templates with ng-ifs conditions inside.
I built this plunker as a starting step, there you can see only one button, but you can simply put a similar logic inside your edit button.

Related

Radio button deselects itself on clicking anywhere on the page

I am trying to implement segmented control button instead of normal radio button in Angular
Although If i remove CSS class, normal radio button is working fine and remain selected on navigating to another page os clicking anywhere on the same page, but after adding CSS, radio button selection do not remain intact and deselects.
Please help with this
HTML Code :
<div class ="segmented-control">
<div ng-repeat="p in LP">
<a href="#" class="list-group-item">
<label> {{p.label}}
<input type ="radio" ng-model="test" name="test" value="{{p.value}}" ng-click="getElement($event)"></label>
</a>
</div>
</div>
CSS :
.segmented-control input[type="radio"] {
visibility:hidden;
}
.segmented-control .list-group-item {
display: inline-block;
}
In controller.js
calling below function to get the value of radio button
$scope.getElement= function(obj){
$scope.test = obj.target.value;
}
There are 2 issues with your code:
You have nested elements <div><a tag><label><radio></label> but the ng-model will be set only when you click exactly on the label. If you click little outside the label the ng-model will not be updated.
The gray color change that you see when you click on the segmented button does not mean that the radio button is selected. It is applying the following bootstrap class a.list-group-item:focus which means the button is in focus. That is why when you click outside the button the color changes back to white.
To solve this you have to add extra class to highlight the selected button and make sure your ng-model is updated no matter where the user clicks inside the div.
I have created a sample jsfiddle to demonstrate both the issues. Good luck and welcome to Stackoverflow!

Angularjs: Sorting not working in ui-grid with CellTemplate data

I am very new to angular ui-grid.
I am displaying data using cell template but sorting is not working.
I want to sort that particular column using 'username'.
Can anyone please help me with this.
{
field: 'usernameandgender',
width: '29%',
displayName: 'Dr. İsim / Uzmanlık',
name:'username' ,
cellTemplate:'
<div style="height:47px;">
<span style="font-size:15px;">{{row.entity.username}}</span> -
<span style="color:gray; font-weight:normal;font-size:13px;">
{{row.entity.gender}}
</span>
<br/>
</div>'
}
Please change the field value to 'username'. It should work.
I used the same type of cell template to display icon based on true/false, and though it is displaying lock icon in grid, I can filter on basis of true/false.

need popover over custom template cell of Angularjs ui grid

I am using Angularjs ui grid with progress bar in first column and my grid options are shown below :
ctrl.gridOptions = {};
ctrl.gridOptions.columnDefs = [{
field: 'completeStatus',
cellTemplate: '<span>{{row.entity.completeStatus}} % </span> <uib-progressbar value="row.entity.completeStatus"> </uib-progressbar>',
width: 100
},
{
field: 'invoiceNum'
}
];
html:
<div id="regGrid" ui-grid="ctrl.gridOptions" class="reg-grid"></div>
Which is working fine. Now I want to display bootstrap popover upon hovering the first cell of the grid, I mean the cell with field 'completeStatus'. Can any one help me how to configure it?
Add popover attributes to your cell template and have a popover template located in your component html. Like this:
Component HTML:
This will be located at the bottom of your HTML just before the closing root </div>.
<script type="text/ng-template" id="cellPopover.html">
<div>Your popover Template</div>
</script>
Component Controller:
Adding the popover attributes to your cell template.
ctrl.gridOptions.columnDefs = [{
field: 'completeStatus',
cellTemplate: '<div popover attributes><span>{{row.entity.completeStatus}} % </span> <uib-progressbar value="row.entity.completeStatus"> </uib-progressbar></div>',
width: 100
}
Where I wrote popover attributes you will place the actual attributes such as:
1. uib-popover-template="'cellPopover.html'"
2. popover-trigger="mouseenter"
3. popover-placement="bottom"

dynamically setting kendo window title and content in angular then open window when a button on the form is clicked

Here's the basic scenario: next to some of my form fields, I have a little button with a question mark image. If the user clicks on the button, I want to display a help message for that particular field, using kendo window. I want to set the title of the modal window to the relevant form fieldname, and to set the window content with a help message for that field.
Code below is from the example I'd like to build on: http://kendo-labs.github.io/angular-kendo/#/Window
If you notice in the ng-click event of the button, the open() method of the kendo-window is being invoked. But the title is statically set with k-title. I have changed that to point to scope variables.
I need to invoke a function in my Controller, which will change the $scope.helpTitle and $scope.helpContent based on which form field the user is asking about, and then open the kendo window.
What is "the Angular way" to dynamically set the title and content of the kendo modal window based on which field the user is asking for help on and then open the window?
I already have the help content in a local object; no need to fetch it via Ajax.
<div ng-controller="MyCtrl">
<div style="position: relative; width: 400px; height: 100px">
<button id="ExpirationDateHelp" class="k-button" ng-show="!win2visible" ng-click="win2.open()">help</button>
<div kendo-window="win2" k-title="helpTitle"
k-width="600" k-height="200" k-visible="false"
k-content="{template: helpContent }"
k-on-open="win2visible = true" k-on-close="win2visible = false"></div>
</div>
</div>
You can do the following:
notice that the minute you worte k-window="win2" a scope variable was created referencing this window.
$scope.DlgOptions = {
modal: true,
title: "My Dyanamic Title",
width: 1080,
visible: false,
draggable: false,
pinned: true,
resizable: false
};
$scope.win2.setOptions($scope.splashDlgOptions);
$scope.win2.center();
$scope.win2.open();

ng-grid hiding bootstrap styled dropdowns

I am upgrading a table form. Each row in the table has several elements, including two drop downs in specific columns for each row. I have upgraded the table to ng-grid and upgraded the drop-downs from plain select widgets to styled bootstrap drop-down elements to match the others on the site. The essential problem I am having is that the CSS layout of ng-grid causes the actual drop down menu to be put behind the cell below, and so not visible. Examining the elements shows that they are actually being rendered, have proper height, width and content, but are merely displayed behind the content in the other cell. I have tried disabling the CSS overflow: hidden on the desired cells, but it seems this property is also set for the entire grid and turning it off at that level totally breaks the grid layout. I have a working workaround, but it makes me want to take a shower and I am sure there is a more elegant way to do this:
1) put a cell template in for just the visible part, including an ng-click call passing the column (Coffeescript):
{field: "type",
displayName: "Type",
width: 155,
original_width: 155,
pinned: false,
cellClass: "type_col",
headerClass: "type_col",
cellTemplate: """<div ng-click="editor.activeCol(col)" class="btn-group">
<button ng-show="row.entity[col.field]" style="width: 125px"
class="btn dropdown-toggle blk-txt" href="#">
{{row.entity[col.field]}}</button><button class="btn">
<span class="caret"></span></button></div>"""
},
2) Put a select row callback to a different method:
multiSelect: false,
enableRowSelection: true,
afterSelectionChange: angular.bind(#, selectFunc),
3) Have a totally separate angular template of the drop-down options that is classed to always be shown open for bootstrap, but has both a ng-show and ng-style elements to allow my code to change its visibility and exact location:
<div ng-show="editor.utilization" ng-style="editor.dropdown_style">
<div class="btn-group editor-widget open">
<ul class="dropdown-menu">
<li ng-click="editor.selectUtil('heavy')">Heavy</li>
<li ng-click="editor.selectUtil('medium')">Medium</li>
<li ng-click="editor.selectUtil('light')">Light</li>
</ul>
</div>
</div>
When a user clicks on the (apparent) drop down, the following happens:
1) ng-click event delivers the column to the class, this is stored
2) row select (afterSelectionChange) callback triggers with the row and is able to get the column from the previous call, with both the row and column we now know the actual cell
3) The exact screen position of the cell in question is grabbed and the drop-down selections template is made visible directly below the clicked cell, making the illusion of a normal drop-down operation.
This is a long explanation, but wanted to give the background of what I have tried, to show that I am looking for a simpler (hopefully MUCH simpler) way to just include styled bootstrap drop-down widgets in ng-grid cells. The entire thrust of this project is to style and beautify already working forms so solutions that work only by cutting style for pure functionality don't really serve the purpose.
This is how I solved it. I have a cell in the ng-grid and in the cell i have a glyphicon arrow down. When I click it I want the dropdown toggle to show. With the CSS I got what I wanted. However, I have many cells with arrows and thus I had to change the css-style "left" dynamically. I do this with my javascript.
Hope it helps!
Cell Template:
<div class="ngCellText" ng-class="col.colIndex()" class="dropdown">
<span ng-cell-text>{{row.getProperty(col.field)}}</span>
<a class="dropdown-toggle" ng-click="setXchords($event)">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in editableItems">
<a>{{choice}}</a>
</li>
</ul>
</div>
CSS:
.dropdown-menu {
position: fixed;
top: inherit;
left: 85px;
}
JavaScript:
$scope.setXchords = function(e) {
var elem = angular.element(e.currentTarget);
$(elem).next().css('left', e.clientX).css('top', e.clientY);
};
In order to show regular dropdowns, I added this css:
.ngCell { overflow: visible; }
In order to get multiselects to appear, I needed to add a class (I used "field-multiselect") to an editableCellTemplate and then add the following css to the class:
.field-multiselect {
position: relative;
overflow: visible;
z-index: 888; }
This worked for me! (Finally, after quite a bit of trial and error!)

Resources