Kendo memang ajaib. Kadang bug nya juga ajaib. Ternyata, kalau syarat-syarat ini dipenuhi: Versi Kendo UI v2017.2.621 Kendo DropDownList filterable Diletakkan di dalam Bootstrap Modal Dibuka di Internet Explorer versi 11 Waktu DropDownList diklik, dropdown terbuka tapi langsung tertutup kembali, sehingga tidak bisa dipilih maupun difilter. Penyebabnya, karena kendo salah fokus. Saat mau fokus ke…
Kendo datepicker kadang date tidak terbaca di awal, harus dipilih dulu baru formatnya benar. Common Cause: Format date yg awal tidak ada di list settingan parseFormats. Option parseFormats ada, tapi urutannya tidak dari detail ke simpel (urutan berpengaruh, harus dari detail ke simpel) Contoh: [“yyyy-MM-dd”, “yyyy-MM-ddTHH:mm:ss”] salah, seharusnya [“yyyy-MM-ddTHH:mm:ss”, “yyyy-MM-dd”] Date awal tidak masuk ke…
Berikut adalah contoh Kendo Gantt Chart dengan beberapa setting / kustomisasi: Header di kolom day menjadi format ‘bulan / tanggal’, contohnya ‘4/1’ – menggunakan views Lebar list (aktivitas & %) – menggunakan listWidth Default menampilkan tanggal hari ini – menggunakan date Ketika % di-klik mengganti halaman – menggunakan dataBound
Kendo ComboBox Cascading dapat menampilkan id saja, seperti field Departemen di bawah ini Solusinya dengan memanggil fungsi refresh pada ComboBox Departemen, setelah ComboBox di inisialisasi. [code language=”javascript”] $(‘#GroupId’).kendoComboBox({ autoBind: false, optionLabel: "Pilih Group", dataTextField: "name", dataValueField: "id", change : comboBoxOnChange, dataSource: { data: @Html.Raw(Model.GroupOptionsJson) }, filter: ‘contains’, }); cbDepartment = $(‘#DepartmentId’).kendoComboBox({ autoBind: true, cascadeFrom: "GroupId",…
Misalkan ada 2 isian date di form (menggunakan Kendo DatePicker), kita bisa membatasi supaya finish date lebih besar dari start date dengan kode berikut: [code language=”javascript”] var startProgram = $(‘#ProgramStartDate’).data(‘kendoDatePicker’); var endProgram = $(‘#ProgramEndDate’).data(‘kendoDatePicker’); startProgram.bind(‘change’, function(){ var startValue = this.value(); var endValue = endProgram.value(); endProgram.min(startValue); if(startValue > endValue){ endProgram.value(startValue); } }); [/code]
Ada kasus dimana Kendo Grid (maupun Kendo components yang lain) menggunakan static data source untuk memudahkan pemrosesan di client side (misalnya filtering, sorting). Kita ingin meng-update static data source ini via ajax tanpa me-reload website. Caranya sebagai berikut [code language=”javascript”] var carPackageDataSource; function reloadCarPackageGrid(idCarModel){ //kamus var idCarModel = $(‘#IdCarModel’).val(); var filter = { idCarModel: idCarModel…
Misalnya kita memiliki struktur model pada kendo Grid seperti ini: Class: string Manufacturer: { ExpiryDate, Name } Kendo Grid tidak dapat membaca Manufacturer.ExpiryDate sebagai Date object. Solusinya menggunakan fitur from pada schema data source. [code language=”javascript”] dataSource = new kendo.data.DataSource({ transport: { read: { url: "@Url.Action("BindingGroupView", new { area = "Vendor" })", dataType: "json", },…
Kendo Grid memiliki kolom checkbox. Waktu di-submit, data yang di-check dikirim ke server. [code language=”javascript”] relatedManufacturer = $(".relatedManufacturer-tree").kendoGrid({ dataSource: manufacturers, filterable: kendoGridFilterable, columns: [ { template: "<input type=’checkbox’ class=’checkbox’ #= (checked === true) ? ‘checked’ : ” # />", width: 50, filterable: false, sortable: false }, { field: "Title", expandable: true, title: "Nama" }, ],…
Template pada kendo column dapat menggunakan javascript. Contohnya: [code language=”javascript”] function kendoGridImageTemplate(container, options) { if (container.AbsolutePhoto != null) { var extFile = container.AbsolutePhoto.split(‘.’).pop(); var extensionImage = ["jpg", "jpeg", "png", "bmp"]; if ($.inArray((extFile).toLowerCase(), extensionImage) !== -1) { return ‘<a href="’ + container.AbsolutePhoto + ‘" target="_blank"><img src="’ + container.AbsolutePhoto + ‘" alt="" class="img-responsive"></a>’; } } } //……
Kita dapat mengubah teks pada filter di kendo grid. Contoh tampilan: [code language=”javascript”] columns: [ //… { field: "IsShow", title: "Ditampilkan", width: 120, template: ‘#= (IsShow == true) ? "<span class=\’glyphicon glyphicon-ok\’></span>" : "<span class=\’glyphicon glyphicon-remove\’></span>" #’, filterable: { messages: { isTrue: "Ditampilkan", isFalse: "Disembunyikan" } } }, //… ], [/code]