Products

[Markov]

Hi,

Yes, this is possible, take a look at https://www.htmlelements.com/docs/editor-api/. The API shows that you can enable/disable many of the features of the Editor.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Smart.DateRangeInput is compatible with Blazor routing because it’s a Blazor component that supports two-way data binding. However, its state does not persist automatically when you navigate to a different route and come back, because Blazor by default re-renders the component tree when navigating.

Why state is lost?

When you navigate between pages in Blazor (using NavLink or NavigationManager.NavigateTo), the page is disposed and re-rendered, so any selected date range in SmartDateRangeInput is reset unless you store it somewhere.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can look at https://www.htmlelements.com/docs/blazor-table/. Also the Grid related topics about data binding are applicable for the Table as well. Example: https://www.htmlelements.com/docs/blazor-grid-data-bind-sql/

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Yes, it is possible by using a conditional rendering.

For example:

@page "/editor"

<h3>Smart Editor (On Demand)</h3>

@if (showEditor)
{
    <Editor Width="100%" Height="300px"></Editor>
}
else
{
    <button @onclick="LoadEditor">Load Editor</button>
}

@code {
    private bool showEditor = false;

    private void LoadEditor()
    {
        showEditor = true;
    }
}

This approach loads the Smart Editor after user interaction, but note that Smart.Blazor scripts are still globally loaded.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can try this:

<template>
  <div>
    <smart-editor v-model="editorContent"></smart-editor>
    <button @click="validateEditor">Submit</button>
    <p v-if="errorMessage" style="color:red">{{ errorMessage }}</p>
  </div>
</template>

<script>
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.editor.js";

export default {
  data() {
    return {
      editorContent: '',
      errorMessage: ''
    };
  },
  methods: {
    validateEditor() {
      //  Apply custom validation rules
      if (!this.editorContent || this.editorContent.trim() === '') {
        this.errorMessage = 'Editor content cannot be empty.';
        return;
      }

      // Example: Minimum length rule
      const textOnly = this.editorContent.replace(/<[^>]+>/g, '').trim();
      if (textOnly.length < 20) {
        this.errorMessage = 'Content must be at least 20 characters long.';
        return;
      }

      // Example: Prohibited word
      if (/forbiddenword/i.test(textOnly)) {
        this.errorMessage = 'Content contains forbidden words.';
        return;
      }

      this.errorMessage = '';
      alert('Validation passed! Submitting data...');
    
    }
  }
};
</script>

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi Linda,

Please, take a look at https://www.htmlelements.com/react/demos/scheduler/travel-schedule/. It shows how to apply customizations to the cells/events of the Scheduler.

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You just need to enable the selection of the Grid and you will be able to navigate through the keyboard. Example: https://www.htmlelements.com/react/demos/grid/overview/

Best regards.
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Smart Scheduler automatically adapts to container size. Set the smart-scheduler { width: 100%; height: 100%; } if you want it to fill the size of the container and resize with it.

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Set them in percentages. The grid’s width and height accept percentages and the sizing of the component is the same as the sizing of a DIV tag.

Regards,
Markov

[Markov]

Hi,

There should be enough space for the ripple efrect to be fully shown i.e you need to set the height and min height if necessary

Regards
Markov

[Markov]

Hi,

Sizing of the grid is with css – set the width and height properties.

Sizing of the grid columns depends on the width property of the column as well – it can be set in px or %. For your application

Regards,
Markov

[Markov]

Hi,

You can look at https://www.htmlelements.com/angular/demos/gantt/custom-popup-window/ which shows how to customize the tasks. You can use the onTaskRender function, too in order to customize the task rendering.

ganttchart.onTaskRender = function(task, segment, taskElement, segmentElement, labelElement) {
}

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Our Angular Editor has support for keyboard shortcuts. Please, look at https://www.htmlelements.com/angular/demos/editor/editor-keyboard-shortcuts/

Hope this helps.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can check this: https://www.htmlelements.com/vue/demos/gantt/task-columns/. Editing in the demo is enabled. Double-click on a task to start editing it.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

https://www.htmlelements.com/angular/demos/scheduler/overview/ – take a look at this. Double click on an event to begin editing it.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts