Questions on UI for Blazor Forum

2 answers

245 views

Can a Telerik Card Component be hosted / nested inside of a Carousel component

I thought this was going to be an easy enough solution to host a component inside a component but it is proving a little more difficult. In my use case I have several Card components with a data source and template. Those cards sit in a Blazor Component page. I want to host those cards inside of a carousel component. I do not know what to use for the Data property or the template within the Carousel.

<TelerikCarousel Data=<CardBlazorComponentPage></CardBlazorComponentPage>
Width="400px" Height="200px">

</TelerikCarousel>

Would I just put the card logic inside the Template instead of the having its own page. If I did nest the Card code inside of the Carousels Template tag, what would I use for the Carousels Data property?

Card

Carousel

updated answer on 18 Aug 2022

1 answer

612 views

[Solved] TileLayoutItem - Override background-color using bootstrap css class

Hi,

I'm using Telerik UI for Blazor and I want to use the "alert-danger" bootstrap css class to change the color of a tile item.

I put the css class in the TileLayoutItem (@_cssClass) :

Html result :

But the color is overrided by the k-card class. I know I could create my custom css class and put !important in it, but I would just copy the same code as in alert-danger class.

I also tried to set the class in the html element I built, but the background color is not "expanding" to all the tiles :

If I put the css class in the div k-tilelayout-item-header and in the div k-tilelayout-item-body, I can have the desired result too, but I didn't find a way to set those in the code.

Is there another way I could acheive the result I want without having to create my own css class ?

Thank you.

TileLayout

answered on 18 Aug 2022

1 answer

178 views

Grid PopupEdit Gridcolumn Colspan

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.

Grid

answered on 18 Aug 2022

1 answer

310 views

[Solved] Scheduler - Multiday All-Day Rows Only with Grouping

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.

Scheduler

answered on 17 Aug 2022

1 answer

4.5K+ views

Telerik Blazor grid style

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>
}

Grid

Styling

answered on 17 Aug 2022

2 answers

209 views

Grid: Enter EditMode via DoubleClick

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 ?

Grid

answered on 16 Aug 2022

1 answer

358 views

Readonly Stepper

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,

Stepper