javascript
  • css
  • checkbox
  • kendo-grid
  • 2013-04-17 4 views 5 likes 
    5

    Zunächst einmal habe ich ein Kendo-Gitter. Jetzt bin ich dynamisch ein Kontrollkästchen, um die Datasource das Hinzufügen wie unten:Css - Benutzerdefinierte Stil auf Kontrollkästchen funktioniert nicht

    var chkBox = "<input type='checkbox' id='chUpload'/><label for='chUpload'><a href='#' id='cbChoose'></a>test</label>"; 
    
    var uploadedFiles = 
    [ 
        { 
         facility: "Sunrise medical Laboratories", 
         documentName: "Lab Results", 
         documentType: "PDF", 
         selected: chkBox 
        } 
    ]; 
    

    Im Folgenden sind die Stile auf die Checkbox implementiert:

    input[type="checkbox"] 
    { 
        display:none; 
    } 
    
    input[type="checkbox"] + label a 
    { 
        display:inline-block; 
        width:14px; 
        height:14px; 
        margin:-1px 4px 0 0; 
        vertical-align:middle; 
        background:url('../images/checkBox.png') right top no-repeat; 
        cursor:pointer; 
        float:right; 
        margin-top:10px; 
        margin-right:10px; 
    } 
    
    input[type="checkbox"]:checked + label a 
    { 
        background:url('../images/checkBox.png') -1px top no-repeat; 
    } 
    

    Ich fand, dass diese Stile auf andere Kontrollkästchen Arbeit, die ich hinzugefügt, um eine Panelbar Registerkarten, aber im Raster, nichts angezeigt wird.

    Ich habe ein jsfiddle mit dem Black Boxes ist die gestylten Checkbox erstellt. Ich habe die display:none; in der CSS versteckt, um zu sehen, wo alle Textfelder sind. Wenn es verwendet wird, werden keine benutzerdefinierten Kontrollkästchen im Raster angezeigt.

    Irgendwelche Ideen warum?

    +0

    Sie müssen den Vorlagenwert entfernen, der anstelle der chkBox-Variablen platziert wird. Beispiel: Vorlage: " " – anpsmn

    +0

    Ich habe gerade festgestellt, dass ich sowohl Feld und Vorlage habe. Wenn die Vorlage entfernt wird, interpretiert das 'Feld' die chkBox als String und nicht als HTML-Code wie hier zu sehen: (http://jsfiddle.net/97gqZ/30/). – Phillip

    Antwort

    1

    Ich habe das Problem gefunden.

    template: "#= selected #" 
    

    , die ein einfacher Fehler von mir war:

    template: "<input type='checkbox' style='margin-right:23px; margin-top:0px;' />" 
    

    sollte.

    Hier ist eine funktionierende example.

    +0

    ich verstehe jetzt ... löschte meine antwort. – schellmax

    +0

    Kein Problem. Danke trotzdem. – Phillip

    +0

    Danke für das funktionierende Beispiel! – callisto

     Verwandte Themen

    • Keine verwandten Themen^_^