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

    Во-первых, у меня есть сетка кендо. Теперь я динамически добавить флажок в DataSource, как показано ниже:Css - Пользовательский стиль на флажке не работает

    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 
        } 
    ]; 
    

    Ниже перечислены стили реализуются на флажке:

    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; 
    } 
    

    я обнаружил, что эти стили работы других флажков, на которых я добавлен к вкладкам панели панели , но в сетке ничего не отображается.

    Я создал jsfiddle с черными ящиками быть в стиле флажка. Я спрятал display:none; в css, чтобы увидеть, где находятся все текстовые поля. Если он используется, в сетке не отображаются контрольные поля проверки.

    Любые идеи, почему?

    +0

    вам нужно удалить значение шаблона, поскольку оно помещается вместо переменной chkBox. i.e ' шаблон:" "' – anpsmn

    +0

    Я только заметил, что у меня есть поле и шаблон. Когда шаблон удаляется, 'поле' интерпретирует chkBox как строку, а не как html-код, как показано здесь: (http://jsfiddle.net/97gqZ/30/). – Phillip

    ответ

    1

    Я нашел проблему.

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

    должно быть:

    template: "#= selected #" 
    

    которая была простая ошибка моя.

    Работает example.

    +0

    Я действительно понимаю сейчас ... удалил свой ответ. – schellmax

    +0

    Нет проблем. Спасибо, в любом случае. – Phillip

    +0

    Спасибо за рабочий образец! – callisto

    Смежные вопросы