Questions on UI for Blazor Forum

5 answers

5.1K+ views

[Solved] checkbox column

Hi,

I am trying to do something simple but having trouble.

All I want is a grid that displays columns for a name and an IsActive property.

I tried using:

but got nowhere with it.

The basic code is show below. How can I center the checkbox in the column and make not editable unless the are in edit mode?

Also, I want the checkboxes centered in the column.

Any help would be great.

Thanks … Ed

<TelerikGrid Data=@GridData

Pageable="true" Groupable="true" Sortable="true"

OnUpdate="@UpdateHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnEdit="@EditHandler">

<GridColumns>

<GridColumn Field="Name" />

<GridColumn Field="@(nameof(AppRole.IsActive))" Title="Is Active">

<Template Context="ctx">

@{

var r = ctx as AppRole;

var chk = r.IsActive ? "checked" : "";

<input type="checkbox" checked="@chk" />

}

</Template>

</GridColumn>

<GridCommandColumn Width="300px">

<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>

<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>

<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>

<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>

</GridCommandColumn>

</GridColumns>

<GridToolBar>

<GridCommandButton Command="Add" Icon="add">Create Role</GridCommandButton>

</GridToolBar>

</TelerikGrid>

Grid

answered on 06 Sep 2023

1 answer

382 views

Stop OnKeyDown increase NumericTextBox

Hi,

I would like to stop the incrementing of my NumericTextBox when I use the keyboard arrows. I use preventDefault, but it doesn't work.

<div @onkeydown:preventDefault="true">
     <TelerikNumericTextBox Id="test" Width="95%" Decimals="2" Format="C2" @bind-Value="@Test" Arrows="false"> 
     </TelerikNumericTextBox>
</div>

Can anyone help me?

Thanks!

NumericTextBox

updated answer on 06 Sep 2023

1 answer

238 views

Show pager with page buttons and input text

In GridPagerSettings we can configure if show pages as Button OR with an input box.

In Angular version of Telerik UI il allowed to show pages as Button AND with an input box.

Who to allow this in Blazor UI?

Thanks

Grid

answered on 06 Sep 2023

0 answers

174 views

GridExcelExportColumn Position

Hello forum, does anyone know how can I get the position of GridExcelExportColumn? I need to insert a few Hidden Columns in a specific place on grid's OnAfterExport Event is this the way to go?

GridExcelExportColumn afterThisColumnIWantToInsertHiddenColumns = args.Columns.Find(x => x.Field == nameof(Model.Property));
var index = args.Columns.IndexOf(afterThisColumnIWantToInsertHiddenColumns)

args.Columns.InsertRange(index , hiddenColumns);

Grid

updated question on 05 Sep 2023

1 answer

203 views

TelerikDateInput AllowCaretMode Bug

Cannot type in date into TelerikDateInput if AllowCaretMode is true and the DateInput focus is in the whole input,

how to reproduce:

move focus to DateInput from previous input (whole dateInput is in focus)

Type in 01 into the DateInput, the caret will move to end, but no value filled.

This is the REPL page:

https://blazorrepl.telerik.com/GnYsHlcv54uXw7hd34

this is the form and how to reproduce:

DateInput

answered on 05 Sep 2023

1 answer

181 views

Will Kendo UI get support for styling using css variables like Bootstrap?

I know about the awesome ThemeBuilder but sometime all you need is to change the accent color and some other global properties.

Thats way I ask if you are going to support CSS Vars for styling.

Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)

Styling

answered on 05 Sep 2023

1 answer

301 views

[Solved] How to show Tooltip on a DropDownButtonItem

Hello. I would like to show a tooltip on a DropDownButtonItem, I tried but without success. This is the Repl link. May you kindly help me? Thank you.

Tooltip

answered on 05 Sep 2023

1 answer

261 views

Possible error in the edit grid template

Blazor Grid - Popup Editing - Telerik UI for Blazor

 <GridSettings>
        <GridPopupEditSettings MaxWidth="600px"
                               MaxHeight="300px"
                               Class="custom-popup">
        </GridPopupEditSettings>
        <GridPopupEditFormSettings Orientation="@FormOrientation.Horizontal"
                                   ButtonsLayout="FormButtonsLayout.Center"
                                   Columns="2">
        </GridPopupEditFormSettings>
    </GridSettings>

The button layout is always left no matter what you choose in

FormButtonsLayout

Grid

answered on 05 Sep 2023

0 answers

288 views

Blazor Schedular Appointment Popup Customization

Hello,
I want to update Blazor Schedular Appointment Popup Customization. I want to add new fields and remove all day event, repeat tabs.
Not required to update all the appointment details. Only possible to view that detail is also fine.
I tried to customize div tag, AppointmentDetailViewTemplate, etc. are not support in TelerikScheduler tag.
Required Popup detail changes screenshot is attached. please find attachment
Second thing is I want to add SchedulerViews for year. that is also not support in balzor code.
Anyone have any solution for Blazor Schedular Appointment Popup Customization and Yearly Scheduler view, please let me know...

Thank You

Calendar

Scheduler

asked on 05 Sep 2023

2 answers

1.3K+ views

Unable to build SASS after upgrade to kendo-theme-default 6.7.0 and Blazor UI 4.4.0

I am using Blazor UI and have upgraded to latest version 4.4.0 also upgraded the kendo-theme-default to version 6.7.0.

Using dart sass version 1.66.1 for the build.

Not using all your components so in my vendors folder I have this imports in _index.sass.

It used to work but not after the upgrade.

@import "../../node_modules/@progress/kendo-theme-default/scss/treeview";
@import "../../node_modules/@progress/kendo-theme-default/scss/tabstrip";
@import "../../node_modules/@progress/kendo-theme-default/scss/grid";
@import "../../node_modules/@progress/kendo-theme-default/scss/button";
@import "../../node_modules/@progress/kendo-theme-default/scss/common";
@import "../../node_modules/@progress/kendo-theme-default/scss/checkbox";
@import "../../node_modules/@progress/kendo-theme-default/scss/textbox";
@import "../../node_modules/@progress/kendo-theme-default/scss/loader";

in package.json

"scripts": {
    "sass": "npx sass --quiet-deps ./sass/app.scss ./wwwroot/css/app.css",
    "sass:watch": "npx sass --watch --quiet-deps ./sass/app.scss ./wwwroot/css/app.css"
  },

Output from build

> npx sass --quiet-deps ./sass/app.scss ./wwwroot/css/app.css

Error: Can't find stylesheet to import.
  ╷
1 │ @import "@progress/kendo-theme-core/scss/functions/index.import.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules\@progress\kendo-theme-default\scss\core\functions\index.import.scss 1:9  @import
  node_modules\@progress\kendo-theme-default\scss\_variables.scss 1:9                   @import
  node_modules\@progress\kendo-theme-default\scss\core\_index.scss 4:9                  @import
  node_modules\@progress\kendo-theme-default\scss\treeview\_index.scss 1:9              @import
  sass\vendors\_index.scss 2:9                                                          @import
  sass\app.scss 7:9                                                                     root stylesheet

Have been wasting another hour (:

have modified the @import path in the Telerik source files

$wcag-min-contrast-ratio: 4.5 !default;

// Variables
@import "../_variables.scss";

//@import "@progress/kendo-theme-core/scss/index.import.scss";
@import "../../../kendo-theme-core/scss/functions/index.import.scss";

// Expose
@include exports("kendo-core-styles") {
    @include kendo-core--styles();
}

And then I get this new error. Should I stop using Dart SASS?

2>EXEC: Warning  DEPRECATION: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($a, $b) or calc($a / $b)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ÔòÀ
66 Ôöé     @return ( $a / $b );
   Ôöé               ^^^^^^^
   ÔòÁ
    node_modules\@progress\kendo-theme-core\scss\functions\_math.import.scss 66:15  k-math-div()
    node_modules\@progress\kendo-theme-default\scss\_variables.scss 285:21          @import
    node_modules\@progress\kendo-theme-default\scss\core\_index.scss 4:9            @import
    node_modules\@progress\kendo-theme-default\scss\treeview\_index.scss 1:9        @import
    sass\vendors\_index.scss 4:9                                                    @import
    sass\app.scss 7:9                                                               root stylesheet

2>EXEC: Error  : Undefined mixin.
   ÔòÀ
10 Ôöé Ôöî @include exports("kendo-core-styles") {
11 Ôöé Ôöé     @include kendo-core--styles();
12 Ôöé Ôöö }
   ÔòÁ
  node_modules\@progress\kendo-theme-default\scss\core\_index.scss 10:1     @import
  node_modules\@progress\kendo-theme-default\scss\treeview\_index.scss 1:9  @import
  sass\vendors\_index.scss 4:9                                              @import
  sass\app.scss 7:9                                                         root stylesheet
2>------- Finished building project: Zeus.Client. Succeeded: False. Errors: 1. Warnings: 1
Build completed in 00:00:02.138

Styling

answered on 04 Sep 2023