Questions on UI for Blazor Forum

1 answer

321 views

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

191 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

117 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

156 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

131 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

230 views

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

219 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

234 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.1K+ 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

0 answers

149 views

Blazor UI Troubleshooting and Tips

I'm diving into the realm of Telerik UI for Blazor, and I've hit a bit of a roadblock that I'm hoping someone can help me with. I'm currently working with the NumericTextBox component, and I'm trying to achieve browser-level auto complete while Virginia DMV online services for vehicle registration DMVNOW Portal maintaining custom formatting for units (like "in", "kg", "cm", etc.).However, I've noticed that when the browser's auto complete history includes the formatting string, it messes up the value handling within the component. This causes the value to disappear before the onchange event triggers, since it's technically a string.Has anyone else encountered this situation?

General Discussions

updated question on 04 Sep 2023