Products

[ivanpeevski]

Hi innosoft,

 

You can use the calendar’s “dayNameFormat” to set in what format to display the week names.

Here is an example with full name – codepen

And an example with only one character – codepen

 

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

[ivanpeevski]

Hi innosoft,

 

It is enough to set the locale of the date input to ‘ko’, as the component uses the Intl.DateTimeFormat JS object to correctly translate all date titles.

Here is an example – codepen

 

<span class=”im”>Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/</span>

[ivanpeevski]

Hi Brian,

 

Blazor is not designed for adding new components dynamically, so any solution will be limited in some way.

One solution, if you are adding only a fixed amount of tabs, is to add the tabs from the beginning, but make them invincible with CSS. For example:

<style>
div[aria-label=”Tab 3″]{
display: @tabDisplayStyle !important;
}
</style>

<Tabs @ref=”tabs”>
<TabItem Label=”Tab 1″>
<ProgressBar Value=”80″></ProgressBar>
</TabItem>
<TabItem Label=”Tab 2″><ProgressBar Value=”50″></ProgressBar></TabItem>
<TabItem Label=”Tab 3″ ><ProgressBar Value=”20″></ProgressBar></TabItem>
</Tabs>

<Button OnClick=”AddTab”>Add Tab</Button>

@code{
Tabs tabs;

string tabDisplayStyle = “none”;
private void AddTab()
{
tabDisplayStyle = “inline-block”;
}
}

 

If you need to add a variable number of tabs, the alternative is to use JSInterop and programatically move the elements with JavaScript after the tab is created.

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi ceddy,

 

Her is an example how to use the property:

{
label: ‘PRD & User-Stories’,
dateStart: ‘2021-01-10’,
dateEnd: ‘2021-03-10’,
class: ‘product-team’,
type: ‘task’,
onRender: function(task, segment, taskElement, segmentElement, labelWrapper){
let element = document.querySelector(‘#my-element’);
labelElemnt.appendChild(element);
}
},

Since it requires programatically moving the element, it may not be supported by some specific components.

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi ceddy,

 

The “resizeEnd” event contains information about the new values for the dateEnd and dataStart in the event.detail object.

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/</span>

• This reply was modified 1 year, 4 months ago by ivanpeevski.

[ivanpeevski]

Hi Catdoken,

 

Thanks for the interest in our products!

At the moment, we do not have built-in properties to achieve these, however they can also be implemented programmatically with some additional code:

1. You can overwrite the default behavior of the  editor by handling the ‘keydown’ event and calling event.preventDefault()
2. The text-transform: uppercase CSS rule will automatically transform all characters to uppercase. However the change is only visual, so when you receive the Editor value you should also add a toUpperCase call to change its value

Here is an example with both functionalities implemented: codepen

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/</span>

[ivanpeevski]

Hi ceddy,

 

You can use the “formatFunction” task property to format / change the label of the task. If you need more advanced customization, you can use the “onRender” property, which allows you to modify the element itself.

You can see the descriptions of the two in more detail in the API page under “dataSource” – https://www.htmlelements.com/docs/gantt-api/

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi ceddy,

 

If I undertstoond you correctly, you can hide the project item with the following CSS. This will still keep the project in the tree view on the left:

.smart-timeline-task.project{
display:none;
}

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi ceddy,

 

You can prevent the connection start by calling event.preventDefault() when the event is fired. For example:

ganttChart.addEventListener(‘connectionStart’, function(event){
event.preventDefault();
})

 

You can hide the connection points with:

.smart-task-connection-point{
display:none
}

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi ceddy,

The CSS variable you should use is –smart-gantt-chart-task-default-height

Here is an example – codepen

Best Regards,
Ivan Peevski

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

[ivanpeevski]

Hi salasidis,

 

Can you please share a code example of this? Calling chart.update() after setting the new data should be enough to fully update the chart.

Here is an exampel: https://www.htmlelements.com/demos/chart/live-updates/

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi Brian,

confirm is a JavaScript function, so it is not possible to invoke it directly from Blazor.

If you want to validate the changes, you can use ValidationRules as in the guide here – Grid Editing

If you need to keep track of the changes and update a remote database, you can have a look at the Grid Server Side CRUD guide

If you need to use onRowUpdate for other purposes, you should implement the function through JSInterop. The Dynamic Template guide covers the basics of how to achieve this.

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi,

I just tested the onInit property in the example here – codepen

And it is working correctly – It is fired when the editing begins for the first time.

If you require a callback, which is fired every time editing begins, you should use “onRender”

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

 

[ivanpeevski]

Hi Andy,

 

Please see the demo here  – https://www.htmlelements.com/demos/table/server-side-crud/

It shows you how to capture the click of a button inside a row. It can be achieved with event.target.closest()

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

 

[ivanpeevski]

Hi Oliver,

With the current release, clicking on a checkbox will fire both events.

We have also resolved the issues related with the space bar in our internal build and it will be part of our next release.

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts