Products

[ivanpeevski]

Hi Oliver,

 

We share the same property descriptions for the JavaScript and Blazor API versions, since they are generally identical. The “handled” parameter is one of the few exceptions which are missing for the Blazor version.

We will consider updating the Blazor API to reflect that.

 

Best Regards,
Ivan Peevski

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

[ivanpeevski]

Hi Oliver,

 

Blazor runs asynchronously from JavaScript, so the handled property is not available.

If you wish to change the default behavior of the Delete command, for example, you can change its “Command” name to a custom name. For example:

CommandColumnDelete = new GridCommand() { Visible = true, Command=”customDeleteCommand” },

 

Best Regards,
Ivan Peevski

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

[ivanpeevski]

Hi Oliver,

Here is how you can use the OnCommand property to capture the command and the clicked row:

@using Newtonsoft.Json.Linq;

<Grid DataSource=”@Clients” Editing=”@editing” OnCommand=”OnCommand”>….</Grid>

@code{
….
private void OnCommand(object obj)
{
dynamic commandObject = JObject.Parse(obj.ToString());
string commandName = (commandObject[“name”]).ToObject();
int commandRowId = (commandObject[“id”]).ToObject();
}

}

Best Regards,
Ivan Peevski

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

• This reply was modified 7 months, 1 week ago by ivanpeevski.
• This reply was modified 7 months, 1 week ago by ivanpeevski.

[ivanpeevski]

Hi Oliver,

 

The columns with AllowHide set to “false” will not be displayed in the Column Chooser.

 

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

[ivanpeevski]

Hi innosoft,

 

The jszip.min.js file is included in the NPM package in the “export” folder. You can include the script in the following way:

<script src=”/node_modules/smart-webcomponents/export/jszip.min.js”></script>

 

Best Regards,
Ivan Peevski

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

[ivanpeevski]

Hi innosoft,

You should set the “editor.settings.formatString” property.

Here is an example – codepen

 

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

[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 9 months, 1 week 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/

[Author]

Posts