web-dev-qa-db-fra.com

comment obtenir la valeur de la ligne sélectionnée dans KendoUI

J'ai une grille kendoUI.

                @(Html.Kendo().Grid<EntityVM>()
                    .Name("EntitesGrid")
                                .HtmlAttributes(new { style = "height:750px;width:100%;scrollbar-face-color: #eff7fc;" })
                    .Columns(columns =>
                    {
                        columns.Bound(e => e.Id).Hidden().IncludeInMenu(false);
                        columns.Bound(e => e.EntityVersionId).Hidden().IncludeInMenu(false);
                        columns.Bound(e => e.Name).Width("70%").Title("Entity Name");
                        columns.Bound(e => e.EIN).Width("30%");
                    })
        .ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext k-grid-add' id='addEntity'><span class='k-icon k-add'></span>Entity</a>" +
             "<a class='k-button k-button-icontext' id='editEntity'><span class='k-icon k-edit'></span>Edit</a>"))
                    .DataSource(dataSource => dataSource
                    .Ajax().ServerOperation(false)
                    .Model(model => model.Id(e => e.Id))
                    .Read(read => read.Action("GetEntities", "Entity", new { projectId = Request.QueryString[DataKeyNameConstants.ProjectId] })))
                    .Sortable()
                    .Scrollable()
                    .Filterable()
                    .Resizable(resize => resize.Columns(true))
                    .Reorderable(reorder => reorder.Columns(true))
                    .ColumnMenu()
                    .Selectable(s => s.Mode(GridSelectionMode.Multiple))
                    .Events(events => events.Change("entSelChange"))
            )

maintenant, je dois obtenir la valeur de EntityVersionId à partir de la ligne sélectionnée. mais je ne sais pas comment le faire.

voici ma fonction javascript

$("#editEntity").click(function () {

    var entityGrid = $("#EntitesGrid").data("kendoGrid");

    // what should I do from here
});

UPDATE: ajoute du code pour boucler toutes les lignes. 

function loadPreviousEntityVersion() {

    alert("sdfsdfsdf");
    var entityGrid = $("#EntitesGrid").data("kendoGrid");
    var data = entityGrid.dataSource.data();

    for(var i = 0; i<data.length; i++) {
        var currentDataItem = data[i];
        alert(dataItem.EntityVersionId);

    }
}
gridkendo-ui
44
qinking126

Une solution consiste à utiliser les méthodes select() et dataItem() de la grille.

Dans le cas d'une sélection unique, select() renverra une seule ligne pouvant être passée à dataItem()

var entityGrid = $("#EntitesGrid").data("kendoGrid");
var selectedItem = entityGrid.dataItem(entityGrid.select());
// selectedItem has EntityVersionId and the rest of your model

Pour une sélection de plusieurs lignes, select() renverra un tableau de lignes. Vous pouvez ensuite parcourir le tableau et les lignes individuelles peuvent être transmises à la fonction dataItem() de la grille.

var entityGrid = $("#EntitesGrid").data("kendoGrid");
var rows = entityGrid.select();
rows.each(function(index, row) {
  var selectedItem = entityGrid.dataItem(row);
  // selectedItem has EntityVersionId and the rest of your model
});
102
johlrich

Il y a une meilleure façon. Je l'utilise dans les pages où j'utilise les directives et les grilles de kendo angularJS ...

change: function (e) {
   var selectedDataItem = e != null ? e.sender.dataItem(e.sender.select()) : null;
}
11
David Slavík

Je pense qu'il faut vérifier si une ligne est sélectionnée ou non? Le code ci-dessous le vérifierait:

var entityGrid = $("#EntitesGrid").data("kendoGrid");
            var selectedItem = entityGrid.dataItem(entityGrid.select());
            if (selectedItem != undefined)
                alert("The Row Is SELECTED");
            else
                alert("NO Row Is SELECTED")
3
sosha

Si vous souhaitez sélectionner un élément particulier, utilisez le code ci-dessous.

var gridRowData = $("<your grid name>").data("kendoGrid");
var selectedItem = gridRowData.dataItem(gridRowData.select());
var quote = selectedItem["<column name>"];
0
ABB