Apprenez à implémenter facilement la gestion des événements sur les vues personnalisées dans Kendo UI Builder ou Kendo UI et à traiter les événements de clic.
Dans cet article, nous allons apprendre à implémenter la gestion des événements sur les vues personnalisées. Nous allons augmenter la vue personnalisée de hello world à partir du premier article de blog . Nous traiterons les événements click sur n'importe quelle partie du conteneur salutation hello world (a
Comme dans le premier blog, nous allons examiner les trois éléments principaux que nous devons programmer:
- Le fichier de définition d'affichage personnalisé
- Les éléments au moment de la conception
- Les éléments de l'exécution
Pour continuer, téléchargez le fichier .zip des exemples de modèles à partir de GitHub ou clonez le dépôt ; ouvrez le dossier custom-hello-world-v2 et suivez les mêmes étapes décrites dans ce post pour installer ce modèle dans votre application cible
Custom View Definition File
Nous spécifions au concepteur que nous voulons un gestionnaire d'événements unique pour le panneau des propriétés de la vue. Cela permet à l'utilisateur de spécifier le nom de la fonction qui sera appelée lors du clic.
Voici l'extrait pertinent du fichier custom-hello-world-v2.json:
01. "événements" : {
02. [19659015] "type" : "objet"
03. "titre" : "Evénement" [19659013]
04. "description" : "Spécifie tous les événements disponibles pour le hello world div"
05. "ordre" : 3,
06. "propriétés" : {
07. "onClick" : {
08. "type" : "chaîne de caractères"
09. "titre" : "Cliqué"
10. "description" : "Cet événement res quand bonjour le monde clique sur "
11. " par défaut ": " onClick "
12. "ordre" : 1
13. }
14. }
15. }
Et voici comment il rend dans le concepteur:
2. (e) {
3. alert (`Dans par défaut implémentation pour
4. - Vous devriez remplacer cette fonction dans la classe de contrôleur public. »)
5. }
6.
Et voici ce que vous devriez voir en cliquant sur la div:
![Durée d'exécution "title =" Durée d'exécution "data-openoriginalimageonclick =" true "/> </a> [19659003] Maintenant, si vous avez cloné le dépôt (ou obtenu un .zip), vous devez créer une application contenant une vue personnalisée hello world 2. Une fois l'application générée, vous pouvez créer la fonction d'événement on click dans le fichier public js (pour AngularJS) ou angulaire composant le fichier ts (pour Angular 5). </p>
<p> L'emplacement du fichier dépend des noms de module et de vue Par exemple, dans mon application de test, j'ai un module appelé custom-views et la vue contenant le La vue personnalisée de hello world 2 s'appelle hw2 Etant donné ces noms, l'emplacement et le nom des fichiers sont: </p>
<ul>
<li> AngularJS: app src modules custom-views hw-2 controller.public.js </li>
<li> Angulaire 5: app src app modules vues-personnalisées hw-2 hw-2.view.component.ts </li>
</ul>
<p> En conclusion, comme vous l'avez vu dans cet article, définir une vue personnalisée wi La gestion des événements ne pose pas de difficultés particulières. </p>
<p> Dans le prochain article (restez à l'écoute), nous verrons comment nous pouvons augmenter les modèles utilisés au moment du design et au moment de l'exécution. </p>
</p></div>
</pre>
<p><div class=](https://i0.wp.com/blog.arcoptimizer.com/wp-content/uploads/2018/04/1524791397_690_traitement-des-evenements-dans-les-modeles-kendo-ui-builder.png)
Source link