Modify new value in save event

5 posts, 0 answers
  1. Olaf
    Olaf avatar
    3 posts
    Member since:
    Jan 2015

    Posted 02 Jul 2015 Link to this post

    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!!

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 06 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Olaf
    Olaf avatar
    3 posts
    Member since:
    Jan 2015

    Posted 07 Jul 2015 in reply to Konstantin Dikov Link to this post

    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!!

  4. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 10 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Olaf
    Olaf avatar
    3 posts
    Member since:
    Jan 2015

    Posted 24 Jul 2015 in reply to Radoslav Link to this post

    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...

Back to Top