i wont to use angulars bootstrap tooltip in header cell of ui-grid
$scope.gridOptions = {
//some settings
columnDefs: [
{
field: someId,
displayName: 'Name',
headerCellTemplate: 'linkToTemplate' //default headerCellTemplate with uib-tooltip={{tooltipDescription}},
tooltipDescription: 'Tooltip description' //it's not working
}
]
}
headerCellTemplate:
<div role="columnheader">
....
<span class="ui-grid-header-cell-label">
{{col.displayName}}
</span>
<span class="icon" uib-toolotp='{{col.tooltipDescription}}' tooltip-placement='right'></span>//it's not working
....
</div>
what is the right way to put tooltip description in each header cell?
Each cell has col.colDef property with access to all properties like field, displayName, tooltipDescription etc.
Related
suppose i've the following kendo grid
<kendo-grid-column field="full_name" title="Contact Name" [width]="220">
<ng-template kendoGridCellTemplate let-dataItem>
<div
class="customer-photo"
[ngStyle]="{ 'background-image': photoURL(dataItem) }"
></div>
<div class="customer-name">{{ dataItem.full_name }}</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="job_title" title="Job Title" [width]="220">
</kendo-grid-column>
<kendo-grid-column
field="country"
title="Country"
[width]="100"
[class]="{ 'text-center': true }"
[resizable]="false"
>
<ng-template kendoGridCellTemplate let-dataItem>
<img class="flag" [src]="flagURL(dataItem)" width="30" />
</ng-template>
</kendo-grid-column>
what i want to do is to get an array of grid columns with column title & field name
eg: [{field:"full_name",title:"Contact Name"},
{field:"job_title",title:"Job Title"}];
how to do this in Kendo Grid for angular?
You can access the grid using ViewChild and then access its columns field:
import { Component, ViewChild, AfterViewInit } from '#angular/core';
import { GridComponent } from "#progress/kendo-angular-grid";
#Component({
selector: 'my-app',
template: `
<kendo-grid #grid [data]="gridData">
<kendo-grid-column field="Id" title="ID">
</kendo-grid-column>
<kendo-grid-column field="CompanyName" title="Company Name">
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent implements AfterViewInit {
#ViewChild("grid") grid: GridComponent;
public readonly gridData = [{
'Id': 'ALFKI',
'CompanyName': 'Alfreds Futterkiste',
'ContactName': 'Maria Anders',
'ContactTitle': 'Sales Representative',
'City': 'Berlin'
}, {
'Id': 'ANATR',
'CompanyName': 'Ana Trujillo Emparedados y helados',
'ContactName': 'Ana Trujillo',
'ContactTitle': 'Owner',
'City': 'México D.F.'
}, {
'Id': 'ANTON',
'CompanyName': 'Antonio Moreno Taquería',
'ContactName': 'Antonio Moreno',
'ContactTitle': 'Owner',
'City': 'México D.F.'
}];
ngAfterViewInit() {
const columns = this.grid.columns.map((column) => {
return {
field: column.field,
title: column.title
};
});
console.log(columns);
}
}
Note: this.grid.columns gives you an object of type QueryList<ColumnBase>. The ColumnBase class doesn't contain the field field in its definition, however, it does appear on the object. I guess that this.grid.columns actually returns an object of type QueryList<ColumnComponent>. ColumnComponent derives from ColumnBase and does contain the field field.
For me, to get the column.filed, the above code didn't work. But when I use fieldName: column["field"], it worked for me.
I need to use a Bootstrap dropdown-menu in my ui-grid cellTemplate, and capture the selection in order to show their selection on the button. The problem is that because I can't use ng-model on a <li>, when I capture the selection, all of the dropdowns in the grid are updated with the selection text.
Here is a Plunker demonstrating my issue.
Here is my Controller code:
$scope.actions = [
{ id: 'action1', name: 'Action 1' },
{ id: 'action2', name: 'Action 2' }
];
$scope.selectedAction = { id: 'action0', name: 'SelectOne' };
$scope.setAction = function (action) {
$scope.selectedAction = action;
$scope.submitAction();
};
$scope.submitAction = function () {
console.log($scope.selectedAction.id);
};
$scope.gridOptions = { rowHeight: 38 };
$scope.gridOptions.columnDefs = [
{ name: 'id', enableCellEdit: false },
{ name: 'name', displayName: 'Name (editable)' },
{ name: 'age', displayName: 'Age' , type: 'number' },
{
field: 'Action', displayName: 'Action',
cellClass: 'center',
cellTemplate: 'myDropDown.html',
enableSorting: false
}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
Here is my HTML:
<div class="ui-grid-cell-contents">
<div class="btn-group" dropdown dropdown-append-to-body>
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" dropdown-toggle ng-click="grid.appScoe.submitAction()">
{{grid.appScope.selectedAction.name}}<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="width:230px"><li ng-repeat="action in grid.appScope.actions"><span ng-click="grid.appScope.setAction(action)">{{action.name}}</span></li></ul>
</div>
</div>
Any assistance is greatly appreciated!
I have forked your plunker here
You're binding the selection to a single scope variable when you need to bind it to a model per grid row. Your model needs a column called Action to correspond with your grid config. For the sake of the example I simply added a column:
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
data.map(function(element) {
element.Action = $scope.selectedAction;
});
$scope.gridOptions.data = data;
});
I modified setAction() to pass in the row and the selected action:
$scope.setAction = function(row, action) {
row.entity.Action = action;
$scope.submitAction();
};
And changed your cell template to work with the controller changes:
<div class="ui-grid-cell-contents">
<div class="btn-group" dropdown dropdown-append-to-body>
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" dropdown-toggle ng-click="grid.appScoe.submitAction()">
{{row.entity.Action.name}}<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="width:230px"><li ng-repeat="action in grid.appScope.actions"><span ng-click="grid.appScope.setAction(row, action)">{{action.name}}</span></li></ul>
</div>
</div>
Currently I am using select for dropdown. I would like to change this as multiselect dropdown. But when I declare the multiselect dropdown I am getting error saying "unknown attribute Options"
The current code which is just a dropdown without multiselect.
<select class="form-control"> <option ng-repeat="item in CETIGroupList" value="{{item}}">{{item}}</option>
</select>
What I wrote for multiselect is
<div ng-dropdown-multiselect="" options="CETIGroupList" ></div>
Please help me creating a multiselect dropdown.
Thanks
include loadsh.js , bootstrap css , AngularJS Dropdown Multiselect in your app. Inject angularjs-dropdown-multiselect in your app
angular.module('sampleApp', ['angularjs-dropdown-multiselect'])
in your HTML page
<div ng-dropdown-multiselect="" options="example13data" selected-model="example13model" ></div>
in your Controller
$scope.example13model = [];
$scope.example13data = [{
id: 1,
label: "David"
}, {
id: 2,
label: "Jhon"
}, {
id: 3,
label: "Lisa"
}, {
id: 4,
label: "Nicole"
}, {
id: 5,
label: "Danny"
}];
Check out this fiddle : https://jsfiddle.net/ebinmanuval/8Ltae8pb/
I want to bind my ng-grid celltemplate to html textbox ( I am having ng-grid , which displays the data,below that I want to add a textbox, so that as I type something in textbox, the values should get update in cell Template of ng-grid).
Here is my html page:
<div ng-controller="bulkAssign" >
<form name="signup_form" method="POST">
<div style=" border: 1px solid rgb(212,212,212);
width: 1000px;
height: 200px;" ng-grid="gridUser">
</div>
<p><b>Editing grid</b></p>
<div class="gridStyle" ng-grid="gridOptions" data-ng-click="testSeletion()"></div>
<label>Edit grid from textbox</label>
<input type="number" name="assignTo" ng-model="assignTo" placeholder="Assign order to" class="form-control" >
</form>
</div>
Here is my controller:
$scope.gridOptions = {
data: 'names',
enableCellSelection: false,
enableRowSelection: true,
showSelectionCheckbox: true,
multiSelect: true ,
columnDefs: [
{
field: 'orderId',
displayName: 'OrderId',
enableCellEdit: false,
cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="loadById(row)">{{row.getProperty(col.field)}}</a></div>'
},
{field: 'trackingId', displayName: 'trackingId', enableCellEdit: false, cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="loadById(row)">{{row.getProperty(col.field)}}</a></div>' },
{field: 'orderTitle', displayName: 'OrderTitle', enableCellEdit: false},
{field:'customerName', displayName:'CustomerName', enableCellEdit: false},
{field:'customerContactno', displayName:'ContactNo', enableCellEdit: false},
{field:'assignTo', displayName:'assignTo', enableCellEdit:true,cellTemplate:'<input type="number">'}
],
selectedItems: $scope.mySelections,
filterOptions: $scope.filterOptions
};
My question is after entering value in textbox, when i click button, is it possible to update values in ng-grid celltemplate?
My code is as follows (the fiddle):
<div ng-controller="myCtrl">
<div ng-model="currentTab" ng-init="currentTab='Tab1'"/>
<div ng-init="popovers = [
{ name: 'Popover1',
displayName: 'Pop over with two tabs',
tabs: [
{ name: 'Tab1',
displayName: 'First tab',
description: ['First tab description']
},
{ name: 'Tab2',
displayName: 'Second tab',
description: ['Second tab description']
}
]
}
]"/>
<b>Tabs in popover</b>
<div
class="popover"
ng-repeat="p in popovers"
>
Popover name: {{p.displayName}}
<div ng-repeat="t in p.tabs"
class="tab"
ng-class="currentTab==t.name?'selected':''"
ng-click="currentTab=t.name"
>
{{t.name}}
</div>
<div ng-repeat="t in p.tabs"
class="tabContent"
ng-class="currentTab==t.name?'selected':''"
>
<p>{{t.displayName}}</p>
</div>
</div>
</div>
There is something I don't get which make the code not working perfectly, as the selected class name is never removed as one click on the tab.
When you want to modify a variable of your parent scope from within a ng-repeat you need to use $parent.currentTab.
Updated Fiddle