jQWidgets Forums

Tagged: initrowdetails is not firing in single click

This topic contains 6 replies, has 4 voices, and was last updated by Goods 10 years, 7 months ago.

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

Author

initrowdetails is not firing in single click Posts

October 5, 2012 at 7:05 am initrowdetails is not firing in single click #8955

RajaniKantaPanda

Member

October 5, 2012 at 10:06 am initrowdetails is not firing in single click #8972

Peter Stoev

Keymaster

Hi RajaniKantaPanda,

initrowdetails is fired just once when the details of a row need to be initialized. Please, take a look at the sample which demonstrates how to use the feature: nestedgrids.htm.

Sample source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to display nested Grid plugins.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var url = "../sampledata/employees.xml";
            var source =
            {
                datafields: [
                    { name: 'FirstName' },
                    { name: 'LastName' },
                    { name: 'Title' },
                    { name: 'Address' },
                    { name: 'City' },
                ],
                root: "Employees",
                record: "Employee",
                id: 'EmployeeID',
                datatype: "xml",
                async: false,
                url: url
            };
            var employeesAdapter = new $.jqx.dataAdapter(source);
            var orderdetailsurl = "../sampledata/orderdetails.xml";
            var ordersSource =
            {
                datafields: [
                    { name: 'EmployeeID' },
                    { name: 'ShipName' },
                    { name: 'ShipAddress' },
                    { name: 'ShipCity' },
                    { name: 'ShipCountry' },
                    { name: 'ShippedDate' }
                ],
                root: "Orders",
                record: "Order",
                datatype: "xml",
                url: orderdetailsurl,
                async: false
            };
            var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
            orders = ordersDataAdapter.records;
            // create nested grid.
            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);
                var ordersbyid = [];
                for (var m = 0; m < orders.length; m++) {
                    var result = filter.evaluate(orders[m]["EmployeeID"]);
                    if (result)
                        ordersbyid.push(orders[i]);
                }
                var orderssource = { datafields: [
                    { name: 'EmployeeID' },
                    { name: 'ShipName' },
                    { name: 'ShipAddress' },
                    { name: 'ShipCity' },
                    { name: 'ShipCountry' },
                    { name: 'ShippedDate' }
                ],
                    id: 'OrderID',
                    localdata: ordersbyid
                }
                if (grid != null) {
                    grid.jqxGrid({ source: orderssource, theme: theme, width: 600, height: 200,
                        columns: [
                          { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                          { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                          { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                          { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                          { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                       ]
                    });
                }
            }
            var photorenderer = function (row, column, value) {
                var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName;
                var imgurl = '../../images/' + name.toLowerCase() + '.png';
                var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
                return img;
            }
            var renderer = function (row, column, value) {
                return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
            }
            // creage jqxgrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 365,
                source: source,
                theme: theme,
                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);
                },
                columns: [
                      { text: 'Photo', width: 50, cellsrenderer: photorenderer },
                      { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
                      { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
                      { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
                      { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
                      { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
                  ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 23, 2012 at 7:51 am initrowdetails is not firing in single click #9907

yusufmendes

Member

Hi peter,I have two buttons in action column .you said “initrowdetails is fired just once when the details of a row need to be initialized” .when I click first button initrowdetails function called,then I click other button initrowdetails never called again.İn my scenario initrowdetails function should rendered dynamic content according to which button clicked and initrowdetails should not be called justt once time.Are there any initrowdetails settings to enable initrowdetails function to be called more than one time?

October 23, 2012 at 8:04 am initrowdetails is not firing in single click #9913

Peter Stoev

Keymaster

Hi yusufmendes,

No, initrowdetails is called just one to initialize the row’s details. It’s not possible it to be called more than once after the Grid’s initialization.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 23, 2012 at 10:09 am initrowdetails is not firing in single click #9933

yusufmendes

Member

what I should to do now?Any workaround solution.I must implement this scenerio.2.5 version or further releases will support this scenario or not?

October 23, 2012 at 10:29 am initrowdetails is not firing in single click #9934

Peter Stoev

Keymaster

Hi yusufmendes,

Unfortunately, the requested functionality by you is missing. There is no workaround for this version. I will create a work item about it, but I can’t provide a time-frame when or whether this will be implemented.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 19, 2014 at 7:17 pm initrowdetails is not firing in single click #63030

Goods

Participant

I know it’s been quite a while since this was posted, but I just ran into the same issue and came up with a fairly simple workaround.

I have ajax loading dynamic data on initrowdetails, like this:


var parentHolder = {};
function initrowdetails(index, parentElement, gridElement, datarecord) {
if (!parentElement) {
    parentElement = parentHolder[index];
}
else {
    parentHolder[index] = parentElement;
}
//This if statement exists so that I can get the correct parent element on subsequent calls outside of the jqxGrid API

$.ajax({
    url: '/Authorized/GetDynamicData/' + datarecord.Id,
    success: function (html) {
        var content = $('<div />').html(html).find('#DynamicDataDiv');
        $(parentElement).children('.rowdetailWrapper').html(content);
    }
});
}

The problem is, that upon closing the row, opening another one, and the reopening the first one, the first one now had elements from the second one (and initrowdetails wasn’t firing, as the row has already been initialized).

I simply made a bind:

 $('#Grid').on('rowexpand', function (event) {
    $('.rowdetailWrapper').html(''); //to clear the row details
    var index = $('#Grid').jqxGrid('getrowboundindex', event.args.rowindex);
    var rowdata = $('#Grid').jqxGrid('getrowdata', index);
    initrowdetails(index, false, $('#Grid'), rowdata);//Pass false to get correct parent element from holder
});

I know this solution isn’t perfect and seems pretty sloppy, but the whole reason I had to do this was because I was loading dynamic data from an outside source using $.load(), but it was stripping out all the <script> tags on the target page when using a selector (how i use #DynamicDataDiv in the ajax call), and when not using a selector it would load the data and execute the scripts, but then jqxGrid would break (calling $(‘#Grid’).jqxGrid(‘anything here’); would return undefined function or the like in the console, breaking the grid entirely. So I used AJAX to load the whole document instead, and then simply pick out the part I needed. But, like I said before, this started having issues when initrowdetails only got called the first time, causing javascript inside the dynamic data to target not only itself but the same tags from the other rows. I’m sure there were other ways I could have gone about it, like making the selector classes I use unique, but this was a quick and easy way to get it working and working fast.

Author

Posts

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

You must be logged in to reply to this topic.