On page load, auto load data based on pre-selected item from DropDownList - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: bindingcomplete, event, grid, initialize, initialized, jqxDropDownList, jqxgrid, load, select

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

On page load, auto load data based on pre-selected item from DropDownList Posts
March 23, 2014 at 10:48 pm On page load, auto load data based on pre-selected item from DropDownList #51669

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.

March 23, 2014 at 10:48 pm On page load, auto load data based on pre-selected item from DropDownList #51670

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>

March 23, 2014 at 10:56 pm On page load, auto load data based on pre-selected item from DropDownList #51671

jaxond24
Participant

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

March 24, 2014 at 6:04 am On page load, auto load data based on pre-selected item from DropDownList #51678

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/

March 24, 2014 at 9:21 am On page load, auto load data based on pre-selected item from DropDownList #51710

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.

March 24, 2014 at 11:10 am On page load, auto load data based on pre-selected item from DropDownList #51727
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/
March 25, 2014 at 2:02 am On page load, auto load data based on pre-selected item from DropDownList #51783

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.
Author

Posts

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

You must be logged in to reply to this topic.