Is it possible to insert custom widget (for example button or checkbox) in gridpanel column header?
From documentation it's unclear.
Already I've tried to google it, but without any success.
Please help!
The short answer is 'yes'.
You can extend the grid column, then make an afterrender listener.
In the listener, get the column's innerEl = (component.getEl().down('column-header-inner').
Then, make a new component like button/checkbox, columnComponent.headerButton = new Ext.button.Button()
Then, render it columnComponent.headerButton.render(innerEl).
I hope this helps.
I had the same problem: How to get a button (or any custom component) into the extjs grid header field.
After some research I found the solution for extjs 5: You can configure the "items" property of the grid columns:
{
xtype: "gridcolumn",
text: "column header name in grid",
dataIndex: "...",
items:[
{
xtype: "button",
text: "Foo",
handler: "onFooClick"
}
]
}
This will for example show a button under the grid header text inside the header component.
Related
I want to add badge in nebular menu for inbox count dynamically. Help me on this. Thanks
import { NbMenuItem } from '#nebular/theme';
export const MENU_ITEMS: NbMenuItem[] = [
{
title: 'Dashboard',
link: '/pages/dashboard',
home: true,
},{
title: 'Inbox',
link: '/pages/inbox',
home: true,
}]
I would like to extend the question and ask if it is possible to place a custom component or at least HTML tags within the menu item? Currently the interface allow only string (title) ...
The question above (about adding a badge) is just an example for the missing functionality - enable formatting of the menu item.
I would appreciate an example code to solve this limitation, even if it contains extending nebular framework classes.
Thx,
Yohay
Is there a way to define a custom formly type with two inputs at once without the black line coming from material.
What i need is a formly number input with a slider. The user should be able to normally type in the input and change the given value.
Something like this:
My approach:
Extending the custom component in my FormlyModule.forRoot({types:[...]}) :
{
name: 'custom-test-input',
component: FormlyTestInputComponent,
extends:'input',
}
The template:
<input matInput
type="number"
[formControl]="formControl"
/>
<mat-slider></mat-slider>
I know how to bind both values using to.bindValue(not in the sample code above) but after extending input i have this this input field line located under my whole form-field which i think is coming from mat-form-field.
Like:
Is there a way to shrink this line, put it under the input field and keep this in one custom type? Thank you for help!
I found a way to hide the mat-form-field-underline after having a look on the implementation.
Using the defaultOptions which can be set on a custom form in the types array to access the hideFieldUnderline attribute(boolean) was the solution. This is how you disable the Underline on a form which extends the custom form.
types: [{
name: 'custom-slider-input',
component: FormlyCustomSliderInputComponent,
extends:'slider',
defaultOptions: {
templateOptions: {
hideFieldUnderline: true, //is hiding underline
},
}
}],
I've this issue I didn't see during development but it happens to my client. I use jQuery DataTables to let the user complete with information.
On a big/normal resolution this does not happened because the DataTables can show all the columns. But on lower resolution the grid shows a green plus button and the controls "inside" that group are not initialized correctly.
Normal page with lower resolution:
Using the Chrome Dev Tools' Console: I can excecute this:
$(".k_numeric").kendoNumericTextBox({ format: "c", decimals: 2 });
And the controls now are display correctly.
So it seems that when the DataTables hides columns to fit on the display, the controls are not being called by JS. I tried searching about this but I don't even know how to search it properly.
CAUSE
This issue occurs because Responsive extension creates new elements when preparing row details. These new elements need to be initialized again.
SOLUTION
You need to re-initialize those controls that become part of row details in a separate function.
The solution is to:
define a custom render for the row details with responsive.details.renderer option
call default renderer with $.fn.DataTable.Responsive.defaults.details.renderer() which returns jQuery collection.
initialize custom controls in this collection before returning it.
Example:
var table = $('#example').DataTable({
responsive: {
details: {
renderer: function (api, rowIdx, columns) {
var $details = $.fn.DataTable.Responsive.defaults.details.renderer(api, rowIdx, columns);
$(".numerictextbox", $details).kendoNumericTextBox({ format: "c", decimals: 2 });
return $details;
}
}
},
createdRow: function( row, data, dataIndex ){
$(".numerictextbox", row).kendoNumericTextBox({ format: "c", decimals: 2 });
}
});
DEMO
See this jsFiddle for code and demonstration.
LINKS
See jQuery DataTables – Responsive extension and custom controls article for more information.
Following code create grid column with combo box in header but only working in IE for other browser combo box is not click able.
columns : [ {
header : 'Selected Year<br/><select style="width:80px" id="mndyearlist"</select>',menuDisabled : true,width:100}]
Thanks
Click on header has handler attached, and each click is bubbling up from select. Additionaly there is also drag&drop attached by default, which doesn't help either. So, you should change that behaviour. You can for example extend Column like so:
Ext.define('Ext.grid.column.SelectColumn', {
extend: 'Ext.grid.column.Column',
alias: 'widget.selectcolumn',
// disable D&D
draggable: false,
// handle click event
onElClick: function(e, t) {
var target = e.getTarget('select');
// if event is from select supress default behaviour
if (!target) {
return this.callParent(arguments);
}
}
});
Then just use that column in your grid, and your select should work.
Working sample: http://jsfiddle.net/9aTUY/4/
I am developing a MVVM application and I am using KendoUI Grid. In the grid I want to get the onChange event when user change the pages. (I have been able to do this without MVVM). To do this, I have used the following element.
data-pageable='{ "pageSize": 2, events: {change: onPage}}' //This is not working
I want to the program to execute the onPage function when user changes the pages.
Any help is appreciated.
Thank you.
I am using the grids Databound event which fires when a user changes the page. From there I am selecting the first row so it is highlighted. Hope this helps
In the grid definition:
.Events(events=>events.DataBound("Grid_Databound"))
In the script:
<script>
function Grid_Databound() {
var grid = $("#Grid").data("kendoGrid");
row = grid.tbody.find(">tr:not(.k-grouping-row)").eq(0);
grid.select(row);
}
You don't need "events : { }", just "change", and you need to reference your view model:
data-pageable='{ pageSize: 2, change: yourviewmodel.onPage }'