2012-09-23

Datasource generate sendiri

Tertarik dengan demo di kendoui tepatnya di bagian datasource. Dimana dengan script sederhana kita bisa memasukkan datanya dengan banyak dan tampilan sudah bisa kita atur-atur. Perhatikan contoh yang diberikan karena itu yang akan dibuat.
form generate
Saya memulainya semua dari form yang saya letakkan di tools buatan saya. Kunjungilah dengan klik linknya dan pilih no 5, maka kamu akan mendapatkan tampilan di atas. Script ini membutuhkan js: Jquery dan kendo.web.

Berikutnya kita membutuhkan jquery dan file pendukung. Saya menyarankan untuk download dari kendoUI. Minta disana lalu periksa di email, tutorial sebelumnya saya memberikan filenya tetapi untuk kali ini saya meminta anda mengambil filenya dari sana.
file script dan css bisa anda letakkan pada tempat yang sesuai dengan script atau nanti bisa di edit. Tetapi ikuti saja tutorial yang ada dahulu nanti baru kita edit2.

Berikutnya buatlah di excel data-data yang akan kamu masukkan. pada kolom teratas adalah NAMA dari kolom, berikutnya dibawah adalah datanya. Disarankan data tidak memiliki enter didalamnya.
Disini saya membuat list nama karakter kartun
Copy semuanya dari A1- D8 lalu copy paste ke form yang ada di url saya
kok berantakan
Lakukan submit dan tunggu hasilnya di textarea berikutnya. Copy paste isinya ke html dan ... perbaiki isinya dahulu sebelum dijalankan pertama dibagian HEAD
<head>
    <title>Basic usage autoload</title>
    <link href="../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../styles/kendo.default.min.css" rel="stylesheet">
   
    <script src="../js/jquery.min.js"></script>
    <script src="../js/kendo.web.min.js"></script>

</head>

Maaf bila tulisannya jadi kecil, tetapi ini agar tidak memusingkan membacanya. Perhatikan pada target css dan js. Apabila salah posisi. Ganti atau disamaratakan. Jangan lupa title diganti dengan nama yang lain.

lalu pindah ke css bawah

            <style scoped>
                .demo-section {
                    width: 600px;   
                }
               
                .metrotable {
                    width: 100%;
                    border-collapse: collapse;
                }
               
                .metrotable > thead > tr > th
                {
                    font-size: 1.3em;
                    padding-top: 0;
                    padding-bottom: 5px;
                }
            </style>

Perbaiki css yang dirasa kurang tepat. Setelah itu jalankan html kamu tersebut
Hasil akhir
Ini akan sangat berguna apabila data yang kamu masukkan banyak sekali dan kamu tidak perlu menulis ulang <tr><td> ....</td></tr> sebanyak-banyaknya.

Tidak ada komentar: