Products

[ivanpeevski]

Hello Giovanni,

Thank you for reporting this behavior.

I have created a work item regarding this and we will work on fixing it as soon as possible!

If you face any other issues, please do not hesitate to contact us again.

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

[ivanpeevski]

Hi anna,

Thank you for the additional information! The CSS issue is caused by the max-width property of .smart-kanban-task. Instead, I suggest setting left and right padding to the column-content element and you can achieve the same visual effect:

.smart-kanban-column-content {
background-color: rgb(240, 240, 240);
border-radius: 0.5em;
padding: 0 4%;
}

.smart-kanban-task {
border-radius: 0.2em;
margin: auto;
}

Regarding storing the checklist, you can have a look at the way we store comments in our tutorial demo. The idea with checklist is exactly the same. You need to create a new table Checks, with the check properties – text, completed, and an additional taskId field. Then everytime you execute a SELECT Query for Tasks, you need to execute an additional SELECT Query for Checks where taskId matches with the id of the task you are selecting. The array you receive from the second query, you need to set as a value to the task.checklist property. The same goes for Insert/Delete Queries. When you execute an UPDATE Query, you first need to delete the checks and then insert the new ones.
Have a look at an example with checklist here: demo with checklist

If you have any other questions, please do not hesitate to contact us again.
Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

 

[ivanpeevski]

Hi Javier,

To customize the color options, you need to set the palette property to “custom”. Then set the paletteColors property to the array of color you wish to display. You can have a look at the demo here: codepen demo

If you have any other questions, please do not hesitate to contact us again!
Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

 

[ivanpeevski]

Hello anna,

Regarding the first question, I was not able to reproduce this problem.
Could you please check if the issue appears in this demo: https://github-r8z6a4.stackblitz.io
If it does, please share your web browser version.

Regarding the second question, can you please clarify what you mean by “storing”?
Our Kanban component supports exporting the current state of the kanban in an external file – pdf, html, json, xlsx etc. (You can see demo here)
If you mean getting or storing the current state(for example which tasks belong to which columns), you can use the “getState()” method, have a look at the demo here(by clicking on the “Log State” button, you will see the current tasks in the console)

If you have any other questions, please do not hesitate to contact us again!
Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi anna,

The reason the task doesn’t appear is beacause it is set to a column that doesn’t exist.

As you can see in your code, the Kanban Columns are backLog, onGoing, completed and blocked. But in the INSERT query, the task’s status is set to “done”.
If you change “done” to any of the columns, for example “completed”, you will see that the task will appear.

If you have any other questions, please do not hesitate to contact us again!
Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi anna tang,

To hide the blue button, you need to apply this CSS rule in your application:
<div>
<div>.smart-kanban-add-new-button[add-new-button] {</div>
<div>        display: none !important;</div>
<div>}</div>
</div>
<div></div>
<div>You can have a look at the example here: https://stackblitz.com/edit/github-zhzwd1?file=src%2Findex.html</div&gt;
<div></div>
<div>If you have any other questions, please do not hesitate to contact us again!
Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/</div>
<div></div>
<div></div>

[ivanpeevski]

Hello Matias,

Unfortunately, this functionality is not natively supported yet, however it is possible to capture and create modified copies of the uploaded files:
https://stackblitz.com/edit/github-k6uejf?file=src%2Fapp%2Fapp.component.ts

That said, modifying the files on the servers side, if possible, is a much cleaner solution, as Javascript doesn’t support directly modifying uploaded files.
You can also use our SetHeaders() Method to send any additional data together with the files.

If you have any other questions, please do not hesitate to contact us again!
Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hello Abilio,

Please have a look at the demo here: Codepen demo

Every time you drag a task, the console will log the new index of the task within its parent column (0 is the first index).

If you have any other questions, please do not hesitate to contact us again.
Best regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hello Ronak Patel,

This issue has been fixed in the latest version of Smart UI, please update your package and try again.
In the demo here, you see that endEdit is called even when the user deletes the cell value

If you don’t want to allow users to remove the cell value, you may consider using Cells Editing Validation
You can have a look at the demo here: Angular – Cell Validation Demo

If you have any other questions, please do not hesitate to contact us again.
Best regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi Giovanni,

You can easily expand a treegroup using the expanded property or by using the expandItem Method (have a look at the API here)

In the demo below, you can see an example of a programmatically expanded treegroup (“Attractions”) and a group expanded by the expanded property(“Dining”): demo of expanded

If you have any other questions, please do not hesitate to contact us again!
Best regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hello TurricanDE,

In this case, you only need to modify the line inside the foreach loop, by setting the Item Label inside a Label property:

<ListItem Value=”@(myListBoxItem.Value)” Readonly=”@(myListBoxItem.Readonly)” Label=”@(myListBoxItem.Label)”></ListItem>

 

Please, let me know if this works for you!
If you have any other questions, please do not hesitate to contact us again.

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

[ivanpeevski]

Hello TurricanDE,

Thank you for providing the additional code. Unfortunately, I was not able to reproduce the issue and your example is working on my end. Mosy likely the issue doesn’t come from a specific component, but from the setup of the project. I suggest creating a clean application to see if you can replicate this behavior according to the way you set up the components. Also please make sure that you are using the latest version of Smart.Blazor and that you are not using outdated version of Microsoft’s frameworks. Smart.Blazor has the following dependancies:

<ul class="list-unstyled dependency-group">
 	<li><a href="https://www.nuget.org/packages/Microsoft.AspNetCore.Components/">Microsoft.AspNetCore.Components</a> (>= 3.1.2)</li>
 	<li><a href="https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Web/">Microsoft.AspNetCore.Components.Web</a> (>= 3.1.2)</li>
 	<li><a href="https://www.nuget.org/packages/Microsoft.CSharp/">Microsoft.CSharp</a> (>= 4.7.0)</li>
 	<li><a href="https://www.nuget.org/packages/Newtonsoft.Json/">Newtonsoft.Json</a> (>= 12.0.3)</li>
</ul>

If the problem continues, you can also share the relevant part of the project, so that we can help you find the issue.
Best regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

• This reply was modified 2 years, 11 months ago by admin.
• This reply was modified 2 years, 11 months ago by admin.

[ivanpeevski]

Hello TurricanDE,

Based on the information you provided, I created this demo for setting the selected values of a ListBox, embedded in a Window component:
<div>
<div><Window  IsOpened=”true” Label=”Test” Modal=”true” OnClose=”OnClosed” HeaderButtons=”@headerButtons”></div>
<div>    <ListBox DataSource=”@myData” SelectedValues=”@selectedValues”></ListBox></div>
<div></Window></div>
<div>@code {</div>
<div>    Window window;</div>
<div>    private string[] myData = new string[]{“1″,”2″,”3”};</div>
<div>    private string[] selectedValues = new string[]{“2”, “3”};</div>
<div>    private string[] headerButtons = new string[]{“pin”, “maximize”, “close”};</div>
<div>    private bool opened = true;</div>
<div></div>
<div>    private void OnClosed() {</div>
<div>        Console.WriteLine(“Closed!”);</div>
<div>    }</div>
<div>}</div>
</div>
 

Unfortunately, I was not able to repoduce your issue, I suggest checking if you provide the right type of values to the properties.
If the issue continues, please do not hesitate to contact us again by providing us with the full code of the page so we can help you find the exact solution!
Best regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi TurricanDE,

Unfortunately, I was not able to reproduce your issue. This is an example of an Editable ListBox:
<div>
<div><ListBox Editable></div>
<div>    <ListItem Label=”Item 1″></ListItem></div>
<div>    <ListItem Label=”Item 2″></ListItem></div>
<div>    <ListItem Label=”Item 3″></ListItem></div>
<div></ListBox></div>
</div>
If the demo above doesn’t work for you, please provide us with a sample code of your page and the version of your internet browser.

If you have any other questions, please do not hesitate to contact us again.
Best regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi turricanDE,

The readonly property is available to the ListItem component, so to create a readonly item, you can use the following code:

<ListBox SelectionMode=ListSelectionMode.One>
<ListItem Value=”1″ Readonly=”true”>Item 1</ListItem>
<ListItem Value=”2″>Item 2</ListItem>
<ListItem Value=”3″>Item 3</ListItem>
</ListBox>
Additionally, if you have data inside an array, which you want to bind to the ListBox(as in your example), you can foreach the array inside the component:
<div>
<div><ListBox SelectionMode=ListSelectionMode.One>
<div>        @foreach (var myListBoxItem in MyItems){</div>
<div>            <ListItem Value=”@(myListBoxItem.Value)” Readonly=”@(myListBoxItem.Readonly)”>@(myListBoxItem.Label)</ListItem></div>
<div>        }</div>
<div>    </ListBox></div>
<div>@code{</div>
<div>    public class MyListBoxItem</div>
<div>    {</div>
<div>        public string Value { get; set; }</div>
<div>        public string Label { get; set; }</div>
<div>        public bool Readonly { get; set; } // reserved keyword</div>
<div>    }</div>
<div>    public List<MyListBoxItem> MyItems { get; set; } = new List<MyListBoxItem>()</div>
<div>    {</div>
<div>        new MyListBoxItem { Label = “Item 1”, Value = “1”,  Readonly = true},</div>
<div>        new MyListBoxItem { Label = “Item 2”, Value = “2”, Readonly = false},</div>
<div>        new MyListBoxItem { Label = “Item 3”, Value = “3”,  Readonly = false},</div>
<div>    };</div>
<div>}</div>
</div>
I hope this will be of help!
If you have any other questions, please do not hesitate to contact us again.

Best regards,
Ivan Peevski

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

[Author]

Posts