Kendo-l'INTERFACE utilisateur de la grille de la Valeur Définie dans la grille avec Javascript

Je me demande comment vous allez sur la modification de la valeur d'une ligne dans une grille en JavaScript alors qu'il est marqué comme "sale" dans la grille et la source de données sous-jacente.

par exemple j'ai une liste de Contact/Client. Ils ont 3 champs Prénom/Nom/IsPrimaryContact. Il ne peut y avoir 1 contact principal, de sorte que lorsque le premier contact est définie sur true, un record, j'ai un code JavaScript qui parcourt la source de données et définit d'autres contacts définir comme principale à false.

Le JavaScript de tous les feux de l'amende et les champs de données sont correctement réglé, mais il y a deux problèmes:
1. La grille n'est pas mis à jour avec les modifications que je fais sous le capot de la source de données
2. La modification du dossier ne sont pas marqués comme "sale", et donc pas synchronisés en arrière quand j'appelle une source de données.sync()

Je peux résoudre le deuxième problème en réglant manuellement le champ sale sur le dossier, mais cela ne semble pas juste. Il se sent comme je doit être mise à jour le champ au niveau de grille, pour qu'il prenne soin de lui à la fois l'INTERFACE utilisateur et la source de données.

Des idées comment aller à ce sujet?

Grâce

InformationsquelleAutor Matt | 2012-11-10

38

Fondamentalement, lorsque vous voulez mettre à jour un enregistrement, vous devez utiliser le ensemble méthode du modèle. Par exemple pour mettre à jour le premier enregistrement de la source de données, vous devez mettre à jour comme ceci:
```
var firstItem = $('#GridName').data().kendoGrid.dataSource.data()[0];
firstItem.set('FirstName','The updated Name');
```
Ci-dessus devrait marquer automatiquement le drapeau comme sale et il devra en aviser la Grille qu'il y a des changements, de sorte que la Grille sera automatiquement actualiser.

Aussi, si vous voulez récupérer l'objet d'une ligne spécifique directement, vous pouvez utiliser les dataItem méthode de la Grille.
- merci @Pechka, ça fonctionne! mais de toute façon ma grille de ne pas montrer le drapeau sale. Une idée? Essayé. de la grille.refresh() toujours le même...
- Indicateur de changement est géré par la Grille elle-même pas par le biais de la source de données, de sorte qu'il est pris en charge uniquement lorsque vous mettez à jour la Grille à la main. Malheureusement, il n'y a pas de travail pour permettre à cette sale marquage dans le cas actuel.
- j'ai trouvé une solution sur la façon de marquer le drapeau sale manuellement. Posté la réponse ci-dessous 😉
- c'est en montrant "n'est pas une fonction"?
- Pour éviter l'actualisation de la Grille , mettre à jour la valeur du modèle directement, sans l'aide de la méthode par exemple firstItem.FirstName = "Le Nom de" À la fin quand vous avez fini de modifier tous les modèles ou les champs que vous souhaitez, vous pouvez appeler $('#GridName').de données('kendoGrid').refresh()
- Si c'était une case à cocher, faire firstItem.set('value','true'); ne fonctionne pas.
InformationsquelleAutor Petur Subev

Je le fais dans un moyen 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ère que ça peut aider quelqu'un avec le même problème.

InformationsquelleAutor EdsonF

Suivantes Pechka réponse ci-dessus, j'ai ajouté un peu de code supplémentaire pour marquer la cellule modifiée avec drapeau sale.

Voici mon rasoir code nécessaire sur la colonne pour que cela fonctionne, j'ai ajouté un nom de classe de sorte qu'il peut être utilisé dans le sélecteur jquery plus tard.

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

Voici mon code Jquery pour mettre à jour la cellule et la marque de la cellule modifiée après le succès de la récupération de données à partir du serveur de côté.

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>');
            }
        });
    }
});

Ci-dessous est la ligne de code qui est responsable de l'indicateur de changement en évidence.

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

La fin de plus, mais j'ai découvert que (en raison de la grille de lecture causés par l'appel de set ()), si vous voulez faire cela pour de multiples éléments de la grille, vous devez définir l'indicateur de changement dans un autre each() l'appel après le set() appelle, ou le dernier élément montre la sale à plat.

InformationsquelleAutor JeeShen Lee

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

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

Et avoir accès à l'endroit en cliquant sur la première colonne (j'ai une image avec un lien hypertexte) utilise une fonction onclick par programme, cliquez sur le bouton Modifier, cliquez sur la case à cocher, puis cliquez sur le bouton mettre à Jour. Probablement plus "old school", mais j'aime bien savoir c'est suivant l'ordre que je ferais si je ont été mise à jour, moi-même.

Je passe dans l'objet ("ce"), afin que je puisse passer la ligne et de la case à cocher lorsqu'il apparaît, le nouveau statut de 0 ou de 1 (j'ai un code qui l'utilise, pas vraiment nécessaire pour cette démo, si, si je pars de cette partie de ma fonction pour des raisons de simplicité), et l'ID de l'é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();

}

Code ci-dessus suppose, bien sûr, la case à cocher est dans la première colonne. Sinon, ajuster la première childNodes[0] sur que chkbox setAttribute ligne de la colonne, il est assis dans, moins un, car il commence à compter à partir de zéro.

InformationsquelleAutor vapcguy

Pour moi 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);
         }

InformationsquelleAutor redrom

set("fieldname",value) s'actualise automatiquement la grille, il y a une façon simple de juste de mettre à jour l'INTERFACE utilisateur de la valeur et de la valeur du champ sans besoin de rafraîchissement. 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 + "']");

Espère que cette aide

InformationsquelleAutor user3034838

Vous devez vous connecter pour publier un commentaire.