I need to show a button in my ui-grid as long as the field value is NOT an empty string. I tried using ng-if but it is not working. Here is the code in my grid options:
{ field: 'ReleaseStatus',
width: 125,
displayName: 'Release Status',
cellTemplate:
'<div ng-if="row.entity.ReleaseStatus != """>
<button id="editBtn"
type="button"
class="btn btn-default"
data-toggle="modal"
data-target="#myModal"
ng-click="grid.appScope.launch(row)">
{{COL_FIELD}}
</button>
</div>'
},
Without the ng-if the button displays and works great. However, because some records have an empty string for the field ReleaseStatus, the button should not appear.
Any assistance is greatly appreciated.
you should write it this way:
'<div ng-if="row.entity.ReleaseStatus !== \'\'">'
you can also put the ng-if directly on the buttom you are trying to hide.
however be careful of using ng-if because it creates a new scope everytime.
Solution 1:
There is a simple way to do this, please have a look on this example.
{
name: 'nameishere', displayName: 'Display Name', cellTemplate:
'<div class="ui-grid-cell-contents" ng-if="grid.appScope.haveFile(row.entity.nameishere)"><a href="' + apiURL + '/InvalidFiles/{{row.entity.nameishere}}" download="{{row.entity.nameishere}}" >{{ row.entity.nameishere}}</a></div>'+
'<div class="ui-grid-cell-contents" ng-if="grid.appScope.haveNotFile(row.entity.nameishere)">{{ row.entity.nameishere}}</div>'
},
and create multiple functions OR use a function with if-else
$scope.haveFile = function (data) { return data == 'No File to Display' };
$scope.haveNotFile = function (data) { return data != 'No File to Display' };
Solution 2: You should write it this way, string and integer handle in a different way.
cellTemplate:'<div ng-if="row.entity.status !== \'Your String Here\'">'
cellTemplate:'<div ng-if="row.entity.status !== 23>'
Solution 3: Use ng-if like this
cellTemplate:'<div>{{row.entity.status == 0 ? "Active" : (row.entity.status == 1 ? "Non Active" : "Deleted")}}</div>';
Related
Usecase
There are a total of 200000 records exist in my database, if i load all the option in one time the page is not loading at all, it is saying maximum transaction time crossed (i felt like its the worst approach).
I thought of loading the selectize options based on keyword search, i will show the 50 records close to the search keyword.
I implemented the search in backend(Serverside), it is returning the data correctly to the client but i'm not finding a way to show them as options in html.
Please find my code below:
$scope.$selectUser = $('#selectUser').selectize({
valueField: 'sys_id',
labelField: 'name',
maxItems: c.data.maxteam,
placeholder:"Enter names or select below",
create: false,
load: function (query, callback) {
if (!query.length) return callback();
$scope.data.funcName = 'getUsers';
$scope.data.searchQuery = query;
$scope.data.kudosTo = [];
//Server call happens here
c.server.update().then(function(){
//Search data coming fine in this variable
var results = c.data.activeUsers;
//??? AT this step i'm not what to do to appear the data as selectize options and select from them ??
callback(results);
});
},
render: {
option: function (item, escape) {
return '<div class="option">' +
'<div class="text">' +
'<span class="name">' + escape(item.name) +"<i class='fa fa-circle circleFont'></i>"+ escape(item.user_name) + '</span>' +
'</div>' +
'</div>';
}
},
});
$scope.selectizeControlUser = $scope.$selectUser[0].selectize;
<div class="form-group text-left clearfix">
<select class="form-control" id="selectUser" multiple></select>
</div>
Search data coming fine in client code:
Issue: Selectize options are not showing in the HTML view
Expected results: Options should come like below image
I figure it out myself.
Options are appending to the options but just not showing in the view.
I added searchField and it started working fine as expected.
searchField: ['name', 'email', 'user_name'],
I have to use templates to translate my grid's cells values.
For some reasons, the function I'm calling to translate is returning a promise.
I found the following topic related to my issue
Asynchronous cell template
I'm using the angular method with
ng-bind-html
$scope.lookUpEventNameAsync = function(data) {
refData.events().fetch(function() {
var eData = refData.events().data();
var refEvent = eData.find(function(re, i, a) {
return re.code === data.eventCode;
});
$("#async_tse_" + data.key).html(refEvent.name);
});
return $sce.trustAsHtml("<div id='async_tse_" + data.key + "'> </div>");
};
$scope.gridTimesheetColumns = [
{
field: "eventCode",
title: "Event",
template: "<span ng-bind-html='lookUpEventNameAsync(dataItem)'> </span>"
},
....
I made a similar thing to adapt it with the code I have and it's working.
But the problem now is that it's calling $scope.lookUpEventNameAsync several times and never stop calling it which is freezing the screen and make the app unusable.
Do you have an idea why and how can I prevent it ?
I needed a one way data binding like the following :
$scope.gridTimesheetColumns = [
{
field: "eventCode",
title: "Event",
template: "<span ng-bind-html='::lookUpEventNameAsync(dataItem)'> </span>"
},
I am using jqgrid on my form and I am creating the column delete and want to send the object in javascript function, the code is following
{
name: "action",
align: "center",
sortable: false,
title: false,
fixed: true,
search: false,
formatter: function (cellValue, options, rowObject) {
debugger;
var markup = "<a title=\"%ToolTip%\" href=%Href%;>%Text%</a>";
var replacements = {
"%Text%": "<i class='fa fa-trash' style='color:black'></i>",
"%ToolTip%": UserRoles.messages && UserRoles.messages.ClickHereToDelete
? UserRoles.messages.ClickHereToDelete : "",
"%Href%": "javascript:UserRoles.deleteUserRoles(" + rowObject + ")"
};
markup = markup.replace(/%\w+%/g, function (all) {
return replacements[all];
});
return markup;
}
}
I want to send the object in the function deleteUserRole by this line
"%Href%": "javascript:UserRoles.deleteUserRoles(" + rowObject + ")"
but it is giving me output
<a title="" href="javascript:UserRoles.deleteUserRoles([object" object]);=""><i class="fa fa-trash" style="color:black"></i></a>
can any one help me
Mostly one don't need to create such custom formatter and one can use just formatter: "action" with the corresponding parameters.
It's important to understand that the goal of formatter is providing the HTML fragment which will be placed in cells (in <td>) of the column. The rowObject are typically the input data of the row which format depend on many factors.
What you probably need is to use options.rowId as parameter of UserRoles.deleteUserRoles function. Inside of the function you can use getRowData to get the data based on the rowid.
I would recommend you to read the answer and all old answer referenced i the answer. It shows that one can just use place "<a href='#'><i class='fa fa-trash' style='color:black'></i></a>" by custom formatter **without using any javascript:UserRoles.deleteUserRoles(...) fragment. Instead of that one can implement beforeSelectRow callback which tests in which column the user clicked. If the user clicked on the <a> of "action" column then one can do some custom action. The way is more effective because one don't need bind global function to every <a> element of the column. One can simplify the content of the column by removing <a> and holding only <i class='fa fa-trash' style='color:black'></i> inside of the column. The code of beforeSelectRow callback will be the same.
I am new to angular js. I have read this question before Conditional cell template in ui-grid angularjs and its absolutely worked for me, but I am just wondering how to display html like a button tag instead of text, because when I am trying to change it to html, it always display html as text
Thanks and sorry because of my bad english
js file
var columnDefs = [
{
field: 'action',
displayName: label.action,
width : 175,
enableCellEdit: false,
cellTemplate: '<div>{{grid.appScope.states.showMe(row.entity.j_code, row.entity.branch_cd)}}</div>',
}];
scope.gridOptions.columnDefs = comlumnDefs;
$scope.states = {
showMe: function(j_code, branch_cd) {
template = "<button class='btn-small btn-green btn-add'>Add</button>";
if (j_code != "" && branch_cd != "") {
template += "<button class='btn-small btn-green'>Copy</button>";
}
return template;
}
};
html file
<div id="grid1" class="gridStyle" ui-grid="gridOptions" external-scopes="states" ui-grid-pinning ui-grid-resize-columns ui-grid-pagination ui-grid-edit ui-grid-row-edit ui-grid-cellnav ui-grid-selection ui-grid-exporter></div>
I do not know if you ve found the asnwer or not but there are others who visit to find an answer.
.Columns(c =>
{
c.Add().DataField("give a name").CellTemplate("<input type=button>");
}
you can add a checkbox or other functions into the type.
I have gone through the documentation forward and back and I cannot seem to find a way to give the header filter for one of the columns focus when it loads. The user typically filters on the same column every single time. I use these grids for line of business applications and every click or 'tab' saved is 500 saved per person per day.
this.gridOptions.columnDefs = [
{ field: 'Order' },
{ field: 'Qty.' }
];
Then I have the following for the html, so Order gets a filter, but it is not focused by default.
<div ui-grid="taskCtrl.gridOptions" ui-grid-selection ui-grid-auto-resize></div>
Thanks!
Here is a solution I found out for this problem.
You need to add autofocus to text box of the header filter while creating the column definition.
You can do this by coding something like this:
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name' },
{ field: 'company',
headerCellTemplate: '<div ng-class="{ \'sortable\': sortable }"><div class="ui-grid-vertical-bar"> </div><div class="ui-grid-cell-contents" col-index="renderIndex"><span>{{ col.displayName CUSTOM_FILTERS }}</span><span ui-grid-visible="col.sort.direction" ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }"> </span></div><div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)"><i class="ui-grid-icon-angle-down"> </i></div><div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><input type="text" autofocus class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || \'\'}}" /><div class="ui-grid-filter-button" ng-click="colFilter.term = null"><i class="ui-grid-icon-cancel" ng-show="!!colFilter.term"> </i> <!-- use !! because angular interprets \'f\' as false --></div></div></div>'
}
],
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged( $scope, function( grid, sort ) {
$scope.gridApi.core.notifyDataChange( $scope.gridApi.grid, uiGridConstants.dataChange.COLUMN );
})
}
};
In the above code sample you can see that the headerCellTemplate is being written explicitly. Here is the place you can do the change to get the autofocus. You can do anything you want in this cell template. But be careful not to change any underlying cell template. This may break ui-grid functionality. Hope this helps!
I found the above solution in the below plunker link:
http://plnkr.co/edit/JuDUwpUBwglkDRUYT77g?p=preview