jQWidgets Forums

jQuery UI Widgets Forums Grid Nested grid

This topic contains 1 reply, has 1 voice, and was last updated by  hardcode 12 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Nested grid Posts
  • Nested grid #13807

    hardcode
    Member

    Hello
    I have a nested grid that is working good but I have a problem. Could you please demonstrate to me how i can fetch the row details of the inner grid when a row in the inner grid is clicked. I want to get the row details of a clicked row or selected row in the inner grid.
    here is my code

    //review grid begins here
    var url = "../php/reviewGrid.php";
    var source =
    {
    datatype: "json",
    async:false,
    datafields: [
    { name: 'item' },
    { name: 'source' },
    { name: 'riskRanking'},
    { name: 'actionPlan'},
    { name: 'who'},
    { name: 'when'}
    ],
    beforeprocessing: function (data) {
    source.totalrecords = data[0].TotalRows;
    },
    id: 'item',
    url: url,
    root: 'Rows',
    cache: false
    };
    var psource =source;
    var dataAdapter = new $.jqx.dataAdapter(source);
    //Inner grid
    var reviewDetailUrl = "../php/loadReviewDetailGrid.php";
    var reviewDetailSource =
    {
    datafields: [
    { name: 'id' },
    { name: 'item' },
    { name: 'reviewDate' },
    { name: 'reviewStatus' },
    { name: 'statusOnTargetDate' }
    ],
    datatype: "json",
    url: reviewDetailUrl,
    async: false
    };
    var reviewRenderer = function (row, datafield, value) {
    var textBox = '<textarea cols="82" rows="3" class="txtArea">'+ value+ '</textarea>';
    return '<div style="text-align:left; margin:2px; height:inherit;">' + textBox + '</div>';
    }
    var addReviewDateClickRenderer = function (id) {
    return '<input style="margin-top:4px;" type="button" value="Add Review Date" onClick="addReviewDateClick(event)" class="addReviewDateClick" id="btn'+id+ '"/>'
    }
    var saveClickRenderer = function (row, datafield, value) {
    return '<input style="margin-top:20px;" type="button" value="Save Review" onClick="saveClick(event)" id="btnx'+row+ '"/>'
    }
    var riskRankingRenderer = function (row, datafield, value) {
    var divColor = '';
    if(value == 'High'){
    divColor = 'background-color:#F00; color:#FFF'
    }
    if(value == 'Medium'){
    divColor = 'background-color:#FF0'
    }
    if(value == 'Low'){
    divColor = 'background-color:#063; color:#FFF'
    }
    return '<div style="text-align:left; height:inherit; '+ divColor +';">&nbsp; '+ value + '</div>';
    }
    var reviewDetailDataAdapter = new $.jqx.dataAdapter(reviewDetailSource, { autoBind: true });
    var reviewDetailRecords = reviewDetailDataAdapter.records;
    var initrowdetails = function (index, parentElement, gridElement, record) {
    var id = record.uid.toString();
    var grid = $($(parentElement).children()[0]);
    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 reviewDetailById = [ ];
    for (var m = 0; m < reviewDetailRecords.length; m++) {
    var result = filter.evaluate(reviewDetailRecords[m]["item"]);
    if (result)
    reviewDetailById.push(reviewDetailRecords[m]);
    }
    var reviewDetailSource1 = { datafields: [
    { name: 'id' },
    { name: 'item' },
    { name: 'reviewDate' },
    { name: 'reviewStatus' },
    { name: 'statusOnTargetDate' }
    ],
    id: 'id',
    localdata: reviewDetailById
    }
    if (grid != null) {
    grid.jqxGrid({ source: reviewDetailSource1, theme: theme, width: 940, height: 268,rowsheight: 60, editable: true,
    columns: [
    { text: 'Review Date', datafield: 'reviewDate', width: 100,columntype: 'datetimeinput',cellsformat:'dd/MM/yyyy' },
    { text: 'Status On Target Date', datafield: 'revstatusOnTargetDateiewDate', width: 510,cellsrenderer: reviewRenderer },
    { text: 'Status', datafield: 'reviewStatus', columntype:'dropdownlist', width: 100,
    createeditor: function (row, column, editor) {
    // assign a new data source to the dropdownlist.
    var list = ['Done', 'Ongoing', 'Not Done'];
    editor.jqxDropDownList({ source: list });}
    },
    { text: '', width: 100, cellsrenderer: saveClickRenderer },
    ]
    });
    }
    }
    $("#reviewGrid").jqxGrid(
    {
    width:990,
    autoheight: true,
    source: dataAdapter,
    sortable:true,
    editable: false,
    pageable: true,
    pagesize:10,
    altrows:true,
    pagesizeoptions:['10', '30', '50'],
    selectionmode: 'singlerow',
    columnsresize: true,
    columnsheight:30,
    virtualmode:true,
    theme: theme,
    rowsheight: 25,
    rowdetails: true,
    rendergridrows: function(obj){
    return obj.data
    },
    initrowdetails: initrowdetails,
    rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 8px;'></div>", rowdetailsheight: 300, rowdetailshidden: true },
    columns: [
    { text: 'Item', dataField: 'item', columntype: 'textbox', width: 60},
    { text: 'Source', dataField: 'source', columntype: 'textbox', width: 200},
    { text: 'Risk Ranking', dataField: 'riskRanking', columntype: 'textbox', width: 150, cellsrenderer: riskRankingRenderer},
    { text: 'Action Plan', dataField: 'actionPlan', width: 150, columntype: 'textbox'},
    { text: 'Who',dataField: 'who', columntype: 'textbox', width: 150},
    { text: 'When', dataField: 'when', columntype: 'datetimeinput', width: 100, cellsformat:'dd/MM/yyyy' },
    { text: '', dataField: 'item', width: 120,cellsrenderer: addReviewDateClickRenderer },
    ]
    });
    /* review grid ends*/
    Nested grid #13850

    hardcode
    Member

    Hello,
    Have you been able to get a solution for me ?

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

You must be logged in to reply to this topic.