data-menu is not working in creating grid from html table

12 posts, 2 answers
  1. fereshteh
    fereshteh avatar
    17 posts
    Member since:
    Jul 2020

    Posted 15 Feb Link to this post

    Hello

    i have a grid which is created from a html table

    inside grid configuration i added "columnMenu: true" to have option to show and hide columns . 

    what i want is to have an option to remove one column from column menu . there is an option for grids which are created from dataSource. i could found its documentation here . simple you just pass menu:false for desired column and it will not be inside column menu.
    in the documentation of creating grid from html ( here ) i could found data-menu attribute for th tag but when i use . it is not working.

    demo

    is there any one who cam help me?

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
     
         
         
         
         
     
    </head>
    <body>
        <div id="example">
        <table id="grid">
            <colgroup>
                <col />
                <col />
                <col style="width:110px" />
                <col style="width:120px" />
                <col style="width:130px" />
            </colgroup>
            <thead>
                <tr>
                    <th data-field="make" data-menu="false">Car Make</th>
                    <th data-field="model" data-menu="false">Car Model</th>
                    <th data-field="year">Year</th>
                    <th data-field="category">Category</th>
                    <th data-field="airconditioner">Air Conditioner</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Volvo</td>
                    <td>S60</td>
                    <td>2010</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>Audi</td>
                    <td>A4</td>
                    <td>2002</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td>BMW</td>
                    <td>535d</td>
                    <td>2006</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                </tr>
            </tbody>
        </table>
     
        <script>
            $(document).ready(function() {
                $("#grid").kendoGrid({
                    height: 550,
                    sortable: true,
                    columnMenu: true,
                });
            });
        </script>
    </div>
     
         
     
    </body>
    </html>
     
  2. fereshteh
    fereshteh avatar
    17 posts
    Member since:
    Jul 2020

    Posted 15 Feb Link to this post

    firs link about colomn menu is not working properly 

    its link is : https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.menu?_ga=2.29780991.1708610364.1613376924-1807411570.1604909996

  3. fereshteh
    fereshteh avatar
    17 posts
    Member since:
    Jul 2020

    Posted 17 Feb Link to this post

    I really need help. there is no one who can help me ? :(

     

  4. Anton Mironov
    Admin
    Anton Mironov avatar
    210 posts

    Posted 17 Feb Link to this post

    Hello Fereshteh,

    Thank you for the code snippet and details provided.

    I tried to achieve the desired behavior. aIn this case, I would recommend setting the columns properties for the incoming columns. Here is an example:

                  columns: [
                    "make",
                    { field: "model", title: "model", width: "130px", menu: false },
                    { field: "year", title: "year", width: "130px", menu: false },
                    { field: "category", width: "130px", menu: false },
                    { field: "airconditioner", width: "130px", menu: false }
                  ]
    The complete implementation could be found in the following dojo example:

    Give the approach above a try and let me know if this is the expected behavior or further assistance is needed.


    Kind Regards,
    Anton Mironov
    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/.

  5. fereshteh
    fereshteh avatar
    17 posts
    Member since:
    Jul 2020

    Posted 17 Feb in reply to Anton Mironov Link to this post

    hello Anton
    thank you for your help but I can not pass columns of table inside configuration. in my project I get an html table from a client and make kendo grid for them. I don't know what columns client will have.
    i just can work with the attributes that client passed inside th tag.

  6. Anton Mironov
    Admin
    Anton Mironov avatar
    210 posts

    Posted 17 Feb Link to this post

    Hi Fereshteh,

    Thank you for the provided additional details.

    In this case, I am not sure how do you understand which column should be hideable/unhideable. Do you receive this information additionally?

     

    Best Regards,
    Anton Mironov
    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/.

  7. fereshteh
    fereshteh avatar
    17 posts
    Member since:
    Jul 2020

    Posted 17 Feb in reply to Anton Mironov Link to this post

    as I said previously , I want to use data-menu attribute on <th> tag which is passed by the user inside its table. Like this:

     

    <table id="grid">
            <colgroup>
                <col />
                <col />
                <col style="width:110px" />
                <col style="width:120px" />
                <col style="width:130px" />
            </colgroup>
            <thead>
                <tr>
                    <th data-field="make" data-menu="false">Car Make</th>
                    <th data-field="model">Car Model</th>
                    <th data-field="year">Year</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Volvo</td>
                    <td>S60</td>
                    <td>2010</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                </tr>
            </tbody>
        </table>
  8. fereshteh
    fereshteh avatar
    17 posts
    Member since:
    Jul 2020

    Posted 17 Feb in reply to Anton Mironov Link to this post

    or do you have any suggestion ?
  9. Answer
    Anton Mironov
    Admin
    Anton Mironov avatar
    210 posts

    Posted 18 Feb Link to this post

    Hi Fereshteh,

    Thank you for the additional details. Now I can clearly see your point.

    As this is not a built-in functionality, a custom logic is needed in order to achieve the desired behavior. In this case, I would recommend using a Regular Expression to extract the needed information. Get the needed data between the "th" tags - the name of the field(<th data-field="(.*)") and eventually the data menu property(data-menu="(.*)"). Use the information to create an array of objects in the document.ready scope(before the initialization of the Grid) and use this array for the columns property of the Grid.

    I hope this information helps.

     

    Greetings,
    Anton Mironov
    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/.

  10. Answer
    Patrick
    Admin
    Patrick avatar
    257 posts

    Posted 19 Feb Link to this post

    Hi Fereshteh,

    As mentioned in this forum post, this behavior has been confirmed as a bug.  Please take a look at the bug report in our Kendo UI Feedback Portal and GitHub Repo for more information and updates.

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

  11. fereshteh
    fereshteh avatar
    17 posts
    Member since:
    Jul 2020

    Posted 21 Feb in reply to Anton Mironov Link to this post

    hello Anton 

    thank you for your answer but Patrick's solution is much better for our project.

    but still I say thank you so much for taking time on this post and helping me.

    Regard,

    Fereshteh

     
  12. fereshteh
    fereshteh avatar
    17 posts
    Member since:
    Jul 2020

    Posted 21 Feb in reply to Patrick Link to this post

    Hello Patrick.

    thank you so much for your answer and your solution it helped me a lot.

    Regards,

    Fereshteh

Back to Top