Kendo DropDownList Filterable di dalam Bootstrap Modal tidak mau terbuka (auto collapsed) di IE

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 – date tidak terbaca di awal

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…

Kendo Gantt Chart

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 Value

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",…

Kendo Finish Date Constraint based on Start Date

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]

Kendo Grid Reload Static DataSource from Ajax

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…

Kendo Grid Nested Model

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 with Checkbox

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" }, ],…

Kendo Grid Column Template using Javascript

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>’; } } } //……

Kendo Grid Filter Customize Display Text

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]