Kendo Grid | Knowledge Base

Kendo Grid Reload Static DataSource from Ajax

Posted on September 6, 2016 by Chandra Oemaryadi

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

Posted on December 4, 2015 by Chandra Oemaryadi

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 Column Template

Posted on October 1, 2015 by Chandra Oemaryadi

Kendo Grid memiliki fitur template. Dapat digunakan untuk kolom biasa maupun kolom command (edit, delete). [code language=”javascript”] <script id="command-template" type="text/x-kendo-template"> # if(Status == ‘@ApprovalNotificationStatus.REJECT’) { # <a class="k-button-icon k-grid-edit" href="javascript:" title="Edit" onclick="editItem(#=Id #)"><span class="glyphicon glyphicon-edit"></span></a> # } # </script> <script type="text/x-kendo-template" id="status-approval"> # if(Status == ‘@ApprovalNotificationStatus.REJECT’) { # <a data-placement="bottom" href="javascript:" class="popover-reject text-danger" data-toggle="popover" data-trigger="focus"…

Kendo Grid Customize Filter Text for Boolean

Posted on September 16, 2015 by Chandra Oemaryadi

Cara mengubah teks filter di kendo grid untuk tipe boolean [code language=”javascript”] { field: "IsShowing", title: "Diterima", width: 115, template: ‘#= (IsShowing === false) ? "Belum" : "Sudah" #’, filterable: { messages: { isTrue: "Sudah", isFalse: "Belum", } } }, [/code]

Kendo Grid Column Template using Javascript

Posted on August 14, 2015 by Chandra Oemaryadi

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

Posted on August 14, 2015August 14, 2015 by Chandra Oemaryadi

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]

Kendo Grid ParameterMap

Posted on February 5, 2015November 29, 2015 by Chandra Oemaryadi

Fungsi parameter map pada Kendo Grid bermanfaat untuk filter / sort foreign key. [code language=”javascript”] var dataSource = new kendo.data.DataSource( { transport: { read: { url: "@Url.Action("Binding")", dataType: "json", }, parameterMap: function (options, operation) { if (operation !== "read" && options.models) { } else { if (options.filter) { filter = options.filter.filters; for (var i in…

Kendo UI Grid Custom Filter Type

Posted on February 2, 2015 by Chandra Oemaryadi

Beberapa contoh custom filter type pada Kendo Grid 1. Date [code language=”javascript”] columns: [ //… { field: "LastUpdate", title: "Last Update", filterable: { ui: "datepicker", operators: { string: { eq: "Equals", }, }, extra: false, } //… ] [/code] 2. Dropdown [code language=”javascript”] function typeCourse(element) { element.kendoDropDownList({ dataTextField: "Text", dataValueField: "Value", dataSource: { data: categoryOptions…

Kendo UI Grid Custom Filterable

Posted on February 2, 2015 by Chandra Oemaryadi

Kita dapat mengganti apa saja isi filterable (eq / contains / etc) dan bahasa yang digunakan pada Kendo Grid. Untuk memudahkan, kita bisa menyimpan variabel filterable pada webapp.js [code language=”javascript”] var customKendoGridFilter = { messages: { info: "Tampilkan yang memiliki nilai:", // sets the text on top of the filter menu filter: "Filter", // sets…