I'm trying to use AgGrid to display a simple list/grid of text informations.
With the base example :
columnDefs = [
{headerName: 'Make', field: 'make' },
{headerName: 'Model', field: 'model' },
{headerName: 'Price', field: 'price'}
];
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];
<ag-grid-angular
class="ag-theme-balham custom"
[rowData]="rowData"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
and a css style :
{
.custom{
height: 100vh;
width: 100%;
}
}
I see that the container of the grid takes all the space, that's cool but in the documentation I don't see a way to make sure the cells are justified and take all the space in width
How can I achieve that ?
You should execute sizeColumnsToFit() method once gread is ready:
sizeColumnsToFit : Gets columns to adjust in size to fit the grid horizontally.
as gridOptions property
gridOptions:{
onGridReady(params) {
params.api.sizeColumnsToFit();
}
}
or as html tag
(gridReady)="onGridReady($event)"
Related
In this demo from ag-Grid.
Age field is display at the bottom.
How to display Age field at the top?
Thanks!
.
ColumnDefs looks like :
return [
{
headerName: 'Athlete Details',
headerClass: 'participant-group',
children: [
{
field: 'athlete',
colId: 'athlete',
},
...
],
},
{
// how to display this field's harder at top
field: 'age',
colId: 'age',
},
...
];
I have created a jsfiddle over here.
There is a row (no.4) in the the store having empty/null values, but the grid display appears to be collapsed.
code snippet:
function(Grid, Memory) {
var data = [
{ id: 1, name: 'Peter', age:24 },
{ id: 2, name: 'Paul', age: 30 },
{ id: 3, name: 'Mary', age:46 },
{ id: '', name: '', age:'' }
];
var store = new Memory({ data: data });
var options = {
columns: [
/*{ field: 'id', label: 'ID' },*/
{ field: 'name', label: 'Name' },
{ field: 'age', label: 'Age' }
],
store: store
};
new Grid(options, 'gridcontainer');
}
I would like to have blank rows in the grid with the same height as other populated rows.
Is it possible in dGrid?
I believe the reason why blank rows do not have the same height as other rows is that dGrid doesn't actually set a specific height that a row should have. In situations where a cell may need a 2nd row, then the cell would grow in height. If you want a set height, you can add a css attribute to your fiddle that does something like:
#gridcontainer .dgrid-content .dgrid-cell {
height: 24px;
}
For Kendo UI Grid, there is the option of setting filterable to row or menu or both. I was wondering if it was possible to set some columns to be row(only as row), while others display as menu(only as menu). Preferably not with css.
Example: I want field name to be a row filter, while age to be a menu filter
<script>
$("#grid").kendoGrid({
dataSource: ...
filterable: {
operators: {
string: {
startswith: "Starts with",
eq: "Exact Client Name",
contains: "contains"
},
number: {
gte: "From",
lte: "Before"
}
},
mode: "row" },
column: [ { field: "ClientName", title: "Client Name", width: 150, type: "string" , attributes: { style: "text-align:left;" }, filterable: { messages: { info: "Show clients that: " }, extra: false} },
{ field: "Month", title: "Month", width: 78, type: "number", attributes: { style: "text-align:center;" }, filterable: { messages: { info: "Show month(s): ", and: "To" }, ui: monthFilter, mode: "menu" } }
]
});
</script>
I figured out a solution. Probably not the best solution, but for anyone that needs it for future reference, I used the follow solution.
set filterable mode to mode: "row, menu"
filterable: {
cell: { enabled: false}
}
to eliminate unwanted rows filters. And using jquery
databinding: function(e){
$("#grid-name .k-grid-filter .k-filter").css('display', 'none');
$("#grid-name ").find("[data-field=Month]>.k-grid-filter .k-filter").css('display', 'block');
}
to eliminate unwanted column menu filters.
I have a Kendo UI grid with a popup editable property. I would like to make my dropdown columns wider when I'm add/edit mode, but I cannot seem to change the widths. I can indeed change the widths in the grid itself but not in edit mode.
Does it have to do with some kind of Edit Template ? I can't find the documentation for it.
thanks.
Bob
Here's my sample grid :
positGrid = $("#positGrid").kendoGrid({
dataSource: datasource,
toolbar: [
{ name: "create", text: "Add Position" }
],
columns: [{
field: "PositionId",
},
{
field: "Portfolio",
editor: portfolioDropDownEditor, template: "#=Portfolio#"
},
{
field: "Instrument",
width: "220px",
editor: instrumentsDropDownEditor, template: "#=Instrument#",
},
{
field: "NumOfContracts",
},
{
field: "BuySell",
editor: buySellDropDownEditor, template: "#=BuySell#"
},
{
command: [
{
name: "edit",
click: function (e) {
}
},
"destroy"
]
},
],
sortable: true,
editable: "popup",
});
You can wire up edit event to set dropdown options:
name: "edit",
click: function (e) {
if (!e.model.isNew()) {
var dropdown = e.container.find("input[name=Portfolio]").data("kendoDropDownList");
dropdown.list.width(500);
}
}
I have an external jsp page(a menu) and a DOJO table in my div. When I tried to applyoverflow:auto; on the div, I am seeing 2 scroll bars. One for the table and the other for the menu. How do I make the menu and the table scroll for a single scroll bar?
<div id="table">
<jsp:include page="searchgroup.jsp"></jsp:include>
<div id="grid1" jsid="grid1" dojoType="dojox.grid.EnhancedGrid" query="{ name: '*' }"
data-dojo-props="plugins:{ pagination:{pageSizes: ['10', '25', '50', '100'],
description: true, sizeSwitch: true, pageStepper: true, gotoButton: true, position: 'bottom', maxPageStep: 7}}, rowsPerPage:10">
</div>
</div>
This is my CSS
#grid1{
height: 85%;
width: 104%;
overflow-x:auto;
}
#table{
height:90%;
width:104%;
overflow-x:auto;
}
<script>
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.data.QueryReadStore");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
var gridLayout = [
{
name : "S. No.",
classes : "title",
width : "70%",
get : siFormatter,
filterable : false
}, {
name : "Site Id",
classes : "title",
field : "siteId",
width : "70%"
}, {
name : "IP/Phone No.",
classes : "title",
field : "devType",
width : "120%"
}, {
name : 'Site Name',
classes : "title",
field : "name",
fields : [ 'company', 'name' ],
formatter : formatLink,
width : "110%"
}
</script>
because you applied overflow: auto on both of them
you are supposed to use that on one of them not both of them