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.
Related
I am adding custom tick like below
axisX3.addCustomTick()
.setGridStrokeLength(0)
.setTextFormatter(()=> ttstr[0]+":"+ttstr[1])
.setValue(xVal);
How do I change font size / color
change border color / style
remove the rectangle around the ticks and just show the pointer in top.
I tried
.setTitleFont(f => f
.setSize(24)
)
But not working
You can edit the visual style of the created tick with customTick.setMarker() method. This method takes a mutator function as the first and only argument.
To change the font size:
const tick = axisX.addCustomTick()
.setMarker(marker => marker
.setFont(font => font
.setSize(40)
)
)
To style the border:
const tick = axisX.addCustomTick()
.setMarker(marker => marker
.setBackground(background => background
.setStrokeStyle((line) => line
.setFillStyle(style => style
.setColor(ColorHEX('#f00'))
)
)
)
)
Showing just the pointer is not possible.
See below for a snippet of styling the tick.
const {
lightningChart,
emptyLine,
ColorHEX,
} = lcjs
const chart = lightningChart().ChartXY()
const axisX = chart.getDefaultAxisX()
const tick = axisX.addCustomTick()
.setMarker(marker => marker
.setFont(font => font
.setSize(40)
)
.setBackground(background => background
.setStrokeStyle((line) => line
.setFillStyle(style => style
.setColor(ColorHEX('#f00'))
)
)
)
)
.setValue(4)
<script src="https://unpkg.com/#arction/lcjs#1.3.1/dist/lcjs.iife.js"></script>
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 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.
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 am creating a form and having trouble formatting the radio button, The radio buttons are aligned to centre and have a wide white background (my site wont be having a white background) is there anyway to get more control with razor to removed the background colour and to align the radiobuttons to the left?
here is the code that visual studio has produced for me:
<div class="editor-field">
<div>Yes: #Html.RadioButtonFor(model => model.Smoke, "true", new { #checked = "checked" })</div>
<div>No: #Html.RadioButtonFor(model => model.Smoke, "false")</div>
#Html.ValidationMessageFor(model => model.Smoke)
</div>