Title attributes on Grid generated filter textbox and filter dropdowns

6 posts, 0 answers
  1. Ravi
    Ravi avatar
    10 posts
    Member since:
    Jun 2020

    Posted 30 Sep 2020 Link to this post

    Hi, 

     

    I'm using Kendo React Grids with filter in my application which generates column filter textbox and filter options dropdown. The requirement for me (part of ADA compliance) is any filed that user may execute an action should have a associated text with it when hovered on it. A HTML title attribute on column filter textbox and filter options dropdown would resolve this issue. 

     

    The Grid did not generate title attribute on filter textbox and filter options dropdown but the clear filter textbox button has title attribute.

     

    How do I resolve this issue. Any help is much appreciated.

  2. Nikolay
    Admin
    Nikolay avatar
    104 posts

    Posted 01 Oct 2020 Link to this post

    Hi,

    Currently, the title attribute of the filter cells cannot be configured through Grid props.

    Here is how you can set the title attributes by accessing the DOM elements - https://stackblitz.com/edit/react-jm5ykt?file=app/main.jsx.

    I hope this helps.

    Regards,
    Nikolay
    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/.

  3. Gaurav
    Gaurav avatar
    4 posts
    Member since:
    Dec 2018

    Posted 13 Oct 2020 in reply to Nikolay Link to this post

    Hello ,

     

    we tried to use the example you provided but  the element attribute is always coming as undefined and is inaccessible. please see the screenshot attached in debug mode. There is no element attribute defined for the grid object so we cannot go any further on it.

    can you please take a look?

  4. Nikolay
    Admin
    Nikolay avatar
    104 posts

    Posted 15 Oct 2020 Link to this post

    Hi,

    It is actually not public. Here is another example - https://stackblitz.com/edit/react-jm5ykt-kunqtf?file=app/main.jsx. I accessed the grid element using a class name.

    componentDidMount() {
        const gridElement = document.querySelector(".grid-class");
    	...
    }
    
    render() {
        return (
    		<Grid
    			className="grid-class"
    			...
    		</Grid>
    	);
    }

    Regards,
    Nikolay
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

  5. Gaurav
    Gaurav avatar
    4 posts
    Member since:
    Dec 2018

    Posted 15 Oct 2020 in reply to Nikolay Link to this post

    Hi Nikolay,

    Thanks for your response but there is still an issue. For some reason the attributes are not getting written for the filter text boxes in the grid.  I tried couple of ways and I can see that filter textbox can be accessed but it do not generate the title attribute.

    #The way you suggested - 

     const gridElement = document.querySelector(".grid-class");
        if (gridElement !== null) {
          const filterRow = gridElement.querySelector("tr.k-filter-row");
          if(filterRow !== null){
            filterRow.cells
            .item(0)        
            .querySelector(".k-textbox")
            .setAttribute("title", "Procedure Number Filter");
            filterRow.cells
            .item(0)
            .querySelector(".k-textbox")
            .setAttribute("className", "xxxxxxxxxxxx");        
          }      
        }

    #Another way 

     let x = document.getElementsByClassName("grid-class").item(0).getElementsByClassName("k-filter-row").item(0).getElementsByClassName("k-textbox").item(0);
        x.setAttribute("title", "Procedure Number Filter");

    please find the screenshot attached of the final html rendered.

    Thanks

    Gaurav Joshi

  6. Nikolay
    Admin
    Nikolay avatar
    104 posts

    Posted 16 Oct 2020 Link to this post

    Hi Gaurav,

    As the attribute is applied in the standard example, please share a runnanble example where the attribute is not applied and we will check it.

    Regards,
    Nikolay
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top