[js_newbieParticipant]

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.

[js_newbieParticipant]

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?

[js_newbieParticipant]

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 of eventID) when a new item is selected within the combo box?

[js_newbieParticipant]

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?

[Author]

Posts