Products

[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, 5 months ago by admin.
• This reply was modified 2 years, 5 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/

[ivanpeevski]

Hi vaishnavip,

Thank you for the clarification. If you do not want to allow users to see or edit a field, you can simply not pass it in the columns property. The data will still be available inside the dataSource property.
For example, please have a look at this demo. Here we pass an id property to the dataSource, but it is not displayed inside the cards. We can still get the id value using the dataSource property.

However, if you need to show the card field, but you don’t want the users to edit it, then please see the DisableDataField() function in this demo.
In the example above, the code disables all dataFields passed in the disabledFields Array, but the data is still displayed to the users.

Please, let me know if any of these solutions will work for you!

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

[ivanpeevski]

Hi vaishnavip,

You can enable editing of the cardview fields by setting the editable property of the component.
If editable is set to false, then the fields will be readonly.

You can use the following code, for example, to get the current value of the editable property:

const cardview = document.querySelector(‘smart-card-view’);
let editable = cardview.editable;

Please have a look at our demo page to see an example of editable cards.
You can also read more about the editable property in our documentation:

https://www.htmlelements.com/docs/cardview-api/#toc-editable_boolean

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