jQuery UI Widgets Forums Lists ListBox On page load, auto load data based on pre-selected item from DropDownList

This topic contains 6 replies, has 2 voices, and was last updated by  jaxond24 8 years, 10 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • jaxond24
    Participant

    Hello,

    I have a requirement for a Grid to load based on an item selected from a DropDownList. The DropDownList contains dates sorted from newest to oldest, and when a date is selected a Grid loads containing data related to that date. Everything with this is working as expected. What I am hoping to achieve is when the page loads initially, the most recent date is automatically selected and the Grid corresponding to that date is automatically displayed. From here, the user can select another date from the DropDownList if they like and load a Grid of their choosing.

    I’ve been able to use the ‘selectedIndex’ property on the DropDownList to pre-select the latest date, but I don’t know how to then use this to auto load the related Grid. I’ve looked at the ‘initialised’ event on the Grid, but this only applies once the user has selected an item manually.

    How can I automatically select the latest date and load the related grid automatically on page load?

    Thank you,
    Damian.


    jaxond24
    Participant

    Here is some code based on a demo:

    $(document).ready(function () {

    // prepare the data
    var progInstSource =
    {
    datatype: “json”,
    datafields: [
    { name: ‘programInstID’, type: ‘int’},
    { name: ‘programInstDate’, type: ‘date’, cellsformat: ‘F’}
    ],
    url: “bodyProgInstData.php”,
    async: false
    };

    var programDataAdapter = new $.jqx.dataAdapter(progInstSource);

    // create a DropDownList
    // The displayMember specifies that the list item’s text will be the Employee’s Name.
    // The valueMember specifies that the list item’s value will be the Employee’s ID.
    $(“#jqxListBox”).jqxDropDownList(
    {
    width: 350,
    height: 25,
    source: programDataAdapter,
    promptText: ‘Select a Program:’,
    selectedIndex: -1,
    displayMember: ‘programInstDate’,
    valueMember: ‘programInstID’
    });

    $(“#jqxListBox”).bind(‘select’, function(event)
    {
    var programInstID = event.args.item.value;
    var warmUpSource =
    {
    datatype: “json”,
    datafields: [
    { name: ‘warmUpNo’, type: ‘int’},
    { name: ‘warmUpSet’, type: ‘int’},
    { name: ‘warmUpRep’, type: ‘int’},
    { name: ‘warmUpWeight’, type: ‘int’},
    { name: ‘warmUpActivity’, type: ‘string’}
    ],
    type: ‘POST’,
    data: {programInstID:programInstID},
    url: “bodyProgWarmUpData.php”,
    };

    var dataAdapter = new $.jqx.dataAdapter(warmUpSource);
    $(“#warmUpGrid”).jqxGrid({
    source: dataAdapter,
    width: ‘100%’,
    autoheight: true,
    editable: true,
    columns:
    [
    {datafield: “warmUpNo”, text: “#”, width: ’10px’},
    {datafield: “warmUpSet”, text: “Sets”, width: ’50px’},
    {datafield: “warmUpRep”, text: “Reps”, width: ’50px’},
    {datafield: “warmUpWeight”, text: “Weight”, width: ’80px’},
    {datafield: “warmUpActivity”, text: “Activity”, width: ‘395px’}
    ]
    });
    });
    });

    </script>
    </head>

    <body>
    <div style=”margin-bottom: 20px;” id=”jqxListBox”></div>
    <div id=”warmUpGrid”></div>
    </body>


    jaxond24
    Participant

    Apologies, I just realised I posed this under “ListBox” rather than “DropDownList”.


    Dimitar
    Participant

    Hello jaxond24,

    You can initialize the default grid (with data from the latest date) in the jqxDropDownList bindingComplete event. You can even create a custom function named, for example, initGrid and call this function once on bindingComplete and once on select with different arguments.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    jaxond24
    Participant

    Hello,

    Thank you for your reply. I did try using the bindingCOmplete before posting my question here, but I’m new to this stuff and I’m not yet smart enough to figure out what I need to do! I’ve spent some time just now trying again but am still unsure what I need to do. Would you be so kind as to provide some sample code to point me in the right direction?

    Apologies, and thank you.

    Damian.


    Dimitar
    Participant

    Hello Damian,

    Here is my idea:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var initGrid = function (programInstID) {
                        alert(programInstID);
                    };
    
                    var source = [
                        "Affogato",
                        "Americano",
                        "Bicerin",
                        "Breve",
                        "Café Bombón",
                        "Café au lait",
                        "Caffé Corretto",
                        "Café Crema",
                        "Caffé Latte",
                        "Caffé macchiato",
                        "Café mélange",
                        "Coffee milk",
                        "Cafe mocha",
                        "Cappuccino",
                        "Carajillo",
                        "Cortado",
                        "Cuban espresso",
                        "Espresso",
                        "Eiskaffee",
                        "The Flat White",
                        "Frappuccino",
                        "Galao",
                        "Greek frappé coffee",
                        "Iced Coffee",
                        "Indian filter coffee",
                        "Instant coffee",
                        "Irish coffee",
                        "Liqueur coffee"
    		        ];
    
                    $("#jqxWidget").on("bindingComplete", function () {
                        var programInstID = "today";
                        initGrid(programInstID);
                    });
    
                    $("#jqxWidget").jqxDropDownList({ source: source, selectedIndex: 1, width: '200', height: '25' });
    
                    $("#jqxWidget").on("select", function (event) {
                        var programInstID = event.args.item.value;
                        initGrid(programInstID);
                    });
                });
            </script>
            <div id='jqxWidget'>
            </div>
        </div>
    </body>
    </html>

    However, instead of a simple alert, you will have the grid initialization code in initGrid:

    var initGrid = function (programInstID) {
    var warmUpSource =
    {
    datatype: “json”,
    datafields: [
    { name: 'warmUpNo', type: 'int'},
    { name: 'warmUpSet', type: 'int'},
    { name: 'warmUpRep', type: 'int'},
    { name: 'warmUpWeight', type: 'int'},
    { name: 'warmUpActivity', type: 'string'}
    ],
    type: ‘POST’,
    data: {programInstID:programInstID},
    url: “bodyProgWarmUpData.php”,
    };
    
    var dataAdapter = new $.jqx.dataAdapter(warmUpSource);
    $(“#warmUpGrid”).jqxGrid({
    source: dataAdapter,
    width: ’100%’,
    autoheight: true,
    editable: true,
    columns:
    [
    {datafield: "warmUpNo", text: "#", width: '10px'},
    {datafield: "warmUpSet", text: "Sets", width: '50px'},
    {datafield: "warmUpRep", text: "Reps", width: '50px'},
    {datafield: "warmUpWeight", text: "Weight", width: '80px'},
    {datafield: "warmUpActivity", text: "Activity", width: '395px'}
    ]
    });
    };

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    jaxond24
    Participant

    Hello,

    Thank you for the reply. I did think I had tried this, but obviously something wasn’t right. I’ll re-try based on your example, and see how I go.

    Damian.

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

You must be logged in to reply to this topic.