75 articles Javascript Page 2 / 8

Kendo Popover Inside Grid

Berikut adalah cara untuk menampilkan popover di dalam kendo grid: Kendo grid [code language=”javascript”] $("#media-grid").kendoGrid({ //… columns: [ //… { field: ‘SlaEnd’, title: ‘Target Selesai Sesuai SLA’, template: kendo.template($("#slaEndTemplate").html()), }, //… ], save: function (e) { //kamus var attribute = e.container.find("input[name=MediaName]").data("kendoComboBox"); var grid = this; //algoritma setTimeout(function () { //grid.refresh(); sortMediaGrid(); grid.tbody.find(‘[data-toggle="popover"]’).kendoTooltip({ position: ‘top’, width:…

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 File Upload Maximum File Size MB to bytes

Ukuran maksimal untuk upload file di kendo menggunakan bytes. Misalnya jika maksimal 25MB, maka ditulis [code lang=”javascript”] function onSelectFile(e) { //… if (file[0].size > 26214400) { //25MB in bytes flagSize = 1; } //… } [/code] Untuk meng-konversi MB menjadi bytes, bisa menggunakan situs: https://www.gbmb.org/mb-to-bytes

Kendo DataSource Custom Filter Operator

Contoh: mau mem-filter data pada grid yang tanggal = hari ini [script lang=”javascript”] function displayCurrentMonth() { //dsGridOngoing.filter({ field: ‘SubmittedDate’, operator: ‘eq’, value: Date(2017,8,21) }); var date = new Date(2017, 8, 21); dsGridOngoing.filter({ field: ‘SubmittedDate’, //operator: ‘eq’, operator: function(fieldDate) { var parsedSelectedDate = kendo.parseDate(date); //parse the field date in order to ignore the time var parsedFieldDate…

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]

Javascript Default Parameter Value

Menentukan default parameter value pada C# cukup mudah, dengan public void FunctionName(bool param = false) Membuat default parameter pada JavaScript lebih tricky, dengan [code language=”javascript”] function foo(a, b) { a = typeof a !== ‘undefined’ ? a : 42; b = typeof b !== ‘undefined’ ? b : ‘default_b’; … } [/code] http://stackoverflow.com/questions/894860/set-a-default-parameter-value-for-a-javascript-function

Magnific Popup Title in Video

Menampilkan judul pada magnific popup ketika konten berupa video [code language=”javascript”] tr.find(‘.lightbox-design-container’).magnificPopup({ type: ‘iframe’, iframe: { markup: ‘<div class="mfp-iframe-scaler">’+ ‘<div class="mfp-close"></div>’+ ‘<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>’+ ‘<div class="mfp-title">Some caption</div>’+ ‘</div>’ }, callbacks: { markupParse: function(template, values, item) { values.title = item.el.attr(‘title’); } }, delegate: ‘a’, gallery: { enabled: true }, }); [/code]

Magnific Popup Inside Kendo Grid

Menampilkan Magnific Popup di dalam kendo grid, dengan hasil seperti di bawah ini Model [code language=”csharp”] public class OrderMediaMagazinePresentationStub { //… //design & evidence public List<OrderMediaMagazineDesignPresentationStub> DesignList { get; set; } } [/code] javascript [code language=”javascript”] $("#grid").kendoGrid({ //… dataBound: function(e) { $(‘.lightbox-image-container’).magnificPopup({ delegate: ‘a’, type: ‘image’, gallery: { enabled: true }, }); }, columns: […