jQuery UI Widgets › Forums › Grid › ComboBox – Tabs – Grid
This topic contains 8 replies, has 4 voices, and was last updated by svetoslav_borislavov 2 years, 7 months ago.
-
AuthorComboBox – Tabs – Grid Posts
-
I am totally new when it comes to Internet programming.
I have successfully implemented the ‘combobox_and_grid’ demo (found in my ‘jqwidgets-14.0.0\demos\PHP’ folder). However, my goal is to ‘place’ the grid within a tab. How would I go about that?
Any guidance/suggestions would be greatly appreciated.
Thank you
Hi,
You can look at https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/integration.htm?light. It shows how to use Grids inside Tabs.
Hope this helps.
Best regards,
Peter StoevjQWidgets Team
https://www.jqwidgets.com/Thanks. Your suggestion confirms that I am on the right track. However, I still have an issue that, so far, I have been unable to resolve on my own.
Here is part of my JavaScript:
$(document).ready(function () { var initEvents = (function () { var initEventGrid1 = function (eventID) { var source = { ... }; var dataadapter = new $.jqx.dataAdapter(source); $("#jqxEventGrid1").jqxGrid({ ... }); } var initEventGrid2 = function (eventID) { var source = { ... }; var dataadapter = new $.jqx.dataAdapter(source); $("#jqxEventGrid2").jqxGrid({ ... }); } var initWidgets = function (tab) { switch (tab) { case 0: initEventGrid1(eventID); break; case 1: initEventGrid2(eventID); break; } } return { init: function (eventID) { $('#jqxTabs').jqxTabs({ width: 968, initTabContent: initWidgets }); } }; } ()); $("#jqxcombobox").jqxComboBox( { source: cbDataAdapter, width: 200, height: 25, selectedIndex: 0, displayMember: 'EventDate', valueMember: 'EventID' }); $("#jqxcombobox").bind('select', function(event) { var eventID = event.args.item.value; initEvents.init(eventID); }); });
My question is: how do I pass the value of
eventID
to the tabs when an item is selected within the combo box?Hi,
You can take the eventID variable outside the scope of the ‘select’ Event. In this way it will be accessible by all functions(including initWidgets):
$(document).ready(function () { //create the variable beforehand, it will be available to all functions var eventID; var initEvents = (function () { var initEventGrid1 = function (eventID) { var source = { ... }; var dataadapter = new $.jqx.dataAdapter(source); $("#jqxEventGrid1").jqxGrid({ ... }); } var initEventGrid2 = function (eventID) { var source = { ... }; var dataadapter = new $.jqx.dataAdapter(source); $("#jqxEventGrid2").jqxGrid({ ... }); } var initWidgets = function (tab) { switch (tab) { case 0: initEventGrid1(eventID); break; case 1: initEventGrid2(eventID); break; } } return { init: function (eventID) { $('#jqxTabs').jqxTabs({ width: 968, initTabContent: initWidgets }); } }; } ()); $("#jqxcombobox").jqxComboBox( { source: cbDataAdapter, width: 200, height: 25, selectedIndex: 0, displayMember: 'EventDate', valueMember: 'EventID' }); $("#jqxcombobox").bind('select', function(event) { //Only updates eventId eventID = event.args.item.value; initEvents.init(eventID); }); });
Best Regards,
Ivan Peevski
jQWidgets Team
https://www.jqwidgets.com/Thanks for your help. Your suggestion does achieve what I was looking for. Nevertheless, I now have a new question:
The
initEvents.init(eventID);
found within$("#jqxcombobox").bind('select', function(event)
is only called the first time the site is rendered. How should I update the content of the grids (their content is based on the value ofeventID
) when a new item is selected within the combo box?I thought that modifying my code from:
$("#jqxcombobox").bind('select', function(event) { //Only updates eventId eventID = event.args.item.value; initEvents.init(eventID);
to:
$("#jqxcombobox").bind('select', function(event) { eventID = event.args.item.value; initEvents.init(eventID); refreshGrid(); }); var refreshGrid = function () { $("#jqxEventGrid1").jqxGrid('updatebounddata'); $("#jqxEventGrid2").jqxGrid('updatebounddata'); };
Would have done the trick. But it does not. What am I doing wrong?
Hi,
Have a look at this demo: https://jsfiddle.net/jqwidgets/dRbAE/.
То get the things working you should update the source and the DataAdapter of the grids. After that, you can call
$(“#jqxEventGrid1”).jqxGrid(‘updatebounddata’);
$(“#jqxEventGrid2”).jqxGrid(‘updatebounddata’);Best Regards,
Svetoslav Borislavov
jQWidgets Team
https://www.jqwidgets.com/Thank you very much. Your suggestion to update the source and the DataAdapter of the grids was what I was looking for. My code is now working properly.
Hi,
I am so happy about that, Go ahead!
Best Regards,
Svetoslav Borislavov
jQWidgets Team
https://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.