jQWidgets Forums

jQuery UI Widgets › Forums › Grid › hide two grid

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  ekaperintis 11 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    hide two grid Posts
  • February 3, 2014 at 5:05 am hide two grid #48812

    ekaperintis
    Participant

    this is my capture two grid…

    Free Web Proxy

    February 4, 2014 at 6:22 am hide two grid #48893

    ekaperintis
    Participant

    this is my code …


    <!DOCTYPE html>
    <html>
    <head>
    <title>Pencatatan Meteran</title>
    <link rel="stylesheet" href="../../jqwidgets304/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets304/styles/jqx.ui-start.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets304/styles/jqx.ui-sunny.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets304/styles/jqx.ui-redmond.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets304/jqxcalendar.js"></script>
    <style type="text/css">
    .jqx-grid-load{background-image: url(../../loading/loading45.gif);}
    .hidden{visibility:hidden;}
    .visible{visibility:visible;}
    .show_hide {
    display:none;
    }
    .jqx-grid-content
    {
    cursor: pointer;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme2 = 'ui-start';
    var theme = 'ui-redmond';
    var theme3 = 'ui-sunny';
    var jenabled;
    var ostatus;
    var oIndex;
    var oHeader;
    var oDetail;
    var oPlgCD;
    var oBadCD;

    $("#detail, #transfer, #foto").jqxCheckBox({ width: 120, height: 25, theme: theme, checked: true});
    $("#kubik1, #kubik2").jqxInput({height: 23, width: 70, theme: theme});

    var gambar = function (row, column, value) {
    var jbad_cd = $('#jqxgrid').jqxGrid('getrowdata', row).bad_cd;
    var jgobad = $('#jqxgrid').jqxGrid('getrowdata', row).gobad;
    var jresult = jbad_cd.substring(0,1);

    if (jresult < 5 && jgobad=='0') {
    jicon='0';
    }else {
    jicon='1';
    }

    var imgurl = '../../images/' + jicon + '.png';
    var img = '';
    return img;
    };

    // ---> Date Bill Tahun Bulan Rekening
    function cek_Date_bill() {
    var kode = $("#searchField").val();
    var jdate =$("#jtabul").jqxDateTimeInput('getDate');
    var jtanggal = $.jqx.dataFormat.formatdate(jdate, 'yyyyMM');
    $.ajax({
    type: 'GET',
    url: 'date_bill.php',
    data : "nopel="+ kode,
    dataType: "json",
    success: function(data) {
    if(data.date_bill != jtanggal){
    jenabled=0;
    }else {
    jenabled=1;
    }
    },
    });
    }

    function beep() {
    var beepOne = $("#beep-one")[0];
    beepOne.play();
    }
    // ---> Untuk Angka
    $("#searchField, #kubik1, #kubik2, #jtabul").keydown(function(event) {
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 ||
    (event.keyCode == 65 && event.ctrlKey === true) ||
    (event.keyCode >= 35 && event.keyCode <= 39)) {
    return false;
    }else{
    if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)){
    event.preventDefault();
    }
    }
    });

    var cellbeginedit = function (row, datafield, value) {
    if (jenabled == 0) {
    if (row >0 || row ==0 ) return false;
    }
    }

    var cellsrenderer = function (row, column, value, defaultHtml) {
    if (jenabled==0) {
    if (row >= 0 ) {
    var element = $(defaultHtml);
    element.css('color', '#999');
    return element[0].outerHTML;
    }
    return defaultHtml;
    }
    }

    $("#transfer").bind('change', function (event) {
    var checked = event.args.checked;
    if (checked) {
    $("#kubik1").toggleClass('hidden');
    $("#kubik1").toggleClass('visible');
    $("#kubik2").toggleClass('hidden');
    $("#kubik2").toggleClass('visible');
    $("#kubik1").val('0');
    $("#kubik2").val('0');
    $("#kubik1").focus();
    ostatus='';
    }
    else if (false == checked) {
    ostatus='13';
    $("#kubik1").toggleClass('hidden');
    $("#kubik1").toggleClass('visible');
    $("#kubik2").toggleClass('hidden');
    $("#kubik2").toggleClass('visible');
    $("#kubik1").val('0');
    $("#kubik2").val('0');
    $("#kubik1").focus();
    $("#kubik1").jqxInput("selectAll");

    }
    });

    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'urut', type: 'int' },
    { name: 'plg_cd', type: 'int' },
    { name: 'nopel', type: 'string' },
    { name: 'nama', type: 'string' },
    { name: 'alamat', type: 'string' },
    { name: 'tarif_cd', type: 'string' },
    { name: 'tr_date', type: 'date'},
    { name: 'awal', type: 'int' },
    { name: 'akhir', type: 'int'},
    { name: 'kubik_asli', type: 'int'},
    { name: 'bad_cd'},
    { name: 'gobad'},
    { name: 'status', type: 'bool'},
    { name: 'digit' },
    { name: 'rata2' }
    ],
    cache: true,
    async: true,
    id: 'plg_cd',
    url: "st_dsml.php",
    };

    var dataAdapter = new $.jqx.dataAdapter(source,
    {
    formatData: function (data) {
    $('body').css('cursor', 'wait');
    var juser_id = localStorage.getItem('user_id');
    data.user_id = juser_id;
    data.nopel = $("#searchField").val();
    data.bad = ostatus;
    data.kubik1 = $("#kubik1").val();
    data.kubik2 = $("#kubik2").val();
    data.tabul = $("#jtabul").val();
    return data;
    },

    loadComplete: function (data) {
    $('body').css('cursor', 'auto');
    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
    $("#jumlahRecord").val(rowscount);

    if (data != '') {
    $('body').css('cursor', 'auto');
    $('#jqxgrid').jqxGrid('focus');
    $("#jqxgrid").jqxGrid('selectcell', 0, "akhir");
    }else{
    alert("Data DSML Tidak Terdapat dalam System ...!!!");
    $('body').css('cursor', 'auto');
    }
    },

    loadError: function(jqXHR, status, error){
    $('body').css('cursor', 'auto');
    $("#jtabul input").focus();
    },
    });

    $('#kubik1').bind('keydown', function (e) {
    if (e.keyCode == 13) {
    var jkubik=$('#kubik1').val();
    if (jkubik=='') {
    alert ("Kubik2 Tidak Boleh Kosong");
    }else {
    $('#kubik2').focus();
    $("#kubik2").jqxInput("selectAll");
    }
    }
    });

    $('#kubik2').bind('keydown', function (e) {
    if (e.keyCode == 13) {
    var jkubik=$('#kubik2').val();
    var jnopel=$("#searchField").val();
    if (jkubik=='' || jnopel=='') {
    alert ("Kubik 2 dan Nopel Tidak Boleh Kosong");
    $("#searchField").focus();
    }else {
    $("#jqxgrid").jqxGrid('clear');
    $('body').css('cursor', 'wait');
    dataAdapter.dataBind();
    return true;
    }
    }
    });

    $("#jqxgrid").jqxGrid(
    {
    height: 570,
    width:'100%',
    source: dataAdapter,
    theme: theme3,
    showdefaultloadelement: false,
    ready: function () {
    $("#jqxgrid").jqxGrid('hidecolumn', 'plg_cd');
    $("#jqxgrid").jqxGrid('hidecolumn', 'nama');
    $("#jqxgrid").jqxGrid('hidecolumn', 'alamat');
    $("#jqxgrid").jqxGrid('hidecolumn', 'tarif_cd');
    $("#jqxgrid").jqxGrid('hidecolumn', 'digit');
    $("#jqxgrid").jqxGrid('hidecolumn', 'rata2');
    },

    columns: [
    { text: 'No', datafield: 'urut', align:'center', cellsalign: 'center', editable:false, width: 30, pinned: true },
    { text: 'Plg CD', datafield: 'plg_cd', align:'center', cellsalign: 'center', editable:false, width: 70 },
    { text: 'Nopel', datafield: 'nopel', align:'center', cellsalign: 'center', editable:false, width: 100,cellbeginedit: cellbeginedit },
    { text: 'Nama', datafield: 'nama', align:'center', editable:false, width: 40 },
    { text: 'Alamat', datafield: 'alamat', align:'center', editable:false, width: 40 },
    { text: 'Tarif', datafield: 'tarif_cd', align:'center', editable:false, width: 40 },
    { text: 'Tanggal', datafield: 'tr_date', align:'center', cellsalign: 'center', editable:false, width: 80, cellsformat: 'dd/MM/yy', cellbeginedit: cellbeginedit},
    { text: 'Awal', datafield: 'awal', align:'center', editable:false, cellsalign: 'right', width: 70, columntype: 'numberinput', cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
    { text: 'Akhir', datafield: 'akhir', align:'center', width: 70, cellsalign: 'right', columntype: 'numberinput',
    createeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ decimalDigits: 0, digits: 9 });
    }, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer
    },
    { text: 'Kubik', datafield: 'kubik_asli', align:'center', cellsalign: 'right', editable:false, width: 70, columntype: 'numberinput', cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer},
    { text: 'Masalah', datafield: 'bad_cd', align:'center', cellsalign: 'center', width: 70, cellbeginedit: cellbeginedit},
    { text: 'Status', datafield: 'gobad', align:'center', width: 70, editable:false, cellbeginedit: cellbeginedit,cellsrenderer: gambar},
    { text: 'Proses', datafield: 'status', align:'center', columntype: 'checkbox', width: 55 },
    { text: 'Digit', datafield: 'digit', align:'center', cellsalign: 'center', width: 70},
    { text: 'Rata2', datafield: 'rata2', align:'center', cellsalign: 'center', width: 70},
    ],

    showtoolbar: true,
    toolbarheight: 40,
    editable: true,
    selectionmode: 'singlecell',
    showstatusbar: true,
    renderstatusbar: function (statusbar) {
    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
    var badButton = $("<div style='float: left; margin-left: 5px;cursor: pointer;'><span style='margin-left: 4px; position: relative; top: -2px;'></span></div>");

    var printButton = $("<div style='float: left; margin-left: 5px;cursor: pointer;'><span style='margin-left: 4px; position: relative; top: -2px;'></span></div>");

    var transferButton = $("<div style='float: left; margin-left: 5px;cursor: pointer;'><span style='margin-left: 4px; position: relative; top: -2px;'></span></div>");

    var blmcatatButton = $("<div style='float: left; margin-left: 5px;cursor: pointer;'><span style='margin-left: 4px; position: relative; top: -2px;'></span></div>");

    var cmdKeluar = $("<div style='float: left; margin-left: 5px;cursor: pointer;'><span style='margin-left: 4px; position: relative; top: -2px;'></span></div>");

    var jumlahRecord = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='jumlahRecord' style='height: 23px; float: right; text-align:center; width: 50px; top: -2px;' maxlength='10' readonly />");

    badButton.jqxTooltip({ theme: theme, position: 'top-right', content: 'BAD Data' });
    printButton.jqxTooltip({ theme: theme, position: 'top-right', content: 'Cetak Data' });
    transferButton.jqxTooltip({ theme: theme, position: 'top-right', content: 'Belum Transfer' });
    blmcatatButton.jqxTooltip({ theme: theme, position: 'top-right', content: 'Belum Catat' });
    cmdKeluar.jqxTooltip({ theme: theme, position: 'top-right', content: 'Keluar' });

    container.append(badButton);
    container.append(transferButton);
    container.append(blmcatatButton);
    container.append(printButton);
    container.append(jumlahRecord);
    container.append(cmdKeluar);
    statusbar.append(container);

    badButton.jqxButton({ theme: theme, width: 25, height: 25 });
    printButton.jqxButton({ theme: theme, width: 25, height: 25 });
    transferButton.jqxButton({ theme: theme, width: 25, height: 25 });
    blmcatatButton.jqxButton({ theme: theme, width: 25, height: 25 });
    cmdKeluar.jqxButton({ theme: theme, width: 27, height: 25 });

    badButton.click(function (event) {
    $('#jqxgrid').jqxGrid('clear');
    ostatus='1';
    oHeader ='Data Masalah';
    dataAdapter.dataBind();
    ostatus='';
    });

    transferButton.click(function (event) {
    $('#jqxgrid').jqxGrid('clear');
    ostatus='11';
    oHeader ='Belum Transfer';
    dataAdapter.dataBind();
    ostatus='';
    });

    blmcatatButton.click(function (event) {
    $('#jqxgrid').jqxGrid('clear');
    ostatus='12';
    oHeader = 'Belum Catat';
    dataAdapter.dataBind();
    ostatus='';
    });

    printButton.click(function (event) {
    var jNopel=$("#searchField").val();
    var jgobad = $('#jqxgrid').jqxGrid('getrowdata', 0).gobad;
    var juser_id = localStorage.getItem('user_id');
    var Header = oHeader;

    if (Header=='Data Masalah') {
    var url = "cetak_dsml_bad.php?nopel="+jNopel +"&user_id="+juser_id
    window.open(url, "_blank");
    }else {
    var url ="cetak_dsml.php?user_id="+juser_id;
    window.open(url, "_blank");
    }
    });

    cmdKeluar.click(function (event) {
    window.close();
    });
    },
    statusbarheight: 40,
    altrows: true,
    rendertoolbar: function (toolbar) {
    var me = this;
    var container = $("<div style='margin: 5px;'></div>");
    var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'> | Pencarian Nopel | </span>");

    var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' style='height: 23px; float: left; width: 100px;' maxlength='10' />");

    var jrata2 = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='rata2' style='height: 23px; float: left; text-align:center; width: 50px;' maxlength='10' readonly />");

    var jspan = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'> | Rata2: |</span>");

    var jspantabul = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'> | Tabul: |</span>");

    var jtabul = $("<div id='jtabul' style='height: 23px; float: left; text-align:center; width: 50px;' />").jqxDateTimeInput({width: '120px', showCalendarButton: false, height: '25px', theme: theme, formatString: "dd-MM-yyyy"});

    toolbar.append(container);
    container.append(jspantabul);
    container.append(jtabul);

    container.append(span);
    container.append(input);

    container.append(jspan);
    container.append(jrata2);

    if (theme != "") {
    input.addClass('jqx-widget-content-' + theme);
    input.addClass('jqx-rc-all-' + theme);
    jrata2.addClass('jqx-widget-content-' + theme);
    jrata2.addClass('jqx-rc-all-' + theme);
    }
    input.bind('keydown', function (e) {
    if (e.keyCode == 13) {
    $("#jqxgrid").jqxGrid('clear');
    $('body').css('cursor', 'wait');

    cek_Date_bill();
    dataAdapter.dataBind();

    oHeader=''
    return true;
    }
    });

    jtabul.bind('keydown', function (e) {
    if (e.keyCode == 13) {
    $("#searchField").focus();
    }
    });
    }
    });

    function simpanBad() {
    var irow = oIndex
    var dataRecord = $("#jqxgrid").jqxGrid('getrowdata',irow);
    var date = $("#jtabul").jqxDateTimeInput('getDate');
    var formattedDate = $.jqx.dataFormat.formatdate(date, 'yyyyMM');
    var tanggal = $.jqx.dataFormat.formatdate(date, 'yyyy-MM-dd');
    var tabul = formattedDate;
    var user_id = sessionStorage.getItem('user_id');
    var data = "update=true&bad_cd=" + oBadCD;
    data = data + "&nopel=" + dataRecord.nopel + "&akhir=" + dataRecord.akhir;
    data = data + "&kubik_asli=" + dataRecord.kubik_asli + "&tabul=" + tabul;
    data = data + "&tanggal=" + tanggal + "&user_id=" + user_id;

    $.ajax({
    dataType: 'json',
    url: 'update_dsml.php',
    data: data,
    success: function (data) {
    //
    }
    });
    }

    $("#jqxgrid").on('cellendedit', function (event) {
    var args = event.args;
    var jcoloum = args.datafield;
    var row = args.rowindex;
    var jvalue = args.value;

    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
    var jdigit = $('#jqxgrid').jqxGrid('getcellvalue', row, "digit");
    var AngkaAwal = $('#jqxgrid').jqxGrid('getcellvalue', row, "awal");

    var date = $("#jtabul").jqxDateTimeInput('getDate');
    var jtanggal = $.jqx.dataFormat.formatdate(date, 'yyyy-MM-dd');

    oIndex =row;
    if (jcoloum == 'akhir'){
    var AngkaAkhir = args.value;
    if (AngkaAkhir < AngkaAwal) {
    var HitungKubikasi = (Math.pow(10, jdigit)+parseInt(AngkaAkhir))-parseInt(AngkaAwal);
    $("#jqxgrid").jqxGrid('setcellvalue', row, 'bad_cd','5F');
    $("#jqxgrid").jqxGrid('setcellvalue', row, 'gobad','1');
    $("#jqxgrid").jqxGrid('setcellvalue', row, 'kubik_asli',HitungKubikasi);
    $("#jqxgrid").jqxGrid('setcellvalue', row, 'tr_date',jtanggal);
    beep();
    }
    else if (AngkaAkhir > AngkaAwal) {
    var HitungKubikasi=parseInt(AngkaAkhir)-parseInt(AngkaAwal);
    $("#jqxgrid").jqxGrid('setcellvalue', row, 'bad_cd','00');
    $("#jqxgrid").jqxGrid('setcellvalue', row, 'gobad','0');
    $("#jqxgrid").jqxGrid('setcellvalue', row, 'kubik_asli',HitungKubikasi);
    $("#jqxgrid").jqxGrid('setcellvalue', row, 'tr_date',jtanggal);
    }
    else if (AngkaAkhir == AngkaAwal) {
    var HitungKubikasi=parseInt(AngkaAkhir)-parseInt(AngkaAwal);
    $("#jqxgrid").jqxGrid('setcellvalue', row, 'bad_cd','00');
    $("#jqxgrid").jqxGrid('setcellvalue', row, 'gobad','0');
    $("#jqxgrid").jqxGrid('setcellvalue', row, 'kubik_asli',HitungKubikasi);
    $("#jqxgrid").jqxGrid('setcellvalue', row, 'tr_date',jtanggal);
    }

    $("#jqxgrid").jqxGrid('selectcell', (row), "bad_cd");
    }

    if (jcoloum == 'bad_cd'){
    if (jcoloum == 'bad_cd' && row == rowscount-1 ){
    $("#jqxgrid").jqxGrid('selectcell', row, "akhir");
    oBadCD = jvalue;
    simpanBad();
    }else{
    $("#jqxgrid").jqxGrid('selectcell', (1+args.rowindex), "akhir");
    oBadCD = jvalue;
    simpanBad();
    }
    $("#jqxgrid").jqxGrid('ensurerowvisible', row+2);
    }
    });

    $("#jqxgrid").on('cellselect', function (event) {
    var args = event.args;
    var row = args.rowindex;

    var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);

    var dataRecord = $("#jqxgrid").jqxGrid('getrowdata',row);
    var jplg_cd =dataRecord.plg_cd;
    var jnama = dataRecord.nama;
    var jalamat =dataRecord.alamat;
    var jtarif = dataRecord.tarif_cd;
    var jrata2 = dataRecord.rata2;
    var jketerangan = "Nama Pelanggan : " + jnama + "->" + jalamat + " Tarif : " + jtarif

    $("#nama").html(jketerangan);

    oPlgCD=jplg_cd;
    $("#rata2").val(jrata2);

    if (oDetail=='0') {
    detailAdapter.dataBind();
    }
    });

    $('#badButton').click(function(){
    $('#jqxgrid').jqxGrid('clear');
    ostatus='1';
    dataAdapter.dataBind();
    ostatus='';
    });

    $(".div").hide();

    $("#detail").on('change', function (event) {
    var checked = event.args.checked;
    if (checked) {
    $("#detail").find('span')[1].innerHTML = 'No History';
    oDetail='1';
    $('#detailGrid').jqxGrid('clear');
    $('#jqxgrid').jqxGrid({ width: 1200 });
    $(".div").hide();
    }
    else {
    $("#detail").find('span')[1].innerHTML = 'History';

    oDetail='0';

    $('#jqxgrid').jqxGrid({ width: 700, height: 570 });
    $('#detailGrid').jqxGrid({ width: 500, height: 570 });
    $("#detailGrid").jqxGrid('autoresizecolumns');
    $(".div").show();
    }
    });

    $("#detailGrid").jqxGrid('autoresizecolumns');

    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'urut'},
    { name: 'Bulan'},
    { name: 'awal'},
    { name: 'akhir'},
    { name: 'kubik_asli'},
    { name: 'Nominal'},
    { name: 'angsuran'},
    { name: 'koreksi'}
    ],
    async: true,
    url: "st_history.php",
    id: 'plg_cd',
    };

    var detailAdapter = new $.jqx.dataAdapter(source,
    {
    formatData: function (data,status,xhr) {
    var cekdata= oPlgCD;
    if (cekdata !=''){
    data.plg_cd = oPlgCD;
    }
    return data;
    },

    loadComplete: function (data) {
    $('body').css('cursor', 'auto');
    $("#detailGrid").jqxGrid('autoresizecolumns');
    },
    }
    );

    $("#detailGrid").jqxGrid(
    {
    height: 570,
    width: 200,
    source: detailAdapter,
    theme: theme2,
    keyboardnavigation: false,
    showtoolbar: true,
    toolbarheight: 40,
    showstatusbar: true,
    statusbarheight: 40,
    showdefaultloadelement: false,
    //columnsreorder: true,
    altrows: true,
    ready: function () {
    $("#detailGrid").jqxGrid('autoresizecolumns');
    },
    columns: [
    { text: 'No', datafield: 'urut', align:'center', cellsalign: 'center' },
    { text: 'Bulan', datafield: 'Bulan', align:'center', cellsalign: 'center' },
    { text: 'Awal', datafield: 'awal', align:'center',cellsalign: 'right' },
    { text: 'Akhir', datafield: 'akhir', align:'center',cellsalign: 'right' },
    { text: 'Kubik', datafield: 'kubik_asli', align:'center' ,cellsalign: 'right' },
    { text: 'Nominal', datafield: 'Nominal', align:'center' ,cellsalign: 'right' },
    { text: 'Angsuran', datafield: 'angsuran', align:'center' ,cellsalign: 'right' },
    { text: 'Koreksi', datafield: 'koreksi', align:'center' ,cellsalign: 'right' },
    ],

    rendertoolbar: function (toolbar) {
    var me = this;
    var container = $("<div style='margin: 5px;'></div>");
    var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Historis Pelanggan </span>");
    toolbar.append(container);
    container.append(span);
    },

    renderstatusbar: function (statusbar) {
    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
    var fotoButton = $("<div style='float: left; margin-left: 5px;cursor: pointer; margin-top: 5px;'><span style='margin-left: 4px; position: relative; margin-top: 5px;'>Tampilkan Foto</span></div>").jqxCheckBox({ width: 120, height: 25, theme: theme, checked: true});
    container.append(fotoButton);

    statusbar.append(container);
    }
    });
    });
    </script>

    <script>
    var beepOne = $("#beep-one")[0];
    $("#nav-one a")
    .mouseenter(function() {
    beepOne.play();
    });
    </script>

    </head>

    <body class='default'>

    <div style="color: blue; font-size:14px; font-family: Tahoma;">
    <table width="100%" border="0" align="center">
    <tr>
    <td width="72%"> <div style="font-size:15px;" id="nama">Nama Pelanggan : </div></td>
    <td id='detail'><span>No History</span></td>
    <td id='transfer'>Evaluasi</td>
    <td><input id='kubik1' class='hidden' type='text' /></td>
    <td><input id='kubik2' class='hidden' type='text' /></td>
    </tr>
    </table>
    </div>
    <div>
    <div style="float:left; clear:both; width:100%;" id="jqxgrid"> </div>
    <div style="float:right; width:40%;" class="div" id="detailGrid"></div>
    <div><audio id="beep-one" preload="auto">
    <source src="audio/beep3.wav"></source>
    </audio>
    </div>
    </div>
    </body>
    </html>

    February 4, 2014 at 7:44 am hide two grid #48905

    Peter Stoev
    Keymaster

    Hi ekaperintis,

    You can use the jQuery’s hide() method to hide HTML Elements. To hide a Grid, select its DIV tag with jQuery and call the jQuery’s hide() method.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    February 4, 2014 at 11:47 am hide two grid #48931

    ekaperintis
    Participant

    Oke, thanks …

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.