Comment créer une extension rapide à une fenêtre de l'interface utilisateur du Keno avec les changements d'icône

Question

Je n'arrive pas à comprendre pourquoi le kendo ne fonctionnera pas. J'essaye de créer un bouton fait sur commande sur la fenêtre de kendo pour augmenter la fenêtre à 75% et puis revenir à 34%.

VIEW

@(Html.Kendo().Window() 
    .Name("stockLineWindow").HtmlAttributes(new { @class = "windows" }) 
    .Title("Stock") 
    .Draggable() 
    .Resizable(resizable => resizable.Enabled(true)) 
    .Visible(false) 
    .Scrollable(false) 
    .Actions(actions => actions.Minimize().Maximize().Custom("arrow-chevron-right")) 
) 

JAVASCRIPT

var stkWrapper = $("#stockLineWindow").data("kendoWindow"); 

var expand = stkWrapper.wrapper.find(".k-i-arrow-chevron-right"); 
expand.click(function (e) { 
      stkWrapper.setOptions({ 
       width: "75%" 
      }); 
      $(this).removeClass("k-i-arrow-chevron-right"); 
      $(this).addClass("k-i-arrow-chevron-left"); 
     e.preventDefault(); 
    }); 


var contract = stkWrapper.wrapper.find(".k-i-arrow-chevron-left"); 
expand.click(function (e) { 
    stkWrapper.setOptions({ 
     width: "34%" 
    }); 
    $(this).removeClass("k-i-arrow-chevron-left"); 
    $(this).addClass("k-i-arrow-chevron-right"); 
    e.preventDefault(); 
}); 

Deux choses se passent ici:

1. lorsque la fenêtre ouvre, je suis en mesure d'exécuter EXPAND. Mais le DOM se réinitialise après un setOption et continue d'afficher '>' au lieu de changer de classe.

2. Après son expansion, il escamote même jamais quand je change le javascript à ceci:

   var stkWrapper = $("#stockLineWindow").data("kendoWindow"); 
   
   var expand = stkWrapper.wrapper.find(".k-i-arrow-chevron-right"); 
   expand.click(function (e) { 
       if (stkWrapper.options.width <= "75%") { 
        stkWrapper.setOptions({ 
        width: "75%" 
       }); 
       e.preventDefault(); 
   } else { 
       stkWrapper.setOptions({ 
        width: "34%" 
       }); 
   
   } 
   e.preventDefault(); 
   }); 
   

Il se produit une fois et ne se reproduise plus. Sauf si je recharge la fenêtre. Tout ce que je veux faire est un simple bouton d'expansion et de contrat sur la fenêtre Kendo. Je ne suis pas sûr de comment cela est fait.

Answer 1

Essayez ce code:

$(wnd.wrapper).on("click", ".expand-button", function() { 
    let $btn = $(this), 
     wnd = $("#wnd").data("kendoWindow"), 
     width = "31%"; 

    if ($btn.hasClass("k-i-arrow-chevron-right")) { 
     width = "75%"; 
    } 

    wnd.setOptions({ 
     width: width 
    }); 

    if (width == "75%") { 
     $(wnd.wrapper).find(".expand-button") 
      .removeClass("k-i-arrow-chevron-right") 
      .addClass("k-i-arrow-chevron-left"); 
    } 
}); 

Demo

Une chose intéressante à propos de la méthode setOptions() est qu'il recréée toute la fenêtre, y compris le bouton. Donc, après l'exécution de setOptions, la référence de la variable $btn est cassée, vous devez trouver à nouveau le bouton. C'est pourquoi j'ai mis un if en changeant l'icône seulement si la nouvelle largeur est 75%, sinon l'icône sera créée comme son état initial à nouveau.