Подтвердить что ты не робот

Как скрыть столбцы в сетке пользовательского интерфейса Kendo

Я работаю над веб-сайтом HTML5 и JavaScript.

Возможно ли иметь скрытый столбец в сетке пользовательских интерфейсов Kendo и получить доступ к значению с помощью JQuery?

4b9b3361

Ответ 1

Использование JavaScript

См. ссылку API API Kendo.

Скрыть столбец во время определения сетки

Используя реализацию JavaScript, вы можете добавить hidden: true:

$("#gridName").kendoGrid({
  columns: [
    { hidden: true, field: "id" },
    { field: "name" }
  ],
  dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});

Скрыть столбец селектором css

$("#gridName").find("table th").eq(1).hide();

Скрыть столбец по индексу столбца

var grid = $("#gridName").data("kendoGrid");
grid.hideColumn(1);

Скрыть столбец по имени столбца

var grid = $("#gridName").data("kendoGrid");
grid.hideColumn("Name");

Скрыть столбец по ссылке на столбец

var grid = $("#gridName").data("kendoGrid");
grid.hideColumn(grid.columns[0].columns[1]);

Использование ASP.NET MVC

См. Ссылка на API MVC Kendo

Скрыть столбец во время определения сетки

@(Html.Kendo().Grid<Something>()
    .Name("GridName")
    .Columns(columns =>
    {
        columns.Bound(m => m.Id).Hidden()
        columns.Bound(m => m.Name)
    })
)

Использование PHP

См. пользовательский интерфейс Kendo для ссылки на PHP API

Скрыть столбец во время определения сетки

<?php
    $column = new \Kendo\UI\GridColumn();
    $column->hidden(true);
?>

Ответ 2

Как @Nic говорит, что существует несколько способов скрыть столбец, но я предполагаю, что вы используете методы KendoUI для его скрытия. I.e: установите столбец hidden в true или программно вызовите hideColumn.

Если это так, вы должны помнить, что у модели могут быть поля, которые не отображаются или даже не отображаются в столбцах, но они существуют, и вы все равно можете получить к ним доступ.

Если мы имеем следующее определение Grid:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    selectable: true,
    ...
    columns   :
    [
        { field: "Id", hidden: true },
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 200, title: "Last Name" }
    ]
}).data("kendoGrid");

Где я объявил столбец Id скрытым. Я все еще могу получить доступ к значению Id, перейдя к модели, используя:

// I want to access the Id for row 3
var row = $("tr:eq(3)", "#grid");
// Retrieve the item from the grid using dataItem method
var item = $("#grid").data("kendoGrid").dataItem(row);
// Show Id
alert("Id is " + item.Id); 

Runnable example

var grid = $("#grid").kendoGrid({
  dataSource: [
    { Id: 1, FirstName: "John", LastName: "Smith" },
    { Id: 2, FirstName: "Jane", LastName: "Smith" },
    { Id: 3, FirstName: "Jack", LastName: "Smith" },
    { Id: 4, FirstName: "Joseph", LastName: "Smith" },
    { Id: 5, FirstName: "Jeff", LastName: "Smith" },
  ],
    selectable: true,
    columns   :
    [
    { field: "Id", hidden: true },
    { field: "FirstName", width: 90, title: "First Name" },
    { field: "LastName", width: 200, title: "Last Name" }
  ]
}).data("kendoGrid");

$("#show").on("click", function(e) {
  var row = grid.select();
  if (row) {
    var item = grid.dataItem(row);
    alert ("The ID is :" + item.Id);
  } else { 
    alert("Select a row");
  }
});
#grid {
    width : 490px;
}
<link href="#" onclick="location.href='http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css'; return false;" rel="stylesheet" />
<link href="#" onclick="location.href='http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css'; return false;" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>

Select row and click <button id="show" class="k-button">Here</button> to show hidden Id.
<div id="grid"></div>