Products

[Yavor Dashev]

Hi TurricanDE,

When you want to apply the ‘DOES_NOT_CONTAIN’ filter you have to use it like in the following code snippet:

   GridFiltering filtering = new GridFiltering()
    {
        Enabled = true,
        Filter = new string[][]
        {
            new string[] { "FirstName", "notcontains Andrew" }      
        }
     
    };

As for the filter panel this behavior is not expected and I will add a work item for this use case.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi Giovanni Zomer,

The functionality that you need can be achieved in several ways.

One option is to create a class and to apply it to the SmartInput component you want to alter it’s width.
For example:

    <smart-number-input class="large-smart-input" placeholder="Please Enter a Number">
    </smart-number-input>
    <smart-number-input class="small-smart-input" placeholder="Please Enter a Number">
    </smart-number-input>

    <style>
        .small-smart-input {
            --smart-text-box-default-width: 150px;
        }
        .large-smart-input{
            --smart-text-box-default-width: 250px;
        }
    </style>

Or if you want to do it with JavaScript you can do it like so:

        const numberInput = document.querySelectorAll('smart-number-input');
        numberInput[1].style.width = '500px';

or

   const numberInput = document.querySelectorAll('smart-number-input');
        numberInput[1].classList.add('large-smart-input')

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Yavor Dashev]

Hi TurricanDE,

It’s my fault for the wrong behavior, because the default filters for the SmartGrid others and the ones that I shared are all the filters available for the SmartGrid.

This is how the filter conditions list should be in order to get the right results:

 List<string> stringConditions = new List<string> (){  
                "EMPTY",
                "NOT_EMPTY",
                "CONTAINS",
                "DOES_NOT_CONTAIN",
                "STARTS_WITH",
                "ENDS_WITH",
                "EQUAL",
                "NOT_EQUAL",
                "NULL",
                "NOT_NULL"
              };

Let me know if this works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi Javi Navarrete,

Thank you for the additional information!

You can use a CSS variable called --smart-scheduler-event-size to determine the height of the events cell in the timeline view and thus to determine when the ‘x more’ is displayed.

Using the mentioned CSS variable:

smart-scheduler {
    width: 100%;
    height: 100%;
    --smart-scheduler-event-size: 25px;
}

Let me know what you think about this!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi TurricanDE,

I have created another code snippet as a workaround to showcase you how to get the filter string from the Grid component

     List<string> stringConditions = new List<string> (){  
                "EMPTY",
                "NOT_EMPTY",
                "CONTAINS",
                "CONTAINS_CASE_SENSITIVE",
                "DOES_NOT_CONTAIN",
                "DOES_NOT_CONTAIN_CASE_SENSITIVE",
                "STARTS_WITH",
                "STARTS_WITH_CASE_SENSITIVE",
                "ENDS_WITH",
                "ENDS_WITH_CASE_SENSITIVE",
                "EQUAL",
                "NOT_EQUAL",
                "EQUAL_CASE_SENSITIVE",
                "NOT_EQUAL_CASE_SENSITIVE",
                "NULL",
                "NOT_NULL"
              };
    private void filterEvent(Event ev)
        {
            GridFilterEventDetail filterEventDetail = ev["Detail"];

            string logicalOperator= "";
            
            if(filterEventDetail.Columns[0]["_filterState"]["logicalOperator"] == -1 ) 
            {
                logicalOperator = "and";
            }
            else {
                logicalOperator = "or";
            }

            int firstFilterComparison = filterEventDetail.Columns[0]["_filterState"]["firstFilterComparison"];
            string firstFilterValue = filterEventDetail.Columns[0]["_filterState"]["firstFilterValue"];
            int secondFiltercomparison= filterEventDetail.Columns[0]["_filterState"]["secondFilterComparison"];
            string secondFilterValue= filterEventDetail.Columns[0]["_filterState"]["secondFilterValue"];
           
            Console.WriteLine(stringConditions[firstFilterComparison] + " " + firstFilterValue+ " "+ logicalOperator+ " " + stringConditions[secondFiltercomparison]  + " " + secondFilterValue); 
          
        }

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi Javi Navarrette,

The height of the rows depends on the height of the SmartScheduler when you use it in ‘month’ view.

Basically if you set the height of the Scheduler component it will affect the height of the rows itself.

For example like in the following CSS code snippet:

.smart-scheduler {
    width: 100%;
    height: 25%;
}

Let me know if this suits you!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi TurricanDE,

I have prepared a quick code snippet on how to achieve the functionality that you need.

    private void filterEvent(Event ev)
        {
            GridFilterEventDetail filterEventDetail = ev["Detail"];

            Console.WriteLine(filterEventDetail.Data[0].filter.filters[0]);
            Console.WriteLine(filterEventDetail.Data[0].dataField);
        }

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi TurricanDE,

This behavior is an issue and I have added a work item for this use case and we will work to fix it as soon as possible.

Thank you for showcasing this issue as this helps improve our components constantly!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi TurricanDE,

Thank you for reporting this behavior and I will add a work item for this and we will consider this for future development.

Also I would like to thank you for reporting this behavior as it helps us improve our products constantly.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi VAISHNAVI P,

You can use the formatFunction property to insert a dropdownlist component into the SmartCardView card.

I have prepared a code snippet on how to achieve this:

 columns: [
                { label: 'First Name', dataField: 'firstName', icon: 'firstName',
                    formatFunction: function (settings) {
                        settings.template = 

<div>
<div id=”${settings.value}container”>${settings.value}</div>
<smart-drop-down-list id=”${settings.value}” selected-indexes=”[0]”>
<smart-list-item value=”1″>Name 1</smart-list-item>
<smart-list-item value=”2″>Name 2</smart-list-item>
</smart-drop-down-list>
<div>`;
}
},
`
Let me know if this works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi TurricanDE,

This functionality is not supported at the time being when you have the Selection enabled for the Smart.Blaor.Grid component.

However I will add this for future development in order to suppress this behavior if needed.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi TurricanDe,

Yes, I confirm this behavior and it happens because when you add the new column the Smart.Blazor.Grid ‘refreshes’ the columns layout in order to add the new columns, although the sorting and filtering functionalities are kept, the icons are removed.

I will add a work item for this case to be evaluated/resolved.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

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

[Yavor Dashev]

Hi Matias,

There is a bit difference between using a row with the select method and when its done through user interaction and the main difference is that the user interaction set an focus attribute on the row.

Anyway you can achieve this functionality and I have created a quick code snippet on how to achieve this:

        this.grid.select(0);
        setTimeout(() => {
            let row:any = document.querySelectorAll('smart-grid-row')[0];
            row.setAttribute('focus', '')
        }, 500);

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Yavor Dashev]

Hi TurricanDE,

I have tested the Smart.Blazor.DropDownList and its functionalities regarding adding items or updating and there appears to be some issue with them.

That is why I have added a work item for this use case and we will work to fix as soon as we are able to.

I would like to thank you for reporting this use case as it helps us improve our components constantly.

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Yavor Dashev]

Hi Matias Galante,

For this purpose you can use the formatFunction property of the column like in the following code snippet to achieve the functionality that you need:

        { label: 'Time of Purchase', dataField: 'timeOfPurchase', width: 500,
            formatFunction: function(settings) {
                const formatedDate = new Smart.Utilities.DateTime(settings.value).toString('MM/dd/yyyy ');
                settings.template= <code><div> ${formatedDate}</div></code>
            }
        },

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts