Modify new value in save event

[Olaf]

Hello,

 hopefully this is not a duplicate but I haven't been able to find any solution.

 

What I am looking for is a way to modify the new value when the 'save' event is fired. In my scenario there are several rows in the grid representing order positions. The user should now enter the amounts which are going to be shipped so he then can get a delivery note. So when the user enters an amount larger than initial the ordered one he should be warned and asked if he really wants to ship more. If denied the value should be set to the ordered amount.

I've tried several ways by modifiying the e.values or the e.model property. With or without a grid.refresh()... no way to modify the new value.

Finally I just define a e.preventDefault() but don't really like it.

Does anyone knows how to achieve my goal? Many thanks in advance!!

[Konstantin Dikov]

Hello Olaf,

Can you please provide additional information on your exact requirement and more precisely how you are binding your RadGrid and what edit mode you are using. 

Furthermore, if you can provide the markup and the relevant code-behind of your page we will have a better idea of the exact scenario.

Looking forward to your reply.


Regards,
Konstantin Dikov
Telerik

[Olaf]

Hello Konstantin,

 I appreciate your support. Here comes the code - it's from my ASP.NET MVC application so there is a little bit R@zor-syntax in it.

01.function handleNewData@(mySuffix)(newData) {
02.        if (newData.length > 0) {
03.            wnd@(mySuffix).setOptions({ width: 1024, heigth: 600 });
04.            var myDS = new kendo.data.DataSource({
05.                data: newData,
06.                autoSync: true,
07.                schema: {
08.                    model: {
09.                        id: 'KdArtNr',
10.                        fields: {
11.                            Auftragsnummer: { editable: false, nullable: false },
12.                            ReguliererID: { editable: false, nullable: false },
13.                            StationsID: { editable: false, nullable: false },
14.                            Station: { editable: false, nullable: false },
15.                            Datum: { editable: false, nullable: false },
16.                            Gebäude: { editable: false, nullable: false },
17.                            Ebene: { editable: false, nullable: false },
18.                            Raum: { editable: false, nullable: false },
19.                            Schrank: { editable: false, nullable: false },
20.                            Fach: { editable: false, nullable: false },
21.                            MatNr: { editable: false, nullable: false },
22.                            KdArtNr: { editable: true, nullable: false },
23.                            MakTx: { editable: false, nullable: false },
24.                            MakTx2: { editable: false, nullable: false },
25.                            Menge: { editable: false, nullable: false },
26.                            Liefermenge: { editable: false, nullable: false },
27.                            NeueLiefermenge: { type: 'number', editable: true, nullable: false, validation: { min: 0 } },
28.                            KdME: { editable: false, nullable: false },
29.                            Benutzer: { editable: false, nullable: false },
30.                            Ausgeliefert: { editable: false, nullable: false }
31.                        }
32.                    }
33.                }
34.            });
35.
36.            var myGrid = $('#lstArticle@(mySuffix)').data('kendoGrid');
37.            if (myGrid) {
38.                myGrid.setDataSource(myDS);
39.            } else {
40.                $('#lstArticle@(mySuffix)').show().kendoGrid({
41.                    dataSource: myDS,
42.                    height: '95%',
43.                    //width: '90%',
44.                    scrollable: true,
45.                    filterable: false,
46.                    editable: true,
47.                    dataBound: colorizeRows@(mySuffix),
48.                    columns: [
49.                        { field: 'KdArtNr', title: 'Artikel-Nr.', width: '70px' },
50.                        { field: 'MatNr', title: 'HLS-Nr.', width: '60px' },
51.                        { title: 'Bezeichnung', width: '250px', template: '#= data.MakTx + " " + data.MakTx2 #' },
52.                        { field: 'Menge', title: 'Menge', width: '50px', attributes: { style: 'text-align: right;' }, filterable: false },
53.                        { title: 'offen', width: '60px', attributes: { style: 'text-align: right;' }, template: '#= (data.Menge - data.Liefermenge) #' },
54.                        { field: 'NeueLiefermenge', title: 'Liefermenge', width: '70px', format: '{0:n0}', attributes: { style: 'text-align: right;' } },
55.                        { field: 'KdME', title: 'ME', width: '40px', attributes: { style: 'text-align: center;' }, filterable: false },
56.                        { field: 'Gebäude', title: 'Gebäude', width: '50px', attributes: { style: 'text-align: right;' } }, //, attributes: { style: 'text-align: center;' }
57.                        { field: 'Ebene', title: 'Ebene', width: '45px', attributes: { style: 'text-align: right;' } },
58.                        { field: 'Raum', title: 'Raum', width: '45px', attributes: { style: 'text-align: right;' } },
59.                        { field: 'Schrank', title: 'Schrank', width: '50px', attributes: { style: 'text-align: right;' } },
60.                        { field: 'Fach', title: 'Fach', width: '45px', attributes: { style: 'text-align: right;' } },
61.                        { field: 'Benutzer', title: 'Besteller', width: '95px', filterable: false },
62.                        { field: 'Ausgeliefert', title: 'Status', width: '50px', attributes: { style: 'text-align: right;' }, filterable: false, template: '#= data.Ausgeliefert==false?\'offen\':\'vollständig\' #' }
63.                    ],
64.                    edit: function (e) {
65.                        var fieldName = '';
66.                        fieldName = e.sender.editable.options.fields.field;
67.
68.                        if (fieldName !== 'NeueLiefermenge') {
69.                            this.closeCell();
70.                        }
71.
72.                        // gesamten Inhalt vorselektieren
73.                        e.container.find('[name="NeueLiefermenge"]').focus(function () { $(this).select(); });
74.                        e.container.find('.k-formatted-value').focus(function () { $(this).select(); });
75.                    },
76.                    save: function (eve) {
77.                        var nLief = eve.values.NeueLiefermenge || eve.model.get('NeueLiefermenge');
78.                        var offen = eve.model.get('Menge') - eve.model.get('Liefermenge');
79.
80.                        if (nLief > offen) {
81.                            var canc = window.confirm('Wollen Sie wirklich mehr buchen als bestellt wurde?');
82.                            if (canc === false) {
83.                                eve.preventDefault();
84.                                @*
85.                                 eve.values.neueliefermenge = offen;
86.                                 eve.model.set('neueliefermenge', offen);
87.                                 eve.model.dirty = true;
88.                                 debugger;
89.
90.
91.                                 eve.sender.refresh();
92.                                 var mydi = eve.sender.dataitem(eve.container);
93.                                *@
94.                            }
95.                        }
96.                    },
97.                    toolbar: ['Lieferung buchen']
98.                });

So basically I'm checking in line 77 the new value if it is more than a specific value. If so I ask the user whether this is by accident or not.

The whole grid is placed inside a kendo-window. Currently I've tow guesses:

1) The messagebox blurs the control so the event-chain is not correctly running

2) By accident I stumbled over an issue that model.set('<key>', value) seems not to have the same effect than model.key = value.

 

Unfortunately I'm on vacation the next week so my next answer will take some time.

Many thanks in advance!!

[Radoslav]

Hi Olaf,

Calling the eve.preventDefault() should prevent saving values by the datasource component. Additionally if you want to play with the data directly you need to mark the records you changes as dirty and call the sync method:

dataSource.data()[changedIndex].dirty = true;
dataSource.sync();

Please give it try and let me know if it helps you.

Looking forward for your reply.

Regards,
Radoslav
Telerik

[Olaf]

Hello Radoslav,

 finally I'm back from vacation and have been able to take another look. And I've found the issue in my code:

Setting the value via

eve.model.set('<PROPERTY>', <VALUE>);

will fail to update the GUI. When setting it directly in the model by

eve.model.<PROPERTY> = <VALUE>;

the GUI updates as desired.

 

Strange as I would think that both ways should be the same...