Bind Eingang Kontrollkästchen Eigenschaft in ein Feld

Ich muss eine Kendo ListView vorbereiten, in der jedes Element ein Eingabefeld ist, wie in Bild gezeigt. Bind Eingang Kontrollkästchen Eigenschaft in ein Feld

Das Listview ist eine auf eine Liste von Objekten, die zwei Eigenschaften gebunden: „Titel“ & „IsChecked“

ich die folgende Vorlage dieses Listview vorzubereiten verwendet haben:

<script type="text/x-kendo-tmpl" id="checkBoxListTemplate"> 

       <div style='margin-left:5px;'> 
        <label style='font-weight: normal;'> 
         <input type="checkbox" />#: Title# 
        </label> 
       </div> 
      </script> 

var _data = []; 
_data.push({"Title" : "123", "IsChecked" : true}); 
_data.push({"Title" : "ABCD", "IsChecked" : false}); 

var _dataSource = new kendo.data.DataSource({ 
    data: _data 
}); 


    $("#lstView").kendoListView({ 
       dataSource: _dataSource, 
       template: kendo.template($("#checkBoxListTemplate").html()) 
      });

Wie kann in Template zu sehen, "Titel" -Eigenschaft ist verpflichtet, den Inhalt des Kontrollkästchens anzuzeigen, aber ich muss die überprüfte Eigenschaft der Eingabe an "IsChecked" Feld, so dass, wenn seine True, dann Checkbox sollte als markiert oder deaktiviert, wenn falsch abhängig von der Wert der Immobilie.

Wie kann die Checkbox-Checked-Eigenschaft an das Feld "IsChecked" gebunden werden?

Noch eine Frage .. Ist es möglich, eine Zwei-Wege-Bindung zu haben, so dass Wenn ich das Kontrollkästchen manuell ein-/ausschalten, wird der Wert für "IsChecked" Eigenschaft in der DataSource geändert?

Quelle

2017-03-28 user2091061

Sie können Bedingungen innerhalb Kendo-Vorlage wie folgt verwenden:

<input type="checkbox" #if(IsChecked){# checked="checked" #}# />

Hier ist der Arbeits Code-Schnipsel.

var _data = []; 
 
    _data.push({ 
 
    "Title": "123", 
 
    "IsChecked": true 
 
    }); 
 
    _data.push({ 
 
    "Title": "ABCD", 
 
    "IsChecked": false 
 
    }); 
 
    var _dataSource = new kendo.data.DataSource({ 
 
    data: _data 
 
    }); 
 
    $("#lstView").kendoListView({ 
 
    dataSource: _dataSource, 
 
    template: kendo.template($("#checkBoxListTemplate").html()) 
 
    });

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="lstView"> 
 
    <script type="text/x-kendo-tmpl" id="checkBoxListTemplate"> 
 

 
       <div style='margin-left:5px;'> 
 
        <label style='font-weight: normal;'> 
 
         <input type="checkbox" #if(IsChecked){# checked="checked" #}# />#: Title# 
 
        </label> 
 
       </div> 
 
      </script> 
 
</div> 
 
</body> 
 
</html>

Quelle

2017-03-28 13:07:03 Adnan

Dank .. !! Arbeitete für mich .. – user2091061

Eine weitere Frage .. Ist es möglich, Zwei-Wege-Bindung so, dass Wenn ich das Kontrollkästchen aktivieren/deaktivieren, wird sein Wert für "IsChecked" -Eigenschaft in der dataSource geändert werden? – user2091061

Ja, das ist möglich. Dazu müssen Sie CRUD Data Operations verwenden: http://docs.telerik.com/kendo-ui/framework/datasource/crud und "autoSync" verwenden. – Adnan

Bind Eingang Kontrollkästchen Eigenschaft in ein Feld

Antwort

Verwandte Themen