how to run ajax and display result in row detail of jqxgrid

[prianchParticipant]

I am running n ajax when user click on row detail of jqxgrid and to show related result(from another table).
how can I display the details? i am using folowing code:-

$=jQuery.noConflict();
$(document).ready(function(){
            var url = "/admins/offerchangejson"; // action from where we get the result in json
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'TimeStamp', type: 'date', map: 'OfferChanged>TimeStamp' },
                    { name: 'PublishTimeTimeStamp', type: 'date', map: 'OfferChanged>PublishTimeTimeStamp' },
                    { name: 'UniqueId', type: 'string', map: 'OfferChanged>UniqueId' },
                   
                    { name: 'Asin', type: 'string', map: 'OfferChanged>Asin' },
                    
                    { name: 'TimeOfOfferChangeTimeStamp', type: 'date', map: 'OfferChanged>TimeOfOfferChangeTimeStamp' }, 
                  ],
                id: 'OfferChanged>id',
                url: url,
                pagesize: 30,
            };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                beforeLoadComplete: function (records, originalData, c) {
                    for (var i = 0; i < records.length; i++) {
                        if(originalData[i].OfferChanged.TimeStamp=="0"){
                            records[i].TimeStamp=""
                        }else{
							records[i].TimeStamp = new Date(originalData[i].OfferChanged.TimeStamp* 1000)
                        }
						
                        if(originalData[i].OfferChanged.PublishTimeTimeStamp=="0"){
                            records[i].PublishTimeTimeStamp=""
                        }else{
							records[i].PublishTimeTimeStamp = new Date(originalData[i].OfferChanged.PublishTimeTimeStamp* 1000)
                        }
						
                        if(originalData[i].OfferChanged.TimeOfOfferChangeTimeStamp=="0"){
                            records[i].TimeOfOfferChangeTimeStamp=""
                        }else{
                            records[i].TimeOfOfferChangeTimeStamp = new Date(originalData[i].OfferChanged.TimeOfOfferChangeTimeStamp* 1000)
                        }
                    };
                   return records;

				},
            });

            var expandData = new Array();
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                theme: KiouiTheme,
                source: dataAdapter,                 
                filterable: true,
                showfilterrow: true, 
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                pagesizeoptions: ['30', '60', '90'],
                selectionmode: 'singlerow',
                columnsresize: true,
                rowdetails: true,
				enablebrowserselection: true,            
				selectionmode: 'singlecell',
                rowdetailstemplate: { 
                                rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'>Detail</li></ul><div class='detail'></div></div>",
                                rowdetailsheight: 200 
                                },
                ready: function () {
                            var data = $('#jqxgrid').jqxGrid('getrows');
                            for (var i = 0; i < data.length; i++) {
                                expandData.push(false);
							};
						$("#jqxgrid").on("rowclick", function (event) {
							var column = event.args.column;
							var rowindex = event.args.rowindex;
							var columnindex = event.args.columnindex;
							if (expandData[rowindex] == false) {
								$('#jqxgrid').jqxGrid('showrowdetails', rowindex);
							} else {
								$('#jqxgrid').jqxGrid('hiderowdetails', rowindex);
							};
						});
						$('#jqxgrid').on('rowexpand', function (event) {
							
							var args = event.args;
							var row = args.rowindex;
							var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', row);
							$.ajax({
								url: '/admins/FetchAllOffersFromUniqueIdajax/'+dataRecord.UniqueId,
								data: row,
								type: "GET",
								cache: false,
								async: true,
								success: function(response) {
									amazonofferofferajax(response);
								}
							});
							expandData[row] = true;
						});
						$('#jqxgrid').on('rowcollapse', function (event) {
							var args = event.args;
							var row = args.rowindex;
							expandData[row] = false;
						});
				},
                columns: [
                  { text: 'Date', datafield: 'TimeStamp', type: 'date', cellsformat: DateTimeFomat},
				  { text: 'Publish Date', datafield: 'PublishTimeTimeStamp', type: 'date', cellsformat: DateTimeFomat },
                 { text: 'Offer Changed Date', datafield: 'TimeOfOfferChangeTimeStamp', type: 'date', cellsformat: DateTimeFomat },
              
				 { datafield: 'Asin', text: 'Asin' }, 
             ],               
            });

			  // to remove the filter result
            $('#clearfilteringbutton').jqxButton({ height: 25,theme: KiouiTheme});
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
 }); 
 
 function offerofferajax(ajaxdata){
	var source2 = {
    datatype: 'json',
    localdata: ajaxdata,
    datafields:
    [
        {
            name: 'Asin', map: 'Offers>Asin',
         
        }
    ]
};

			var dataAdapter2 = new $.jqx.dataAdapter(source2);

            var initrowdetails = function (index, parentElement, gridElement, datarecord) {
                var tabsdiv = null;
                var detail = null;
                var title=null;
                tabsdiv = $($(parentElement).children()[0]);
                if (tabsdiv != null) {
                    detail = tabsdiv.find('.detail');
                    title = tabsdiv.find('.title');

                   var container = $('<div style="margin: 5px;"></div>')
                  
                    container.appendTo($(detail));

                    var leftcolumn  = $('<div style="float: left; width: 50%;"></div>');
                    var rightcolumn = $('<div style="float: left; width: 50%;"></div>');

                    container.append(leftcolumn);
                    container.append(rightcolumn);

                    var SubCondition= "<div style='margin: 10px;'><b>Sub Condition :</b> " + datarecord.SubCondition + "</div>";
                  
                    
                    
                    $(rightcolumn).append(SubCondition);
                   
              }
            }
// where should i mention jqxgrid1 id to get the detail
 $("#jqxgrid1").jqxGrid({
	   theme: KiouiTheme,
                source: dataAdapter2,
				initrowdetails:initrowdetails,
 });
 
 }

<div id='jqxWidget' class="jqwidget-99-percent">
        <div id="jqxgrid"></div> 
        <input style="margin-top: 10px;" value="Remove Filter"  class="primaryLargeButton"  id="clearfilteringbutton" type="button" />
</div>

[DimitarParticipant]

Hello prianch,

Here is a mockup example showing what you should basically do. Please read the comments under initrowdetails and the rowexpand event handler.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(5);
            var source = {
                localdata: data,
                datafields: [{
                    name: 'firstname',
                    type: 'string'
                }, {
                    name: 'lastname',
                    type: 'string'
                }, {
                    name: 'productname',
                    type: 'string'
                }, {
                    name: 'date',
                    type: 'date'
                }, {
                    name: 'quantity',
                    type: 'number'
                }, {
                    name: 'price',
                    type: 'number'
                }],
                datatype: "array"
            };

            var containers = [];

            var adapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid({
                width: 700,
                autoheight: true,
                theme: 'energyblue',
                height: 300,
                source: adapter,
                rowdetails: true,
                rowdetailstemplate: { rowdetails: '<div style="margin: 10px;"></div>', rowdetailsheight: 35 },
                initrowdetails: function (index, parentElement, gridElement, datarecord) {
                    container = $($(parentElement).children()[0]);
                    // make the initial Ajax call here and, on "success", append the retrieved data to "container"
                    containers[index] = container;
                },
                columns: [{
                    text: 'Product',
                    datafield: 'productname',
                    width: 100
                }, {
                    text: 'First Name',
                    datafield: 'firstname',
                    width: 90
                }, {
                    text: 'Last Name',
                    datafield: 'lastname',
                    width: 90
                }, {
                    text: 'Order Date',
                    datafield: 'date',
                    width: 160,
                    cellsformat: 'dd-MMMM-yyyy'
                }, {
                    text: 'Quantity',
                    datafield: 'quantity',
                    width: 80,
                    cellsalign: 'right'
                }, {
                    text: 'Unit Price',
                    datafield: 'price',
                    cellsalign: 'right',
                    cellsformat: 'c2'
                }]
            });

            $('#jqxgrid').on('rowexpand', function (event) {
                // row's bound index.
                var rowBoundIndex = event.args.rowindex;
                if (containers[rowBoundIndex]) {
                    // make the Ajax call here and, on "success", append the retrieved data to "containers[rowBoundIndex]"
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts