This is a migrated thread and some comments may be shown as answers.

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

11 Answers 127 Views
Grid
This is a migrated thread and some comments may be shown as answers.
fereshteh
Top achievements
Rank 1
Veteran
fereshteh asked on 15 Feb 2021, 02:06 PM

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>
 
 
 
 
 
 

11 Answers, 1 is accepted

Sort by
0
fereshteh
Top achievements
Rank 1
Veteran
answered on 15 Feb 2021, 02:14 PM

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

0
fereshteh
Top achievements
Rank 1
Veteran
answered on 17 Feb 2021, 06:20 AM

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

 

 
 
 
 
 
0
Anton Mironov
Telerik team
answered on 17 Feb 2021, 01:15 PM

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/.

0
fereshteh
Top achievements
Rank 1
Veteran
answered on 17 Feb 2021, 01:29 PM

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.

 
 
 
 
 
0
Anton Mironov
Telerik team
answered on 17 Feb 2021, 01:35 PM

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/.

0
fereshteh
Top achievements
Rank 1
Veteran
answered on 17 Feb 2021, 01:42 PM

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>
 
 
 
 
 
0
fereshteh
Top achievements
Rank 1
Veteran
answered on 17 Feb 2021, 02:48 PM
or do you have any suggestion ?
 
 
 
 
 
0
Accepted
Anton Mironov
Telerik team
answered on 18 Feb 2021, 08:46 AM

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/.

0
Accepted
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 19 Feb 2021, 03:27 PM

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/.

0
fereshteh
Top achievements
Rank 1
Veteran
answered on 21 Feb 2021, 06:23 AM

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

 
 
 
 
 
 
0
fereshteh
Top achievements
Rank 1
Veteran
answered on 21 Feb 2021, 06:25 AM

Hello Patrick.

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

Regards,

Fereshteh

 
 
 
 
 
Tags
Grid
Asked by
fereshteh
Top achievements
Rank 1
Veteran
Answers by
fereshteh
Top achievements
Rank 1
Veteran
Anton Mironov
Telerik team
Patrick | Technical Support Engineer, Senior
Telerik team
Share this question
or