jQuery UI Widgets Forums Grid ComboBox – Tabs – Grid

Tagged: , ,

This topic contains 8 replies, has 4 voices, and was last updated by  svetoslav_borislavov 2 years, 7 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • ComboBox – Tabs – Grid #121840

    js_newbie
    Participant

    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

    ComboBox – Tabs – Grid #121847

    admin
    Keymaster

    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 Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

    ComboBox – Tabs – Grid #121851

    js_newbie
    Participant

    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?

    ComboBox – Tabs – Grid #121853

    ivanpeevski
    Participant

    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/

    ComboBox – Tabs – Grid #121860

    js_newbie
    Participant

    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?

    ComboBox – Tabs – Grid #121867

    js_newbie
    Participant

    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?

    ComboBox – Tabs – Grid #121868

    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/

    ComboBox – Tabs – Grid #121874

    js_newbie
    Participant

    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.

    ComboBox – Tabs – Grid #121875

    Hi,

    I am so happy about that, Go ahead!

    Best Regards,
    Svetoslav Borislavov
    jQWidgets Team
    https://www.jqwidgets.com/

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.