<!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/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.columnsresize.js"
>
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
h3
>jQWidgets jqxGrid rowdetailstemplate property</
h3
>
<
div
id
=
"jqxg"
></
div
>
<
div
>
<
input
type
=
"button"
id
=
"jqxBtn"
style
=
"margin-top: 25px"
value
=
"Click here"
/>
</
div
>
<
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 <
50
; 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
inrow_details
=
function
(index, parent_element) {
var row_details = $($(parent_element).children(0));
row_details.text("Info for: " + index);
};
var
data_Adapter
=
new
$.jqx.dataAdapter(src);
$("#jqxg").jqxGrid({
source: data_Adapter,
theme: 'energyblue',
rowdetails: true,
initrowdetails: inrow_details,
rowdetailstemplate: null,
height: "240px",
width: "240px",
columns: [
{
text: "Subject Name",
datafield: "subjectnames",
width: "120px",
},
{
text: "Page No.",
datafield: "pagenumber",
width: "120px",
},
],
});
$("#jqxBtn").jqxButton({
width: "180px",
height: "30px",
});
$("#jqxBtn").on("click", function () {
$('#jqxg').jqxGrid('showrowdetails', 2);
var rdt =
$('#jqxg').jqxGrid('rowdetailstemplate');
if (rdt === null) {
$('#log').text(rdt);
}
else {
$('#log').text("Not null!");
}
});
});
</script>
</
body
>
</
html
>