LoadServerData sending current row value

[FihamParticipant]

I need to pass parameter when loading from the server. to JqxDropdownList I need to load data based on current row Id. I am trying to capture the current row value inside the loadServerData inside the DataAdapter. Please can anyone help me?.

var data = '[{ "Id": "1"}, { "Id": "2"}, { "Id": "3"}]';
            var countriesSource =
            {
                datatype: "json",
                datafields: [
                    { name: 'id', type: 'string' },
                    { name: 'body', type: 'string' }
                ],
                url: "https://my-json-server.typicode.com/typicode/demo/comments",
                async: true
            };
            var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
                autoBind: true,
                loadServerData: function (serverdata, source, callback) {
                    $.ajax({
                        dataType: source.datatype,
                        url: "https://my-json-server.typicode.com/typicode/demo/comments",
                        data: serverdata,
                        success: function (data, status, xhr) {                           
                            // send the loaded records to the jqxDataAdapter plug-in.
                            callback({ records: data });
                        }
                    });
                }
            });

            var gridSource =
            {
                datatype: "json",
                localdata: data,
                datafields: [
                    { name: 'Country', values: { source: countriesAdapter.records, value: 'id', name: 'body' } }
                ]
            };

            var gridAdapter = new $.jqx.dataAdapter(gridSource);

            $("#grid").jqxGrid(
                {
                    width: 600,
                    source: gridAdapter,
                    selectionmode: 'singlecell',
                    autoheight: true,
                    editable: true,
                    columns: [
                        {
                            text: 'Id', datafield: 'Id', width: 150
                        },
                        {
                            text: 'Country', datafield: 'Country', displayfield: 'Country', columntype: 'dropdownlist',
                            createeditor: function (row, value, editor) {
                                editor.jqxDropDownList({ source: countriesAdapter, displayMember: 'body', valueMember: 'id' });
                            }
                        }
                    ]
                });

[adminKeymaster]

Hi Fiham,

We have an example which shows how to load data grid data based on a selected index of jqxDropDownList or jqxComboBox(they share the same API).
The link to the example is: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/cascadingcombobox.htm

Hope this helps you and points you to the right direction.

Best regards,
Peter Stoev

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

[FihamParticipant]

Hi admin,

This is not regarding the dropdownList Issue. The issue was in the Grid. How to send the current row values to loadServerData. This example doesn’t relate to the question. There are two columns one column value contain a Id value and other column contains a dropdownList, dropdownList data will load from a server to load from server i need to send current row Id column value in loadServerData.

[adminKeymaster]

Hi Fiham,

I prepared an example: http://jsfiddle.net/wqua4pmv/ which shows how to get the current row’s id.

In the below code, the first line gets the selected row index. The second line, gets the selected row’s data. The data contains all row fields including the id.

  var index = $('#jqxgrid').jqxGrid('getselectedrowindex');
  var data = $('#jqxgrid').jqxGrid('getrowdata', index);
  alert(data.id + ' ' + data.firstname + " " + data.lastname);

Hope this helps.

Best regards,
Peter Stoev

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

[FihamParticipant]

This cannot be used inside the loadServerData function. This cannot be used inside an adapter.

var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
                autoBind: true,
                loadServerData: function (serverdata, source, callback) {
                    $.ajax({
                        dataType: source.datatype,
                        url: "https://my-json-server.typicode.com/typicode/demo/comments",
                        data: serverdata,
                        success: function (data, status, xhr) {                           
                            // send the loaded records to the jqxDataAdapter plug-in.
                            callback({ records: data });
                        }
                    });
                }
            });

I need to pass the Url as https://my-json-server.typicode.com/typicode/demo/comments?id = 1 for second row https://my-json-server.typicode.com/typicode/demo/comments?id = 2 id value contain inside current rows another column.

[Author]

Posts