jQuery UI Widgets Forums Grid on jqxgrid cell click open new jqxgrid in popupwind

This topic contains 3 replies, has 4 voices, and was last updated by  Hristo 5 years, 3 months ago.

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

  • fatima12
    Participant

    on main grid cells click a new grid is open in a popup window but its not showing loading icon while binding data.please help.when i write popup grid code in function its not binding on clcik button .data is not binding and grid become hang.
    <script type=”text/javascript”>

    $(document).ready(function () {
    var accountDataTable;
    var dataTable;
    var AccountNameList = { accountname: ‘dfghjk’, accountname: ‘234567’ };
    var AccountCodeList = { accountcode: ’02-01-001-001-00002′, accountcode: ’02-01-001-001-00002′ };
    var RefList = [];
    var balanceDataTable;

    ////////////////////////////////////////// grid main////////////////////////////////////////////////////////////////////////////////////////////
    var data = {};
    var code_ = “0”;

    var source =
    {
    localdata: data,
    datatype: “local”,
    datafields:
    [
    { name: ‘AccountCode’, type: ‘string’ },
    { name: ‘AccountName’, type: ‘string’ },
    { name: ‘RefNo’, type: ‘string’ },
    { name: ‘Actions’, type: ‘string’ },
    { name: ‘CheqNo’, type: ‘string’ },
    { name: ‘CheqDate’, type: ‘string’ },
    { name: ‘Remarks’, type: ‘string’ },
    { name: ‘RefBillAmt’, type: ‘string’ },
    { name: ‘Amount’, type: ‘number’ }

    ],
    addrow: function (rowid, rowdata, position, commit) {
    // synchronize with the server – send insert command
    // call commit with parameter true if the synchronization with the server is successful
    //and with parameter false if the synchronization failed.
    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
    commit(true);
    //CalculateTotal();
    },
    deleterow: function (rowid, commit) {
    // synchronize with the server – send delete command
    // call commit with parameter true if the synchronization with the server is successful
    //and with parameter false if the synchronization failed.
    commit(true);
    //CalculateTotal();
    },
    updaterow: function (rowid, newdata, commit) {
    // synchronize with the server – send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failed.
    commit(true);
    //CalculateTotal();
    }
    };
    var isedit = false;
    var dataAdapter = new $.jqx.dataAdapter(source);
    var jqxGridHeight = 260;
    if (screen.height >= 1024)
    jqxGridHeight = 300;
    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: ‘99%’,
    height: jqxGridHeight,
    source: dataAdapter,
    showtoolbar: true,
    showstatusbar: true,
    statusbarheight: 25,
    showaggregates: true,
    columnsresize: true,
    editable: true,
    rendertoolbar: function (toolbar) {
    var me = this;
    var container = $(“<div id=\’imgRow\’ style=’margin: 5px;’></div>”);
    toolbar.append(container);
    container.append(‘‘);
    container.append(‘ ‘);
    container.append(‘‘);
    container.append(‘‘);
    container.append(‘ ‘);
    container.append(‘ ‘);

    $(“#addrowbutton”).jqxButton();
    $(“#imgdebitnotelist”).jqxButton();
    $(“#WindowRepeat”).jqxButton();
    $(“#WindowExcel”).jqxButton();
    $(“#attachment”).jqxButton();
    $(“#AccountBalance”).jqxButton();

    },

    columns: [

    { text: ”, datafield: ”, width: 18, columntype: ‘number’, cellsrenderer: function () {
    return ‘<div style=”width: 100%”>remove</div>’;
    }
    },
    { text: ‘Account Code’,datafield: ‘AccountCode’,editable: true,cellEdit:true, width: 120 ,

    columntype: ‘combobox’,
    createeditor: function (row, column, editor) {
    var list = AccountCodeList;
    editor.jqxComboBox({ dropDownHeight: 200, source: list, promptText: “Please Choose:” });
    },
    cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {

    //RefNo= [];
    $(‘#divdebitnotegrid’).jqxGrid(‘clear’);

    }
    },
    { text: ‘Account Name’, datafield: ‘AccountName’, editable: true,cellEdit:true, width: 150,

    columntype: ‘combobox’,
    createeditor: function (row, column, editor) {
    var list = AccountNameList;
    editor.jqxComboBox({ dropDownHeight: 200, source: list, promptText: “Please Choose:” });
    },
    cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {

    RefNo= [];
    $(‘#divdebitnotegrid’).jqxGrid(‘clear’);

    }
    },
    { text: ‘Amount’, datafield: ‘Amount’,cellsformat: ‘d2’, width: 110, cellsalign: ‘right’, aggregates: [‘sum’]},
    { text: ‘Ref. No.’, datafield: ‘RefNo’, width: 100 },
    { text: ‘Action’, datafield: ‘Actions’ , editable: true,cellEdit:true, width: 80,

    columntype: ‘combobox’,
    validation: function (cell, value) {
    if (value == “”)
    return true;

    if (value==”NORM” || value==”DFO” || value==”AP”) {
    return true;
    }
    else{
    return { result: false, message: “Invalid Action Value” };
    }

    },
    createeditor: function (row, column, editor) {
    // assign a new data source to the combobox.
    var list = [‘NORM’, ‘DFO’, ‘AP’];
    editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: “Please Choose:” });
    },
    // update the editor’s value before saving it.
    cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
    // return the old value, if the new value is empty.
    if (newvalue == “”)
    {
    return “”;
    }
    }

    },
    { text: ‘Cheq No.’, datafield: ‘CheqNo’, width: 80 },
    { text: ‘Cheq Date’, datafield: ‘CheqDate’,columntype: ‘datetimeinput’,cellsformat: ‘dd-MM-yyyy’, width: 80 },
    { text: ‘Remarks’, datafield: ‘Remarks’ },
    { text: ‘Ref Bill Amt’,width: 110, datafield: ‘RefBillAmt’ }

    ]

    });

    /////////////////////////////////////////////////////Grid Click Events/////////////////////////////////////////////////////////////////////////////
    //////// here i m opening popupwindow with empty grid.
    $(“#jqxgrid”).on(“celldoubleclick”, function (event) {
    var args = event.args;
    var columnindex = args.columnindex;

    if (columnindex == 4) {
    var rowBoundIndex = args.rowindex;
    var rowid = $(‘#jqxgrid’).jqxGrid(‘getrowid’, rowBoundIndex);
    // @param row id
    var data = $(‘#jqxgrid’).jqxGrid(‘getrowdatabyid’, rowid);
    $(‘#divdebitnotegrid’).jqxGrid(‘clear’);
    $(“#popupaccountcode”).html(data.AccountCode);
    $(“#popupaccountname”).html(data.AccountName);
    $(“#popuppaymentamount”).html(data.Amount);
    $(“#popupselectedtotal”).html(”)
    globaltotal = 0;
    /// here i m opening second grid in popup window,but empty grid is not showing in popup
    $(“#popupwindow2”).jqxWindow(‘open’);

    }
    });

    ///////////////////////////////////////////////////// grid ref////////////////////////////////////////////////////////////////////////////////
    var globaltotal = 0;
    var DebitNote_data = {};

    //this is my second grid which i m tring to open in popup window with empty row.then when some button in popup window clcick so it bind data.
    function grid(){
    $(“#divdebitnotegrid”).jqxGrid(‘clear’);
    DebitNote_source =
    {
    localdata: DebitNote_data,
    datatype: “json”,
    datafields:
    [
    { name: ‘CB’, type: ‘string’ },
    { name: ‘RefNo’, type: ‘string’ },
    { name: ‘RefAmount’, type: ‘number’ },
    { name: ‘Amount’, type: ‘number’ },
    { name: ‘Action’, type: ‘string’ }

    ],
    addrow: function (rowid, rowdata, position, commit) {
    commit(true);
    },
    deleterow: function (rowid, commit) {
    commit(true);
    },
    updaterow: function (rowid, newdata, commit) {
    commit(true);
    }
    };
    var DebitNote_dataAdapter = new $.jqx.dataAdapter(DebitNote_source);
    $(“#divdebitnotegrid”).jqxGrid(
    {
    width: ‘420px’,
    height: ‘370px’,
    source: DebitNote_dataAdapter,
    showaggregates: true,
    columnsresize: true,
    editable: true,
    showfilterrow: true,
    pageable: true,
    pagesize: 10,
    filterable: true,
    showstatusbar: true,
    statusbarheight: 25,
    columns: [
    { text: ”, columntype: ‘checkbox’, datafield: ‘CB’, width: 50 },
    { text: ‘Ref. No.’, datafield: ‘RefNo’, width: 120, editable: false },
    { text: ‘Ref. Amount’, datafield: ‘RefAmount’, cellsformat: ‘d2’, width: 120, cellsalign: ‘right’ },
    {
    text: ‘Amount’, datafield: ‘Amount’, cellsformat: ‘d2’, width: 130, cellsalign: ‘right’
    },
    { text: ‘Action’, datafield: ‘Action’, width: 50 },
    ]
    });

    }

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    ///here i am giving data to grid on some button clcik.
    $(“#db”).click(function () {
    debugger;

    alert(2);

    $(“#divdebitnotegrid”).jqxGrid(‘showloadelement’);
    $.ajax({
    type: “Post”,
    dataType: “json”,
    url: “List.ashx”,
    data: {
    type: ‘GetTest’,
    ListType: ‘Payment’
    },
    success: function (data) {
    debugger;
    //DebitNote_data = data.AccountANDDebitNote.dataTable;
    // DebitNote_source.localdata = data.AccountANDDebitNote.dataTable;
    // $(“#divdebitnotegrid”).jqxGrid(‘updatebounddata’, ‘cells’);
    //grid();

    //$(“#divdebitnotegrid”).on(‘bindingcomplete’, function (event) {
    // alert(1);
    //$(“#divdebitnotegrid”).jqxGrid(‘updatebounddata’, ‘cells’);
    $(“#divdebitnotegrid”).jqxGrid(‘hideloadelement’);
    //});

    },
    error: function (e) {
    alert(“some error” + e.message);
    $(“#jqxgrid”).jqxGrid({ disabled: false });
    }
    });

    })
    $(document).ready(function () {

    $(‘#db’).bind(“click”, function () {
    alert(1);

    $(“#divdebitnotegrid”).jqxGrid(‘showloadelement’);
    $.ajax({
    type: “Post”,
    dataType: “json”,
    url: “List.ashx”,
    data: {
    type: ‘GetTest’,
    ListType: ‘Payment’
    },
    success: function (data) {
    debugger;
    DebitNote_data = data.AccountANDDebitNote.dataTable;
    $(“#divdebitnotegrid”).jqxGrid(‘clear’);
    DebitNote_source =
    {
    localdata: DebitNote_data,
    datatype: “json”,
    datafields:
    [
    { name: ‘CB’, type: ‘string’ },
    { name: ‘RefNo’, type: ‘string’ },
    { name: ‘RefAmount’, type: ‘number’ },
    { name: ‘Amount’, type: ‘number’ },
    { name: ‘Action’, type: ‘string’ }

    ],
    addrow: function (rowid, rowdata, position, commit) {
    commit(true);
    },
    deleterow: function (rowid, commit) {
    commit(true);
    },
    updaterow: function (rowid, newdata, commit) {
    commit(true);
    }
    };
    var DebitNote_dataAdapter = new $.jqx.dataAdapter(DebitNote_source);
    $(“#divdebitnotegrid”).jqxGrid(
    {
    width: ‘420px’,
    height: ‘370px’,
    source: DebitNote_dataAdapter,
    showaggregates: true,
    columnsresize: true,
    editable: true,
    showfilterrow: true,
    pageable: true,
    pagesize: 10,
    filterable: true,
    showstatusbar: true,
    statusbarheight: 25,
    columns: [
    { text: ”, columntype: ‘checkbox’, datafield: ‘CB’, width: 50 },
    { text: ‘Ref. No.’, datafield: ‘RefNo’, width: 120, editable: false },
    { text: ‘Ref. Amount’, datafield: ‘RefAmount’, cellsformat: ‘d2’, width: 120, cellsalign: ‘right’ },
    {
    text: ‘Amount’, datafield: ‘Amount’, cellsformat: ‘d2’, width: 130, cellsalign: ‘right’, validation: function (cell, value) {

    if (value == “”)
    return { result: false, message: “Invalid Amount” };

    var rowBoundIndex = cell.row;
    var rowid = $(‘#divdebitnotegrid’).jqxGrid(‘getrowid’, rowBoundIndex);
    var data = $(‘#divdebitnotegrid’).jqxGrid(‘getrowdatabyid’, rowid);
    if ((parseFloat(data.RefAmount) > 0 && data.Action == ‘NORM’) && (parseFloat(value) > parseFloat(data.RefAmount) || parseFloat(value) < 0))
    return { result: false, message: “Invalid Amount” };
    else if ((parseFloat(data.RefAmount) < 0 && data.Action == ‘NORM’) && (parseFloat(value) > 0 || Math.abs(parseFloat(value)) > Math.abs(parseFloat(data.RefAmount))))
    return { result: false, message: “Invalid Amount” };

    /*if(data.Action==’DFO’ && (parseFloat(value)>0 || Math.abs(parseFloat(value)) > Math.abs(parseFloat(data.RefAmount)) ) )
    return { result: false, message:”Invalid Amount” };
    */
    if ((data.Action == ‘DFO’) && (Math.abs(parseFloat(value)) > Math.abs(parseFloat(data.RefAmount))))
    return { result: false, message: “Invalid Amount” };
    /*else if( data.Action==’DFO’ && ( parseFloat(value)<0 || Math.abs(parseFloat(value)) > Math.abs(parseFloat(data.RefAmount)) ) )
    return { result: false, message:”Invalid Amount” };*/
    return true;

    }
    },
    { text: ‘Action’, datafield: ‘Action’, width: 50 },
    ]
    });

    },
    error: function (e) {
    alert(“some error” + e.message);
    $(“#jqxgrid”).jqxGrid({ disabled: false });
    }
    });
    });

    });
    </script>


    Peter Stoev
    Keymaster

    Hi fatima12,

    It is possible that the loading icon is with lower z-index. You can update the CSS setting for the Grid loading icon and set the z-index to a very high value like 99999 i.e higher than the popup window’s z-index.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com


    Gaurav@123
    Participant

    Hello everyone,
    I’ve implemented the tree grid hierarchy from the below link.
    https://www.c-sharpcorner.com/article/using-tree-grid-with-asp-net-mvc-4/
    Now the thing is I want to add the new column icon as “View” and on click on that particular view cell it should popup the model and show the existing image inside in it.

    NOTE: In that link the tree grid is generated using with entity framework and i have done without entity framework.

    PLease anyone there to help me ??


    Hristo
    Participant

    Hello Gaurav@123,

    You could find a similar discussion below that already is started:
    https://www.jqwidgets.com/community/topic/jqxscrollview-image-rotate-left-and-right/#post-107126
    Also, you will find there some suggestions and hints.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.