Grid Popup Edit Cancel Problem

23 posts, 0 answers
  1. John
    John avatar
    3 posts
    Member since:
    Jun 2012

    Posted 27 Aug 2012 Link to this post

    Hi,

    I have a grid that has "popup" editing.  The problem is that if I click Cancel in the popup dialog, the record being edited is deleted.  Here's a jsfiddle showing what I am talking about:

    http://jsfiddle.net/KGsSL/16/

    To replicate: click the Edit button on any row, then click Cancel in the Edit dialog.  The result is that the row you're editing is deleted.

    I pretty much followed the example at http://demos.kendoui.com/web/grid/editing-popup.html with the exception of using local data.  That demo link also [currently] uses the same exact verson of KendoUI I'm using, but it doesn't exhibit the same problem.

    Please help.

    Thanks.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 27 Aug 2012 Link to this post

    Hello John,

    I examined your example and it seems the problem is due to the lack of id for the model (this is the field that is used to identify an unique Model instance). Like here:
    dataSource: {
      //...
      schema: {
          model: {
               id: "Id"                   
               fields: {
                    Name: { type: "string" }
               }
           }
      }
    }
     
    For convenience I updated your jsFiddle example.

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. John
    John avatar
    3 posts
    Member since:
    Jun 2012

    Posted 29 Aug 2012 Link to this post

    Thank you for the quick turnaround.  That helped tremendously.  However I now have other problems as I fleshed out the popup editor some more.  I am experiencing problems when the grid row editor popup dialog itself contains another grid.

    Steps to reproduce:

    1. The jsfiddle at: http://jsfiddle.net/KGsSL/38/
    2. Click the Edit button for Larry.
    3. Click the Delete button for "Larry a" (in the grid inside the popup dialog) and click OK for the prompt.
    RESULT: The popup dialog is dismissed.  I would expect the dialog to still stay.  BTW, the problem persists even if I remove the Delete prompt (the "confirmation" option for "_editGrid")

    Same thing if I Edit then Cancel:

    1. Reload the fiddle above.
    2. Click the Edit button for Larry.
    3. Click the Edit button for "Larry a" (in the grid inside the popup dialog) and click Cancel.
    RESULT: The popup dialog is dismissed.  I would expect the dialog to still stay. 

    Thanks!
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 03 Sep 2012 Link to this post

    Hi John,

    To your questions: 
    • The "Delete" issue is a known issue which is already addressed (the fix is available in our latest internal build) - please test your project using it;
    • The "Cancel" issue is caused by the dataSource's model in the editor grid. Please note that when both grids use one dataSource you should not define another model. The definition of the editor grid should looks: 
    edit: function (e) {
        var container = e.container;
        $("._editGrid", container).kendoGrid({
            dataSource: {
                data: e.model.Details                       
            },
           //...
        });
    },

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. John
    John avatar
    3 posts
    Member since:
    Jun 2012

    Posted 04 Sep 2012 Link to this post

    Thanks again.  I am unable to locate the link for "Internal Builds."  Would you give me the URL?
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Sep 2012 Link to this post

    Hi John,

    You could download the latest internal builds for the purchased products from your Telerik account (you have to be logged in): 

    http://www.telerik.com/account/your-products/internal-builds.aspx 

    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Guillaume
    Guillaume avatar
    6 posts
    Member since:
    Oct 2012

    Posted 21 Nov 2012 Link to this post

    I'm still having problems with the Cancel button deleting the item in inline editing with version 2012.2.1015. Adding the id in the model didn't help. The only solution I found is to hide the cancel button in css and force the user to update every time.

    .k-grid-edit-row .k-grid-cancel{ display: none;}
  8. Mark
    Mark avatar
    6 posts
    Member since:
    Apr 2013

    Posted 24 Apr 2013 Link to this post

    Another problem with the jsFiddle that they posted as a solution:

    1. Add a record with the name "Shep"
    2. Whoops.  That should be "Shemp"
    3. Edit the record, but get distracted and forget what you were doing.
    4. Cancel the edit.

    Where did Shep go????

  9. Mark
    Mark avatar
    6 posts
    Member since:
    Apr 2013

    Posted 24 Apr 2013 Link to this post

    I actually came up with a solution to my problem.  I am using observables so it is not directly related....

    I bound to the change event of the data source to insure I have an id:

    testDataSource.bind("change", function(e) {
        if (e.action === "add") {
            e.items[0].dirty = true;
            kendo.data.ObservableObject.fn.set.call(e.items[0], "Id", viewModel.testsResults.nextRequestId);
            viewModel.testsResults.nextRequestId++;
        }
    });


    Mark :)
  10. Lucas
    Lucas avatar
    21 posts
    Member since:
    Feb 2012

    Posted 02 May 2013 Link to this post

    Hi Iliana,

    The fiddle you mentioned that fixes the issue does not. 

    If you open the fiddle, click add on the grid, give it a name.
    Then edit the one you just added and click cancel. 

    The row is removed. 

    I have been trying to fix this issue and havent come up with a good solution.

    Any ideas?

    -Lucas
  11. Mark
    Mark avatar
    6 posts
    Member since:
    Apr 2013

    Posted 02 May 2013 Link to this post

    See my solution, Lucas.  The problem is that the Id is not assigned until you save the grid data.  Client side there is no saving going, so you have to manually assign an Id number.  Once the record has an Id, it will maintain itself.
  12. Lucas
    Lucas avatar
    21 posts
    Member since:
    Feb 2012

    Posted 02 May 2013 Link to this post

    Hi Mark,

    That still doesnt work. I assigned a key like your example and when I click "edit" then "cancel" on the one i just added I am actually seeing on the change event that the action is "remove" for some reason... I dont know why.

    -Lucas
  13. Mark
    Mark avatar
    6 posts
    Member since:
    Apr 2013

    Posted 02 May 2013 Link to this post

    If you post a fiddle of what you are doing, I can take a look at it for you :)
  14. Lucas
    Lucas avatar
    21 posts
    Member since:
    Feb 2012

    Posted 02 May 2013 Link to this post

    Hi Mark,

    Here is the Fiddle

    You will notice it still removes the row. Also I put up a popup to show that when you click cancel, the change event receives a "remove" action.
    -Lucas
  15. Mark
    Mark avatar
    6 posts
    Member since:
    Apr 2013

    Posted 02 May 2013 Link to this post

    You problem is this:

    1. you are placing your auto-incrementing integer into a property called "key":
    kendo.data.ObservableObject.fn.set.call(e.items[0],             "key", i);

    2. You have mapped the id in your schema to a property called "Id":
    id: "Id",

    So, either change "key" to "Id" or "Id" to "key" (but in this latter event you will have change the Larry, Moe and Curly instances to have key: 1, key: 2, and key: 3 members.

    Finally, you need to start you "i" variable with 4, because 1, 2 and 3 are already being used by Larry, Moe and Curly

    Here is the updated fiddle
  16. Lucas
    Lucas avatar
    21 posts
    Member since:
    Feb 2012

    Posted 03 May 2013 Link to this post

    Hi Mark,

    Thanks for the update. A copy and paste error from my code.

    So from what you seen do you have to set the "id" field in javascript? The model that is coming back after the create service is called has the "id" value set. The Kendo framework should be able to handle this.

    Thanks,
    Lucas
  17. Mark
    Mark avatar
    6 posts
    Member since:
    Apr 2013

    Posted 03 May 2013 Link to this post

    My understanding is that I had to go this route because I am using the grids disconnected from a server-side datasource.  I believe that if the datasource is set up with the right transport information, then the created data is saved to the remote datasource and Kendo takes care of the id for you at that point.  I haven't yet played with grids in this way, so I can't confirm this (perhaps a Kendo rep can correct any misinformation I may be spewing).  I would think that this grid to remote datasource is probably the more common way of interacting with grid data, but I had a need and have read of others having a need to work with data in a disconnected manner.  Maybe altering the grid to know that it is disconnected so Kendo could handle this id for us would be cool.  One guy was talking about making some DataSource extensions to do a lot of the stuff we are having to wire in, but I went to his github and it doesn't look like he ever found the time.
  18. Bence
    Bence avatar
    6 posts
    Member since:
    Nov 2013

    Posted 11 Dec 2013 Link to this post

    Hi!

    I have exactly the same problem with my grid. The popup edit cancel button deletes the row.
    I'm using php generated code. 
    Someone please help me. :/
    Here's my code:
    <?php
        //mysql connection details
        /*...*/
     
        $connection = mysql_connect($host,$username,$password) or trigger_error("Unable to connect MySQL server. " . mysql_error());
        mysql_select_db($dbname,$connection) or trigger_error("Unable to connect " . $dbname . " . " . mysql_error());
        mysql_query("set names latin1;", $connection);
         
    ?>
     
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <link href="../styles/kendo.silver.min.css" rel="stylesheet" />
            <link href="../styles/kendo.common.min.css" rel="stylesheet" />
            <script src="../js/jquery.min.js"></script>
            <script src="../js/kendo.all.min.js"></script> 
             
            <meta charset="utf-8" />
        </head>
        <body>
            <?php
                require_once '../wrappers/php/lib/Kendo/Autoload.php';
            ?>
            <div id="frame">
                <div id="header">
                    <div class="title" id="title_product">
                        <p class="echo">Termék Név:</p>
                    </div>
                    <div class="title" id="title_taxperc">
                        <p class="echo">Áfa %:</p>
                    </div>
                    <div class="title" id="title_amount">
                        <p class="echo">Darab:</p>
                    </div>
                    <div class="title" id="title_clear">
                        <p class="echo">Nettó érték:</p>
                    </div>
                    <div class="title" id="title_sumclear">
                        <p class="echo">Össz. nettó:</p>
                    </div>
                    <div class="title" id="title_sumgross">
                        <p class="echo">Össz. bruttó:</p>
                    </div>
                </div>
                <div id="top">
                    <div class="box" id="box_product">
                        <?php
                            $termek = new \Kendo\UI\AutoComplete('termek');
                            $termek->delay(0);
                            $termek->filter('contains');
                            $termek->select('termekOnSelect');
                            $termek->change('termekOnChange');
                            $termek->close('termekOnClose');
                            $termek->dataTextField('name');
                             
                            $termek_data = array();
                            $query = "SELECT t.nev, a.afa_ertek FROM termek t JOIN afa a ON t.afa_id = a.afaid ORDER BY t.nev ASC;";
                            $result = mysql_query($query,$connection);
                             
                            while($row = mysql_fetch_assoc($result))
                            {
                                $termek_data[] = array('name' => $row['nev'], 'value' => $row['afa_ertek']);
                                 
                            }
                             
                            $termek->dataSource($termek_data);
                             
                            echo $termek->render();
                        ?>
                    </div>
                    <div class="box" id="box_taxperc">
                        <?php
                            $afa = new Kendo\UI\NumericTextBox('afaszaz');
                            $afa->format('# \%');
                            $afa->step(1);
                             
                            echo $afa->render();
                        ?>
                    </div>
                    <div class="box" id="box_amount">
                        <?php
                            $db = new Kendo\UI\NumericTextBox('db');
                            $db->format('# db');
                            $db->step(1);
                            $db->min(0);
                            $db->change('onChangeDb');
                             
                            echo $db->render();
                        ?>
                    </div>
                    <div class="box" id="box_clear">
                        <?php
                            $netto = new Kendo\UI\NumericTextBox('netto');
                            $netto->format('# HUF');
                            $netto->min(0);
                            $netto->step(1);
                            $netto->change('onChangeNetto');
                             
                            echo $netto->render();
                        ?>
                    </div>
                    <div class="box" id="box_sumclear">
                        <?php
                            $ossznetto = new Kendo\UI\NumericTextBox('ossznetto');
                            $ossznetto->format('# HUF');
                            $ossznetto->step(0);
                             
                            echo $ossznetto->render();
                        ?>
                    </div>
                    <div class="box" id="box_sumgross">
                        <?php
                            $osszbrutto = new Kendo\UI\NumericTextBox('osszbrutto');
                            $osszbrutto->format('# HUF');
                            $osszbrutto->step(0);
                             
                            echo $osszbrutto->render();
                        ?>
                    </div>
                    <div class="box" id="box_send">
                        <?php
                            $send = new Kendo\UI\Button('send');
                            $send->content('<strong>Hozzáad</strong>');
                            $send->click('onClickSend');
                             
                            echo $send->render();
                        ?>
                    </div>
                </div>
                <div id="content">
                    <div id="grid"  style="height:662px;">
                        <?php
                            $grid = new \Kendo\UI\Grid('grid');
                             
                            /* GRID STRUCTURE SETUP */
                             
                            //add fields to model
                            $nevField = new \Kendo\Data\DataSourceSchemaModelField('nev');
                            $nevField->type('string');
                            $nevField->editable(false);
                             
                            $afaperc = new \Kendo\Data\DataSourceSchemaModelField('afaperc');
                            $afaperc->type('number');
                            $afaperc->editable(false);
                             
                             
                            $dbField = new \Kendo\Data\DataSourceSchemaModelField('db');
                            $dbField->type('number');
                             
                             
                            $nettoField = new \Kendo\Data\DataSourceSchemaModelField('netto');
                            $nettoField->type('number');
                             
                             
                            $ossznettoField = new \Kendo\Data\DataSourceSchemaModelField('ossznetto');
                            $ossznettoField->type('number');
                            $ossznettoField->editable(false);
                             
                            $osszbruttoField = new \Kendo\Data\DataSourceSchemaModelField('osszbrutto');
                            $osszbruttoField->type('number');
                            $osszbruttoField->editable(false);
                             
                            $grid_ds_sha_model = new \Kendo\Data\DataSourceSchemaModel();
                            $grid_ds_sha_model->addField($nevField,$afaperc,$dbField,$nettoField,$ossznettoField,$osszbruttoField);
                            $grid_ds_sha_model->id('Id');
                             
                            //add model to schema
                            $grid_ds_schema = new \Kendo\Data\DataSourceSchema();
                            $grid_ds_schema->model($grid_ds_sha_model);
                             
                            //add schema to datasource
                            $grid_datasource = new \Kendo\Data\DataSource();
                            $grid_datasource->schema($grid_ds_schema);
                             
                            //build datasource data
                            $grid_data = array();
                             
                            //add data to datasource
                            $grid_datasource->data($grid_data);
                             
                            //add datasource to grid
                            $grid->dataSource($grid_datasource);
                             
                            //add columns to grid
                            $nevCol = new \Kendo\UI\GridColumn();
                            $nevCol->title('Termék név');
                            $nevCol->field('nev');
                             
                            $afapercCol = new \Kendo\UI\GridColumn();
                            $afapercCol->title('Áfa százalék');
                            $afapercCol->field('afaperc');
                             
                            $dbCol = new \Kendo\UI\GridColumn();
                            $dbCol->title('Darab');
                            $dbCol->field('db');
                             
                            $nettoCol = new \Kendo\UI\GridColumn();
                            $nettoCol->title('Nettó érték');
                            $nettoCol->field('netto');
                             
                            $ossznettoCol = new \Kendo\UI\GridColumn();
                            $ossznettoCol->title('Össz. nettó');
                            $ossznettoCol->field('ossznetto');
                             
                            $osszbruttoCol = new \Kendo\UI\GridColumn();
                            $osszbruttoCol->title('Össz. bruttó');
                            $osszbruttoCol->field('osszbrutto');
                             
                            $colItemEdit = new \Kendo\UI\GridColumnCommandItem();
                            $colItemEdit->name('edit');
                            $colItemEdit->text('Módosít');
                             
                            $colItemDestroy = new \Kendo\UI\GridColumnCommandItem();
                            $colItemDestroy->name('destroy');
                            $colItemDestroy->text('Töröl');
                             
                            $commandItem = new \Kendo\UI\GridColumn();
                            $commandItem->addCommandItem($colItemEdit);
                            $commandItem->addCommandItem($colItemDestroy);
                            $commandItem->width(180);
                             
                            $grid->addColumn($nevCol,$afapercCol,$dbCol,$nettoCol,$ossznettoCol,$osszbruttoCol,$commandItem);
                             
                             
                            /* GRID DISPLAY SETUP */
                             
                            $grid->filterable(array(
                                'messages' => array(
                                    'and' => "és",
                                    'clear' => "Szűrő törlése",
                                    'filter' => "Szűrés",
                                    'info' => "Szűrési opciók:",
                                    'isFalse' => "Hamis",
                                    'isTrue' => "Igaz",
                                    'or' => "vagy",
                                    'selectValue' => "Válassz kategóriát",
                                    'cancel' => "Mégse",
                                    'operator' => "Válassz műveletet",
                                    'value' => "Válassz értéket"
                                ),
                                 
                                'operators' => array(
                                    'string' => array(
                                        'eq' => "Megegyezik",
                                        'neq' => "Nem egyezik meg",
                                        'startswith' => "Kezdődik",
                                        'contains' => "Eleme",
                                        'doesnotcontain' => "Nem eleme",
                                        'endswith' => "Végződik"
                                         
                                    ),
                                    'number' => array(
                                        'eq' => "Egyenlő",
                                        'neq' => "Nem egyenlő",
                                        'gte' => "Nagyobb egyenlő mint",
                                        'gt' => "Nagyobb mint",
                                        'lte' => "Kissebb egyenlő mint",
                                        'lt' => "Kissebb mint"
                                         
                                    ),
                                    'date' => array(
                                        'eq' => "Megegyezik",
                                        'neq' => "Nem egyezik meg",
                                        'gte' => "Később egyenlő mint",
                                        'gt' => "Később mint",
                                        'lte' => "Korább egyenlő mint",
                                        'lt' => "Korább mint"  
                                     
                                    ),
                                    'enums' => array(
                                        'eq' => "Megeggyezik",
                                        'neq' => "Nem egyezik meg"
                                         
                                    )
                                     
                                )
                                 
                            ));
                             
                            $editable = new \Kendo\UI\GridEditable();
                            $editable->confirmation(true);
                            $editable->cancelDelete('Biztosan töröli?');
                            $editable->confirmDelete('Biztosan töröli?');
                            $editable->createAt('top');
                            $editable->destroy(true);
                            $editable->mode('popup');
                            $editable->update(true);
                             
                            $grid->editable($editable);
                             
                            $grid->sortable(true);
                            $grid->selectable(true);
                             
                            $grid->pageable(array(
                                'refresh' => true,
                                'buttonCount' => 5,
                                'pageSize' => 20,
                                'pageSizes' => array(20,50,100),
                                'messages' => array(
                                    'display' => "{0} - {1} elemek, összesen: {2}",
                                    'empty' => "Nincs megjeleníthető adat",
                                    'page' => "Adj meg oldalszámot",
                                    'itemsPerPage' => "elem per lap",
                                    'first' => "Ugrás az első oldalra",
                                    'last' => "Ugrás az utolsó oldalra",
                                    'next' => "Következő oldal",
                                    'previous' => "Előző oldal",
                                    'refresh' => "Frissítés"
                                     
                                )
                             
                            ));
                             
                            //render grid
                            echo $grid->render();
                         
                        ?>
                    </div>
                </div>
            </div>
            <script>
                $(document).ready(function() {
                    $('#osszbrutto').data('kendoNumericTextBox').enable(false);
                    $('#ossznetto').data('kendoNumericTextBox').enable(false);
                    $('#afaszaz').data('kendoNumericTextBox').enable(false);
                     
                    var grid = $('#grid').data('kendoGrid');
                    var data = grid.dataSource.at(0);
                    grid.dataSource.remove(data);
                     
                });
                 
                function onChangeDb() { onChange(); }
                function onChangeNetto() { onChange(); }
                 
                function onChange() {
                    var db = $('#db').data('kendoNumericTextBox').value();
                    var netto = $('#netto').data('kendoNumericTextBox').value();
                    var termek = $('#termek').data('kendoAutoComplete').value();
                    var afaszaz = $('#afaszaz').data('kendoNumericTextBox').value() / 100;
     
                    if(db > 0 && termek != '') {
                         
                        $('#ossznetto').data('kendoNumericTextBox').value(netto * db);
                        $('#osszbrutto').data('kendoNumericTextBox').value(netto * (afaszaz + 1) * db);
                         
                    }
                    else {
                        $('#netto').data('kendoNumericTextBox').value('');
                     
                    }
                     
                }
                 
                 
                var valid = false;
                function termekOnSelect(e){ valid = true; }
                             
                function termekOnClose(e){ if (!valid) this.value(''); }
                              
                function termekOnChange(e){
                    if (!valid)
                        this.value('');
                    else
                        onChangeNev();
             
                }
                 
                var table = [<?php
                    $query = "SELECT t.nev, a.afa_ertek FROM termek t JOIN afa a ON t.afa_id = a.afaid ORDER BY t.nev ASC;";
                    $result = mysql_query($query,$connection);
                     
                    $temp_str1 = '[';
                    $temp_str2 = '[';
                    while($row = mysql_fetch_assoc($result))
                    {
                        $temp_str1 .= "'" . $row['nev'] . "',";
                        $temp_str2 .= $row['afa_ertek'] . ",";
                     
                    }
                     
                    echo substr($temp_str1,0,(strlen($temp_str1)-1)) . '],';
                    echo substr($temp_str2,0,(strlen($temp_str2)-1)) . ']';
                 
                ?>];
                 
                function onChangeNev() {
                    var nev = $('#termek').data('kendoAutoComplete').value();
                    $('#afaszaz').data('kendoNumericTextBox').value(table[1][table[0].indexOf(nev)]);
                     
                }
                 
                function onClickSend() {
                    var ossznetto = $('#ossznetto').data('kendoNumericTextBox').value();
                     
                    if(ossznetto > 0) {
                        var grid = $('#grid').data('kendoGrid');
     
                        grid.dataSource.add({
                            nev: $('#termek').data('kendoAutoComplete').value(),
                            afaperc: $('#afaszaz').data('kendoNumericTextBox').value(),
                            db: $('#db').data('kendoNumericTextBox').value(),
                            netto: $('#netto').data('kendoNumericTextBox').value(),
                            ossznetto: $('#ossznetto').data('kendoNumericTextBox').value(),
                            osszbrutto: $('#osszbrutto').data('kendoNumericTextBox').value()
                         
                        });
     
                        $('#termek').data('kendoAutoComplete').value('');
                        $('#afaszaz').data('kendoNumericTextBox').value('');
                        $('#db').data('kendoNumericTextBox').value('');
                        $('#netto').data('kendoNumericTextBox').value('');
                        $('#ossznetto').data('kendoNumericTextBox').value('');
                        $('#osszbrutto').data('kendoNumericTextBox').value('');
                         
                        $('#termek').focus();
                         
                    }
                     
                }
     
                                 
            </script>
            <style>
                * {
                    margin:0px;
                    padding:0px;
                    border:0px;
                 
                }
                 
                body {
                    background-color:lightgrey;
                }
                 
                div {
                    background-color:white;
                 
                }
             
                #frame {
                    width:1024px;
                    height:768px;
                    margin-left:auto;
                    margin-right:auto;
                    margin-top:30px;
                    margin-bottom:50px;
                    border-width:1px;
                    border-color:grey;
                    border-radius:5px;
                    overflow:hidden;
                    box-shadow:2px 2px 2px grey;
                     
                }
                 
                #header {
                    width:1022px;
                    height:35px;
                 
                }
                 
                .title {
                    float:left;
                    width:136px;
                    height:35px;
                    margin-left:1px;
                    text-align:center;
                 
                }
                 
                p {
                    height:20px;
                    margin-top:15px;
                    color:grey;
                 
                }
                 
                #top {
                    width:1022px;
                    height:35px;
                    margin-bottom:30px;
                    margin-left:1px;
                 
                }
     
                .box {
                    float:left;
                    width:136px;
                    height:35px;
                    margin-left:1px;
                 
                }
                 
                .box>* {
                    width:136px;
                    height:35px;
                 
                }
                 
                .box#box_send>* {
                    width:180px;
                 
                }
                     
                #content {
                    width:1020px;
                    height:664px;
                    margin-left:auto;
                    margin-right:auto;
                 
                }
                 
             
                 
            </style>
        </body>
    </html>
     
    <?php  
        mysql_close($connection);
     
    ?>
  19. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 16 Dec 2013 Link to this post

    Hello Bence,

    The behaviour which you described is likely to occur when the model ID is missing or have a null/zero value.
    I noticed that you have added ID to the model, but could you please confirm that the field name is correct (its case sensitive) and that each existing field contains unique ID value?

    In case this does not help, I would like to ask you to open a new thread/support ticket with a sample project attached. This thread is relatively old and is in Kendo UI Web section. Questions related to PHP wrappers should be placed in Kendo UI Complete for PHP section.
    Thank you in advance for the understanding.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  20. Bence
    Bence avatar
    6 posts
    Member since:
    Nov 2013

    Posted 16 Dec 2013 Link to this post

    Fortunately, i find the solution to my problem and it was a mixup with the ids, but thanks your input anyways. :)
    And sorry about my misplaced question.
  21. Priyanka
    Priyanka avatar
    2 posts
    Member since:
    Apr 2017

    Posted 08 Jun 2017 in reply to Iliana Nikolova Link to this post

    I have the same initial problem that when I click on cancel whole row is getting deleted and I am using Kendo UI JSP where I also have <kendo:dataSource-schema-model id = "ID">

    is the code in JSP buggy, I have so many issues in grid editing for Kendo UI JSP.

  22. Priyanka
    Priyanka avatar
    2 posts
    Member since:
    Apr 2017

    Posted 08 Jun 2017 in reply to Priyanka Link to this post

    <%--
      Created by IntelliJ IDEA.
      User: KZKZ5Y
      Date: 5/24/2017
      Time: 2:53 PM
      To change this template use File | Settings | File Templates.
    --%>
    <link rel="stylesheet" href="/resources/kendo/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="/resources/kendo/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="/resources/kendo/styles/kendo.default.mobile.min.css" />

    <script src="/resources/kendo/js/jquery.min.js"></script>
    <script src="/resources/kendo/js/kendo.all.min.js"></script>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
    <%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

    <c:url value="/editing-inline/destroy" var="destroyUrl" />
    <c:url value="/editing-inline/read" var="readUrl" />
    <c:url value="/editing-inline/create" var="createUrl" />
    <c:url value="/editing-inline/update" var="updateUrl" />

    <html>
    <head>
        <title>OBD Rules</title>
        <%@include file="header.jsp"%>
    </head>
    <body>
    <%@include file="navigation.jsp"%>
    <div class="container">
        <h1>Create Maintain OBD-RPO Code Rules</h1>
        <!-- JSP Code for inline editing-->




            <kendo:grid name="grid" pageable="true" sortable="true" height="550px"  filterable="true" reorderable="true" resizable="true" columnMenu="true" editable="true" >

                <kendo:grid-pageable pageSizes="true" refresh="true" ></kendo:grid-pageable>
                <kendo:grid-editable mode="popup" confirmation="Are you sure you want to remove this item?"/>
            <kendo:grid-toolbar>
                <kendo:grid-toolbarItem name="create"/>
                <kendo:grid-toolbarItem name="save"/>
                <kendo:grid-toolbarItem name="cancel"/>
            </kendo:grid-toolbar>
            <kendo:grid-columns>
                <kendo:grid-column title="OBD Family Name" field="obdfamily"/>
                <kendo:grid-column title="RPO Code Rule" field="rules" />
                <kendo:grid-column title="Comments" field="comments"/>
                <kendo:grid-column title="Actions" field="actions" width="250px">
                     <kendo:grid-column-command>
                         <kendo:grid-column-commandItem name="customDelete" text="Delete Record">
                             <kendo:grid-column-commandItem-click>
                                 <script>
                                     function onDeleteClick(e) {
                                         /*//var data = JSON.stringify(this.dataSource.view());
                                         var dataItem = this.dataItem(this.dataSource.view());
                                         grid = $("#Grid").data("kendoGrid");
                                         /!*dataItem = grid.dataItem($(e.srcElement).closest("tr"));*!/
                                         var dataItem1= grid.dataItem($(this).closest('tr'));
                                         $.ajax({
                                             type: "POST",
                                             dataType: "json",
                                             contentType: "application/json; charset=utf-8",
                                             url: "/grid/editing-inline/destroy",
                                             //data: dataItem,
                                            /!* data: { id: dataItem.OBDFamilyRules_ID },
                                             remove: function(data) {
                                                 console.log("Removing", data.model.name);
                                             }*!/
                                             /!*$('#rfgGrid input:checked.checkbox').each(function(){
                                             var dataItem1= grid.dataItem($(this).closest('tr'));
                                             grid.dataSource.remove(dataItem1);*!/
                                             grid.dataSource.remove(dataItem1);
                                          });*/
                                       /*
                                         //Working peice of code for delte but still calling create URL
                                         e.preventDefault();
                                         var dataItem = this.dataItem($(e.target).closest("tr"));
                                         if (confirm('Do you really want to delete this record?')) {
                                             var dataSource = $("#grid").data("kendoGrid").dataSource;
                                             dataSource.remove(dataItem);
                                             dataSource.sync();
                                         }*/

                                        /* var grid = $("#grid").data("kendoGrid");
                                         grid.removeRow("tr:eq(1)");*/
                                         var grid = $("#grid").data("kendoGrid");
                                        // var dataItem = grid.dataItem($(e.target).closest("tr"));
                                         var data = JSON.stringify(this.dataSource.view());
                                         var dataItem = this.dataItem(this.dataSource.view())
                                         $.ajax({
                                             type: "POST",
                                             dataType: "json",
                                             contentType: "application/json; charset=utf-8",
                                             url: "/grid/editing-inline/destroy",
                                             data: data
                                         });
                                        // console.log("Deleting" + dataItem.id);
                                     }
                                 </script>
                             </kendo:grid-column-commandItem-click>
                         </kendo:grid-column-commandItem>
                       <kendo:grid-column-commandItem  name="edit">
                             <kendo:grid-column-commandItem-click>
                                 <script>
                                     function onEditClick() {
                                         $('[name="obdfamily"]').attr("disabled",true);
                                     }
                                 </script>
                             </kendo:grid-column-commandItem-click>
                         </kendo:grid-column-commandItem>
                         <kendo:grid-column-commandItem name="destroy" >
                             <%-- <kendo:grid-column-commandItem-click>
                                 &lt;%&ndash; <script>
                                      $.ajax({
                                          type: "POST",
                                          dataType: "json",
                                          contentType: "application/json; charset=utf-8",
                                          url: "/grid/editing-inline/destroy",
                                      });
                                  </script>&ndash;%&gt;
                                  alert("destroy called);
                              </kendo:grid-column-commandItem-click>--%>
                          </kendo:grid-column-commandItem>
                     </kendo:grid-column-command>

                </kendo:grid-column>
            </kendo:grid-columns>
            <kendo:dataSource pageSize="20">
                <kendo:dataSource-transport>
                    <kendo:dataSource-transport-read url="${readUrl}" dataType="json" type="POST" contentType="application/json"/>
                    <kendo:dataSource-transport-update url="/editing-inline/update" dataType="json" type="POST" contentType="application/json" />
                    <kendo:dataSource-transport-create url="/editing-inline/create" dataType="json" type="POST" contentType="application/json" />
                    <kendo:dataSource-transport-destroy  url="/grid/editing-inline/destroy" dataType="json" type="POST" contentType="application/json" >
                        <kendo:dataSource-transport-destroy-data>
                            <script>
                                function onDestroyTrnsportClick(){
                                   alert("destroy inbuilt click");
                                }
                            </script>
                        </kendo:dataSource-transport-destroy-data>
                    </kendo:dataSource-transport-destroy>
                    <kendo:dataSource-transport-parameterMap>
                        <script>
                            function parameterMap(options,type) {
                                return JSON.stringify(options);
                            }
                        </script>
                    </kendo:dataSource-transport-parameterMap>
                </kendo:dataSource-transport>
                <kendo:dataSource-schema >
                    <kendo:dataSource-schema-model id="OBDFamilyRules_ID">
                        <kendo:dataSource-schema-model-fields>
                            <kendo:dataSource-schema-model-field name="obdfamily" type="string" >
                                <kendo:dataSource-schema-model-field-validation required="true" />
                            </kendo:dataSource-schema-model-field>
                            <kendo:dataSource-schema-model-field name="rules" type="string">
                                <kendo:dataSource-schema-model-field-validation required="true" />
                            </kendo:dataSource-schema-model-field>
                            <kendo:dataSource-schema-model-field name="comments" type="string" >
                                <kendo:dataSource-schema-model-field-validation required="true" />
                            </kendo:dataSource-schema-model-field>
                        </kendo:dataSource-schema-model-fields>
                    </kendo:dataSource-schema-model>
                </kendo:dataSource-schema>
            </kendo:dataSource>
        </kendo:grid>
        </div>

    </body>
    <script>
        function onEditClickTwo() {
            alert("Edit Btn click");
        }
        function onDeleteCustomClick() {
            alert("Destroy Btn click");
            /*$.ajax({
                url: '/editing-inline/destroy',
                type: 'POST'
            });*/
        }

    </script>
    </html>

  23. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1016 posts

    Posted 13 Jun 2017 Link to this post

    Hi Priyanka,

    The provided Kendo UI Grid configuration shows that the grid is editable in "incell" mode as opposed to "popup" mode.

    The data source configuration appears correct and the presence of an id of the model should eliminate the cause of the disappearing row noted in this forum thread. There is one reason I can think of why the built-in cancel button would cause this behaviour - the dataItem gets sent at the end of the data source. It looks like it disappears but if you refresh the page, it should be where it is supposed to according to the data source view().

    To see if this is the reason, please add this code to the page and let me know the result:

    Here is how to get widget references in JavaScript:

    http://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods#getting-widget-references

    $(".k-grid-cancel-changes").on("click", function(e){
      if(!grid.dataSource.hasChanges()){
        e.preventDefault();
      }
    });

    API reference for the Kendo UI Data Source hasChanges() method:

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-hasChanges

    Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top