How to add scroll to rowdetails of jQXgrid || AngularJS

[chiluveru.venuParticipant]

js code :
$scope.gridSettings =
{
width: 850,
source: dataAdapter,
pageable: true,
columnsresize: true,
scrollmode: ‘logical’,
scrollbarsize: 10,
enablemousewheel:true,
enablehover:true,
rowdetails: true,
rowdetailstemplate: { rowdetails: “<div class=’grid-row-details’></div>”, rowdetailsheight: 200 },
showrowdetailscolumn:false,
initrowdetails: function (id, row, element, rowinfo) {
var html = “<inbox-message></inbox-message>”;
var linkFn = $compile(html);
var element = linkFn($scope);
var details = $(angular.element(row).children()[0])
details.html(element)

},

html code :
<div ng-controller=”demoController”>
<jqx-grid jqx-on-rowclick=”handleRowclick()” jqx-create=”createWidget” jqx-settings=”gridSettings”></jqx-grid>
</div>

<inbox-message></inbox-message> – is a custom directive.This will be triggered when row is expanded.This directive may contain large data.Need to add the scroll for this and when mouse is on this directive,contents of this directive should be scrolled not the grid

Thanks in advance

[HristoParticipant]

Hello chiluveru.venu,

I would like to suggest you implement jqxPanel there. With this approach, you will have more options to control inner content (“Row Details”).

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts