show details

[pankhiParticipant]

Hi

I am using http://jsfiddle.net/jqwidgets/84jBX/ to show my details on website. But I want that even user click on user’s first Name or any field even than the details will appear.

[DimitarParticipant]

Hello pankhi,

We suggest binding to the rowclick event and calling showrowdetails in its callback, i.e.:

$("#jqxgrid").jqxGrid({
    width: 400,
    height: 250,
    source: dataAdapter,
    rowdetails: true,
    theme: 'energyblue',
    rowdetailstemplate: {
        rowdetails: "<div style='margin: 10px;'>Row Details</div>",
        rowdetailsheight: 50
    },
    ready: function () {
        $("#jqxgrid").jqxGrid('showrowdetails', 0);
        $("#jqxgrid").jqxGrid('showrowdetails', 1);
        $("#jqxgrid").on("rowclick", function (event) {
            var column = event.args.column;
            var rowindex = event.args.rowindex;
            var columnindex = event.args.columnindex;
            $('#jqxgrid').jqxGrid('showrowdetails', rowindex);
        });
    },

Best Regards,
Dimitar

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

[pankhiParticipant]

Hi

Its working fine when we want to open the details but if I want to close the detail than I have to click on arrow?
can we also close the detail on click of any field too??

[DimitarParticipant]

Hi pankhi,

Here is how to achieve this:

var expandData = new Array();

$("#jqxgrid").jqxGrid(
{
    width: 850,
    height: 250,
    source: dataAdapter,
    rowdetails: true,
    rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li>Notes</li></ul><div class='information'></div><div class='notes'></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;
            expandData[row] = true;
        });

        $('#jqxgrid').on('rowcollapse', function (event) {
            var args = event.args;
            var row = args.rowindex;
            expandData[row] = false;
        });

        $("#jqxgrid").jqxGrid('showrowdetails', 0);
        $("#jqxgrid").jqxGrid('showrowdetails', 1);
    },
    initrowdetails: initrowdetails,
    columns: [
            { text: 'First Name', datafield: 'firstname', width: 200 },
            { text: 'Last Name', datafield: 'lastname', width: 200 },
            { text: 'Title', datafield: 'title', width: 180 },
            { text: 'City', datafield: 'city', width: 100 },
            { text: 'Country', datafield: 'country' }
        ]
});

Best Regards,
Dimitar

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

[david_mkdParticipant]

Hello there,

I tried using rowclick, but I had some problems if I use the property “sortable: true”

I prefer to use CellClick event instead of rowclick

Here is my suggestion to achieve this :

$("#jqxgrid").jqxGrid(
{
    width: 850,
    height: 250,
    source: dataAdapter,
    rowdetails: true,
    rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li>Notes</li></ul><div class='information'></div><div class='notes'></div></div>", rowdetailsheight: 200 },
    ready: function () {
        var data = $('#jqxgrid').jqxGrid('getrows');
        for (var i = 0; i < data.length; i++) {
            expandData.push(false);
        };

        $('#jqxgrid').on("cellclick", function(event) {
            var columnindex = event.args.columnindex;
            if (columnindex != 0) {
                var rowindex = event.args.rowindex;
                if (expandData[rowindex] == false) {
                    $('#jqxgrid').jqxGrid('showrowdetails', rowindex);
                    
                } else {
                    $('#jqxgrid').jqxGrid('hiderowdetails', rowindex);
                };

                expandData[rowindex] = !expandData[rowindex];
            };
        });

    },
    initrowdetails: initrowdetails,
    columns: [
            { text: 'First Name', datafield: 'firstname', width: 200 },
            { text: 'Last Name', datafield: 'lastname', width: 200 },
            { text: 'Title', datafield: 'title', width: 180 },
            { text: 'City', datafield: 'city', width: 100 },
            { text: 'Country', datafield: 'country' }
        ]
});

[david_mkdParticipant]

Hi,

Change the cellclick content to this to avoid the “click on arrow” issue:

$('#jqxgrid').on("cellclick", function(event) {
  var columnindex = event.args.columnindex;
  var rowindex = event.args.rowindex;
  if (expandData[rowindex] == false) {
    if (event.args.datafield != null) {
      $('#jqxgrid').jqxGrid('showrowdetails', rowindex);
    } else {
      $('#jqxgrid').jqxGrid('hiderowdetails', rowindex);
    }
  } else {
    if (event.args.datafield != null) {
      $('#jqxgrid').jqxGrid('hiderowdetails', rowindex);
    } else {
      $('#jqxgrid').jqxGrid('showrowdetails', rowindex);                            
    }
  }

  expandData[rowindex] = !expandData[rowindex];
  
});

[Author]

Posts