75 articles Javascript Page 3 / 8

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 inside Kendo Window / Modal

Posted on May 15, 2016 by Chandra Oemaryadi

[code language=”html”] <div id="window"> <div id="lookup-grid" class="grid"></div> </div> [/code] [code language=”javascript”] var ds; function OpenLookup() { ds.read(); var dialog = $("#window").data("kendoWindow"); dialog.open().center(); } function SelectItem(e) { e.preventDefault(); var data = this.dataItem(getDataRowGrid(e)); $(‘#window’).data(‘kendoWindow’).close(); $(‘#TableCustomerId’).val(data.CustomerId); $(‘#TableCustomerCode’).val(data.CustomerCode); $(‘#TableCustomerName’).val(data.CustomerName); } $(document).ready(function () { ds = new kendo.data.DataSource({ pageable: true, pageSize: 10, serverFiltering: true, serverPaging: true, serverSorting: true, sortable:true, transport:…

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 Template Inline If

Posted on October 9, 2015 by Chandra Oemaryadi

Contoh kode untuk kondisional if di template kendo grid column [code language=”javascript”] $("#grid").kendoGrid({ //… columns: [ //… { title: ‘Modifikasi’, template: ‘#= (ModifiedBy != null) ? kendo.toString(ModifiedTime, "d MMM yyyy") + " (" + ModifiedBy + ")" : "" #’, sortable: false, filterable: false, width: 200, } ], }); [/code]

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]

jQuery Map to Get Checked Checkboxes

Posted on September 16, 2015 by Chandra Oemaryadi

Menggunakan fungsi jQuery map untuk mengambil nilai dari checkbox yang dipilih user [code language=”javascript”] var checked = $.map($(".competitor-list :checked"), function (checkbox) { return parseInt($(checkbox).val()); }); [/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 ComboBox Cascading

Posted on July 2, 2015 by Chandra Oemaryadi

Pada ComboBox Cascading, ada 2 combobox: parent dan child. Isi combobox child ditentukan oleh pilihan user pada combobox parent. [code language=”html”] <div class="form-group"> @Html.LabelFor(model => model.GroupId, new { @class = "col-xs-2 control-label" }) <div class="col-xs-4"> @Html.TextBoxFor(model => model.GroupId, new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.FullName) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.DepartmentId, new…