or
2 answers
45 views
Is it possible to customize the appearance of input and page size dropdown controls in the TelerikPager control or the pager of the TelerikGrid control?
Our application uses the Material theme and all controls are using the Outline FillMode but I cannot change the Pages dropdown control of the grid's default pagger.
I can use the GridPagerTemplate to change the default pager with a customized one but still the TelerikPager control does not allow configuration of the TelerikNumericBox control behind the PagerInput control and the TelerikDropDownList behind the PagerDropDownList control.
Constantinos Petridis
Top achievements
Rank 1
Iron
Iron
Rank 1
Iron
Iron
answered
on
10 Nov 2023
1 answer
109 views
How can I style the Title of the GridCommandColumn? I jsut want to make the text bold. I've tried using <HeaderTemplate> and <GridCommandColumn.TItleTemplate> neither have worked. And I can't seem to find anything in the docs about styling the title.
<GridCommandColumn Width="50px" Title="Actions">
<GridCommandButton Command="Edit" Icon="@FontIcon.Pencil"></GridCommandButton>
<GridCommandButton Command="Delete" Icon="@FontIcon.Trash" ThemeColor="error"></GridCommandButton></GridCommandColumn>
<GridColumn Title="First Name" Field="@(nameof(SecurityAdminDto.firstName))" Width="100px">
<HeaderTemplate>
<div class="column-title">
First Name
</div>
</HeaderTemplate>
</GridColumn>
<GridColumn Title="Last Name" Field="@(nameof(SecurityAdminDto.lastName))" Width="100px">
<HeaderTemplate>
<div class="column-title">
Last Name
</div>
</HeaderTemplate>
</GridColumn>
<GridColumn Title="Email" Field="@(nameof(SecurityAdminDto.email))" Width="100px">
<HeaderTemplate>
<div class="column-title">
Email
</div>
</HeaderTemplate>
</GridColumn>
<GridColumn Title="EmployeeId" Field="@(nameof(SecurityAdminDto.employeeId))" Width="100px">
<HeaderTemplate>
<div class="column-title">
EmployeeId
</div>
</HeaderTemplate>
</GridColumn>
<GridColumn Title="NetworkId" Field="@(nameof(SecurityAdminDto.networkId))" Width="100px">
<HeaderTemplate>
<div class="column-title">
NetworkId
</div>
</HeaderTemplate>
</GridColumn>
<GridColumn Title="Security Admin" Field="@(nameof(SecurityAdminDto.isSecurityAdmin))" Width="100px">
<HeaderTemplate>
<div class="column-title">
Security Admin
</div>
</HeaderTemplate>
</GridColumn>
<GridColumn Title="FSO" Field="@(nameof(SecurityAdminDto.fsoCodes))" Width="100px">
<HeaderTemplate>
<div class="column-title">
FSO
</div>
</HeaderTemplate>
<Template>
@{
var cellValue = ((SecurityAdminDto)context).fsoCodes;
int i = 0;
@foreach(var fsoCode in cellValue)
{
if (i != 0)
{
<span>, </span>
}
<span>@fsoCode</span>
i++;
}
}
</Template>
</GridColumn>
<GridColumn Title="FTC" Field="@(nameof(SecurityAdminDto.isFTC))" Width="100px">
<HeaderTemplate>
<div class="column-title">
FTC
</div>
</HeaderTemplate>
</GridColumn>
<GridColumn Title="HR" Field="@(nameof(SecurityAdminDto.hrCodes))" Width="100px">
<HeaderTemplate>
<div class="column-title">
HR
</div>
</HeaderTemplate>
<Template>
@{
var cellValue = ((SecurityAdminDto)context).fsoCodes;
int i = 0;
@foreach (var hrCode in cellValue)
{
if (i != 0)
{
<span>, </span>
}
<span>@hrCode</span>
i++;
}
}
</Template>
</GridColumn>
<GridColumn Title="Contracts" Field="@(nameof(SecurityAdminDto.contractsCodes))" Width="100px">
<HeaderTemplate>
<div class="column-title">
Contracts
</div>
</HeaderTemplate>
<Template>
@{
var cellValue = ((SecurityAdminDto)context).contractsCodes;
int i = 0;
@foreach (var contractCode in cellValue)
{
if (i != 0)
{
<span>, </span>
}
<span>@contractCode</span>
i++;
}
}
</Template>
</GridColumn>
</GridColumns>
</TelerikGrid>
1 answer
121 views
I just recently upgraded to Telerik 4.3 and after working through the breaking changes, I found that the item count in the bottom right corner of the grid has been removed. How can I reenable this feature for my grid? I have attached a screenshot to reference the feature I am referring to...
1 answer
75 views
Hello,
I got a new project going on, which includes unique design.
I am using Telerik grid for Blazor for functionality but trying to change the contents look.
I have managed to change the header row style like you can see above with the following code:
.k-grid-header-wrap{
border-radius:15px;
margin-block:5px;
}but the inside rows don't response to the CSS lines (except the background):
.k-master-row, .k-table-alt-row{
margin-block:15px;
background:#fff!important;
border-radius:15px!important;
}So the question is - is it possible to add margin between the girds lines and furthermore add more style properties (specific to the grids content)? and if yes, could someone please provide an example for this?
thanks ahead,
Michael.
1 answer
525 views
I recall being told I would have access to source code once I buy a licence.
Now that I have a licence, how do I get access to the source so I can do a local build?
Accessibility
AnimationContainer
ArcGauge
AutoComplete
Avatar
Barcode
Breadcrumb
Button
ButtonGroup
Calendar
Card
Carousel
Charts
Checkbox
ChunkProgressBar
CircularGauge
ColorGradient
ColorPalette
ColorPicker
ComboBox
ContextMenu
DateInput
DatePicker
DateRangePicker
DateTimePicker
Dialog
Drawer
DropDownList
Editor
FileManager
FileSelect
Filter
FlatColorPicker
FloatingLabel
Form
Gantt
General Discussions
Grid
GridLayout
Licensing
LinearGauge
ListView
Loader
LoaderContainer
Localization
Map
MaskedTextBox
MediaQuery
Menu
MultiColumnComboBox
MultiSelect
Notification
NumericTextBox
Pager
PanelBar
PDFViewer
ProgressBar
QRCode
RadialGauge
RadioGroup
RangeSlider
Scheduler
Security
Signature
Skeleton
Slider
SplitButton
Splitter
StackLayout
Stepper
StockChart
Styling
Switch
TabStrip
TextArea
TextBox
TileLayout
TimePicker
ToggleButton
ToolBar
Tooltip
TreeList
TreeView
Upload
ValidationMessage
ValidationSummary
ValidationTooltip
Window
Wizard
Justin
Telerik team
answered
on
30 Dec 2022
1 answer
72 views
I have attached a screenshot.
I copied documentation from: https://docs.telerik.com/blazor-ui/components/grid/overview#creating-blazor-data-grid
I'm using version 2.24.0 is this why there is no styling?
1 answer
408 views
the built in Grid loading animation appears to default to k-loader-spinner-3. How can I change this to k-loader-spinner-4 to match the loading animation in the rest of my application?
1 answer
2.5K+ views
I am looking for more help/demos on styling the Telerikgrid. I would like to know:
How do I change the background color of rows? '.k-grid tr.k-alt' changes the alternate row, but setting '.k-grid tr' isn't applied when ran. When ran '.k-grid tr' is set to inherit. I can change the style within the master theme, but the master row background stays white, even though the debugger shows that it should be a different color.
How do I change the background color dependent on row data? For example, perhaps I want future transactions to be shades of blue.
How do I hide gridcommandbuttons based on the current row's data?
I have set the gridcommandbutton size to "small" to decrease the row height. I have tried changing the font size using the styling below, but this only affects the display rows and not the new/edit row. How do I change the size of the new/edit row?
@page "/GeneralLedgerGridEntry"
<style>
div.smallerFont,
div.smallerFont .k-filtercell *
{
font-size: 10px;
}
div.smallerFont .k-dropdown.k-header.k-dropdown-operator
{
width: calc(8px + 2em) !important;
}
div.smallerFont .k-grid-edit-cell .k-grid-content input
{
font-size: 10px;
line-height: 0.05;
padding: 0.25rem 0.25rem;
}
div.smallerFont .k-grid-container
{
font-size: 10px;
line-height: 0.05;
padding: 0.25rem 0.25rem;
}
div.smallerFont .k-grid .k-grid-content .k-grid-content
{
font-size: 10px;
line-height: 0.05;
padding: 0.25rem 0.25rem;
}
.k-grid tr
{
border-color: rgba(84, 122, 218, 0.39);
}
.k-grid tr.k-alt
{
background-color: rgba(84, 122, 218, 0.8);
}
</style>
<div class="row">
<div class="sm-col-4">
<h3>Select Account:</h3>
</div>
<div class="sm-col-8">
<TelerikComboBox
Data="@AccountList"
@bind-Value="chosenAccountID"
ValueField="@nameof(VM_AccountsGridEntry.AccountID)"
TextField="@nameof(VM_AccountsGridEntry.AccountDescription)"
Id="cmbAccountSelect"
OnChange="ChangeSelectionChoice">
</TelerikComboBox>
</div>
</div>
@if (ShowGrid)
{
<EditForm EditContext="@_formDataContext"
OnValidSubmit="@HandleValidSubmit"
OnInvalidSubmit="@HandleInvalidSubmit">
<h5 class="card-title">
@FormTitle
</h5>
<div class="p-2">
<DataAnnotationsValidator />
<ValidationSummary />
</div>
</EditForm>
<TelerikGrid Data=@Griddata Class="smallerFont"
EditMode="@GridEditMode.Inline"
Pageable="true"
OnCreate="@CreateItem"
OnUpdate="@UpdateItem"
OnDelete="@DeleteItem"
RowHeight="1">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add Transaction</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field=@(nameof(VM_GeneralLedgerGridEntry.TransactionID)) Title="TransactionID" Visible="false" />
<GridColumn Field=@(nameof(VM_GeneralLedgerGridEntry.TransactionDate)) Editable=true width="15em" DisplayFormat="{0:dd MMM yyyy}" Title="Transaction Date" Visible="true" />
<GridColumn Field=@(nameof(VM_GeneralLedgerGridEntry.CheckNumber)) Editable=true Title="Check #" width="10em" />
<GridColumn Field=@(nameof(VM_GeneralLedgerGridEntry.PayeeDescription)) Title="Payee Description" width="28em" Visible="true">
<Template>
@{
ProductToEdit = context as VM_GeneralLedgerGridEntry ?? new VM_GeneralLedgerGridEntry();
<TelerikTextBox Size="small" Enabled="false" @bind-Value="@ProductToEdit.PayeeDescription"/>
if ((ProductToEdit.CategoriesID == 1) && (ProductToEdit.PayeeID == 1))
{
//Hide gridcommandbuttons
}
}
</Template>
<EditorTemplate>
@{
ProductToEdit = context as VM_GeneralLedgerGridEntry ?? new VM_GeneralLedgerGridEntry();
<TelerikDropDownList Size="Small" Data="@PayeeList" @bind-Value="@ProductToEdit.PayeeID"
Width="100%"
TextField="PayeeDescription"
ValueField="PayeeID"
Filterable="true"
FilterOperator="StringFilterOperator.Contains">
</TelerikDropDownList>
<TelerikValidationMessage For="@(() => ProductToEdit.PayeeID)" />
}
</EditorTemplate>
</GridColumn>
<GridColumn Field=@(nameof(VM_GeneralLedgerGridEntry.Memo)) Title="Memo" Visible="true" width="20em"/>
<GridColumn Field=@(nameof(VM_GeneralLedgerGridEntry.CategoryDisplayDescription)) Editable=true Title="Category" width="28em" Visible="true">
<EditorTemplate>
@{
ProductToEdit = context as VM_GeneralLedgerGridEntry ?? new VM_GeneralLedgerGridEntry();
<TelerikDropDownList Size="Small" Data="@CategoryList" @bind-Value="@ProductToEdit.CategoriesID"
Width="100%"
TextField="CategoryDisplayDescription"
ValueField="CategoriesID"
Filterable="true"
FilterOperator="StringFilterOperator.Contains">
</TelerikDropDownList>
<TelerikValidationMessage Class="smallerFont" For="@(() => ProductToEdit.CategoriesID)" />
}
</EditorTemplate>
</GridColumn>
<GridColumn Field=@(nameof(VM_GeneralLedgerGridEntry.Payment)) Editable=true Title="Payment" DisplayFormat="{0:C}" width="15em" />
<GridColumn Field=@(nameof(VM_GeneralLedgerGridEntry.Deposit)) Title="Deposit" Visible="true" DisplayFormat="{0:C}" width="15em"/>
<GridColumn Field=@(nameof(VM_GeneralLedgerGridEntry.Current_Balance)) Title="Account Balance" Editable="false" Visible="true" DisplayFormat="{0:C}" width="13em"/>
<GridCommandColumn Width="15em">
<GridCommandButton Id="btnEdit" Command="Edit" Icon="edit" Size="Small">Edit</GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete" Size="Small">Delete</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" Size="Small" ShowInEdit="true" OnClick="@CreateItem">Save</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true" Size="Small">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
}
else
{
<LoadingAnimation LoadingText="Loading Data"></LoadingAnimation>
}1 answer
57 views
I have a numeric Text box in a grid column headerTemplate. At zoom of 100% in Google chrome or Edge, it looks fine. But at other zooms, there is a white line that shows up at one of the borders. Sometimes it's the top, bottom, left, right. Not consistent.
Is there a way to get rid of that line?
Code on my shared page:
<GridColumn Title="">
<HeaderTemplate>
<TelerikNumericTextBox @bind-Value="@ProjectMaster.WeekTotalHours" Enabled="false" Width="100%" Arrows="false" Min="0" Max="24"
Format="F2" Class="classHeaderTextBox"></TelerikNumericTextBox>
</HeaderTemplate>
<Columns>
The style "classHeaderTextBox" on my myAppStyles.css page:
div.classHeaderTextBox > span > input.k-input {text-align: right !important;
background-color: var(--mdc-theme-primary, #6200ee);
border-style: none !important;
color: white;
border: 0 !important;
border-color: var(--mdc-theme-primary, #6200ee) !important;
Nadezhda Tacheva
Telerik team
answered
on
26 May 2022
1 answer
1.4K+ views
Hello, a REALLY basic question here, as I don't work on the UI tier very often. I am looking for a little help getting started with Less-Based themes. I'm reading https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling.
How do I add the CSS files (kendo.common.css and kendo.[theme].css) to my Visual Studio 2019 project? I.e., where are they installed on my Windows 10 machine so I can reference them? Or, is there a URL to Telerik that I have to configure somewhere in my project?
I am also going to throw out this anticipatory question - Do you think I will be able to do things like make Blazor Grid rows shorter in height via using Less-Based (or any)Themes...or do I need to make my own CSS classes to accomplish this?
Thanks a lot!
