[mathodParticipant]

excuse me, just an other question.
i want to updaterow, just when i wlick on button, and not after modify every cell one per one.
Because my updaterow function is called after every enter click on every cell.
is it possible to call her just when i click on button and not every time?

[mathodParticipant]

Ahh.. I need an ajax request POST to the server, and i need to code on server function to update json file ? right ?
Math

[mathodParticipant]

Thank you a lot ! i understand.
But now i have a problem with updaterow…

I have this :
JS FILE :

import { Component, ViewChild, AfterViewInit, ElementRef, Input } from '@angular/core';

import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid'
import { jqxDropDownListComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxdropdownlist';
import { jqxInputComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxinput';

@Component({
  selector: 'app-tarif',
  templateUrl: './tarif.component.html',
  styleUrls: ['./tarif.component.css']
})

export class TarifComponent {
    @Input() showTarif: boolean;
    @ViewChild('myGrid') myGrid: jqxGridComponent;

	getWidth() : any {
		if (document.body.offsetWidth < 800) {
			return '90%';
		}
		
		return 800;
    }

    url = "assets/tarif.txt";    
    source: any =
    {
        datatype: "json",
        datafields:
        [
            { name: 'id',type: 'integer'},
            { name: 'lundi', type: 'string' },
            { name: 'mardi', type: 'string' },
            { name: 'mercredi', type: 'string' },
            { name: 'jeudi', type: 'string' },
            { name: 'vendredi', type: 'string' },
            { name: 'samedi', type: 'string' },
            { name: 'dimanche', type: 'string' }
        ],
        id: 'id',
        url: this.url,
        updaterow: function(rowid,newdata,commit){
            console.log(rowid);
            console.log(newdata);
            commit(true);
        }
    };

    dataAdapter: any = new jqx.dataAdapter(this.source,{
        downloadComplete: function (data, status, xhr) { },
        loadComplete: function (data) { },
        loadError: function (xhr, status, error) { }
    }); 

    columns: any[] =
    [   { text: 'Semaine', datafield: 'id',width: 100, cellsalign: 'center' },
        { text: 'Lundi', datafield: 'lundi', width: 100, cellsalign: 'center' },
        { text: 'Mardi', datafield: 'mardi', width: 100, cellsalign: 'center' },
        { text: 'Mercredi', datafield: 'mercredi', width: 100, cellsalign: 'center' },
        { text: 'Jeudi', datafield: 'jeudi', width: 100, cellsalign: 'center' },
        { text: 'Vendredi', datafield: 'vendredi', cellsalign: 'center', width: 100 },
        { text: 'Samedi', datafield: 'samedi', width: 100, cellsalign: 'center' },
        { text: 'Dimanche', datafield: 'dimanche', width: 100, cellsalign: 'center' },
    ];
    dropDownSource1: string[] = ['none', 'single cell', 'multiple cells', 'multiple cells extended', 'multiple cells advanced'];
    
    // enable or disable the selection.
    myDropDownListOnSelect(event: any): void {
        let index = event.args.index;
        switch (index) {
            case 0:
                this.myGrid.selectionmode('none');
                break;
            case 1:
                this.myGrid.selectionmode('singlecell');
                break;
            case 2:
                this.myGrid.selectionmode('multiplecells');
                break;
            case 3:
                this.myGrid.selectionmode('multiplecellsextended');
                break;
            case 4:
                this.myGrid.selectionmode('multiplecellsadvanced');
                break;
        }
    };

    updateMyRows(){

        var id = this.myGrid.getselectedcell().rowindex;
        var data = this.myGrid.getrowdatabyid(id.toString());

        this.myGrid.updaterow(id,data);
    }
}

HTML FILE :

<div *ngIf="showTarif">
<div style="font-size: 13px; font-family: Verdana; float: left">
    <jqxGrid #myGrid
        [width]="getWidth()" [source]="dataAdapter"
        [columns]="columns" [selectionmode]="'multiplecellsextended'"
        [editable]="true">
    </jqxGrid>
    <div style="margin-top: 20px">
        <div style="float: left">
            <div style="clear: both"></div>
            <div style="margin-top: 10px;">
        </div>
            <div style="margin-top: 10px">
                <span>Selection Mode</span>
                <jqxDropDownList style="margin-top: 5px" (onSelect)="myDropDownListOnSelect($event)"
                    [width]="120" [height]="25" [selectedIndex]="3" [dropDownWidth]="200"
                    [autoDropDownHeight]="true" [source]="dropDownSource1">
                </jqxDropDownList>
            </div>
            <button (click)=updateMyRows()>
                update
            </button>
        </div>
        <div style="float: left; margin-left: 20px">

        </div>
    </div>
</div>
</div>

and my json is not update… normal ?
when i click on button, it’s not update, and when i push enter, function should be called ( and she is, because it display my console.log..) but doesn’t work, my json not changed…

Thanks you a lot for your help !
Math

[Author]

Posts