web-dev-qa-db-fra.com

Grille Kendo-UI Définir la valeur en grille avec Javascript

Je me demande simplement comment modifier une valeur d'une ligne dans une grille en JavaScript afin qu'elle soit marquée comme "sale" dans la grille et dans la source de données sous-jacente.

par exemple. J'ai une liste de contact/client. Ils ont 3 champs FirstName/LastName/IsPrimaryContact. Il ne peut y avoir qu'un seul contact principal. Ainsi, lorsque le contact principal est défini sur true sur un enregistrement, j'ai un code JavaScript qui parcourt la source de données et définit tous les autres contacts définis comme principaux sur false.

JavaScript s'exécute correctement et les champs de données sont définis correctement, mais il existe deux problèmes: 1. La grille n'est pas mise à jour avec les modifications que j'ai apportées sous le capot à la source de données 2. Les enregistrements modifiés ne sont pas marqués comme "sales" et ne sont donc pas synchronisés lorsque j'appelle un Datasource.sync ()

Je peux résoudre le deuxième problème en définissant manuellement le champ sale dans l'enregistrement, mais cela ne semble pas correct. Il me semble que je devrais mettre à jour le champ au niveau de la grille pour qu'il s'en occupe à la fois dans l'interface utilisateur et dans la source de données.

Des idées sur la façon de s'y prendre?

Merci

javascriptdata-bindingkendo-uikendo-grid
21
Matt

Fondamentalement, lorsque vous souhaitez mettre à jour un enregistrement, vous devez utiliser la méthode set du modèle. Par exemple, pour mettre à jour le premier enregistrement de la source de données, vous devez le mettre à jour comme suit:

var firstItem = $('#GridName').data().kendoGrid.dataSource.data()[0];
firstItem.set('FirstName','The updated Name');

Ce qui précède devrait automatiquement marquer le drapeau comme étant sale et avertir la grille des modifications. La grille va donc automatiquement rafraîchir .

De même, si vous souhaitez récupérer directement l’objet lié à une ligne spécifique, vous pouvez utiliser la méthode dataItem de la grille.

37
Petur Subev

Je le fais d'une manière très simple et efficace:

 var employee = employeeDataSource.get(employeeId);
     employee.dirty = true;  // set it as dirty
     employeeDataSource.sync();  //Tell the DataSource object to save changes

C'est une vieille question, mais espérons que cela pourra aider n'importe qui avec le même problème.

4
EdsonF

Après la réponse de Pechka ci-dessus, j’ai ajouté du code supplémentaire pour marquer la cellule modifiée avec le drapeau sale.

Voici mon code de rasoir nécessaire sur la colonne pour que cela fonctionne, j'ai ajouté un nom de classe afin qu'il puisse être utilisé dans le sélecteur jQuery ultérieurement.

columns.Bound(r => r.RoomRate).HtmlAttributes(new { @class = "grid-allotment-roomrate" });

Voici mon code Jquery pour mettre à jour la cellule et marquer la cellule modifiée après une récupération réussie des données du côté serveur.

var dataSource = $("#grid-allotments").data("kendoGrid").dataSource;
var data = dataSource.data();
$.each(data, function (index, rowItem) {
    var checkbox = $("#checkbox_" + rowItem.RoomTypeId + "_" + rowItem.Date.getTime());
    if (checkbox != null && checkbox.is(':checked')) {
        $.ajax({
            url: "RackRate/GetRackRateForRoomTypeOn",
            type: "POST",
            data: { roomTypeId: rowItem.RoomTypeId, date: rowItem.Date.toUTCString() },
            success: function (result) {
                data[index].set('RoomRate', result);
                $('tr[data-uid="' + rowItem.uid + '"] .grid-allotment-roomrate').prepend('<span class="k-dirty"></span>');
            }
        });
    }
});

Vous trouverez ci-dessous la ligne de code responsable de la mise en surbrillance du drapeau sale.

$('tr[data-uid="' + rowItem.uid + '"] .grid-allotment-roomrate').prepend('<span class="k-dirty"></span>');
4
JeeShen Lee

Je l'utilise de cette façon - au moins avec les cases à cocher. Je vais définir la colonne avec le bouton Modifier pour ressembler à ceci:

columns.Command(command => {command.Edit().HtmlAttributes(new { id = "btnEdit_" + "${Id}" }); }).Width(100).Hidden(true);

De plus, cliquer dans la première colonne (j'ai une image avec un lien hypertexte) utilise une fonction onclick pour cliquer par programme sur le bouton Modifier, puis sur la case à cocher, puis sur le bouton Mettre à jour. Probablement plus "old school", mais j'aime bien savoir que cela suit l'ordre que je ferais si je le mettais à jour, moi-même.

Je passe l'objet ("this"), afin que je puisse obtenir la ligne et la case à cocher quand il apparaît, le nouveau statut étant 0 ou 1 (j'ai du code qui l'utilise, pas vraiment nécessaire pour cette démo, cependant, alors je laisse cette partie de ma fonction pour plus de simplicité) et l’ID de cet élément:

columns.Bound(p => p.IsActive).Title("Active").Width(100).ClientTemplate("# if (IsActive == true ) {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '0', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_1.png /></a> #} else {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '1', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_0.png /></a> #}#");

function changeCheckbox(obj, status, id) {
    var parentTr = obj.parentNode.parentNode;
    $('[id="btnEdit_' + id + '"]').click();

    parentTr.childNodes[5].childNodes[0].setAttribute("id", "btnUpdate_" + id); // my Update button is in the 6th column over
    parentTr.childNodes[0].childNodes[0].setAttribute("id", "chkbox_" + id);
    $('[id=chkbox_' + id + ']').click().trigger("change");
    $('[id=chkbox_' + id + ']').blur();

    var btnUpdate = $('[id="btnUpdate_' + id + '"]');
    $('[id="btnUpdate_' + id + '"]').click();

}

Le code ci-dessus suppose, bien sûr, que la case à cocher est dans la première colonne. Sinon, ajustez le premier childNodes[0] de la ligne setAttribute de la chkbox à la colonne dans laquelle elle se trouve, moins un, car elle commence à compter à partir de zéro.

2
vapcguy

Pour moi cela fonctionne (pas besoin d'instancier la grille):

   select: function(e) {
           console.log("select");
           var item = e.item;
           var text = item.text();
           var index = item.index();
           console.log(item);
           console.log(text);
           console.log(index);
           var dataItem = this.dataItem(index);
           console.log(dataItem);
           // SET RETURNED VALUES FOR MODEL
           options.model.set("actionName.id", dataItem.id);
         }
2
redrom

set("fieldname",value) actualisera automatiquement la grille. Il existe un moyen simple de mettre à jour à la fois la valeur de l'interface utilisateur et la valeur du champ sans qu'il soit nécessaire d'actualiser. il suffit de faire, par exemple:

    data.FieldName = "Whatevervalue";
    $(currentrow.children()[getColumnIndex("FieldName")]).text("Whatevervalue");

    function getColumnIndex(columnName) {
    var index;
    var columns = $("#grid").data("kendoGrid").columns;
    for (var i = 0; i < columns.length; i++) {
        if (columns[i].field == columnName) {
            index = i;
            return index;
        }
    }
}

    var data = $grid.data("kendoGrid")._data;
    var currentrow = $grid.data("kendoGrid").tbody.find("tr[data-uid='" +      data[i].uid + "']");

J'espère que cela t'aides

0
user3034838