summary data

[paramvir]

you can add a check in click listeners of Next and Previous buttons.

if grid is dirty
  display warning message
else
  go to next or previous record.

[Richard]

Hi paramvir

The key point of what I want is how to look up the corresponding data in DB and display it on the screen if I choose one from the Year-Month List.
That is, it is how the dataModel portion from the source below is transferred to the year-month selected by call.
I'd really appreciate it if you could let me the solution.

Code: [Select]

{ // 13-2)
type: 'select',
label: '<b>Year-Month: ',options: [{ '2022-02': '2022-02', '2022-03': '2022-03', '2022-04': '2022-04', '2022-05': '2022-05' }],
listener: function (evt) {
// $(evt.target).val()


}
},

(Skip the middle)

dataModel: {
dataType: 'JSON',
location: 'remote',
recIndx: 'id',
url: "pp2_product_plan_save.php?mt_product=2022-05&cd_wc=W120",

getData: function (response){
debugger;
response.data.forEach(function (rd) {
// comment data
if (rd.pq_cellattr) rd.pq_cellattr = JSON.parse(rd.pq_cellattr);
if (rd.pq_cellstyle) rd.pq_cellstyle = JSON.parse(rd.pq_cellstyle);


if (rd.cd_kind < 4) { // stock data
Object.defineProperty(rd, 'total_this_month1', {
get (){
//return tot_this_month;
var rd = this, total = 0;
for(var i=1;i<=31;i++){
total += rd['qty' + i];
}
return total;
}
})
Object.defineProperty(rd, 'total_this_month2', {
get (){
//return tot_this_month;
var rd = this, total = 0;
for(var i=1;i<=31;i++){
total += rd['qty' + i];
}
return total;
}
})
}
else if(rd.cd_kind == 4){ // stock data

Object.defineProperty(rd, 'qty1', {
enumerable: true, get() {
var rd = this, ri = rd.pq_ri, pdata = grid.pageData(),
pre_month_stock = rd['total_pre_month'],
day = (pdata && pdata[ri - 4]) ? pdata[ri - 4].qty1 : 0,
night = (pdata && pdata[ri - 3]) ? pdata[ri - 3].qty1 : 0,
shipment = (pdata && pdata[ri - 2]) ? pdata[ri - 2].qty1 : 0,
etc = (pdata && pdata[ri - 1]) ? pdata[ri - 1].qty1 : 0;

return pre_month_stock + day + night - shipment - etc;
}
});

for(var i=2; i<=31; i++){

(function(qty, i){
Object.defineProperty(rd, qty, {
enumerable: true, get() {
var rd = this, ri = rd.pq_ri, pdata = grid.pageData(),
pre_day_stock = (pdata && pdata[ri]) ? pdata[ri]['qty'+(i-1)] : 0,
day = (pdata && pdata[ri - 4]) ? pdata[ri - 4][qty] : 0,
night = (pdata && pdata[ri - 3]) ? pdata[ri - 3][qty] : 0,
shipment = (pdata && pdata[ri - 2]) ? pdata[ri - 2][qty] : 0,
etc = (pdata && pdata[ri - 1]) ? pdata[ri - 1][qty] : 0;

return stock_this_month = pre_day_stock + day + night - shipment - etc;
}
});
})('qty'+i, i)
}

Object.defineProperty(rd, 'total_this_month1', {
get (){
var stock_this_month = rd['qty31'];
return stock_this_month;
}
})
Object.defineProperty(rd, 'total_this_month2', {
get (){
var stock_this_month = rd['qty31'];
return stock_this_month;
}
})
}
})

this.option('summaryData', calculateSummary(this));
return response;
}
},

(The following is omitted)

[paramvir]

Ok so the basic question is how to send a new request with custom parameters to remote server and load received remote data in the grid.

Code: [Select]

this.option( "dataModel.postDataOnce", { year_month:  $(evt.target).val()} );
this.refreshDataAndView(); //this sends the above post data and reloads the response in the grid.

in your remote script look for $_GET['year_month'] and send appropriate response back to grid.

[Richard]

Hi paramvir

I'm really grateful to you for applying what you said and getting the results I want.

An additional matter to be resolved is that if the user selects a different Year-Month
from the one displayed in the Year-Month LIST in the state where the cell data is modified,
a warning message stating that 'Data is not saved!!' appears.
After doing so, we want to skip the part that searches the DB data and displays it on the screen.

I would really appreciate it if you could let me how to solve this.

Code: [Select]

{ // 13-2)
type: 'select',
label: '<b>Year-Month: ', options: [{ '2022-05': '2022-05', '2022-04': '2022-04' }],
listener: function (evt) {

this.option("dataModel.postDataOnce", {
mt_product: $(evt.target).val(),
cd_wc: "W120"
});
this.refreshDataAndView(); //this sends the above post data and reloads the response in the grid
}
},

[paramvir]

Code: [Select]

if save button is enabled in toolbar
  display warning message
else
  load next or previous record.


[Richard]

Hi paramvir

I'm sorry I didn't seem to convey exactly what I wanted.
What I want is to know how to check whether the Save button is in Enable or Disable state
when the user selects one from the YEAR-MONTH List.

I would really appreciate it if you could let me how.

[paramvir]

Save button state can be checked

Code: [Select]

this.toolbar().find("button.changes").is(":enabled")


[Richard]

Hi paramvir

By applying the solution you gave me as follows, I am grateful for the program I want.
I have a few additional issues that need to be addressed, so I'd appreciate it if you could let me know.

1. If the data is not saved when the user selects one from the Year-Month List,
    after asking 'Do you want to save the data?',
    if the answer is 'Yes', go through the same procedure as when clicking the 'Save' button,
    and then I want to display the data corresponding to the item on the screen.
    However, when I apply the following, an error occurs. What is the problem?

2. If the user selects the '◀ Previous' button, the user selects an item before the current in the LIST to search the DB
   for the corresponding data and display it on the screen.
   I want to know how to get the entire data of the LIST and the Index of the selected item.

Code: [Select]

{ // 14-2)
type: 'select',
cls: 'list_year_month',
label: '<b>Year-Month: ', options: [{ '2022-02': '2022-02', '2022-03': '2022-03', '2022-04': '2022-04', '2022-05': '2022-05' }],
listeners: function (evt) {
if(this.toolbar().find("button.changes").is(":enabled") == true){
if(confirm("After data is entered or modified, it is not saved in the DB.\nDo you want to save data?")){
saveChanges();
save_memo();
save_column_state();
}
}

this.option("dataModel.postDataOnce", {
mt_product: $(evt.target).val(),
cd_wc: "W120"
});
this.refreshDataAndView(); //this sends the above post data and reloads the response in the grid
}
},
{ // 14-3)
type: 'button',
label: '<b>◀ Previous',
listener: function (evt) {
//alert(this.toolbar().find("select.list_year_month").val());


}
},
{ // 13-3)
type: 'button',
label: '<b>Next ▶',
listener: function (evt) {
//alert(this.toolbar().find("select.list_year_month").val());


}
},
{ type: 'separator' },
{ // 15)
type: 'button',
icon: 'ui-icon-disk',
label: 'Save',
cls: 'changes',
listeners: [saveChanges,
save_memo,
save_column_state],
options: { disabled: true },
},

[Richard]

I would be grateful if you could answer the above questions.

[paramvir]

1. Wait for saveChanges() which is an asynchronous ajax call to finish loading before sending another remote request through refreshDataAndView.

2. selected index can be obtained by

Code: [Select]

this.toolbar().find("select.list_year_month  option:selected").index()

and all options can be obtained by

Code: [Select]

this.toolbar().find("select.list_year_month  option")