[gdaianMember]

Hi Peter

thanks

Ghitza

[gdaianMember]

Hi Peter,

I send my issues to your support

Thanks

Ghitza

[gdaianMember]

Hi Peter,

Yes, I saw. This is the problem. But I can not solve it. Will see that in my sample from http://www.jqwidgets.com/community/topic/rowselect-event-master-jqxgrid/#post-14062

I hope you can me help

Thanks

Ghitza

[gdaianMember]

Hi Peter,

Thanks for adding the new component jqxinput. It solves my problem.

Ghitza

[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

[gdaianMember]

yes, I do

my sample projs is Visual Studio 2010, MVC 3

Can I send a zip to you with this sample?

Ghitza

[gdaianMember]

Do you solved this question?
I use jqxWindow, the menu is under window. It is ugly

ghitza

[gdaianMember]

ok
thanks

[Author]

Posts