Kendo UI Page 2 / 3

Kendo ComboBox Cascading

Posted on 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…

Kendo UI Combobox

Posted on by Chandra Oemaryadi

Contoh penggunaan Kendo UI Combobox, dengan mewajibkan user memilih salah satu nilai yang valid dari Combobox. [code language=”javascript”] function comboBoxOnChange(e){ if (this.value() && this.selectedIndex == -1) { //or use this.dataItem to see if it has an object this.text(”); } } $(‘#Disposition1Email’).kendoComboBox({ dataTextField: "Text", dataValueField: "Value", autoBind: false, dataSource: { data: @Html.Raw(Model.GetAssigneeOptionsAsJson()) }, change : comboBoxOnChange,…

Kendo UI AutoComplete Example

Posted on by Chandra Oemaryadi

Contoh kode javascript menggunakan Kendo UI AutoComplete [code language=”javascript”] var assigneeValid = false; $("#Assignee").kendoAutoComplete({ placeholder: "Silakan Pilih", dataTextField: "Text", filter: "contains", minLength: 2, dataSource: new kendo.data.DataSource({ data: @Html.Raw(Model.GetAssigneeOptionsAsJson()) }), open: function(e){ assigneeValid = false; }, select: function (e) { var item = e.item; var dataItem = this.dataItem(e.item.index()); $("#Assignee").val(dataItem.Text); assigneeValid = true; }, close: function(e){ if(!assigneeValid)…

Kendo Stacked Bar Chart with Complex Data

Posted on by Chandra Oemaryadi

Kendo stacked bar chart dapat menerima berbagai bentuk data untuk menghasilkan chart. Berikut adalah contoh bentuk data yang dapat digunakan untuk kasus yang kompleks. Server mengirimkan List [code language=”csharp”] public class ChartColumnAttribute { public double Value { get; set; } public string Category { get; set; } //RKAP, RKAP s.d. Jun’14, Real s.d. Jun’14, Real…

Kendo TreeView Additional Functions

Posted on by Chandra Oemaryadi

Berikut adalah beberapa contoh fungsi tambahan yang bermanfaat waktu menggunakan Kendo TreeView. [code language=”javascript”] function clearAllCheckbox(){ $(‘#parent-options input[type="checkbox"]’).each(function(){ $(this).prop(‘checked’, false); }); } function checkNodeByNodeElement(element){ $(element).find(‘input[type="checkbox"]’).first().prop(‘checked’, true); } function expandFromRootByNodeElement(element){ $(element).parentsUntil(‘.k-treeview’).filter(‘.k-item’).each( function (index, element) { $("#parent-options").data(‘kendoTreeView’).expand($(this)); } ); } function checkNodeByDirectoryId(allNodes, directoryId){ var currentNode; var treeView = $("#parent-options").data("kendoTreeView"); var currentId, currentUid; for (var i = 0;…

Kendo Grid ParameterMap

Posted on 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 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 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…

Kendo Grid Hierarchy Custom Edit Command

Posted on by Chandra Oemaryadi

Sewaktu memanggil tombol edit di level 2 Kendo Grid hierarchy terdapat masalah. Entah mengapa, tombol edit di level 1 juga dipanggil, sehingga redirect menjadi tidak valid. Klik edit PLN malah redirect ke edit Pembelian LNG. Solusi saat ini memisahkan fungsi edit di level 1 dan level 2, dan memberikan variabel flag supaya edit di level…

Javascript Open URL in New Tab

Posted on by Chandra Oemaryadi

[code language=”javascript”] var win = window.open(url, ‘_blank’); win.focus(); [/code] Penerapan dalam Kendo Grid. Fungsi openTab disimpan di dalam webapp.js. [code language=”javascript”] //… columns: [ { field: "pmo_link", title: "Website", template: ‘<a href="javascript:" onclick="openTab(\’#= PMOLink #\’)">#= PMOName #</a>’, }, ] //… [/code]