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 158 Views

Grid

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

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>

<base href="https://demos.telerik.com/kendo-ui/grid/from-table?_ga=2.238242880.1708610364.1613376924-1807411570.1604909996">

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default-v2.min.css" />

<script src="https://kendo.cdn.telerik.com/2021.1.119/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

<table id="grid">

<colgroup>

<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

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:

https://dojo.telerik.com/@anton.mironov/IRoZETIr

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

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

Accepted

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

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

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

11 Answers, 1 is accepted