✔ Kendo-Events in dynamisch generiertem HTML

gianfranco0104 · 10. September 2014

Hi, ich habe hier folgenden Code.

Javascript:

  window.myTouch = {
  touchstart: function(e) { // alert("touch start");
},
  swipe:  function(e) { // alert("swipe " + e.direction);
},
  tap:  function(e) { // alert("tap");
},
  doubletap:  function(e) { // alert("double tap");
},
  hold:  function(e) { TabHold = true;
  MM_DW_effectSlide($('#charmbar_dwn_expl'),'show','slide','down',239,330);

}
  }

um diese Events aufzurufen muss ich diese in einem HTML Tag wie folgt aufrufen:

HTML:

  <div id="explorerContents" data-role="touch"  data-enable-swipe="1" data-hold="myTouch.hold"></div>

Das läuft soweit perfekt. Allerdings benötige ich den Aufruf nicht in diesem TAG sondern in einer Function.
Wie kann ich diese Events, also z.B. SWIPE, der HOLD aufrufen?
ich hatte versucht einen neuen Event-Handler zu erzeugen klappt aber nicht. Die Data-Roles auch mal direkt eingegeben erfolglos) wenn ich sie direkt im HTML-Dokument in eine <tr> oder <div> usw. einbaue, klappt es, allerdings muss ich das Event (z.B. HOLD) direkt dort aufrufen können:

Javascript:

function xyz(){
  ... der Code...
  ...

  //Ergebnisse in table einfügen mit onlick öffnen oder mit HOLD Editierfunktionalität einblenden
  result +=
'<TR data-role="touch" data-enable-swipe="1" data-hold="myTouch.hold" onClick="subFolder( \'' + escape( FolderPaths ) + '\' ); return false;"' + ( ( toggle ) ? '' : '' ) + '>' +
'<TD NOWRAP> <div id="folder">' + '<span  CLASS="contentname">' + FolderName  + '</span>' + '</div>  </TD>' +
'<TD NOWRAP><span CLASS="exptitles" > ' + folderDate + ' </span></TD>' +
'<TD NOWRAP  align="right"><span CLASS="exptitles" align="right"> ' +
toMetric( folder.size ) + '&nbsp; </span></TD></TR>';

  ... rest der function..

Ich steige nicht dahinter wie ich dieses EVENT HOLD oder SWIPE in desem Result aufrufen kann.
Die Tabelle ist dynamisch und daher jedesmal anders. deshalb muss dieser Aufruf im "Result" geschehen.

ComFreek · 10. September 2014

Hallo gianfranco0104,

du hast recht, ich hätte beim Verschieben mehr auf den Inhalt achten müssen. Ich habe den alten Beitrag wieder zurückgesetzt, leider konnte ich auf den alten Titel nicht mehr zugreifen. Deswegen habe ich ihn auf "Ein neues Event 'onhold' erstellen" geändert. Ich hoffe, dass das so passt.
Auch den Titel dieses Threads habe ich ein wenig passender gestaltet. Wenn du den alten wieder zurück magst, sag einfach Bescheid.

Nun zum Problem:
Ich steige durch deine Beschreibung nicht ganz durch, aber ich vermute, dass das Problem ist, dass Kendo* das HTML nur beim Laden der Seite nach data-*-Attributen durchsucht, um so Eventlistener ausfindig zu machen. Wenn du nun allerdings dynamisch HTML hinzufügst, registriert dies Kendo wahrscheinlich nicht automatisch.

Um zu erfahren, wie bzw. ob das überhaupt geht, solltest du in der Kendo-Dokumentation nachschlagen. Ich kenne mich mit Kendo nicht aus.

*) oder zumindest die Bibliothek, die deine data-*-Eventangaben parst.

gianfranco0104 · 10. September 2014

@ComFreek 1000 dank. Das passt so.
Gut ich werde mal nachschlagen. Ist nicht ganz so einfach, denn die haben 100te Möglichkeiten und ich habe mich da schon stark durchgewühlt. Aber das ist eine Idee, wahrscheinlich sucht er nur im html danach.
Gibt es möglicherweise eine Möglichkeit das dort hinein zu bauen? Oder muss ich wirklich nochmals bei Kendo nachschlagen?
Ich schau mal...

ComFreek · 10. September 2014

Wenn meine Vermutung stimmt, dass Kendo nur am Anfang danach sucht, gibt es keine andere Möglichkeit.

Allerdings habe ich eben kurz bei der Kendo-Dokumentation auch Data-Binding Funktionen gefunden bzw. allgemein MV*-Patterns. Wieso benutzt du nicht sowas anstatt das HTML selbst zu generieren? Zumindest bei Angular werden dann die Eventhandler auch mit übernommen (kopiert).

gianfranco0104 · 10. September 2014

Echt? Hast du mir ein Link? Dann kann ich mal schauen,wie ich das anstellen soll.

ComFreek · 10. September 2014

http://demos.telerik.com/kendo-ui/mvvm/index

gianfranco0104 · 10. September 2014

meinst du zwecks HTML generieren meine Tabellen über das RESULT? der code ist recht aufwändig für di Datei und Ordnerauflistung. er schaut wie folgt aus (ACHTUNG,LANG)

Javascript:

var fso = new ActiveXObject( "Scripting.FileSystemObject" );
var result = new String( );
var FileName = new String( );
var FolderName = new String( );
var FolderPaths = new String( );
var FileName = new String( );
var FilePaths = new String( );
var Extention = new String( );
var theProjPath = (pathToMyDocuments +  "\\CM5Projects\\");
var allThepathsFIX = null

// Wandle (bytes, KB, MB, GB oder TB).
function toMetric( bytes ) {

    // Check Terabytes (TB).
    if( bytes >= 1099511627776 ) { return ( Math.floor( bytes / 1099511627776 ) + ' TB' ); }

    // Check  Gigabytes (GB).
    if( bytes >= 1073741824 ) { return ( Math.floor( bytes / 1073741824 ) + ' GB' ); }

    // Check  Megabytes (MB).
    if( bytes >= 1048576 ) { return ( Math.floor( bytes / 1048576 ) + ' MB' ); }

    // Check  Kilobytes (KB).
    if( bytes >= 1024 ) { return ( Math.floor( bytes / 1024 ) + ' KB' ); }

    // Wenn weniger als 1 KB, zeige nur 1 KB.
    return '1 KB';
}


// Zeige Inhalt wenn auf sub-folder geklickt
function subFolder( path ) {
   
    // Update den txtPath.
    frmSearch.txtPath.value = unescape( path );
   
    var pathcomplstring = path.replace(/%5C/g, ","); // Pfad trenner durch Komma ersetzen für besseres Splitting
   
    // vor > vor > vor > vorletzter Pfad
    var pathsrt02 = pathcomplstring.split(',', 1000); //1000 = max. mögl. verschachtelte Unterordner
    for (var i=0; i<pathsrt02.length -4; i++) {
                  thePath02 = "";
                  thePath02 +=  pathsrt02[i];
    }
    // vor > vor > vorletzter Pfad
    var pathsrt03 = pathcomplstring.split(',', 1000);
    for (var i=0; i<pathsrt03.length -3; i++) {
                  thePath03 = "";
                  thePath03 +=  pathsrt03[i];
    }
    // vor > vorletzter Pfad
    var pathsrt04 = pathcomplstring.split(',', 1000);
    for (var i=0; i<pathsrt04.length -2; i++) {
                  thePath04 = "";
                  thePath04 +=  pathsrt04[i];
    }
    // vorletzter Pfad
    var pathsrt05 = pathcomplstring.split(',', 1000);
    for (var i=0; i<pathsrt05.length -1; i++) {
                  thePath05 = "";
                  thePath05 +=  pathsrt05[i];
    }
    // Letzter Pfad
    var pathsrt06 = pathcomplstring.split(',', 1000);
    for (var i=0; i<pathsrt06.length; i++) {
                  thePath06 = "";
                  thePath06 +=  pathsrt06[i];
    }
    
    //Füge Pfade zusammen "rsaquo;" ist kleineres ">"-Zeichen
    var allThepaths = " &rsaquo; " +  "..." + thePath02 +
                      " &rsaquo; " + thePath03 +
                      " &rsaquo; " + thePath04 +
                      " &rsaquo; " + thePath05 +
                      " &rsaquo; " + thePath06 ;
   
    //Alle Pfade ab CM5Projects >> zeigen
    allThepathsFIX = allThepaths.substring(allThepaths.lastIndexOf("CM5Projects") + 11);
    // UmlautFix
    allThepathsFIX = allThepathsFIX.replace(/%C4/g, "Ä");
    allThepathsFIX = allThepathsFIX.replace(/%E4/g, "ä");
    allThepathsFIX = allThepathsFIX.replace(/%DC/g, "Ü");
    allThepathsFIX = allThepathsFIX.replace(/%FC/g, "ü");
    allThepathsFIX = allThepathsFIX.replace(/%D6/g, "Ö");
    allThepathsFIX = allThepathsFIX.replace(/%F6/g, "ö");
    allThepathsFIX = allThepathsFIX.replace(/%21/g, "!");
    allThepathsFIX = allThepathsFIX.replace(/%23/g, "#");   
    allThepathsFIX = allThepathsFIX.replace(/%A7/g, "§");
    allThepathsFIX = allThepathsFIX.replace(/%24/g, "$");   
    allThepathsFIX = allThepathsFIX.replace(/%25/g, "%");   
    allThepathsFIX = allThepathsFIX.replace(/%26/g, "&");
    allThepathsFIX = allThepathsFIX.replace(/%28/g, "(");
    allThepathsFIX = allThepathsFIX.replace(/%29/g, ")");
    allThepathsFIX = allThepathsFIX.replace(/%3D/g, "=");
    allThepathsFIX = allThepathsFIX.replace(/%26/g, "&");
    allThepathsFIX = allThepathsFIX.replace(/%2C/g, ",");
    //Anzeigen
    document.getElementById("pathstring").innerHTML = allThepathsFIX.replace(/%20/g, " ");
   
    // Neue Suche im neuen Ordner.
    scan( );
}



// Scan der Pfade.
function FindFile( searchPath ) {

    // Tabellenfarbe aktivieren.
    var toggle = true;

    // chkShowFolders ist checked, Unterordner anzeigen
    if( frmSearch.chkShowFolders.checked ) {

        // Check ob  Projektfolder (ROOT) ist.
        if( fso.GetParentFolderName( frmSearch.txtPath.value ).length > 39 ) { //39 war hier die höhe des Rootsfolders (Projekte)
            MM_changeProp('folderUP','','visibility','visible',''); //UP Folder zeigen wenn außerhalb von root

            // Hinzufügen des Zurück-Folders zur Tabelle.
            result += '<A HREF="#" onMouseDown=" subFolder( \'' + escape( fso.GetParentFolderName( frmSearch.txtPath.value ) ) + '\' ); return false;"></A>'
            // Setzen der Colortoggle variable
            toggle = !toggle;
           
        } else { MM_changeProp('folderUP','','visibility','hidden',''); } //UP Folder verstecken wenn in root


        // Ordner zu Ordner aktionen
        var folderEnum = new Enumerator( searchPath.SubFolders );
        for( var i = 0; !folderEnum.atEnd( ); folderEnum.moveNext( ) ) {
            var folder = folderEnum.item( );
           
            //folder.Name und "folder.Path" global machen
            FolderName     = folder.name ;
            FolderPaths = folder.Path ;

            //Ordnerdatumsformat Deklarieren
            var folderDate = folder.DateLastAccessed;
            var folderYear = new Date(folderDate).getFullYear()
                // MonatsFix>> problem mit dem Datum, es wird immer eins abgezogen:
                //          >> hier setze ich es wieder drauf. Test ob bei Sommerzeit/Winterzeit wieder normal
                var folderMonthErr = ('0' + new Date(folderDate).getMonth()).substr(-2)
                var folderMonthN = parseInt(folderMonthErr) +1
                // ENDE MonatsFix <<
            var folderMonth = ('0' + folderMonthN).substr(-2)
            var folderDay = ('0' + new Date(folderDate).getDate()).substr(-2)
            folderDate = " &nbsp; " + folderYear + "." + folderMonth + "." + folderDay
           

            // Hinzufügen der Ordner zur Tabelle.
                    result +=
                        '<TR onClick="subFolder( \'' + escape( FolderPaths ) + '\' ); return false;"' + ( ( toggle ) ? '' : '' )  + '>' +
                        '<TD NOWRAP> <div id="folder">' + '<span  CLASS="contentname">' + FolderName  + '</span>' + '</div>  </TD>' +
                        '<TD NOWRAP><span CLASS="exptitles" > ' + folderDate + ' </span></TD>' +
                            '<TD NOWRAP  align="right"><span CLASS="exptitles" align="right"> ' +
                            toMetric( folder.size ) + '&nbsp; </span></TD></TR>';    

                // Setzen der Colortoggle variable
                toggle = !toggle;
        }
    }

    // Dateien zu Dateien der Ordnerinhalte Aktionen.
    var fileEnum = new Enumerator( searchPath.Files );
    for( var i = 0; !fileEnum.atEnd( ); fileEnum.moveNext( ) ) {
        var file = fileEnum.item( );
               
        // Vergleiche Datei mit Filenameparameter.
        if( FileName == "*" || file.name.slice( 0, file.name.lastIndexOf( "." ) ).toLowerCase( ).indexOf( FileName ) > -1 ) {

            // Vergleiche DateiSuffix
            if( Extention == "*" || file.name.slice( file.name.lastIndexOf( "." ) + 1 ).toLowerCase( ).indexOf( Extention ) > -1 ) {

                //file.Name und "file.Path" global machen
                FileName  = file.name ;
                FilePaths = file.Path ;
               
                //File Ordnerdatumsformat Deklarieren
                var proectDate = file.DateLastAccessed;
                var proectYear = new Date(proectDate).getFullYear()
                    // MonatsFix>> problem mit dem Datum, es wird immer eins abgezogen:
                    //          >> hier setze ich es wieder drauf. Test ob bei Sommerzeit/Winterzeit wieder normal
                    var proectMonthErr = ('0' + new Date(proectDate).getMonth()).substr(-2)
                    var proectMonthN = parseInt(proectMonthErr) +1
                    // ENDE MonatsFix <<
                var proectMonth = ('0' + proectMonthN).substr(-2)
                var proectDay = ('0' + new Date(proectDate).getDate()).substr(-2)
                proectDate = " &nbsp; " + proectYear + "." + proectMonth + "." + proectDay
               
                // Füge Datei(en) der Tabelle hinzu
                result +=
                    '<TR' + ( ( toggle ) ? '' : ' ' ) + '>' +
                    '<TD NOWRAP><div id="file" <A TARGET="_blank" HREF="' +
                    FilePaths + '">' +
                    '<span  CLASS="contentname"> ' + FileName + '</span>' +
                    '</A> </div></TD>' +
                    '<TD NOWRAP><span CLASS="exptitles" > ' + proectDate + ' </span></TD>' +
                    '<TD NOWRAP  align="right"><span CLASS="exptitles" align="right"> ' +
                    toMetric( file.size ) + '&nbsp; </span></TD></TR>';

                // Setzen der Colortoggle variable
                toggle = !toggle;
            }
        }
    }
}


// Überprüfen und Vergleichen der der Pfade und Dateinamen und initiiert den Dateiscan.
function scan( ) {

    // Parse den Dateinamen und Suffix
    FileName = ( frmSearch.txtMask.value.lastIndexOf( "." ) > -1 ) ? frmSearch.txtMask.value.slice( 0, frmSearch.txtMask.value.lastIndexOf( "." ) ) : ( frmSearch.txtMask.value.length > 0 ) ? frmSearch.txtMask.value.toLowerCase( ) : "*";
    Extention = ( frmSearch.txtMask.value.lastIndexOf( "." ) > -1 ) ? frmSearch.txtMask.value.slice( frmSearch.txtMask.value.lastIndexOf( "." ) + 1 ).toLowerCase( ) : "*";

    // Vergleichen erhaltenen Pfad
    if( frmSearch.txtPath.value.length > 0 && fso.FolderExists( frmSearch.txtPath.value ) ) {

        // Wenn Pfad Exisitiert Erstelle Tabellenkopf
        result =
            '<TABLE id="expTable" class="expTable" WIDTH="100%" CELLPADDING="0" ><TR>' +
            '<TD WIDTH="50%" CLASS="find"><b>&nbsp; </b></TD>' +
            '<TD WIDTH="5%" CLASS="exptitles"><b>&nbsp; </b></TD>' +
            '<TD WIDTH="3%" CLASS="exptitles" align="right"><b>&nbsp; </b></TD></TR>';


        // Sammle gültige Dateinamen
        FindFile( fso.GetFolder( frmSearch.txtPath.value ) );
        // Tabelle schließen
        explorerContents.innerHTML = result + "</TABLE>";
    } else {

        // Probleme mit dem Pfad
        alert( "The path structure is incorrect. Please check the path structure. n\If it's correct try again or contact KC-Produkte GmbH." );
    }
}

in beiden RESULT (einmal für Folder und einmal für FILE) werden in die Tabelle ROWS erzeugt welche den Inhalt des Ordner zeigt (also weitere Ordner oder eben Files).

wie man sehen kann ist im Result für die FOLDER der onClick in der erzeugten <tr> (<TR onClick="subFolder( \'' + escape( FolderPaths ) + '\' ); return false;"' +.....) hier benötge ich den HOLD Aufruf.

Ich konnte aus der Doku nicht hrausfinden wie das gehen soll, auch mit MV Patterns. ggf. fehlt mir hier das Wissen (zu stark noch Anfänger )

ComFreek · 10. September 2014

Was heißt "hold"-Aufruf? Heißt das, dass du einen Eventhandler für das Event "hold" bei den TR-Tags registrieren willst?

Kannst du dies vielleicht genauer beschreiben? (Natürlich ist dies leichter gesagt als getan, wenn man nicht gerade viel Ahnung über ein Thema hat.)

Zu MV-Patterns kannst ich dir kleines Beispiel geben, um dir die grobe Funktionsweise zu erläutern.

Du hast eine simple Todo-Liste mit einer Input-Box, um einen neuen Eintrag hinzuzufügen.
Das HTML strukturierst du wie folgt:

HTML:

<!-- Das mv steht für ein beliebiges Framework-Kürzel. AngularJs benutzt bspw. ng -->
<ul mv-repeat="item in items">
  <li>{{ item.description }}</li>
</ul>

<input type="text" mv-click="add()">

Das JS (nur grob skizziert!):

Javascript:

var items = [];

function add() {
  // this = input
  items.push(this.value);
}

Das war's! Neue Einträge werden automatisch allein durch die Änderung am items Array hinzugefügt und im HTML gerendert!

gianfranco0104 · 10. September 2014

Ja, das was ich zu Beginn geschrieben hatte (ich nenne sie events) also bei window.myTouch an Events drinnen hab, z
B. swipe, doubletab, hold usw., davon das HOLD im <tr> aufrufen, sodass dann die Function, die ich dort im window.MyTouch unter Hold deklariert habe, ausgeführt wird. Das muss doch auch irgendwie einfacher gehen? Oder?

gianfranco0104 · 11. September 2014

Ich habe nun via der Doku bei Kendo das Ganze mal mit einem jQuery code versucht. Dieser benötigt das window.myTouch = ... nicht und auch ebenfalls keine Data-Role usw. Schon mal entspannter:

Javascript:

$(document).ready(function(){
    $(".folder").kendoTouch({ hold: function (e) { alert('toched mit HOLD'); } });
});

Soweit klappt das, aber jetzt kommt wieder das Problem: Klappt nur, wenn sich die ID oder Class innerhalb des HTML Dokuments befindet. Ich habe in der RESULT erzeugten <TR> mal den Folder, aber auch schon die Row selbst mit einer ID versehen (auch mit class versucht) und über den jQuery Code versucht diese anzusprechen. Erfolglos!

Javascript:

result +=
  '<TR id="folderrow" onClick="subFolder( \'' + escape( FolderPaths ) + '\' ); return false;"' + ( ( toggle ) ? '' : '' )  + '>' +
  '<TD NOWRAP> <div class="folder">' + '<span  CLASS="contentname">' + FolderName  + '</span>' + '</div>  </TD>' +
  '<TD NOWRAP><span CLASS="exptitles" > ' + folderDate + ' </span></TD>' +
  '<TD NOWRAP  align="right"><span CLASS="exptitles" align="right"> ' +
  toMetric( folder.size ) + '&nbsp; </span></TD></TR>';

Kann ich den jQuery-Code eventuell in meiner TR einpflanzen (wo auch das onClick steht?

✔ Kendo-Events in dynamisch generiertem HTML

gianfranco0104

Erfahrenes Mitglied

ComFreek

Mod | @comfreek

gianfranco0104

Erfahrenes Mitglied

ComFreek

Mod | @comfreek

gianfranco0104

Erfahrenes Mitglied

ComFreek

Mod | @comfreek

gianfranco0104

Erfahrenes Mitglied

ComFreek

Mod | @comfreek

gianfranco0104

Erfahrenes Mitglied

gianfranco0104

Erfahrenes Mitglied

Neue Beiträge