jQuery UI Widgets Forums Grid how to run ajax and display result in row detail of jqxgrid

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 8 months ago.

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

  • prianch
    Participant

    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>

    Dimitar
    Participant

    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/

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

You must be logged in to reply to this topic.