Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.metro.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.metro.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.metro.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
  <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<script src="https://gist.github.com/AlbertoMonteiro/5282985/raw/71f98b4a040ff9e4ce323e6b10930afffe4fba6f/knockout.mapping.js"></script>
    <title>Minicrud</title>
</head>
​
<body>
    <div class="minicrud" data-bind="minicrud: pessoas, itemType: Pessoa">
        <div class="minicrud-single" data-bind="with: list()()[0], visible: data().length <= 1">
            <label>Nome</label>
            <input type="text" data-bind="value: Nome" class="k-input" />
            <br />
            <label>Idade</label>
            <input type="text" data-bind="value: Idade" class="k-input" />
            <br />
            <label>Nascimento</label>
            <input type="text" data-bind="kendoDatePicker: Nascimento" />
        </div>
        <div data-bind="visible: data().length >= 2">
            <table class="minicrud-grid" data-bind="kendoGrid: {data: data, selectable:true,change: selectionChanged, resizable:true}">
            <thead>
                <tr>
                    <th data-field="Nome">Nome</th>
                    <th data-field="Idade">Idade</th>
                    <th data-template="#=kendo.toString(Nascimento,'dd/MM/yyyy')#">Nascimento</th>
                </tr>
            </thead>
        </table>
        </div>
        <div class="minicrud-window" style="display: none" data-bind="with: currentItem, kendoWindow: { isOpen: window.isOpen, title: window.title, modal: true, resizable: false, open: window.open, close: window.close }">
            <label>Nome</label>
            <input type="text" data-bind="value: Nome" class="k-input" />
            <br />
            <label>Idade</label>
            <input type="text" data-bind="value: Idade" class="k-input" />
            <br />
            <label>Nascimento</label>
            <input type="text" data-bind="kendoDatePicker: Nascimento" />
            <br />
            <button class="k-button" data-bind="click: $parent.window.save">Salvar</button>
            <button class="k-button" data-bind="click: $parent.window.cancel">Cancelar</button>
        </div>
        <div class="minicrud-actions">
            <button class="k-button minicrud-new" >Novo</button>
            <button class="k-button minicrud-edit" data-bind="visible: data().length >= 2">Editar</button>
            <button class="k-button minicrud-delete" data-bind="visible: data().length >= 2">Excluir</button>
            <button class="k-button minicrud-clear" data-bind="visible: data().length <= 1">Limpar</button>
        </div>
    </div>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers