jQuery UI Widgets Forums Grid nestedGrid

This topic contains 4 replies, has 2 voices, and was last updated by  reyhane90 9 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    nestedGrid Posts
  • nestedGrid #79802

    reyhane90
    Participant

    I have a nestedGrid I can not bind inside the grid
    this is my code

    $(document).ready(function () {

    var data=[{“Counter”:”1″,”countIndex”:”5″,”P_Index”:””,”EFQMPivotID”:”1″,”Title”:”برنامه نقش و ساختار دولت”,”Weight”:”240.00000000″,”Description”:””,”id1″:”1″},{“Counter”:”2″,”countIndex”:”8″,”P_Index”:””,”EFQMPivotID”:”2″,”Title”:”برنامه دولت الكترونيك و هوشمندسازی اداری”,”Weight”:”200.00000000″,”Description”:””,”id1″:”2″},{“Counter”:”3″,”countIndex”:”12″,”P_Index”:””,”EFQMPivotID”:”3″,”Title”:”برنامه مدیریت سرمایه انسانی”,”Weight”:”200.00000000″,”Description”:””,”id1″:”3″},{“Counter”:”4″,”countIndex”:”5″,”P_Index”:””,”EFQMPivotID”:”4″,”Title”:”برنامه فناوری‌های مدیریتی”,”Weight”:”115.00000000″,”Description”:””,”id1″:”4″},{“Counter”:”5″,”countIndex”:”9″,”P_Index”:””,”EFQMPivotID”:”5″,”Title”:”برنامه صیانت از حقوق مردم و سلامت اداری”,”Weight”:”175.00000000″,”Description”:””,”id1″:”5″},{“Counter”:”6″,”countIndex”:”3″,”P_Index”:””,”EFQMPivotID”:”6″,”Title”:”برنامه استقرار نظام جامع مديريت عملكرد”,”Weight”:”70.00000000″,”Description”:””,”id1″:”6″}];

    var source = { datatype: ‘json’,
    datafields: [{ name: ‘countIndex’, type: ‘int’ },{ name: ‘Title’, type: ‘string’ },{ name: ‘Weight’, type: ‘string’ }, ],
    localdata: data,
    root: ‘dataid’,
    // record: ‘TopsisID’,
    // id: ‘id1’,
    // async: false,
    //////////////////////////////////button/////////////////////////////////////
    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);
    },
    // 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);
    // },
    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);
    },
    //////////////////////////////////end button/////////////////////////////////////

    deleterow: function (row, commit) {
    $.ajax({
    type: ‘POST’,
    url: ‘Frmperformanceevaluation.aspx/DeleteTopsisRow’,
    data: ‘{Id:’+row.id1+’}’,
    contentType: ‘application/json; charset=utf-8’,
    dataType: ‘json’,
    success: function (msg) {
    alert(msg.d);
    },

    });
    commit(true);
    },

    updaterow: function (rowid, rowdata, 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 failder.
    commit(true);
    }
    };

    var dataindex=[{“Counter”:”1″,”id1″:”1″,”I_Index”:””,”Priority”:””,”Func”:””,”EFQMIndexID”:”1″,”Title”:”تهیه برنامه واگذاری تصدی‌ها “,”Weight”:”35.00000000″,”Evaluation”:”درصد”,”Standard”:”100.00000000″,”queryId”:””,”TypeOfValue”:”کمی”,”Veracity”:”فعال”,”Type”:”روش دستی (صفحه امتیازدهی)”,”Navigate”:”مثبت”,”Standard2″:””,”Standard3″:””,”Url”:””,”TypeValueFormula”:””},{“Counter”:”2″,”id1″:”1″,”I_Index”:””,”Priority”:””,”Func”:””,”EFQMIndexID”:”2″,”Title”:”تهیه و اجرای برنامه ظرفیت سازی و توانمندسازی بخش غیردولتی برای اجرای تصدی ها”,”Weight”:”25.00000000″,”Evaluation”:”درصد”,”Standard”:”100.00000000″,”queryId”:””,”TypeOfValue”:”کمی”,”Veracity”:”فعال”,”Type”:”روش دستی (صفحه امتیازدهی)”,”Navigate”:”مثبت”,”Standard2″:””,”Standard3″:””,”Url”:””,”TypeValueFormula”:””},{“Counter”:”3″,”id1″:”1″,”I_Index”:””,”Priority”:””,”Func”:””,”EFQMIndexID”:”3″,”Title”:”واگذاری حداقل ده درصد از خدمات و واحدهای عملیاتی”,”Weight”:”80.00000000″,”Evaluation”:”درصد”,”Standard”:”10.00000000″,”queryId”:””,”TypeOfValue”:”کمی”,”Veracity”:”فعال”,”Type”:”روش دستی (صفحه امتیازدهی)”,”Navigate”:”مثبت”,”Standard2″:””,”Standard3″:””,”Url”:””,”TypeValueFormula”:””},{“Counter”:”4″,”id1″:”1″,”I_Index”:””,”Priority”:””,”Func”:””,”EFQMIndexID”:”4″,”Title”:”انجام اصلاحات در ساختار سازمانی مطابق با ضوابط مصوب”,”Weight”:”60.00000000″,”Evaluation”:”درصد”,”Standard”:”100.00000000″,”queryId”:””,”TypeOfValue”:”کمی”,”Veracity”:”غیر فعال”,”Type”:”روش دستی (صفحه امتیازدهی)”,”Navigate”:”مثبت”,”Standard2″:””,”Standard3″:””,”Url”:””,”TypeValueFormula”:””},{“Counter”:”5″,”id1″:”1″,”I_Index”:””,”Priority”:””,”Func”:””,”EFQMIndexID”:”5″,”Title”:”پیشنهاد تعیین سقف پست‌های سازمانی با رعایت راهبردهای فصل دوم قانون مدیریت خدمات کشوری”,”Weight”:”40.00000000″,”Evaluation”:”درصد”,”Standard”:”100.00000000″,”queryId”:””,”TypeOfValue”:”کمی”,”Veracity”:”غیر فعال”,”Type”:”روش دستی (صفحه امتیازدهی)”,”Navigate”:”مثبت”,”Standard2″:””,”Standard3″:””,”Url”:””,”TypeValueFormula”:””}];
    var ordersbyid = { datatype: ‘json’,
    datafields: [{ name: ‘countIndex’, type: ‘int’ },{ name: ‘Title’, type: ‘string’ },{ name: ‘Weight’, type: ‘string’ },{ name: ‘Veracity’, type: ‘int’ },{ name: ‘TypeOfValue’, type: ‘int’ },{ name: ‘TypeValueFormula’, type: ‘int’ },{ name: ‘Type’, type: ‘int’ }, ],
    localdata: dataindex,
    // root: ‘Order’,
    // record: ‘Order’,
    async: false
    };

    var ordersDataAdapter = new $.jqx.dataAdapter(ordersbyid, { autoBind: true });

    orders = ordersDataAdapter.records;
    var nestedGrids = new Array();
    // create nested grid.
    var initrowdetails = function (index, parentElement, gridElement, record) {
    var id = record.uid.toString();
    var grid = $($(parentElement).children()[0]);
    nestedGrids[index] = grid;
    var filtergroup = new $.jqx.filter();
    var filter_or_operator = 1;
    var filtervalue = id;
    var filtercondition = ‘equal’;
    var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
    // fill the orders depending on the id.
    var ordersbyid = [];
    for (var m = 0; m < orders.length; m++) {
    var result = filter.evaluate(orders[m][‘id1’]);
    var select=orders[m][‘TopsisID’];
    // alert (filter.evaluate(orders[m][‘TopsisID’]));
    if (result)
    ordersbyid.push(orders[select]);
    }

    var orderssource = { datatype: ‘json’, datafields: [{ name: ‘countIndex’, type: ‘int’ },{ name: ‘Title’, type: ‘string’ },{ name: ‘Weight’, type: ‘string’ },{ name: ‘Veracity’, type: ‘int’ },{ name: ‘TypeOfValue’, type: ‘int’ },{ name: ‘TypeValueFormula’, type: ‘int’ },{ name: ‘Type’, type: ‘int’ }, ],
    id: ‘id1’,

    localdata: ordersbyid
    }
    ////////////////////////////////////////////////////////////////////////////////

    // var ordersbyid3 = { datatype: ‘json’,
    // datafields: [
    // { name: ‘Title’, type: ‘string’ },
    // { name: ‘TermGrant’, type: ‘Date’ },
    // { name: ‘TopsisID’, type: ‘string’},
    // { name: ‘TermGrant1’, type: ‘Date’ },
    // { name: ‘TopsisID1’, type: ‘string’}
    // ],
    // localdata: data,
    // // root: ‘Order’,
    // // record: ‘Order’,
    // async: false
    // };
    //
    //
    // var ordersDataAdapter3 = new $.jqx.dataAdapter(ordersbyid3, { autoBind: true });
    //
    //
    //
    // orders = ordersDataAdapter3.records;
    // var nestedGrids = new Array();
    // // create nested grid.
    // var initrowdetails = function (index, parentElement, gridElement, record) {
    // var id = record.uid.toString();
    // var gridinside = $($(parentElement).children()[0]);
    // nestedGrids[index] = gridinside;
    // var filtergroup = new $.jqx.filter();
    // var filter_or_operator = 1;
    // var filtervalue = id;
    // var filtercondition = ‘equal’;
    // var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
    // // fill the orders depending on the id.
    // var ordersbyid3 = [];
    // for (var m = 0; m < orders.length; m++) {
    // var result = filter.evaluate(orders[m][‘id1’]);
    // var select=orders[m][‘TopsisID’];
    //
    // if (result)
    // //alert (filter.evaluate(orders[m][‘id1’]));
    // ordersbyid3.push(orders[select]);
    // }
    // var orderssource3 = { datafields: [
    // { name: ‘Title’, type: ‘string’ },
    // { name: ‘TermGrant’, type: ‘Date’ },
    // { name: ‘TopsisID’, type: ‘string’},
    // { name: ‘TermGrant1’, type: ‘Date’ },
    // { name: ‘TopsisID1’, type: ‘string’}
    // ],
    // id: ‘OrderID’,
    //
    // localdata: ordersbyid3
    // }

    /////////////////////////////ساخت گرید دوم////////////////////////////////
    var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
    if (grid != null) {
    var containergrid = $(“<div style=’margin: 0px; float:right; ‘></div>”);
    grid.append(containergrid);
    grid.jqxGrid({
    source: nestedGridAdapter, width: 1255,
    rtl:true,
    autoheight: true,

    showtoolbar: true,
    rendertoolbar: function (toolbar) {
    var me = this;
    var container = $(“<div style=’margin: 5px; float:right;’></div>”);
    toolbar.append(container);
    container.append(‘<input style=”margin-right: 5px;” id=”addrowbutton” type=”button” value=”افزودن شاخص” />’);
    container.append(‘<input style=”margin-right: 5px;” id=”addmultiplerowsbutton” type=”button” value=”انتخاب شاخص” />’);
    container.append(‘<input style=”margin-right: 5px;” id=”deleterowbutton” type=”button” value=” داده انتخاب” />’);
    container.append(‘<input style=”margin-right: 5px;” id=”updaterowbutton” type=”button” value=”افزودن داده” />’);
    $(‘#addrowbutton’).jqxButton();
    $(‘#addmultiplerowsbutton’).jqxButton();
    $(‘#deleterowbutton’).jqxButton();
    $(‘#updaterowbutton’).jqxButton();
    },
    columns: [

    { text: ‘شناسه’,datafield: ‘countIndex’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘ عنوان’,datafield: ‘Title’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘وزن’,datafield: ‘Weight’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘عدم مصداق’,datafield: ‘Veracity’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘نوع’,datafield: ‘TypeOfValue’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘ماهیت’,datafield: ‘TypeValueFormula’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘نوع مقدار دهی’,datafield: ‘Type’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },
    { text: ‘حذف’, datafield: ‘delete’, columntype: ‘button’, cellsrenderer: function () {return “حذف” },

    buttonclick: function (row) {
    editrow = row;
    var selectedrowindex = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’);
    var rowscount = $(‘#jqxgrid’).jqxGrid(‘getdatainformation’).rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $(‘#jqxgrid’).jqxGrid(‘getrowid’, selectedrowindex);
    var dataRecord = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, editrow);
    var commit = $(‘#jqxgrid’).jqxGrid(‘deleterow’, dataRecord);
    }
    }},
    { text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, cellsrenderer: function () {return “Edit” },

    // open the popup window when the user clicks a button.
    buttonclick: function (row) {
    editrow = row;
    var offset = $(‘#jqxgrid’).offset();
    $(‘#popupWindow’).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
    // get the clicked row’s data and initialize the input fields.
    var dataRecord = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, editrow);
    $(‘#countIndex’).val(dataRecord.Title);
    $(‘#Title’).val(dataRecord.id1);
    // show the popup window.
    $(‘#popupWindow’).jqxWindow(‘open’);
    }
    },
    ]
    });
    }
    }

    ////////////////////////////////////// ویرایش ///////////////////////
    $(‘#countIndex’).jqxInput({ theme: theme }); $(‘#countIndex’).width(150);$(‘#countIndex’).height(23);$(‘#Title’).jqxInput({ theme: theme }); $(‘#Title’).width(150);$(‘#Title’).height(23);

    //////////////////ویرایش/////////////////////////////
    ///////////////////////’گرید اول///////////////////////
    var dataAdapter = new $.jqx.dataAdapter(source);
    var editrow = -1;
    $(‘#jqxgrid’).jqxGrid(
    {
    width: 1300,
    source: dataAdapter,
    columnsresize: true,
    showtoolbar: true,
    rtl:true,
    sortable: true,
    pageable: true,
    autoheight: true,
    rowdetails: true,
    rowsheight: 35,
    initrowdetails: initrowdetails,
    rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
    ready: function () {
    $(‘#jqxgrid’).jqxGrid(‘showrowdetails’, 1);
    },
    ////////////////////////////toolbar////////////////////////////////
    rendertoolbar: function (toolbar) {
    var me = this;
    var container = $(“<div style=’margin: 5px; float:right;’></div>”);
    toolbar.append(container);
    container.append(‘<input style=”margin-right: 5px;” id=”addrowbutton” type=”button” value=”افزودن شاخص” />’);
    container.append(‘<input style=”margin-right: 5px;” id=”addmultiplerowsbutton” type=”button” value=”انتخاب شاخص” />’);
    container.append(‘<input style=”margin-right: 5px;” id=”deleterowbutton” type=”button” value=” داده انتخاب” />’);
    container.append(‘<input style=”margin-right: 5px;” id=”updaterowbutton” type=”button” value=”افزودن داده” />’);
    $(‘#addrowbutton’).jqxButton();
    $(‘#addmultiplerowsbutton’).jqxButton();
    $(‘#deleterowbutton’).jqxButton();
    $(‘#updaterowbutton’).jqxButton();

    $(‘#addrowbutton’).on(‘click’, function () {
    //editrow = row;
    var offset = $(‘#jqxgrid’).offset();
    $(‘#popupWindow’).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
    // get the clicked row’s data and initialize the input fields.
    // var dataRecord = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, editrow);
    $(‘#countIndex’).val(”);
    $(‘#countIndex’).hidden=’hidden’;
    // $(‘#TopsisID1’).val(”);
    // show the popup window.
    $(‘#popupWindow’).jqxWindow(‘open’);

    // var commit = $(‘#jqxgrid’).jqxGrid(‘addrow’, null, datarow);
    });
    // create new rows.

    },
    //////////////////////end toolbar//////////////////////////////
    columns: [
    {
    text: ‘ردیف’, sortable: false, filterable: false, editable: false,
    groupable: false, draggable: false, resizable: false,
    datafield: ”, columntype: ‘number’, width: 50, cellsalign: ‘center’ , align: ‘center’,
    cellsrenderer: function (row, column, value) {
    return “<div style=’margin:4px;’>” + (value + 1) + “</div>”;
    }
    },

    { text: ‘شناسه’,datafield: ‘countIndex’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘ عنوان’,datafield: ‘Title’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },{ text: ‘وزن’,datafield: ‘Weight’, width: 250 , cellsalign: ‘center’ , align: ‘center’ , cellclassname : ‘cellclassname’ },

    { text: ‘حذف’, datafield: ‘delete’, columntype: ‘button’, cellsrenderer: function () {return “حذف” },

    buttonclick: function (row) {
    editrow = row;
    var selectedrowindex = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’);
    var rowscount = $(‘#jqxgrid’).jqxGrid(‘getdatainformation’).rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $(‘#jqxgrid’).jqxGrid(‘getrowid’, selectedrowindex);
    var dataRecord = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, editrow);
    var commit = $(‘#jqxgrid’).jqxGrid(‘deleterow’, dataRecord);
    }
    }},
    { text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, cellsrenderer: function () {return “Edit” },

    // open the popup window when the user clicks a button.
    buttonclick: function (row) {
    editrow = row;
    var offset = $(‘#jqxgrid’).offset();
    $(‘#popupWindow’).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
    // get the clicked row’s data and initialize the input fields.
    var dataRecord = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, editrow);
    $(‘#countIndex’).val(dataRecord.countIndex);
    $(‘#Title’).val(dataRecord.Title );
    // show the popup window.
    $(‘#popupWindow’).jqxWindow(‘open’);
    }
    },
    ],

    });

    /////////////////////////////////// پنجره پاپاپ برای ویرایش///////////////////////////////////

    $(‘#popupWindow’).jqxWindow({
    width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $(‘#Cancel’), modalOpacity: 0.01
    });
    $(‘#popupWindow’).on(‘open’, function () {
    $(‘#countIndex’).jqxInput(‘selectAll’);
    });
    $(‘#Cancel’).jqxButton({ theme: theme });
    $(‘#Save’).jqxButton({ theme: theme });
    // update the edited row when the user clicks the ‘Save’ button.
    $(‘#Save’).click(function () {
    if (editrow >= 0) {
    var row = { Title: $(‘#Title’).val(), TopsisID1: $(‘#Title’).val()
    };
    var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
    $(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
    $(‘#popupWindow’).jqxWindow(‘hide’);
    }
    });

    });

    nestedGrid #79812

    Peter Stoev
    Keymaster

    Hi,

    In order to learn how to data bind jqxGrid and the Grids displayed within the Row Details area, please look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/nestedgrids.htm?arctic

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    nestedGrid #79814

    reyhane90
    Participant

    Hi peter

    I did as the same but is does not work. In fact the inner grid does not bind.

    Thank you

    nestedGrid #79818

    Peter Stoev
    Keymaster

    Hi,

    The demo is online and it seems to work in any browser I test it with so I suggest you to debug your code and see what’s different on your side.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    nestedGrid #79822

    reyhane90
    Participant

    my code does not work and I do not now Problem

    Please your check my code

    Thank you

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

You must be logged in to reply to this topic.