Binding data to subgrid

Posted by bhargav on Stack Overflow See other posts from Stack Overflow or by bhargav
Published on 2011-06-29T08:36:36Z Indexed on 2011/06/30 8:22 UTC
Read the original article Hit count: 548

Filed under:
|

i have a jqgrid with a subgrid...the databinding is done in javascript like this

<script language="javascript" type="text/javascript">
    var x = screen.width;
    $(document).ready(function () {
        $("#projgrid").jqGrid({

            mtype: 'POST',
            datatype: function (pdata) { getData(pdata); },
            colNames: ['Project ID', 'Due Date', 'Project Name', 'SalesRep', 'Organization:', 'Status', 'Active Value', 'Delete'],
            colModel: [
                        { name: 'Project ID', index: 'project_id', width: 12, align: 'left', key: true },
                        { name: 'Due Date', index: 'project_date_display', width: 15, align: 'left' },
                        { name: 'Project Name', index: 'project_title', width: 60, align: 'left' },
                        { name: 'SalesRep', index: 'Salesrep', width: 22, align: 'left' },
                        { name: 'Organization:', index: 'customer_company_name:', width: 56, align: 'left' },
                        { name: 'Status', index: 'Status', align: 'left', width: 15 },
                         { name: 'Active Value', index: 'Active Value', align: 'left', width: 10 },
                          { name: 'Delete', index: 'Delete', align: 'left', width: 10}],

            pager: '#proj_pager',
            rowList: [10, 20, 50],
            sortname: 'project_id',
            sortorder: 'asc',
            rowNum: 10,
            loadtext: "Loading....",
            subGrid: true,
            shrinkToFit: true,
            emptyrecords: "No records to view",
            width: x - 100,
            height: "100%",
            rownumbers: true,
            caption: 'Projects',
            subGridRowExpanded: function (subgrid_id, row_id) {


                var subgrid_table_id, pager_id;
                subgrid_table_id = subgrid_id + "_t";
                pager_id = "p_" + subgrid_table_id;

                $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
                jQuery("#" + subgrid_table_id).jqGrid({

                    mtype: 'POST',
                    postData: { entityIndex: function () { return row_id } },
                    datatype: function (pdata) { getactionData(pdata); },
                    height: "100%",
                    colNames: ['Event ID', 'Priority', 'Deadline', 'From Date', 'Title', 'Status', 'Hours', 'Contact From', 'Contact To'],
                    colModel: [
                             { name: 'Event ID', index: 'Event ID' },
                             { name: 'Priority', index: 'IssueCode' },
                             { name: 'Deadline', index: 'IssueTitle' },
                             { name: 'From Date', index: 'From Date' },
                             { name: 'Title', index: 'Title' },
                             { name: 'Status', index: 'Status' },
                             { name: 'Hours', index: 'Hours' },
                            { name: 'Contact From', index: 'Contact From' },
                            { name: 'Contact To', index: 'Contact To' }
                             ],

                    caption: "Action Details",
                    rowNum: 10,
                    pager: '#actionpager',
                    rowList: [10, 20, 30, 50],
                    sortname: 'Event ID',
                    sortorder: "desc",
                    loadtext: "Loading....",
                    shrinkToFit: true,
                    emptyrecords: "No records to view",
                    rownumbers: true,
                    ondblClickRow: function (rowid) {

                    }
                });
                jQuery("#actiongrid").jqGrid('navGrid', '#actionpager', { edit: false, add: false, del: false, search: false });
            }


        });
        jQuery("#projgrid").jqGrid('navGrid', '#proj_pager', { edit: false, add: false, del: false, excel: true, search: false });

    });


    function getactionData(pdata) 
    {

        var project_id = pdata.entityIndex();
        var ChannelContact = document.getElementById('ctl00_ContentPlaceHolder2_ddlChannelContact').value;
        var HideCompleted = document.getElementById('ctl00_ContentPlaceHolder2_chkHideCompleted').checked;
        var Scm = document.getElementById('ctl00_ContentPlaceHolder2_chkScm').checked;
        var checkOnlyContact = document.getElementById('ctl00_ContentPlaceHolder2_chkOnlyContact').checked;
        var MerchantId = document.getElementById('ctl00_ContentPlaceHolder2_ucProjectDetail_hidden_MerchantId').value;

        var nrows = pdata.rows;
        var npage = pdata.page;
        var sortindex = pdata.sidx;
        var sortdir = pdata.sord;

        var path = "project_brow.aspx/GetActionDetails"

        $.ajax({
            type: "POST",
            url: path,
            data: "{'project_id': '" + project_id + "','ChannelContact': '" + ChannelContact
            + "','HideCompleted': '" + HideCompleted + "','Scm': '" + Scm + "','checkOnlyContact': '"
             + checkOnlyContact + "','MerchantId': '" + MerchantId + "','nrows': '" + nrows + "','npage': '" + npage
             + "','sortindex': '" + sortindex + "','sortdir': '" + sortdir + "'}",

            contentType: "application/json; charset=utf-8",
            success: function (data, textStatus) {

                if (textStatus == "success")
                    obj = jQuery.parseJSON(data.d)
                ReceivedData(obj);
              },
            error: function (data, textStatus) {
                alert('An error has occured retrieving data!');
            }


        });


    }
    function ReceivedData(data) {

        var thegrid = jQuery("#actiongrid")[0];
        thegrid.addJSONData(data);
    }


    function getData(pData) {
        var dtDateFrom = document.getElementById('ctl00_ContentPlaceHolder2_dtDateFrom_textBox').value;
        var dtDateTo = document.getElementById('ctl00_ContentPlaceHolder2_dtDateTo_textBox').value;
        var Status = document.getElementById('ctl00_ContentPlaceHolder2_ddlStatus').value;
        var Type = document.getElementById('ctl00_ContentPlaceHolder2_ddlType').value;


        var Channel = document.getElementById('ctl00_ContentPlaceHolder2_ddlChannel').value;
        var ChannelContact = document.getElementById('ctl00_ContentPlaceHolder2_ddlChannelContact').value;
        var Customers = document.getElementById('ctl00_ContentPlaceHolder2_txtCustomers').value;
        var KeywordSearch = document.getElementById('ctl00_ContentPlaceHolder2_txtKeywordSearch').value;

        var Scm = document.getElementById('ctl00_ContentPlaceHolder2_chkScm').checked;
        var HideCompleted = document.getElementById('ctl00_ContentPlaceHolder2_chkHideCompleted').checked;
        var SelectedCustomerId = document.getElementById("<%=hdnSelectedCustomerId.ClientID %>").value
        var MerchantId = document.getElementById('ctl00_ContentPlaceHolder2_ucProjectDetail_hidden_MerchantId').value;
        var nrows = pData.rows;
        var npage = pData.page;
        var sortindex = pData.sidx;
        var sortdir = pData.sord;

        PageMethods.GetProjectDetails(SelectedCustomerId, Customers, KeywordSearch, MerchantId, Channel, Status, Type,
dtDateTo, dtDateFrom, ChannelContact, HideCompleted, Scm, nrows, npage, sortindex, sortdir, AjaxSucceeded, AjaxFailed);

    }


    function AjaxSucceeded(data) {

        var obj = jQuery.parseJSON(data)

        if (obj != null) {
            if (obj.records!="") {
                ReceivedClientData(obj);
            }
            else { alert('No Data Available to Display') }

        }
    }
        function AjaxFailed(data) {
            alert('An error has occured retrieving data!'); 
            }



    function ReceivedClientData(data) {

        var thegrid = jQuery("#projgrid")[0];
        thegrid.addJSONData(data);
    }
</script>

as u can see projgrid is my parent grid and action grid is my subgrid to be shown onclicking the '+' symbol

Projgrid is binded and being displayed but when it comes to subgrid im able to get the data but the problem comes at the time of binding data to subgrid which is done in function named ReceivedData where you can see like this

function ReceivedData(data) {

        var thegrid = jQuery("#actiongrid")[0];
        thegrid.addJSONData(data);
    }

"data" is what i wanted exactly but it cannot be binded to actiongrid which is the subgrid

Thanx in advance for help

© Stack Overflow or respective owner

Related posts about jqgrid

Related posts about subgrid