How i can cellendedit event jqxgrid using angular?

[brocchsParticipant]

i have some problem, i got more than 1 POST on “cellendedit” after call back getSyncData() on event select ng-change=”getSyncData(datas)”;

this my code
html

<select ng-change="user.getSyncData(agenselect)">
   <option ng-repeat="option in agenlist.availableOptions" value="{{option.KODE_AGEN}}">{{option.NAMA_AGEN}}</option>
</select>

angularjs

vm.getSyncData = function(kode_agen = null){
          $http({
               url: 'api/syncDatas',
               method: 'POST',
               data: {"code":kode_agen}
          }).success(function (data, status) {
                var countriesSource =
                {
                     datatype: "array",
                     datafields: [
                         { name: 'kode_customer', type: 'string' },
                         { name: 'nama', type: 'string' }
                     ],
                     localdata: data.retail
                };

                var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
                    autoBind: true
                });
                // prepare the data
                var gridSource =
                {
                    datatype: "array",
                    localdata: data.syncData,
                    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: 'nama_retail', value: 'kode_cust_retail', values: { source: countriesAdapter.records, value: 'kode_customer', name: 'nama' } },
                        { name: 'kode_cust_retail', type: 'string' },
                        { name: 'nama_cust_dbo', type: 'string' },
                        { name: 'kode_cust_dbo', type: 'string' }
                    ]
                };
                var gridAdapter = new $.jqx.dataAdapter(gridSource);
                $("#jqxgrid").jqxGrid(
                {
                    width: '100%',
                    source: gridAdapter,
                    selectionmode: 'singlecell',
                    autoheight: true,
                    editable: true,
                    columns: [
                         {  text: 'DBO Name', datafield: 'nama_cust_dbo', columntype: 'text' , editable: false},
                        ,{
                            text: 'Retail Name', datafield: 'kode_cust_retail', displayfield: 'nama_retail', columntype: 'dropdownlist',
                            createeditor: function (row, value, editor) {
                                editor.jqxDropDownList({ source: countriesAdapter, displayMember: 'nama', valueMember: 'kode_customer' });
                            }
                         }
                    ]
                });
                $("#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);

                    var value = args.value;
                    var rowData = args.row;

                    $http({
                      method: 'POST',
                      url: 'api/updateCustomer',
                      data: {"dbo":rowData.kode_cust_dbo, "retail":value.value, "agen":kode_agen}
                    }).then(function successCallback(response) {
                        // this callback will be called asynchronously
                        // when the response is available
                      }, function errorCallback(response) {
                        // called asynchronously if an error occurs
                        // or server returns response with an error status.
                    });

                    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>"
                            );
                    }
                });

          }).error(function (data, status) {
              // Some error occurred
          });

        };

[brocchsParticipant]

sorry how to quote code?

[HristoParticipant]

Hello brocchs,

This is not correct implementation. Each time when you select an item will recreate the Grid from the beginning.
You should create the Grid before that only once. Like as document ready.
In the getSync Data(agenselect) method should set only those things that are changed, update the source, etc.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[brocchsParticipant]

how i can update the source? pleas give me example how to refresh jqxgrid using ajax sir

[HristoParticipant]

Hello brocchs,

I would suggest you look at this forum topic:
http://www.jqwidgets.com/community/topic/columns-dynamically-in-grid/#post-7493
You should create the Grid outside of the AJAX and just to update data with the AJAX.
Please, take a look at this demo, you could see how to update the data.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts