rowselect event master jqxgrid

[gdaianMember]

Hi

My solution contains: jqxMenu, two-jwxWindows with jqxtabs, and an jqxgrid in every jqxtab.
The jqxgrid rowselect master events gets data in jqxgrid detail.

These scenario works very well with iqxWidgets version <= 2.5 and jQuery 1.8.3

the 2.5.5 version has problems with events and menu: the events does not trigger and the menu has a z-index low.
the next versions does not resolve these bugs.

I hope you has success to solve these

thanks

ghitza

[Peter StoevKeymaster]

Hi ghitza,

If you report an issue, please provide a sample which demonstrates it and I also suggest you to take a look at the changes in the Release History as there are breaking changes. The way to host a widget inside jqxTabs is demonstrated here: integration.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gdaianMember]

yes, I do

my sample projs is Visual Studio 2010, MVC 3

Can I send a zip to you with this sample?

Ghitza

[Peter StoevKeymaster]

Hi Ghitza,

We need a very simple sample which just demonstrates the behavior which you experience – only HTML + Javascript.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gdaianMember]

Hi Peter

I send you three pages: _layout.cshtml, Home.cshtml and admin.cshtml. The issue is in admin.cshtml page.

In menu select the Bug page item.
1. the first issue: the menu is under window for jqwidgets 2.6.1. It is ok for 2.5.0 version

2. the second issue: when you select an admin row in Admin window, the event which display the specific detail in the adminDetail window grid does not trigger for jqwidgets 2.6.1. It is ok for 2.5.0 version

3. an other issue: //pAdmin script (205 line in Admin.cshtml) is moved at 310 line. If not, the events does not trigger. (scenario Scripts\jqwidgets2.5.0. Probably some delay. I do not know.) In my project usercontrols are distinct js file and the issue does not appear.

My project is MVC 3 with VS 2010

Here is the _layout.cshtml page

@**@

@RenderBody()

here is the home.cshtml page

jQuery(document).ready(function () {
// Create a jqxMenu
jQuery(“#jqxMenu”).jqxMenu({ width: 1000, height: 30, theme: ‘energyblue’ });
jQuery(“#jqxMenu”).css(‘visibility’, ‘visible’);
jQuery(“#jqxMenu”).jqxMenu({ animationShowDuration: 300, animationHideDuration: 200, animationShowDelay: 200 });
jQuery(“#jqxMenu”).jqxMenu({ disabled: false });
jQuery(“#jqxMenu”).jqxMenu({ enableHover: true });
jQuery(“#jqxMenu”).jqxMenu({ autoOpen: true });
jQuery(“#jqxMenu”).jqxMenu({ showTopLevelArrows: true });

$.ajaxSetup({ cache: false });

});

Home
ITEM

Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Bug page item

jqwidgets test – Home page

Click the ITEM/Bug page Item

1.

This is the error scenario:

Menu item is under the window and the rowselect event does not trigger
[$(“#jqxgridAdmin”).bind(‘rowselect’, function (event) {]

2.
I tested first – Scripts\jqwidgets2.6.1. The web site work well

Second – Scripts\jqwidgets2.5.0  Comment 8 line in _layout.cshtml.   Uncomment
9 line in _layout.cshtml.   The web site work well

3.

//pAdmin script (205 line in Admincshtml) is moved at 310 line. if not, the events
does not trigger. (scenario Scripts\jqwidgets2.5.0. Problably some delays. I do not know.)

Thanks for your help

and finnaly the Admin.cshtml page

// menu script
jQuery(document).ready(function () {
jQuery(“#jqxMenu”).jqxMenu({ width: 1000, height: 30, theme: ‘energyblue’ });
jQuery(“#jqxMenu”).css(‘visibility’, ‘visible’);
jQuery(“#jqxMenu”).jqxMenu({ animationShowDuration: 300, animationHideDuration: 200, animationShowDelay: 200 });
jQuery(“#jqxMenu”).jqxMenu({ disabled: false });
jQuery(“#jqxMenu”).jqxMenu({ enableHover: true });
jQuery(“#jqxMenu”).jqxMenu({ autoOpen: true });
jQuery(“#jqxMenu”).jqxMenu({ showTopLevelArrows: true });

$.ajaxSetup({ cache: false }); // workaround IE

});

//wAdmin script
var wAdmin = (function () {
//Adding event listeners
function _addAdminEventListeners() {
$(‘#resizeAdminCheckBox’).bind(‘change’, function (event) {
if (event.args.checked) {
$(‘#windowAdmin’).jqxWindow(‘resizable’, true);
} else {
$(‘#windowAdmin’).jqxWindow(‘resizable’, false);
}
});
$(‘#dragAdminCheckBox’).bind(‘change’, function (event) {
if (event.args.checked) {
$(‘#windowAdmin’).jqxWindow(‘draggable’, true);
} else {
$(‘#windowAdmin’).jqxWindow(‘draggable’, false);
}
});
$(‘#showWindowAdminButton’).click(function () {
$(‘#windowAdmin’).jqxWindow(‘open’);
});
$(‘#hideWindowAdminButton’).click(function () {
$(‘#windowAdmin’).jqxWindow(‘close’);
});
$(‘#windowAdmin’).bind(‘resizing’, function (event) {
$(‘#tabAdmin’).jqxTabs(‘height’, $(‘#windowAdminContent’).height() – 3);
});
};

//Creating all page elements which are jqxWidgets
function _createAdminElements() {
$(‘#showWindowAdminButton’).jqxButton({ theme: ‘energyblue’, height: ’25px’, width: ’65px’ });
$(‘#hideWindowAdminButton’).jqxButton({ theme: ‘energyblue’, height: ’25px’, width: ’65px’ });
$(‘#resizeAdminCheckBox’).jqxCheckBox({ theme: ‘energyblue’, height: ’25px’, width: ‘185px’, checked: true });
$(‘#dragAdminCheckBox’).jqxCheckBox({ theme: ‘energyblue’, height: ’25px’, width: ‘185px’, checked: true });
$(‘#restrictParentCheckBox’).jqxCheckBox({ theme: ‘energyblue’, height: ’25px’, width: ‘185px’, checked: true });
$(‘#tabAdmin’).jqxTabs({ height: 325, theme: ‘energyblue’ });
$(‘#tabAdmin’).bind(‘selected’, function (event) {
var selectedTab = event.args.item;
if (selectedTab < = 3)
$('#tabAdminDetail').jqxTabs('select', selectedTab)
});
};

//Creating the window
function _createAdminWindow() {
$('#windowAdmin').jqxWindow({ showCollapseButton: true, maxHeight: 500, maxWidth: 1200, minHeight: 325, minWidth: 1100, height: 325, width: 1150, theme: 'energyblue', position: { x: 50, y: 615} });
};
return {
init: function () {
//Creating all jqxWindgets except the window
_createAdminElements();
//Attaching event listeners
_addAdminEventListeners();
//Adding jqxWindow
_createAdminWindow();

pAdmin.init();
}
};
} ());

//wAdminDetail script
var wAdminDetail = (function () {
//Adding event listeners
function _addAdminDetailEventListeners() {
$(‘#resizeAdminDetailCheckBox’).bind(‘change’, function (event) {
if (event.args.checked) {
$(‘#windowAdminDetail’).jqxWindow(‘resizable’, true);
} else {
$(‘#windowAdminDetail’).jqxWindow(‘resizable’, false);
}
});
$(‘#dragAdminDetailCheckBox’).bind(‘change’, function (event) {
if (event.args.checked) {
$(‘#windowAdminDetail’).jqxWindow(‘draggable’, true);
} else {
$(‘#windowAdminDetail’).jqxWindow(‘draggable’, false);
}
});
$(‘#showWindowAdminDetailButton’).click(function () {
$(‘#windowAdminDetail’).jqxWindow(‘open’);
});
$(‘#hideWindowAdminDetailButton’).click(function () {
$(‘#windowAdminDetail’).jqxWindow(‘close’);
});
$(‘#windowAdminDetail’).bind(‘resizing’, function (event) {
$(‘#tabAdminDetail’).jqxTabs(‘height’, $(‘#windowAdminDetailContent’).height() – 3);
});
};

//Creating all page elements which are jqxWidgets
function _createAdminDetailElements() {
$(‘#showWindowAdminDetailButton’).jqxButton({ theme: ‘energyblue’, height: ’25px’, width: ’65px’ });
$(‘#hideWindowAdminDetailButton’).jqxButton({ theme: ‘energyblue’, height: ’25px’, width: ’65px’ });
$(‘#resizeAdminDetailCheckBox’).jqxCheckBox({ theme: ‘energyblue’, height: ’25px’, width: ‘185px’, checked: true });
$(‘#dragAdminDetailCheckBox’).jqxCheckBox({ theme: ‘energyblue’, height: ’25px’, width: ‘185px’, checked: true });
$(‘#restrictParentCheckBox’).jqxCheckBox({ theme: ‘energyblue’, height: ’25px’, width: ‘185px’, checked: true });
$(‘#tabAdminDetail’).jqxTabs({ height: 425, theme: ‘energyblue’ });
$(‘#tabAdminDetail’).bind(‘selected’, function (event) {
var selectedTab = event.args.item;
if (selectedTab < = 3)
$('#tabAdmin').jqxTabs('select', selectedTab)
});
};
//Creating the window
function _createAdminDetailWindow() {
$('#windowAdminDetail').jqxWindow({ showCollapseButton: true, maxHeight: 460, maxWidth: 1200, minHeight: 460, minWidth: 1100, height: 460, width: 1150, theme: 'energyblue', position: { x: 50, y: 150} });
};

return {
init: function () {
//Creating all jqxWindgets except the window
_createAdminDetailElements();
//Attaching event listeners
_addAdminDetailEventListeners();
//Adding jqxWindow
_createAdminDetailWindow();

}
};
} ());

//pAdminDetail script
var pAdminDetail = (function ($) {
var _dbinitAdminDetail = function (AdminId) {
//url = ‘../Admin/getAdminDetails’;
url = ‘/getAdminDetails’ + AdminId + ‘.txt’;
var sourceAdminDetails = {
datatype: “json”,
processdata: function (data) {
data.AdminId = AdminId;
},
datafields: [
{ name: ‘Detail’ },
{ name: ‘Order’ },
{ name: ‘AdminId’ },
{ name: ‘AdminDetailId’ },
],
id: ‘AdminDetailId’,
url: url
};

var dataAdapterAdminDetail = new $.jqx.dataAdapter(sourceAdminDetails);

$(“#jqxgridAdminDetail”).jqxGrid({
width: 1115,
autoheight: true,
theme: ‘energyblue’,
source: dataAdapterAdminDetail,
columnsresize: true,
keyboardnavigation: false,
pageable: true,
editable: false,
columns: [
{ text: ‘Detail’, datafield: ‘Detail’, width: 250, ‘hidden’: false, ‘pinned’: true, editable: false },
{ text: ‘Order’, datafield: ‘Order’, width: 75, ‘hidden’: false, ‘pinned’: false, editable: true },
{ text: ‘AdminId’, datafield: ‘AdminId’, width: 120, ‘hidden’: true, editable: true },
{ text: ‘Id’, datafield: ‘AdminDetailId’, width: 50, ‘hidden’: true, editable: true }
]
});

};

$(“#jqxgridAdminDetail”).bind(“bindingcomplete”, function (event) {
$(“#jqxgridAdminDetail”).jqxGrid(‘selectrow’, 0);
$(‘#jqxgridAdminDetail’).jqxGrid({ pagesize: 12 });
});

$(“#jqxgridAdminDetail”).bind(‘rowselect’, function (event) {
var title = ‘selected – AdminDetailId: ‘;
title += event.args.row.AdminDetailId;
title += ‘, AdminId: ‘;
title += event.args.row.AdminId;
$(‘#windowAdminDetail’).jqxWindow({ title: title });
});

return {
dbinitAdminDetail: function (AdminId) {
_dbinitAdminDetail(AdminId);
},
init: function () {
}
}
} (jQuery));

// pAdmin script – see 310 line

// main script
var Admin = (function () {

return {
init: function () {

wAdmin.init();
wAdminDetail.init();
}
};
} ());

$(document).ready(function () {
Admin.init();
});

Home
ITEM

Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Bug page item

jqwidgets test – bug page

AdminDetail

Admin detail
Help

Help

Resizable

Enable drag

Admin

Admin
Help

// pAdmin script
var pAdmin = (function ($) {
//url = ‘../Admin/getAdmins’;
url = ‘/getAdmins.txt’;
var sourceAdminModel = {};
var _initSource = function () {
sourceAdminModel = {
datatype: “json”,
datafields: [
{ name: ‘AdminId’ },
{ name: ‘name’ },
],
id: ‘AdminId’,
url: url
};
};

var _initAdmin = function () {
_initSource();
var dataAdapterAdmins = new $.jqx.dataAdapter(sourceAdminModel, {
loadComplete: function () {
$(“#jqxgridAdmin”).jqxGrid(‘selectrow’, 0);
}
});

$(“#jqxgridAdmin”).jqxGrid({
width: 1100,
autoheight: true,
theme: ‘energyblue’,
source: dataAdapterAdmins,
columnsresize: true,
keyboardnavigation: false,
pageable: true,
editable: false,
editmode: ‘dblclick’,
selectionmode: ‘singlerow’,
columns: [
{ text: ‘Name’, datafield: ‘name’, width: 400, ‘hidden’: false, pinned: true, ‘editable’: false },
{ text: ‘Id’, datafield: ‘AdminId’, width: 40, ‘hidden’: true, ‘editable’: false }
]
});
};

$(“#jqxgridAdmin”).bind(“bindingcomplete”, function (event) {
$(‘#jqxgridAdmin’).jqxGrid({ pagesize: 7 });
});

$(“#jqxgridAdmin”).bind(‘rowselect’, function (event) {
if (event.args.row != null) {
// detail call
pAdminDetail.dbinitAdminDetail(event.args.row.AdminId);

var title = ‘Id selected: ‘;
title += event.args.row.AdminId;
$(‘#windowAdmin’).jqxWindow({ title: title });
}
});

return {
init: function () {
_initAdmin(); // default: pontaj avans
}
}
} (jQuery));

Help

Resizable

Enable drag

Thanks for your help

ghitza

[Peter StoevKeymaster]

Hi Ghitza,

I am afraid that the provided code does not help. Please, send us a sample which we will be able to run locally. If you want it to be MVC3 application, send it to support@jqwidgets.com

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gdaianMember]

Hi Peter,

I send my issues to your support

Thanks

Ghitza

[Author]

Posts