This is a migrated thread and some comments may be shown as answers.

Grid Popup Edit Cancel Problem

22 Answers 1934 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 27 Aug 2012, 01:31 PM
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.

22 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 27 Aug 2012, 07:28 PM
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!
0
John
Top achievements
Rank 1
answered on 29 Aug 2012, 06:38 PM
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!
0
Iliana Dyankova
Telerik team
answered on 03 Sep 2012, 03:51 PM
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!
0
John
Top achievements
Rank 1
answered on 04 Sep 2012, 05:45 PM
Thanks again.  I am unable to locate the link for "Internal Builds."  Would you give me the URL?
0
Iliana Dyankova
Telerik team
answered on 05 Sep 2012, 06:39 AM
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!
0
Guillaume
Top achievements
Rank 1
answered on 21 Nov 2012, 04:00 PM
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;}
0
Mark
Top achievements
Rank 1
answered on 24 Apr 2013, 05:14 PM
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????

0
Mark
Top achievements
Rank 1
answered on 24 Apr 2013, 06:22 PM
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 :)
0
Lucas
Top achievements
Rank 1
answered on 02 May 2013, 07:12 PM
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
0
Mark
Top achievements
Rank 1
answered on 02 May 2013, 07:21 PM
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.
0
Lucas
Top achievements
Rank 1
answered on 02 May 2013, 07:37 PM
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
0
Mark
Top achievements
Rank 1
answered on 02 May 2013, 07:40 PM
If you post a fiddle of what you are doing, I can take a look at it for you :)
0
Lucas
Top achievements
Rank 1
answered on 02 May 2013, 08:05 PM
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
0
Mark
Top achievements
Rank 1
answered on 02 May 2013, 08:53 PM
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
0
Lucas
Top achievements
Rank 1
answered on 03 May 2013, 12:46 PM
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
0
Mark
Top achievements
Rank 1
answered on 03 May 2013, 04:25 PM
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.
0
Bence
Top achievements
Rank 1
answered on 11 Dec 2013, 01:47 PM
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);
 
?>
0
Alexander Valchev
Telerik team
answered on 16 Dec 2013, 09:46 AM
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!
0
Bence
Top achievements
Rank 1
answered on 16 Dec 2013, 09:53 AM
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.
0
Priyanka
Top achievements
Rank 1
answered on 08 Jun 2017, 10:45 PM

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.

0
Priyanka
Top achievements
Rank 1
answered on 08 Jun 2017, 10:47 PM
<%--
  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>

0
Alex Hajigeorgieva
Telerik team
answered on 13 Jun 2017, 10:03 AM
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 (charts) and form elements.
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
John
Top achievements
Rank 1
Guillaume
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Lucas
Top achievements
Rank 1
Bence
Top achievements
Rank 1
Alexander Valchev
Telerik team
Priyanka
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or