Need More Info
Last Updated: 12 Jul 2022 14:54 by Thor Ludvig
Hien
Created on: 18 Nov 2020 18:00
Category: UI for Blazor
Type: Feature Request
28
Add Id parameter on all Blazor components

I would like to be able to set the Id on any Blazor component for automated testing purposes.

---

ADMIN EDIT

If you need something different than automated testing selectors, please add your use case in the comments.

For automated testing, you can cascade selectors through a parent element (e.g., a div or span) that has the desired attributes (be that id, class, some data-* attribute, etc.). Adding ID parameters to Blazor components can easily make them brittle because they can be repeated and included in arbitrary hierarchy easily - that's the core concept of a razor component - so such IDs need to be unique, which defeats the predictability you will need for testing.

If you are interested in testing with Selenium, you may find useful this request: https://feedback.telerik.com/blazor/1513117-translators-for-selenium-testing-for-the-telerik-ui-for-blazor-components. If so, Vote for it and Follow it so we can know there is interest, and so you can get status updates.

You can also Follow a separate enhancement for the Grid Command buttons here : https://feedback.telerik.com/blazor/1463164-id-attribute-on-buttons-telerikbuttons-gridcommandbuttons-etc

---

11 comments
Thor Ludvig
Posted on: 12 Jul 2022 14:54

My case is that I'm building a form with lots of components dynamically, which also may include several tabstrips.

All of the components may have conditions that are used to change other components (enable/disable, hide/show, set focus, change colours ++).  The tabstrip and tabstriptab  are the only components that I have seen, that I'm not able to to set the conditions for by using key/id in the node tree.

The conditions use id/guids to decide which component should trigger changes, and which components are affected by the changes.  To use classes and/or names would change the concept and maybe be more uncertain than using id/guids?

Shortened example of the loop for checking conditions for displaying a component:

            bool valBool = false;
            if(node["value"] == "true")
            { 
                node["value"] = "false";
                valBool = false;
            }
            else
        {
                 node["value"] = "true";
                valBool = true;
            }

 

            foreach (var condition in SchemaConditions)
            {           
                node = FindNodeByGuid(sourceParent, condition.ElementGuid.ToString()); 
                if(node != null)
                { 
                    foreach (var attr in node.Attributes.Where(a => !a.Key.StartsWith("_")))
                    {
                        if(attr.Key == "display")
                        {
                            if(condition.Action.ToLower() == "show" && valBool == bool.Parse(condition.CheckValue)) 
                            {
                                node[attr.Key] = "inline";
                            }
                            else if (condition.Action.ToLower() == "hide" && valBool == bool.Parse(condition.CheckValue))
                            {
                                node[attr.Key] = "none";
                            }                      
                        }
                    }
                    this.SelectedNode = node;
                    if(EntryChangedCallback != null)
                    { 
                        await EntryChangedCallback(node["key"], node["value"]);
                    }
                }

            }

I see improvements in TabStrip and TabStripTab by including the same possibility of setting Id's as for your other components.

Christian
Posted on: 05 Jan 2022 07:27

Hi,

This feature would allow me to call JS functions on specific Grids or TreeLists on the page, e.g. for preventing the "cropped UI" when using the AutoFit feature (this happens when the Grid width is larger than the auto-fitted columns would be).

Otherwise I would have to wrap all Grid/TreeLists into an own div with id (I cannot use classes for differentiation because they are dynamically generated).

Best Regards,

Christian

ADMIN
Marin Bratanov
Posted on: 09 Jan 2021 09:33

Shawn, let's continue this in your private ticket and stop spamming everyone else in this thread. As for the rows - you can through the OnRowRendrer event.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Shawn
Posted on: 08 Jan 2021 20:42

Can I add a custom id or css class to this line in the grid

 

<tr role="row" class="k-master-row    " data-render-row-index="1"  

Shawn
Posted on: 08 Jan 2021 19:21
I have tried a dozen different ways and none of them work, is there another option for a tooltip?
ADMIN
Marin Bratanov
Posted on: 08 Jan 2021 16:39

Hi Shawn,

That would be some issue with the tooltip. If it's a telerik tooltip, I advise you open a support ticket where we can have a look.

In the meantime, try moving the tooltip after the grid so it initializes after the grid when its DOM is already present.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Shawn
Posted on: 08 Jan 2021 15:46

So I added a class like below and this doesn't work either

 

<HCAToolTip selector=".test .k-master-row"></HCAToolTip>

<TelerikGridData="@uiData" Height="550px" FilterMode="@GridFilterMode.FilterMenu" Class="test"

Sortable="@Sortable" Pageable="@ShowPager" PageSize="@PageSize" Groupable="@ShowGroup" Resizable="@Resizable" Reorderable="@Reorderable" SelectionMode="@GridSelectionMode.Single" OnRowClick="OnRowDoubleClickHandler">

<GridColumns>

ADMIN
Marin Bratanov
Posted on: 08 Jan 2021 15:40

Hello Shawn,

You should add a Class to the grids you want tooltips on and cascade the tooltip selector through that class. Or, you could add an identifier (id, class, something else) to another parent element above the grid to make the same distinction.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Shawn
Posted on: 08 Jan 2021 15:38

I have multiple grids on one page and I have a tool tip that I want to apply to one grid but not another,

So I created a Tool Tip Control I can use everywhere, so I don't have to keep adding code to each page I can just drag and drop the tool tip to the necessary grid, example below.

<HCAToolTip selector=".k-master-row"></HCAToolTip>

This works fine, however because the css class above is on other grids the tool tip shows on them as well, I only want it on 1 or maybe 2 of the grids, out of 5 of them on the same page 

ADMIN
Marin Bratanov
Posted on: 24 Nov 2020 10:45

Hi Hien,

To clarify a couple of things:

We understand the value of such a parameter for automated testing. For the time being, a selector should go through a parent element.

For other use cases (runtime business logic of the app), you should use MVVM (parameters and view-model fields) or component references, but not JS to alter the components.

If you have a different use case than these two, please provide some more details so we can get a better understanding of the situation.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Hien
Posted on: 24 Nov 2020 08:57

Dear Admin

We are using a lot of components which are unique. For us it would be much easier to reference them by ID instead via cascading selectors.

Best regards,

Hien