I do not need checkbox for child node only for "items" without children. i.e.
Thanks.
We used the Template function in kendo treeview:
.Template("<input type='checkbox' name='checkedNodes' tabindex='-1' #= (item.HasChildren === false) ? '' : '' # #= item.HasChildren ? '': 'hidden' # id='_#= item.uid #' />"
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'm working with angularJS and haml syntax and I want to hide the tooltip on mouse hover if an attribute is null, this the line that show it :
%td
%a{ ng_href: '/reports/{{decoratedReport.id}}/download'}
%i.fa.fa-download.fa-lg.dark-grey{ uib_tooltip: " {{'reports.downloaded_at' | translate}} {{ decoratedReport.last_downloaded_at | date: ('report.download_date.format.short' | translate ) }}",
tooltip_placement: 'left'}
how to add an ng_if condition inside the haml to hide just the tooltip ?
the solution is : tooltip-enable="flag" where flag is a Boolean value set in your controller
any example of how to use this feature ?
A customized placeholder can be provided by specifying the placeholder option provided to the as-sortable item. placeholder can be both a template string or a function returning a template string. ng-sortable , I have tried to put a template but its not appearing on the placeholder, I want the place holder to be a copy of the dragged item with low opacity.
Thanks,
I used this configuration for the "as-sortable" property
$scope.dragDropMetricsOpts =
{
orderChanged: function( event ){},
containment: "#board",
clone: true,
allowDuplicates: false,
placeholder: function( event ){
return "<div style="background: red;"></div>";
}
};
I am using angular-formly to generate radio groups. Everything works well except at a point where these radio buttons are being generated dynamically depending on some condition.
The Problem
Every instance of radio buttons gets the same dynamic ID generated by following formly template. As a result when I click on any radio button on the page, the first one gets selected as the ID attribute is always same.
function addRadioType(formlyConfigProvider) {
formlyConfigProvider.setType({
name: 'radio',
template: '<div class="radio-group vk">'
+'<div ng-repeat="(key, option) in to.options" class="radio">'
+'<input type="radio" id="{{id + \'_\'+ $index}}" tabindex="0" ng-value="option[to.valueProp || \'value\']" '
+' ng-model="model[options.key]">'
+'<label for="{{id + \'_\'+ $index}}">'
+' {{option[to.labelProp || \'name\']}}'
+' </label>'
+'</div>'
+'</div>'
,
wrapper: ['bootstrapLabel', 'bootstrapHasError'],
defaultOptions: {
noFormControl: false
},
apiCheck: check => ({
templateOptions: {
options: check.arrayOf(check.object),
labelProp: check.string.optional,
valueProp: check.string.optional
}
})
});
}
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.