Questions on UI for Blazor Forum

0 answers

141 views

It is possible to use Blazor Gantt Component as readonly component?

Hello!

Wonna to disable some Gantt diagram features:

1. Timeline item selection and deleting from diagram (by clicking on 'X').

2. Editing timeline item by double click

3. Moving timeline item on the timeline

Gantt

asked on 19 Aug 2022

1 answer

158 views

Gradient color in chart series

I was able to make a gradient color Chart Area when RenderingMode is SVG. But it's not working on RenderingMode.Canvas.

What do I need to change?

What I use is:

<ChartSeries Color="url(#svg-gradient)"

where:

Charts

answered on 19 Aug 2022

1 answer

151 views

Donut chart padding, how to reduce

I'm creating a donut chart using Telerik for Blazor.

As you can see from the attached picture, there is a lot of space around the chart, i would like to reduce it to save space, but can't find a way.

Many thanks,

Luigi

Charts

answered on 19 Aug 2022

2 answers

214 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

568 views

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

149 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

270 views

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.2K+ 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

175 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

320 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

answered on 15 Aug 2022