<!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/jqxlistbox.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdropdownlist.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdatatable.js"
>
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
h3
>jQWidgets jqxDataTable rowDetails Property
</
h3
>
<
div
id
=
"jqxdt"
></
div
>
<
input
type
=
"button"
style
=
"margin:29px;"
id
=
"jqxbtn"
value
=
"Click here"
/>
<
div
id
=
"log"
></
div
>
</
center
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
var d = new Array();
var subjectNames =
["C++", "Scala", "Java", "C", "R", "JavaScript"];
var pageNumber =
["7", "8", "12", "11", "10", "19"];
for (var j = 0; j <
6
; j++) {
var r = {};
r["subjectnames"] =
subjectNames[(Math.floor(Math.random() * subjectNames.length))];
r["pagenumber"] =
pageNumber[(Math.floor(Math.random() * pageNumber.length))];
d[j] = r;
}
var src = {
localdata: d,
datatype: "array",
};
var
ird
=
function
(i, drow, e, rowinfo) {
var
td
=
null
;
var
info
=
null
;
var
note
=
null
;
rowinfo.detailsHeight
=
100
;
e.append($(
"<div
style
=
'margin: 9px;'
>" +
"<
ul
style
=
'margin-left: 29px;'
>" +
"<
li
class
=
'title'
>T</
li
><
li
>Marks</
li
></
ul
>" +
"<
div
class
=
'information'
></
div
><
div
class
=
'note'
></
div
></
div
>"));
td = $(e.children()[0]);
if (td != null) {
info = td.find('.information');
note = td.find('.pagenumber');
var t = td.find('.title');
t.text(drow.subjectnames);
var c = $('<
div
style
=
"margin: 6px;"
></
div
>');
c.appendTo($(info));
var lc = $('<
div
style
=
"float: left; width: 41%;"
></
div
>');
var rc = $('<
div
style
=
"float: left; width: 42%;"
></
div
>');
c.append(lc);
c.append(rc);
var subjectnames = "<
div
style
=
'margin: 10px;'
><
b
>Subject:</
b
> "
+ drow.subjectnames + "</
div
>";
$(lc).append(subjectnames);
var nc = $('<
div
style
=
"white-space: normal; margin: 6px;"
><
span
>'
+ drow.pagenumber + '</
span
></
div
>');
$(note).append(nc);
$(td).jqxTabs({
theme: 'energyblue',
width: 500,
height: 160
});
}
}
var data_Adapter = new $.jqx.dataAdapter(src);
$("#jqxdt").jqxDataTable({
source: data_Adapter,
height: 170,
rowDetails: true,
initRowDetails: ird,
sortable: true,
columns: [
{
text: "Subject Name",
datafield: "subjectnames",
width: "120px",
},
{
text: "Page No.",
datafield: "pagenumber",
width: "120px",
},
],
});
$("#jqxbtn").jqxButton({
width: 280
});
$("#jqxbtn").on("click", function () {
var rd = $('#jqxdt').jqxDataTable('rowDetails');
$("#log").text(rd);
});
});
</
script
>
</
body
>
</
html
>