Comment générer un bouton personnalisé qui soumet des données de cellule à partir de son uid dans Kendo UI Grid MVC?


Kenchi

Je suis nouveau dans l'interface utilisateur de Kendo pour ASP.NET MVC et je voulais créer un bouton d'action personnalisé sur une grille et récupérer des données lorsque ce bouton est cliqué en fonction de chaque ligne unique.

Voici le code de ma grille

@(Html.Kendo()
      .Grid<PromotionVM>()
      .Name("PromotionsGrid")
      .Columns(columns =>
      {
          columns.Bound(c => c.Merchant);
          columns.Bound(c => c.Item);
          columns.Bound(c => c.Image);
          columns.Bound(c => c.DiscountRate);
          columns.Command(command => command.Custom("Approve").Click("ApprovePromotion"))
              .Title("Action");
      })
      .DataSource(source =>
      {
          source.Ajax()
              .Model(model => model.Id(field => field.Id))
              .Read(read => read.Action("GetPromotions", "Promotion"));
      })
      )

Voici le PromotionVM:

    [Required]
    public Guid Id { get; set; }
    public string Merchant { get; set; }
    public string Branch { get; set; }
    public string Item { get; set; }
    public string Image { get; set; }
    public decimal DiscountRate { get; set; }

et voici la fonction javascript que je veux appeler pour faire une requête ajax lorsque je suis en mesure d'obtenir la valeur de la colonne "Id" de la grille en cliquant sur le bouton.

<script type="text/javascript">
function ApprovePromotion(e) {

}
</script>

Notez que la fonction est vide car je ne sais pas encore quoi faire ici.

S'il vous plait aidez si vous le pouvez.

Merci d'avance.

Steve Greene

Question assez ouverte, mais à titre d'exemple:

<script type="text/javascript">
function ApprovePromotion(e) {
    e.preventDefault();
    // grab data for row
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

    // make ajax call
    $.ajax({
        url: '@Url.Action("MyAction", "MyController")',
        type: "POST",
        data: {
            // pass data to controller parameters
            ItemID: dataItem.Id,
            OtherField: dataItem.OtherField
        },
        success: function (response) {
            // On success do something. I'll switch to index
            window.location.href = '@Url.Action("Index", "MyController")';
        }
    });

}
</script>

Articles connexes