I have a grid which is declared with column widths. basically like this:
#(Html.Kendo().Grid<TelerikMvcApp1.Models.Product>()
.Name("acct_dtls")
.HtmlAttributes(new{style="width:100%", #class="panel-body"})
.DataSource(ds => ds.Ajax().Read("Read", "Home"))
.Pageable()
.Sortable()
.Columns(columns =>
{
columns.Bound(Agent => Agent.ProductID).Width(300).Encoded(false).Hidden(false).Groupable(false).IncludeInMenu(false).Sortable(false);
columns.Bound(Agent => Agent.ProductName).Width(100).Encoded(true).Hidden(false).Groupable(false).IncludeInMenu(true).Sortable(false);
})
.Reorderable(r => r.Columns(true))
.Resizable(r => r.Columns(true))
.ColumnResizeHandleWidth(5)
.ColumnMenu()
.Filterable()
.Scrollable()
)
the problem is when it is rendered, the browser automatically adjust the columns widths just like responsive rendering. i have tried setting the table-layout property to "fixed" but still no working. Thanks for those who will share their knowledge
The grid has the table-layout: fixed setting applied by default. The problem is that you have set the width of both columns to a value which is less than the total grid width. You should avoid setting the width of one of the columns so it can occupy the remaining space.
Related
I'm putting several ag-grids on one page, all with less than 15 rows, but none with the same size. So I need the grid to 'snap' to the number of rows and the column width with no scroll bars.
Setting griOptions.domLayout='autoHeight' worked perfectly for the height. Setting to 'print' is also ok.
But what do I do for width?
I can get the columns the minimum width with : this.gridColumnAPI.autoSizeAllColumns();
How to I shrink the overall grid size to insure i don't get scroll bars?
this.setWidthAndHeight('XXXpx','YYYpx') doesn't seem like an option since the height was set by domLayout.
EDIT1:
I do not specify widths in my columnDefs:
columnDefs = [
{headerName: 'Category', field: 'category' },
{headerName: 'Percent', field: 'percent' },
{headerName: 'Count', field: 'count' } ];
EDIT2:
I wrapped the ng-grid in a div with style="width:500px;height:500px" , and the grid conformed to that, so I'll be trying to dynamically set the style of that div once the gridReady event fires.
So how do I get the dimensions of the grid at any point? I know I can mine the columnApi for width of each...
this is my controller
$calendar = Calendar::addEvents($events)
->setOptions([ //set fullcalendar options
'firstDay' => 1,
'height' => '200px',
'themeSystem' => 'bootstrap3',
'columnHeader' => false,
'aspectRatio' => 1
]);
I change the height of container but cell size remains with a scrolling bar
i want to change my calendar like this
Replacing height with contentHeight should help change the size.
You might need more than 200px because it takes into account the whole calendars height rather than just one row. So if it was set to 1000, each section row would have a height of 162 or 329 if it was set to 2000.
So you'll just need to change:
'height' => '200px',
to
'contentHeight' => 1300,
You don't need to include the px.
I have a Telerik Kendo UI grid inside a Telerik window. Everything works fine except there is a strange space inside the grid. This might be because of the window in which the grid is located. But I really don't understand this...
Here is my code for the grid and the window:
#(Html.Kendo().Window()
.Name("window")
.Title("Kunden Suche")
.Content(
(Html.Kendo().Grid<CleverFit.Models.Kunde>()
.Name("KundeGrid")
.Columns(columns =>
{
columns.Bound(c => c.KdNr);
columns.Bound(c => c.Vorname);
columns.Bound(c => c.Name);
columns.Bound(c => c.Ort);
columns.Bound(c => c.Strasse);
columns.Command(commands =>
{
commands.Custom("Details").Text("Öffnen").Click("open");
}).Title("Commands");
})
.HtmlAttributes(new { style = "height: 500px" })
.Scrollable()
.Groupable()
.Sortable()
.Filterable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Kunden_Read", "Api"))
.PageSize(20)
).ToHtmlString()
))
.Draggable()
.Resizable()
.Width(1000)
.Height(600)
.Visible(false)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
)
I also added an image below.
If I resize the window only for 1px then the grid adopts full size and there is no empty space anymore. But this is during build, if change the size in code for 1px there is no effect on the grid.
Most probably, the Grid is initialized while the Window is not displayed, so it cannot adjust its layout properly.
Use the Window's activate event to call the resize method of the Grid.
Below is my code and I set the values for columns and rows correctly or at least I thought I did but it won't change from the default size of the text area. What have I done wrong?
<div class="row">
#Html.LabelFor(model => model.fullName, "Name:")
#Html.TextAreaFor(model => model.fullName, new { #cols="160", #rows="1" })
#Html.ValidationMessageFor(model => model.fullName)
</div>
cols and rows are relative to font size. height and width, also line-height and letter-spacing if explicitly set as well.
So use height width properties
#Html.TextAreaFor(model => model.fullName, new { #Style="height:400px; width:300px;" })
I'm using the PHPExcel to generate some sheets on my server. More or less it everything works fine, but, when I try to color some rows (every second row, so the list would be easily readable) I get funny thing: the row is colored ok, but only on cells that are not filled with data. The cells that are filled with data remain white.
Here's code I use
$ind = ($ind + 1) % 2;
if($ind == 1)
{
$style_header = array(
'fill' => array(
'type' => PHPExcel_Style_Fill::FILL_SOLID,
'color' => array('rgb'=>'CCC'),
),
'font' => array(
'bold' => true,
)
);
$sheet->getStyle($row)->applyFromArray( $style_header );
}
$sheet->getCellByColumnAndRow(0, $row)->setValue($item['qty']);
$sheet->getCellByColumnAndRow(1, $row)->setValueExplicit($item['name']);
$sheet->getCellByColumnAndRow(2, $row)->setValueExplicit($item['size']);
$sheet->getCellByColumnAndRow(3, $row)->setValueExplicit($item['color']);
What am I doing wrong?
I don't see anything that jumps out at me as being wrong. Does the bold font get applied to the cells with text or is the entire style being ignored? If the bold does get set, try flipping the order of 'fill' and 'font' within the array. I wouldn't think that should make a difference, though.
You could also try $sheet->getStyle('A$row:D$row')->... as well, just to explicitly set the style for the range of cells you're using instead of the whole row.
here you can get good examples
http://bayu.freelancer.web.id/2010/07/16/phpexcel-advanced-read-write-excel-made-simple/