Получить идентификатор строки из сетки кендо

#kendo-ui #kendo-grid

#kendo-пользовательский интерфейс #kendo-grid

Вопрос:

Я пытаюсь получить ‘ObjectId’ из выбранной строки в сетке kendo, но в настоящее время это не работает.

 <div class="clearfix">
        @(Html.Kendo().Grid<M20_AEK.Models.ContractSettlement>()
                    .Name("ContractSettlementGrid")
                    .Editable(editable => editable.Mode(GridEditMode.PopUp))
                    .Pageable(pageable => pageable.Input(true).Numeric(false))
                    .Scrollable()
                    .Selectable()
                    .Sortable()
                    .Filterable()
                    .ColumnMenu()
                    .Groupable()
                    .Selectable()
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.ObjectID).Title("ID").Hidden();
                        columns.Bound(c => c.OPERATOR_OBJECTID).Title("Operator").Width("100px");
                        columns.Bound(c => c.Year).Title("Year").Width("100px");
                        columns.Bound(c => c.Month).Title("Month").Width("100px");
                        columns.Bound(c => c.SETTLEMENT_OBJECTID).Title("Settlement").Width("100px");
                        columns.Bound(c => c.TECHNOLOGY_OBJECTID).Title("Technology").Width("100px");
                        columns.Bound(c => c.UPLOAD_SPEED_CLASS_OBJECTID).Title("Upload").Width("100px");
                        columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_OBJECTID).Title("Download").Width("100px");
                        columns.Bound(c => c.ObjectID)
                            .Title("Edit")
                            .Filterable(false)
                            .ClientTemplate("<a onclick="showDetails(this,'#= ObjectID#')" href='\#'>Edit</a>");
                        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.ObjectID))
                    .Read(read => read.Action("LoadSettlementContracts_Read", "SettlementContract"))
                    .Update(update => update.Action("Save", "SettlementContract"))
                    .Destroy(update => update.Action("Delete", "SettlementContract"))
                    )
        )
    </div>

function showDetails(ObjectID) {
       alert(ObjectID);
    }
  

Я также попробовал что-то подобное, так как нашел несколько возможных решений на форумах.

 function showDetails() {
        var grid = $("#ContractSettlementGrid").data("kendoGrid");
        var selectedRow = grid.select();
        var index = selectedRow();
        console.log(index);
        //this does not work
    }
  

Есть какие-нибудь идеи о том, как это сделать?

Ответ №1:

Вы близки к тому, чтобы это сработало!

Вам не нужно использовать шаблон клиента для вашей кнопки (если только нет другого кода, которым вы не поделились). Вы можете изменить его на:

 columns.Command(command => command.Custom("Edit").Click("showDetails"));
  

И создаем функцию showDetails:

 <script type="text/javascript">
    function showDetails(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        //do whatever you need with the dataItem here
        console.log(dataItem.ObjectID);
    }
</script>
  

Дополнительная информация здесь:https://demos .telerik.com/aspnet-core/grid/custom-command

Комментарии:

1. большое спасибо, это помогло. Я стажируюсь сразу после колледжа в компании, и они используют платную лицензию Telerik / Kendo, и это вызывает больше проблем, чем на самом деле помогает, спасибо вам ооочень большое!

2. Рад, что у вас все получилось. Хотя для ознакомления с ними может потребоваться некоторое время, элементы управления Telerik / Kendo (как и другие подобные библиотеки) могут в конечном итоге сэкономить сотни, если не тысячи часов усилий, когда вам нужен этот тип управления данными или функциональность редактора

Ответ №2:

просто используйте что-то подобное в своей сетке:

столбцы.Команда (command => команда.Пользовательский («Удалить»).Нажмите(«DeleteProduct»));

а затем в вашем jquery:

 var grid = $("#Grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
var Id =  selectedItem.Id;