3 Replies - 1661 Views - Last Post: 26 March 2013 - 11:56 AM Rate Topic: -----

#1 troyb408  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 71
  • Joined: 18-August 12

Drill Down rows

Posted 25 March 2013 - 12:51 PM

Hi -

Most the time after I've exhausted the google search I post here then finally figure out my issue. But this time I'm at a loss. I'm using datatables plugin and populating that table via json. My issue that i'm running in to is trying to create drill down rows in the plug in. Yes I've combed the datatable site for answers. I've created my table / populated it with json / mapped my column names / inserted blank column for image and thats were it stops. The first blank column stays blank even though I've explicity set sDefaultContent to the image I want. Here is the code and query


Here is the view -
        $(document).ready(function () {
            var anOpen = [];
            var sImageUrl = "Data ";
            var oTable = $('#VADataTable').dataTable({
                
                "iDisplayLength": 5, //defalut amount of rows shown on page               
                "bServerSide": false, //uses sever for filter curently turned off                                
                "bFilter": false, //makes columns clickable to filter 
                "bProcessing": true,
                "bJQueryUI": true, //enables user interface 
                "bSort": true, //sorting for columns                               
                "bScrollInfinite": true, //using this takes away ddl of selection
                "sAjaxSource": "Data/IndustryTable",   //where ajax commands renders results
                "sScrollY": "200px",
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                "bScrollCollapse": true,
                "bAutoWidth": false,
                "aoColumns":
                [
                    { "mDataProp": null,
                      "sDefaultContent": '<img src=" ' + sImageUrl + ' addition.png' + ' " > '
                    },

                    { "mDataProp": null },
                    { "mDataProp": null },
                    { "mDataProp": null },
                    { "mDataProp": null },
                    { "mDataProp": null },
                    { "mDataProp": null }

                ]//controls individual sorting filter of columns
            }); //end dt options

                $('#VADataTable td.control').live('click', function () {
                var nTr = this.parentNode;
                var i = $.inArray(nTr, anOpen);

                if (i == -1) 
                {
                    $('img', this).attr('src', sImageUrl + " subtraction.jpg");
                    var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
                    $('div.innerDetails', nDetailsRow).slideDown();
                    anOpen.push(nTr);
                } //end if

                else {
                    $('img', this).attr('src', sImageUrl + "addition.png");
                    $('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
                        oTable.fnClose(nTr);
                        anOpen.splice(i, 1);
                    });
                } //end else
            });

            function fnFormatDetails(oTable, nTr) 
            {
                var oData = oTable.fnGetData(nTr);
                var sOut =
                    '<div class = "innerDetails">' +
                        '<table cellpadding = "5" cellspacing ="0" border="0" style="padding-left:50pz;">' +
                            '<tr><td>Rendering engine : </td><td>' + oData.engine + '</td></tr>'
                        '</table>' +
                   '</div>'
                return sOut;
            }
        } 



Here is the query
                var rows = from d in dt
                           select new string[] {string.Empty,
                                                d.industry_code.ToString(), 
                                                d.industry_desc, 
                                                d.SpendingTotal.ToString("#,##,,,B"),   
                                                d.SpendingDoD.ToString("#,##,,,M"),    
                                                d.Empl12Mo.ToString("#,##,K"),         
                                                d.AnnAvgWage.ToString("#,##,K"),
                                                };//end select statement                           

                return Json(new
                {
                    sEcho = param.sEcho ,
                    iTotalRecords = dt.Count(),                    
                    aaData = rows

                },  //end json return statement
                JsonRequestbehavior.AllowGet);



Is This A Good Question/Topic? 0
  • +

Replies To: Drill Down rows

#2 troyb408  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 71
  • Joined: 18-August 12

Re: Drill Down rows

Posted 26 March 2013 - 06:44 AM

Nevermind I figured it it
Was This Post Helpful? 0
  • +
  • -

#3 h4nnib4l  Icon User is offline

  • The Noid
  • member icon

Reputation: 1182
  • View blog
  • Posts: 1,677
  • Joined: 24-August 11

Re: Drill Down rows

Posted 26 March 2013 - 11:48 AM

Will you post your solution, so that anyone else who searches our site for this problem can find it?
Was This Post Helpful? 0
  • +
  • -

#4 troyb408  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 71
  • Joined: 18-August 12

Re: Drill Down rows

Posted 26 March 2013 - 11:56 AM

What I did was use the fnRowCallback feature of datatables. By adding the class control the rest of the example shown in the datatables drill down followed suite. I did make a change to the slideUp / slideDown and just used toggleSlide

                "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                    if (aData[0] == "") {
                        
                        $('td:eq(0)', nRow).html('+').addClass('control');
                    }
                    return nRow;
                },



Once that was enabled and access to the new blank field that was called using linq command.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1