in my ng-grid options I have :
columnDefs : [
{
field : 'status',
headerClass : 'tbl-header',
displayName : 'Status',
cellTemplate : '<span tooltip="{{row.entity.note}}" tooltip-append-to-body="true" tooltip-trigger:"focus">{{row.entity.status}}</span>'
},
],
But this does not display the tooltip on the click of the column cell. However, if I remove the tooltip-trigger:"focus" then the tooltip appears on the hover.
How can i show the tooltip on the click event of the cell template?
As it explained here :
Angular-ui's tooltip does not display correctly in ng-grid
you can use
tooltip-append-to-body="true"
to append tooltip to body.
Related
I have column holding the checkbox on a MVC kendo grid. When I click on the column but not on the checkbox, the checkbox position is slipping (moving towards right) and the click event is not delegating to checkbox.
I tried Change event and DataBound to suppress the click even on column but couldn't do it.
Any suggestions to disable the click event on this Kendo Grid checkbox-column or to delegate the column's click event to checkbox!
Below is the code snippet that I have used to build the checkbox column,
columns.Bound(p => p.IsSelected).Title("Select").Width(11).ClientTemplate("<input type='checkbox' #= (IsSelected) ? checked='checked' : '' # id=chk#=(Id)# class='exclchkbx' />").HtmlAttributes(new { style = "text-align: center;" }).Width(10).HeaderHtmlAttributes(new { style = "text-align:center;" });
Output of my grid column
Dislocated checkbox after clicking the checkbox column (but not on checkbox)
Appreciated in advance!
The reason why the checkbox position is slipping is that there is default padding applied. Instead of using the HeaderHtmlAttributes method, you can wrap up the template in a div with text-center as follows:
columns.Bound(p => p.IsSelected).Title("Select").Width(11).ClientTemplate("<div class=\"text-center\"><input type='checkbox' #= (IsSelected) ? checked='checked' : '' # id=chk#=(Id)# class='exclchkbx' /></div>");
I am using ui-grid and want to export the table data in PDF through grid menu.
$scope.gridOptions = {
enableGridMenu: true,
columnDefs: [
{
name: "Group",
cellTemplate: '<div ng-if="row.entity.unit_GROUP">{{row.entity.unit_GROUP.description}}</div><div ng-if="!row.entity.unit_GROUP">No Group Assigned</div>'
}
]
}
This is shown in cell but when i eport the pdf through grid menu option.all the data except this group columns is exported and visible in grid.
My question is how can i make the data of grid visible which is shown in conditional cell template in columnDefs.
EDITL(added an example):
This plunker can show the problm in which "export all data as pdf" is not showing the column with conditional template(Married);
Currently I can display an Image in a cell, I want to be able to display the full image when hovering over the cell.
I know you can give the tooltip a method such as
cellTooltip: function(row, col){
}
I have tried
cellTooltip: function(row, col){
return '<img src=myimg/>'
}
but this simply displays the text, I want it to render the html
Since ultimately the tooltip is just using the "title" attribute it can only be text as defined by the spec.
ui-Bootstrap has an "unsafe" tooltip that will show HTML. tooltip-html-unsafe
You can try this, for example
{ field: 'name', displayName: 'name', width: '7%', cellTemplate: "<div class='tblicon' style='text-align: center' ><img ng-src=\"../App_Themes/images/{{grid.getCellValue(row, col)}}.png\" title={{row.entity.name}} lazy-src></div>" }
I hope it will work for you.
I am new to angular and ng-grid. I am using ng-grid as grid control in my project. I am trying to edit a cell whose value is formatted with a angular filter. For example:
{field:'rate | currency: "GBP "', displayName:'Rate'}
Here currency filter is applied to Rate column. When I click on the "Rate" column to edit, I get a blank textbox as in editable cell template. I was expecting to see the textbox bound to underlying data, but its not happening. Any idea?
Also, on blur or lost focus on cell, it should get out from editable template, even that is not happening. Anything I am missing?
Here is the plukr to see the problem: http://plnkr.co/edit/W5aViYikZzEGnDPgSI5z
Just use the cellFilter option. Plunker
columnDefs: [
{
field: 'name',
displayName: 'Name',
cellTemplate: 'input-tpls.html'},
{
field:'rate ',
displayName:'Rate',
cellFilter: 'currency'
}
],
app.filter('currency', function () {
return function (input) {
//Do your formatting here.
return "GBP " + input;
};
});
how to add close icon to the combobox list items at right most
Ext.define('ezdi.view.SaveSearchComboboxView', {
extend : 'Ext.form.field.ComboBox',
alias : 'widget.saveSearchComboboxAlias',
queryMode : 'local',
id : 'saveSearchComboId',
store : 'SaveSearchComboboxStore',
emptyText : 'Saved Searches',
displayField : 'searchQueryName',
valueField : 'searchQueryId',
lazyInit: false
});
You can do this by adding triggerXCls and onTriggerXClick to specify any number of additional trigger icons, where "X" is the position of additional trigger.
For example, to add a "clear" icon, you might do something like:
{
...,
id: 'saveSearchComboId',
trigger1Cls: 'x-form-clear-trigger',
onTrigger1Click: function() {
this.clearValue();
}
}
Keep in mind there are only a few "default" trigger icons, which can be found here (for classic theme): ext/resources/ext-theme-classic/images/form. These each have their corresponding "x-form-XYZ-trigger" class. For a different trigger icon (like a "close" icon or an "add" icon), you'll need to create your own images as well as the appropriate CSS class that you can apply to triggerXCls.
See this tread for more info: http://www.sencha.com/forum/showthread.php?190886-How-to-reset-a-Combobox-or-Multiselect-to-no-values-selected