or
1 answer
190 views
Hey,
I am trying to format the popup edit modal that is displayed when I set the EditMode="GridEditMode.Popup". I see that I can define the number of columns used by setting the GridSetting.GridPopupEditFormSettings.Columns property, but is there a way to span a GridColumn accross multiple columns?
As an example, i am attempting to make my edit form look like this where some GridColumns span multiple columns in the popup.
Dimo
Telerik team
answered
on
18 Aug 2022
1 answer
324 views
Hello,
I am looking to show create a multiday scheduler view (with resource grouping) that only displays the all day events.
Without grouping, adding the css rule .k-scheduler-group:not(.k-scheduler-all-day-row){ display: none; } works to remove the non-all day rows, but once grouping is introduced I haven't been able to find a way to make this work.
Please advise - a demo photo has been attached.
Nadezhda Tacheva
Telerik team
answered
on
17 Aug 2022
1 answer
4.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>
}2 answers
239 views
I am kind of new to Telerik and Blazor. I try to read all the documentation, but I still can not figure out how to solve this:
I only want to enter the InCell-Edit-Mode when I am doubleclicking on the specific cell.
Is that possible ?
Dimo
Telerik team
answered
on
16 Aug 2022
1 answer
384 views
Is there a way to put the stepper control in a read-only mode so the user can't click on the steps and trigger events? I can disable it, but then it grays out the control.
Thanks in advance,
2 answers
833 views
Is it possible to hide the selected values on top of the control and continue showing the hint?? as it doesn't look so good on narrow control
Nadezhda Tacheva
Telerik team
answered
on
12 Aug 2022
1 answer
158 views
Hello,
I have a CalDav-Server as data storage for caldav-clients. One client frontend is the Telerik Scheduler.
I have created an event series with end date like this:
Nadezhda Tacheva
Telerik team
answered
on
12 Aug 2022
0 answers
380 views
Long story short:
The SelectedItemsChanged-Event is not firing when the Grid is in EditMode like "GridEditMode.Incell".
When the EditMode is "GridEditMode.None" it works just fine.
Is this a bug or a feature ?
1 answer
229 views
My app has a long list of possible fields to filter on. The dropdown box for the fields exceed the height of the page so a scrollbar would be nice.
Can you point out the class styling that needs to be updated? I just added arbitrary number of fields to the Filter demo.
<TelerikFilter Value="@Value" ValueChanged="@OnValueChanged">
<FilterFields>
<FilterField Name="@nameof(OrderDetailDto.OrderId)" Type="typeof(int)" Label="Id" />
<FilterField Name="@nameof(OrderDetailDto.Quantity)" Type="typeof(short)" />
<FilterField Name="@nameof(OrderDetailDto.OrderFreight)" Type="@typeof(decimal)" Label="Freight" />
<FilterField Name="@nameof(OrderDetailDto.OrderShipCountry)" Type="typeof(string)" Label="Country" />
<FilterField Name="@nameof(OrderDetailDto.OrderShipName)" Type="typeof(string)" Label="Ship to" />
<FilterField Name="@nameof(OrderDetailDto.OrderShipAddress)" Type="typeof(string)" Label="Ship Address" />
@for (int i = 0; i < 25; i++)
{
<FilterField Name="@i.ToString()" Type = "typeof(string)" Label="@i.ToString()" />
}
</FilterFields>
</TelerikFilter>
Dimo
Telerik team
updated answer
on
11 Aug 2022
1 answer
297 views
Is there a way to have the column header template be optional? Depending upon some values in my data, I might need to use a header template for a specific column, otherwise, I would like the have the default behavior.
I tried placing an if statement inside the <GridColumn/> element like this:
<GridColumn Field= "" FieldType="" >
@if (_useHeaderTemplate)
{
<HeaderTemplate></HeaderTemplate>
}
</GridColumn>
This results in a compile error of "Unrecognized child content inside component ...."
I then tried
<GridColumn Field= "" FieldType="" >
<HeaderTemplate>
@if (_useHeaderTemplate)
{
<div>Custom Header</div>
}
</HeaderTemplate>
</GridColumn>
This results in no text being rendered for the column header.
I'm trying to avoid (a) duplicating the <GridColumn/> configuration for both the true and false evaluations of the if statement; (b) I don't want to take over the complete rendering and management of the grid column header. I still want the framework to handle that.
Thanks
-marc
Dimo
Telerik team
answered
on
11 Aug 2022
