Questions on UI for Blazor Forum

1 answer

212 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

229 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

144 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

0 answers

411 views

Change grid page size does not refresh data

I use a grid with PageSizes settings and OnRead event to load data.

When i change the selected page size combobox value, the grid does not reload. It update only the pager, but grid does not update the records.

You can reproduce with this code:

https://blazorrepl.telerik.com/mHkjEoOV17OVmZ9u30

How to solve?

Thanks

Grid

asked on 04 Sep 2023

1 answer

99 views

Trouble Building SASS for Blazor Telerik Checkbox with Name Property

I've been working on a Blazor project and using Telerik components. when I try to set the Name property for the Checkbox. It seems that whenever I include the Name property in the Checkbox, the SASS compilation process fails, throwing an error I'm not familiar with. Has anyone else faced a similar problem

General Discussions

answered on 04 Sep 2023

1 answer

523 views

SvgIcon not in the current context

Hi there,

I knew I must have missed something about this error. I'm trying to using SvgIcon in the grid button but it complained about ""The name 'SvgIcon' does not exist in the current context". Please advise.

Here is the demo i'm following:

https://demos.telerik.com/blazor-ui/grid/editing-inline

Thanks,

Bob

Grid

answered on 02 Sep 2023

1 answer

148 views

Blazor TelerikCheckBox Name property

The blazor TelerikCheckBox do not implement the Name property as TelerikTextBox do instead.

I need to use it in a native html form to post login values to an action for cookie authentication.

Is there any way to add the name attribute?

Checkbox

answered on 01 Sep 2023

1 answer

869 views

Refreshing Form Model Data Or Form Component

Hello,

I am currently working on an application that includes a form which exposes certain business logic dependent on if the page the form is contained in was reached alongside an included route parameter or not; if so, the page queries for information that will populate the 'Model' attribute of the Form tag with pre-existing information for updating. If the page is reached without a route parameter, then the form simply displays as blank for the user to fill out a new form.

In regards to the Telerik library, I had seen in the documentation for the Telerik Form tag that you can receive a reference for that particular component, which would then expose a "Refresh()" that, presumably, can be used for refreshing the Model data handled by the Form, in case of any changes. I had also assumed that this might work similarly to the TelerikGrid reference 'Rebind()' method in principle, where the data context for the component can be "recontextualized' whenever a change to such data is made.

My question then is this; how does one go about calling this method after properly exposing the Form component's reference, and will this particular method work similarly to how the TelerikGrid 'Rebind()' method functions in that it can refresh the data context of the component (i.e, refresh the object that is used and, subsequently, the appropriate FormItems)? Is it possible that this is the wrong approach to accomplishing refreshing data on the Form component, or should I look into a different solution altogether?

I have provided a very simple pseudo-code to help assist with explaining my desired question. Thank you in advance for the assistance, I have very much enjoyed using the Telerik library as a whole.

Form

answered on 31 Aug 2023

1 answer

309 views

Pushing Telerik pkg to Azure Artifacts

Sorry if this is not the right forum...I'm trying to push the UI for Blazor nuget package to Azure Artifacts for the build pipeline. I can't use a service to connect directly to Nuget.Telerik. I already have the package added to my project and its working fine. I installed it from the .msi

I'm following this article: https://www.telerik.com/blogs/azure-devops-and-telerik-nuget-packages and I downloaded nuget.exe v.6.7.0. When I run the command specified:

C:\Users\<my profile>\source\repos>nuget.exe push -Source "Telerik" -ApiKey az "C:\Users\<my profile>\Documents\TelerikPackages\Telerik.UI.for.Blazor.4.4.0.nupkg"

and I get an error "ERROR: This version of nuget.exe does not support updating packages to package source 'Telerik'." I 'Googled' this error and got nothing! <ugh>

Any suggestions really be appreciated!

General Discussions

answered on 30 Aug 2023