Is there a way to customize the title of ext.js grid panel (or is there a more generic way of customizing panel title) by adding custom controls to it, and not tool buttons?
I am tring to add a search field to the title, but with current existing implementation (found in the ux/grid example) it is shown how filter can be added to the drop down menu of the grid's title, and not to the title itself, which is what I am trying to achieve..
Any clue?
Have a look at the grid panel's header config, where you can set any configuration option of Ext.panel.Header. As it is a container, you can just specify its items there:
header: {
title: 'Test',
titlePosition: 0,
items: [{
xtype: 'textfield'
}]
}
Also check out this fiddle.
Header is a container with hbox layout so you can add/remove items to it as to any other container. You can test it (for example) here: http://extjs.eu/apps/saki-writable-grid/ by typing
Ext.ComponentQuery.query('maingridview')[0].getHeader().add({xtype:'textfield'});
in the console. The textfield appears at the header right.
As to grid filtering, see Grid Search Plugin that can be added also to the grid header.
Related
I am trying to right-align the column headers in the AgGrid. I know how to do this implementing a custom header component using IHeaderAngularComp and supplying my own template however that seems like a lot of work for something that should be trivial.
https://stackblitz.com/edit/angular-ag-grid-angular-ebvgjb
Align price column heading to right to match alignment with cell contents
I am using the following libraries.
"ag-grid-angular": "21.2.1"
"ag-grid-community": "21.2.1"
If you want all column headers to align right:
defaultColDef: { headerClass: "ag-right-aligned-header"}
If you want a single column header to align right:
{ headerName: "name", field: "field", headerClass: "ag-right-aligned-header" }
You would need to make these 2 changes to the css file to make it happen... since there is a little burger menu which gets visible on hover also.
::ng-deep .ag-cell-label-container{flex-direction: row}
::ng-deep .ag-header-cell-label { flex-direction: row-reverse; }
Forked your stackblitz with this change here
working stackblitz
fixed by defining template in headerComponentParams.
if you're looking to align some of the numeric columns to the right and other columns to left, you might want to check this link (https://stackblitz.com/edit/angular-ag-grid-angular-hzqdnw ) posted by #Imran in the comment section of the correct answer.
I'm using free-jqGrid and jqGrid has the option to place selection checkboxes for you onto the grid. On my grid I have two columns in the beginning which is placed by jqGrid and not backed up by my own data: a record number column 'rn' and the checkbox for record selection 'cb' (multi select in my case).
I feature the jqGrid on a bootstrap website, so when the loadComplete event hits, I add 'from-control' class to a lot of edits, like the per column search boxes and basically every edit I can find on the page. (I also replace every ugly little icon to glyphicons. I manipulate the DOM of the toolbar buttons so they become real buttons, so they look nicer and chardin.js work well for example. And so on and on and on. The end result is much better than the original. BTW, I'm not sure if that's the best practice, I couldn't find a better way to make jqGrid more bootstrappy, but this can be another question).
When you apply form-control class to a checkbox, it bloats up. That's beneficial, because it's much easier to click on it, you don't need to have a magnifier glass (like for the original tiny checkbox). I can nicely resize the columns for all those data columns what I supply data for, but I cannot figure out how to widen the cb column so it can accommodate the bloated up checkbox.
I tried adding a configuration for that column in my colModel:
Both
{
name: 'cb',
width: 38,
align: 'center',
sortable: false,
}
and
{
width: 38,
align: 'center',
sortable: false,
}
failed, I got an error from jqGrid stating that the number of colModels doesn't match the number of supplied data. That's true, because the data behind the cb column is not backed up by me.
I tried in the loadComplete
var $ajaxGrid = $("#ajaxGrid");
$ajaxGrid.jqGrid('setColProp', 'cb', { width: 38 });
That didn't give me an error, but also didn't change anything. Maybe I should put it into another event handler? Which?
Then I tried to go down the rocky road of manipulation:
$("#ajaxGrid_cb").css("width", "38px");
$(".td_cbox").css("width", "38px");
As you see I separately widen the header and the td elements. But this causes the table horizontal scrollbar to appear. Yuck! I tried to tumble deeper into the hacking hole, and make a wider column on the grid narrower to make the scrollbar disappear, but this didn't help:
$("#ajaxGrid_Name").css("width", "435px");
$('td[aria-describedby="ajaxGrid_Name"]').css("width", "435px");
There must be a way. Now it's ugly. Screenshot:
(Another style problem you can also see is for the Combined column I specify align: 'center' in the colModel but it has no effect.)
You can use multiselectWidth to specify the width of the multiselect column:
multiselectWidth: 38
One more alternative: you can change the columns width later using setColWidth which is the part of free jqGrid. I introduced the method originally in the answer as plugin to old jqGrid versions. Thus the following, for example, will work too:
onInitGrid: function () {
$(this).jqGrid("setColWidth", "cb", 38);
}
The onInitGrid callback or jQuery event "jqGridInitGrid" are good place, where you can modify the grid before the data will be loaded.
P.S. I'm working now on including better support of Bootstrap in free jqGrid. Probably you will just need to use guiStyle: "bootstrap" in the next version of jqGrid to make jqGrid be "in Bootstrap style".
I am trying to edit the area of the CKeditor ( see icon). All this window is a Table with rows and columns, even the textarea is a part of a row. What i am trying to do is to create more Columns for my dropdowns and to move them higher, so i have first my dropdowns in a line and then my textarea. So is there a file responsible for these settings?
ps. I can't find the inspected html.
Well this can be achieved by using an Hbox (Horizontal Box probably).
add this code to mathjax.js
{ type: 'hbox',
widths: [ '25%', '25%', '50%' ],
children: [
type:'select',
id:'someid'
]
}
i have a dataview and i am showing some images inside it. Now i am doing pagination for the dataview. I dont need the default paging bar using extjs. What i need is a customised one. That is there will be an icon for showing previos page on the left side of dataview and an icon indicating next page on the right page in between two icons i have to show the page count like "1,2,3,4,5".
Is it possible to customize the default paging bar in this way?
{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: false,
border:0
}
I am using Twitter's Bootstrap to implement tooltips. Currently, the tooltips appear above the link. I would like the tooltip to appear underneath the link. How would I go about doing this?
I am triggering the tooltip and it clearly states "bottom" but it doesn't want to work for me...
<script>$('#home').tooltip('hide bottom')</script>
$('#tooltip').tooltip({
placement : 'left',
title : 'first tooltip'
});
Use this inside <script> tags, or in a separate JavaScript file.
Assuming you're using the latest Bootstrap you would use the placement of "bottom". You can do this via the options when you create the tooltip: $("#tt").tooltip({placement: "bottom"}); or via the data attribute on the element: <span data-placement="bottom" ...>tooltip!</span> I believe.
You can find more information on the tooltip in the Bootstrap tooltip section.
on the bootstrap website they show options for the tooltips. one of the options is placement
which can be set to top, bottom, right or left.
so when you add the script for your tooltip put the option like this
$('#example').tooltip({placement: "bottom"})
Bootstrap tooltip has a "placement" option. You can set it to "bottom" like this:
$('#home').tooltip({
placement : "bottom"
});
See their official website for references (v.2.3.3) or (v.3).