jQWidgets Forums

Tagged: jqwidgets data adapter

This topic contains 10 replies, has 2 voices, and was last updated by slothy 11 years, 9 months ago.

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

Author

updating dataadapter Posts

August 21, 2013 at 10:42 am updating dataadapter #27266

slothy

Member

Hi Team,

Learning but got to a brick wall

i have tried to get my head round the dataAdapter and to that end i have slightly adpated the gridkeycolumnswitharray.htm example.

For what it is worth, there seems to be very little documentation (or i cant find it) on the mechanics of the source object for the dataAdapter and its implicit methods. updaterow, addrow, etc. What would be nice if it was documented along with the dataAdapter documentation, maybe? Just a thought.

what i have done is added another grid with all the countries and country codes. The new grid allows me to edit the country names. Am i doing something wrong here (some sort of refresh??) because what i want is the dropdownbox in the top grid to reflect any changes i made in the bottom Grid if i were to edit a row.

For example, when i change Afghanistan, say, to Afghan, and i want to change a row in the top grid, the combobox has afghanistan. When i console the countriesAdapter,records it shows Afghan. I am sure i have missed something in the functionality and not called some function!!

Would be nice if one of the team cam explain what is going on and what the process is

Also can someone tell me (it may come to light when i know what i am doing wrong with a rowupdate) how to add a row in the 2nd grid (say i add ME and Middle Earth to the 2nd grid and thus that the changes are reflected in the editing combox box for the first grid (i know requires a button to add a new row. i have done that in another example…just what code to send to the source object of the dataAdapter)

Let us say that a ichange Afghanistan to Afghan. How can i update the top grid so that any CURRENt Afghanistan entries are converted to the amended row in the bottom grid?

here is my code

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is illustrated how to create a Grid with column which displays values from foreign data source. The DropDownList editor associated to the column is populated from the foreign data source.</title>
    <link rel="stylesheet" href="../jquerywidgets3.0/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jquerywidgets3.0/scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../jquerywidgets3.0/scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var countries = [
                 { value: "AF", label: "Afghanistan" },
                 { value: "AL", label: "Albania" },
                 { value: "DZ", label: "Algeria" },
                 { value: "AR", label: "Argentina" },
                 { value: "AM", label: "Armenia" },
                 { value: "AU", label: "Australia" },
                 { value: "AT", label: "Austria" },
                 { value: "AZ", label: "Azerbaijan" },
                 { value: "BS", label: "Bahamas" },
                 { value: "BH", label: "Bahrain" },
                 { value: "BD", label: "Bangladesh" },
                 { value: "BB", label: "Barbados" },
                 { value: "BY", label: "Belarus" },
                 { value: "BE", label: "Belgium" },
                 { value: "BZ", label: "Belize" },
                 { value: "BJ", label: "Benin" },
                 { value: "BM", label: "Bermuda" },
                 { value: "BR", label: "Brazil" },
                 { value: "BN", label: "Brunei" },
                 { value: "BG", label: "Bulgaria" },
                 { value: "CM", label: "Cameroon" },
                 { value: "CA", label: "Canada" },
                 { value: "CL", label: "Chile" },
                 { value: "CN", label: "China" },
                 { value: "CO", label: "Columbia" },
                 { value: "CR", label: "Costa Rica" },
                 { value: "HR", label: "Croatia (Hrvatska)" },
                 { value: "CU", label: "Cuba" },
                 { value: "CY", label: "Cyprus" },
                 { value: "CZ", label: "Czech Republic" },
                 { value: "DK", label: "Denmark" },
                 { value: "TP", label: "East Timor" },
                 { value: "EC", label: "Ecuador" },
                 { value: "EG", label: "Egypt" },
                 { value: "ER", label: "Eritrea" },
                 { value: "EE", label: "Estonia" },
                 { value: "ET", label: "Ethiopia" },
                 { value: "FI", label: "Finland" },
                 { value: "FR", label: "France" },
                 { value: "DE", label: "Germany" },
                 { value: "GR", label: "Greece" },
                 { value: "HK", label: "Hong Kong" },
                 { value: "HU", label: "Hungary" },
                 { value: "IS", label: "Iceland" },
                 { value: "IN", label: "India" },
                 { value: "ID", label: "Indonesia" },
                 { value: "IR", label: "Iran" },
                 { value: "IQ", label: "Iraq" },
                 { value: "IE", label: "Ireland" },
                 { value: "IL", label: "Israel" },
                 { value: "IT", label: "Italy" },
                 { value: "JM", label: "Jamaica" },
                 { value: "JP", label: "Japan" },
                 { value: "MX", label: "Mexico" },
                 { value: "MC", label: "Monaco" },
                 { value: "MA", label: "Morocco" },
                 { value: "NL", label: "Netherlands" },
                 { value: "NZ", label: "New Zealand" },
                 { value: "NE", label: "Niger" },
                 { value: "NG", label: "Nigeria" },
                 { value: "KP", label: "North Korea" },
                 { value: "NO", label: "Norway" },
                 { value: "PA", label: "Panama" },
                 { value: "PE", label: "Peru" },
                 { value: "PH", label: "Philippines" },
                 { value: "PL", label: "Poland" },
                 { value: "PT", label: "Portugal" },
                 { value: "RO", label: "Romania" },
                 { value: "RU", label: "Russia" },
                 { value: "SA", label: "Saudi Arabia" },
                 { value: "SK", label: "Slovak Republic" },
                 { value: "SI", label: "Slovenia" },
                 { value: "ZA", label: "South Africa" },
                 { value: "KR", label: "South Korea" },
                 { value: "ES", label: "Spain" },
                 { value: "SE", label: "Sweden" },
                 { value: "CH", label: "Switzerland" },
                 { value: "TN", label: "Tunisia" },
                 { value: "TR", label: "Turkey" },
                 { value: "UA", label: "Ukraine" },
                 { value: "AE", label: "United Arab Emirates" },
                 { value: "UK", label: "United Kingdom" },
                 { value: "US", label: "United States" }
            ];
            countriesSource =
            {
                 datatype: "array",
                 datafields: [
                     { name: 'label', type: 'string' },
                     { name: 'value', type: 'string' }
                 ],
                 localdata: countries,
                 updaterow: function (rowid, rowdata, commit) {
                     console.log(commit)
                     console.log("here" )
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                },
            };
            countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
                autoBind: true
            });
            countriesAdapter.dataBind();
            // prepare the data
            var gridSource =
            {
                datatype: "array",
                localdata: 
                [
                    { countryCode: "UK" },
                    { countryCode: "US" },
                    { countryCode: "DE" },
                    { countryCode: "FR" },
                    { countryCode: "IN" },
                    { countryCode: "HK" }
                ],
                datafields: [
                    // name - determines the field's name.
                    // value - the field's value in the data source.
                    // values - specifies the field's values.
                    // values.source - specifies the foreign source. The expected value is an array.
                    // values.value - specifies the field's value in the foreign source. 
                    // values.name - specifies the field's name in the foreign source. 
                    // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter. 
                    { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
                    { name: 'countryCode', type: 'string'}
                ]
            };
            var gridAdapter = new $.jqx.dataAdapter(gridSource);
            $("#jqxgrid").jqxGrid(
            {
                width: 400,
                source: gridAdapter,
                theme: theme,
                selectionmode: 'singlecell',
                autoheight: true,
                editable: true,
                columns: [
                    {
                        text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'dropdownlist',
                        createeditor: function (row, value, editor) {
                            console.log(countriesAdapter.records)
                            editor.jqxDropDownList({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' });
                        }
                    }                    
                ]
            });
            $("#jqxgrid").on('cellselect', function (event) {
                var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
                var value = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.datafield);
                var displayValue = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.displayfield);
                $("#eventLog").html("<div>Selected Cell<br/>Row: " + event.args.rowindex + ", Column: " + column.text + ", Value: " + value + ", Label: " + displayValue + "</div>");
            });
            $("#jqxgrid").on('cellendedit', function (event) {
                var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
                console.log(column)
                if (column.displayfield != column.datafield) {
                    $("#eventLog").html("<div>Cell Edited:<br/>Index: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value.value + ", Label: " + event.args.value.label
                        + "<br/>Old Value: " + event.args.oldvalue.value + ", Old Label: " + event.args.oldvalue.label + "</div>"
                        );
                }
                else {
                    $("#eventLog").html("<div>Cell Edited:<br/>Row: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value
                        + "<br/>Old Value: " + event.args.oldvalue + "</div>"
                        );
                }
            });
            // master grid
            
           
            $("#jqxgrid2").jqxGrid(
            {
                width: 480,
                source: countriesAdapter,
                theme: theme,
                selectionmode: 'singlecell',
                autoheight: true,
                editable: true,
                columns: [
                    {text: 'Country Code', dataField: 'value', width: 100, cellsalign: 'center', align: 'center', editable: false},
                    {
                        text: 'Country', width: 380,datafield: 'label',cellsalign: 'left', align: 'center', editable: true
                    }                    
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div style="font-size: 13px; margin-top: 20px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;" id="eventLog"></div>
    </div>
    
        <div id='jqxWidget2'>
        <div id="jqxgrid2">
        </div>
        <div style="font-size: 13px; margin-top: 20px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;" id="eventLog"></div>
    </div>
</body>
</html>

August 21, 2013 at 10:44 am updating dataadapter #27267

slothy

Member

Thanks

August 21, 2013 at 10:57 am updating dataadapter #27268

Peter Stoev

Keymaster

Hi slothy,

1. The Documentation about jqxDataAdapter is detailed and includes many samples and information about the widget. Here’s a link: – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm
2. To use a widget like the Grid, it is recommended to take a look at its Documentation, too. To bind a Grid to a jqxDataAdapter, please take a look at the Grid’s Data Source help topic, too – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm. updaterow, addrow and deleterow are not part of jqxDataAdapter and that is the reason you will not find information about these functions in the jqxDataAdapter’s help topic. You should look in the Grid’s documentation instead.
3. Each Grid should be bound to its own jqxDataAdapter instance. You cannot share a dataAdapter among multiple widgets.
4. The Grid has events like “cellvaluechanged” or callback functions like “updaterow” which occur when a cell value or row is changed. Here’s a demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/createremoveupdatedata.htm?web which shows how to add, remove or update a row through the Grid’s API. When a row is updated in Grid A, you can simply call the “updaterow” method of Grid B and update its row, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 21, 2013 at 11:33 am updating dataadapter #27271

slothy

Member

Dear Peter,

Thank you for the prompt reply Very professional.

I understand about the data source not being able to be shared amongst widgets.

So, further to this example, must i programmatically change the underlying datasource for the first grid’s dropdownbox (the grid with the example countries) if i were to change data in the countries grid?

Thank you again,

Alex.

August 21, 2013 at 11:37 am updating dataadapter #27272

Peter Stoev

Keymaster

Hi slothy,

When you change the DropDownList’s value in Grid A, the “cellvaluechanged” event of Grid A will be raised.

$("#jqxGrid").on('cellvaluechanged', function (event) 
{
    var column = args.datafield;
    var row = args.rowindex;
    var value = args.newvalue;
    var oldvalue = args.oldvalue;
});

Having information about the Cell’s Row, Column and New Value, you may call the “setcellvalue” method of Grid B and pass the row, column and value to update.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 21, 2013 at 11:55 am updating dataadapter #27275

slothy

Member

Hi Peter,

umm, i am getting lost here, sorry.

I will change the program when i get home and have distinct data adapters. Maybe it would make things clearer for myself then.

But just to clarify:

What i want to understand is how to, or even whether i HAVE to (i think i do), change the —>datasource<—- of the dropdownbox for the ? ie UPDATE the underlying dataadapter.records array of $('#jqgrid') [as i have CHANGED the underlying data elsewhere ? ]

When i make a change in the $('#jqgrid2') ie change record[0] to Afghan from Afghanistan say obviously the dataadapter records for $('#jqgrid') has to be changed programmatically by me to reflect changes in the data? so that when i click on it again it comes up as Afghan in the dropdown?

Hope i have made myself clearer

thanks

alex

August 21, 2013 at 12:07 pm updating dataadapter #27276

Peter Stoev

Keymaster

Hi slothy,

You should not update manually the dataadapter.records. Updates are handled by the Grid, you just have to use the Grid’s API – setcellvalue or updaterow to update row or cell. Editing of a cell, calls setcellvalue, too. If you want to changed the data source of a DropDownList Editor, then you should add a “createeditor” callback as you already did on your sample. “createeditor” is called once when the editor is created. If you want to dynamically change the data source of the editor, then you should use “initeditor” because it is called each time the editor is opened. And finally, the Grid has a method called “getrows” which returns the rows displayed in the Grid i.e it takes into account any changes in the view like sorting, filtering, editing. The method’s return value is an Array.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 21, 2013 at 12:26 pm updating dataadapter #27278

slothy

Member

OK Peter

just to make this clear.

I think you are saying that ‘…i should not update manually the dataadapter.records’ as you are assuming that i am using the grid itself $(‘#jqgrid2’) as the datasource to $(‘#’jqxgrid’)???

Otherwise, how would the combobox in $(‘#’jqxgrid’) know (as one cannot share dataadapters between widgets) that its underlying data has changed?

Maybe we are at cross-purposes and i am not making myself clear

Alex

August 21, 2013 at 12:33 pm updating dataadapter #27279

Peter Stoev

Keymaster

Hi slothy,

I meant that you should not write code like dataAdapter.records[0][‘columnName’] = ‘New Value’. It is also not possible to use a Grid as a data source of another Grid. jqxDataAdapter is what can be used as a data source and each widget should have its own jqxDataAdapter. Synchronization between widgets data should be done through the widgets public API – setcellvalue, or updaterow.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 21, 2013 at 12:49 pm updating dataadapter #27283

slothy

Member

Dear Peter,

Just re-read the posts and i think i got it. Will have a bash at it when i get home. Back to wrk!!

Thanks for your time and patience Peter

Have a nice day

Regards

Alex

August 23, 2013 at 11:00 am updating dataadapter #27544

slothy

Member

Dear Peter,

I still dont get how you can change the dropdownlist!!!!!! in $(‘jqxgrid’) if you are saying that i cant change the underlying records. I cant see how you can access the dropdownlist in the grid column through the Grid API in $(‘#jqGrid’) when you change a value in $(‘#jqGrid2’)

so let us say i want to change ‘Afghanistan’ – records[0] – to ‘Afghan’, say, in ‘#jqGrid2’ and i have the callback

$(“#jqxGrid2”).on(‘cellvaluechanged’, function (event)
{
var column = args.datafield;
var row = args.rowindex;
var value = args.newvalue;
var oldvalue = args.oldvalue;

//row = 0, value = “Afghan”, oldvalue = “Afghanistan”

/// what do i call here to change the dropdownlist for column[1] in $(‘#jqxGrid’)???
});

When the dropdown in $(‘jqGrid’) comes up i want it to reflect that ‘Afghanistan’ has changed to ‘Afghan’…

As far as i understand, I cannot use updaterow on the dataadapter for the dropdownlist….i dont want to change anything in the grid (so i cant call updaterow on the grid) as such i want to change the dropdownlist evoked when the user wants to edit the country in the grid.

where do i pass row, value to ???? i dont understand this part.

Regards Alex.

Author

Posts

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

You must be logged in to reply to this topic.