jQuery UI Widgets Forums Grid show details

This topic contains 5 replies, has 3 voices, and was last updated by  david_mkd 9 years, 10 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    show details Posts
  • show details #53457

    pankhi
    Participant

    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.

    show details #53459

    Dimitar
    Participant

    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/

    show details #53461

    pankhi
    Participant

    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??

    show details #53482

    Dimitar
    Participant

    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/

    show details #53550

    david_mkd
    Participant

    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' }
            ]
    });
    show details #53552

    david_mkd
    Participant

    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];
      
    });
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.