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

Request for Support on Editable Grid

4 Answers 852 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tony
Top achievements
Rank 1
Tony asked on 02 May 2012, 04:55 PM
Hi,

I've been trying to get this to work for several days now and it just won't work. I'm not sure what the process is for getting help, but I would like to submit a support ticket so I can get this resolved quickly.

The problem:
Once I add a custom editor to the grid it creates duplicate records on create, records are not updated when edited even though the grid display shows the edits and the destroy/delete does not work, no records are deleted even though the grid removes the row from the grid. Also, I could not get the combobox to work using a remote data source (json/php) I had to hard code the list in order for it to work, even though my json is working in the browser.

I'm including the code here, but would like to submit the ticket so that I can not only get this fixed but I also want to understand why this doesn't work when it seems like it should. You'll notice that the php is almost directly taken from the 2 tutorials on the blog. However, and I'll use this to rant a bit, there are no examples in php for deleting a record. Please try and include complete crud examples!

Thanks for looking and please contact me about scheduling a ticket.

Tony

Data-source declaration:

var expense = new kendo.data.DataSource({
            transport: {
        read: {
        url: "../data/expenses.php?StatementID=<?php echo $_SESSION['StatementID']; ?>",
        dataType: "json",
        type: "GET"
        },
        create: {
             url: "../data/expenses-add.php?StatementID=<?php echo $_SESSION['StatementID']; ?>",
             dataType: "json",
        type: "PUT"
              },
        update: {
            url: "../data/expenses-update.php",
        dataType: "json",
        type: "POST"    
              },
          destroy: {
          url: "../data/expenses-delete.php",
         dataType: "json",
         type: "DELETE"                            
  }
    },
    pageSize: 50,
    autoSync: false,
    schema: {
        data: "data",
                                    model: {
                                           id: "ID",
                                        fields: {
        ID: {editable: false } ,
                                    StatementID: { editable: false},
                                    ExpenseType: "Type",
        ExpenseAmount: {editable: true, type: "number" },
        Notes: {editable: true, type: "string" }
                                    }
                                }
                            }
                        });
 
Tried this to feed the combobox but couldn't get it to work:

 /* var typeDataSource = new kendo.data.DataSource({
                       transport: {
                        read: "../data/expense-types.php"
    }
                }); */

datasource for combobox(works fine, but I need this to work with the above)
   var types = [ {
                 "ID": 1,
                  "Expense": "Airfare"
                }, {
    "ID": 2,
                 "Expense": "Ground Trasportation"
                }, {
    "ID": 2,
                 "Expense": "FedEx"
                }, {
    "ID": 2,
                  "Expense": "Side-man Pay"
                }, {
    "ID": 2,
                 "Expense": "Hotel"
                }, {
    "ID": 2,
                  "Expense": "Conference Fee-Charge"
                }, {
    "ID": 2,
                  "Expense": "Advance"
      }];


  Grid declaration:              
 
                    $("#expenses").kendoGrid({
                          dataSource: expense,
                          pageable: true,
        sortable: true,
        autoBind: true,
        height: 400,
        toolbar: ["create"],
                           columns: [                            
                               { field: "ExpenseType", title:"Type", width: "150px", editor: function (container, options) {
                    $('<input data-text-field="Expense" data-value-field="Expense" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoComboBox({
                            autoBind: false,
                            dataSource: types
                        });
                      }
    },
    { field: "ExpenseAmount", title:"Amount", width: "75px", format: "{0:c}" },
    { field: "Notes", title:"Note", width: "200px" },
    { command: ["edit", "destroy"], title: "&nbsp;", width: "150px" }
                            ],
    editable: "popup"
                    });

PHP to handle the Update (POST):
                    
<?php
$link = mysql_pconnect("localhost", "user", "pass") or die("Unable To Connect To Database Server");
mysql_select_db("db") or die("Unable To Connect To DB");

// add the header line to specify that the content type is JSON
header("Content-type: application/json");

// determine the request type
$verb = $_SERVER["REQUEST_METHOD"];
    // handle a POST
if ($verb == "POST") {

// get the parameters from the post. escape them to protect against sql injection.
$Id = mysql_real_escape_string($_POST["ID"]);
$ExpenseType = mysql_real_escape_string($_POST["ExpenseType"]);
$ExpenseAmount = mysql_real_escape_string($_POST["ExpenseAmount"]);
$Notes = mysql_real_escape_string($_POST["Notes"]);
    
$rs = mysql_query("UPDATE Expenses SET `ExpenseType` = '".$ExpenseType."', `ExpenseAmount` = '".$ExpenseAmount."', `Notes` = '".$Notes."' WHERE `ID` = '".$ID."'");
   
 if ($rs) {
    
   echo "" .$Id. "";
 }
else {
     header("HTTP/1.1 500 Internal Server Error");
      echo "Update failed for ID: " .$Id;
    }
}
?>

PHP to handle the Create (PUT):
<?php
$link = mysql_pconnect("localhost", "user", "pass") or die("Unable To Connect To Database Server");
mysql_select_db("db") or die("Unable To Connect To DB");

// add the header line to specify that the content type is JSON
header("Content-type: application/json");

// determine the request type
$verb = $_SERVER["REQUEST_METHOD"];

 // handle a Put
if ($verb == "PUT") {
$request_vars = Array();
parse_str(file_get_contents('php://input'), $request_vars );
//get the parameters from the post. escape them to protect against sql injection.
$ExpenseType = mysql_real_escape_string($request_vars["ExpenseType"]);
$ExpenseAmount = mysql_real_escape_string($request_vars["ExpenseAmount"]);
$Notes = mysql_real_escape_string($request_vars["Notes"]);
 $StatementID = mysql_real_escape_string($_GET["StatementID"]);   
   $sql = "INSERT INTO Expenses (`StatementID`, `ExpenseType`, `ExpenseAmount`, `Notes`) VALUES ('".$StatementID."', '".$ExpenseType."', '".$ExpenseAmount."', '".$Notes."')";
   
  $rs = mysql_query($sql);

    if ($rs) {
$ID = mysql_insert_id();
        echo $ID;
    }
    else {
        header("HTTP/1.1 500 Internal Server Error");
        echo false;
    }
}
?>

PHP to handle Destroy(DELETE):

<?php
$link = mysql_pconnect("localhost", "user", "pass") or die("Unable To Connect To Database Server");
mysql_select_db("db") or die("Unable To Connect To DB");
// add the header line to specify that the content type is JSON
header("Content-type: application/json");

// determine the request type
$verb = $_SERVER["REQUEST_METHOD"];
if ($verb == "DELETE") {
 
// get the parameters from the post. escape them to protect against sql injection.
$ID = mysql_real_escape_string($_GET["ID"]);
    
   $sql= "DELETE FROM Expenses WHERE ID = '".$ID."'";
   
  $rs = mysql_query($sql);

    if ($rs) {
        echo "".$ID."";
    }
    else {
       header("HTTP/1.1 500 Internal Server Error");
        echo false;
    }
}
?>

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 07 May 2012, 09:38 AM
Hi Tony,

When you add a new item in the Grid its ID should be generated on the server and the newly inserted item must be returned back to the client. This way the DataSource can update its internal data and the Grid widget will update the column for this field. In case the server does not return the result, the inserted item will be treated as a new one every time you sync the dataSource. The same applies for destroy and update functionality.

This behaviour could be observed if you take a closer look at the network requests of our on line demos (please check response.png)

Regarding to the comboBox binding problem, your code looks OK. I tested a similar scenario in this demo page and got it working on my side. I assume that the problem is connected with the server response.

As a general information, if you want to submit a support ticket, you could do that by logging on with your account at www.kendoui.com and clicking on Get Help -> Contact Support Team (at the bottom of the page). For convenience I attached a screen shot.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tony
Top achievements
Rank 1
answered on 11 May 2012, 02:12 AM
Hi Alexander,

Thanks for the info. I think I understand, but am unable to get the php script to return anything that works. Again, this is something that really should be in the documentation with fully working examples of working php scripts. Are we supposed to guess at server server response needs to be returned to the grid for it to work?

So, looking at my scripts here, what, exactly, needs to be returned? For example, here's what I'm returning for update and delete where ID is the ID sent from the grid on post. The post from the grid is always correct.If this is not correct please include the php code that will return what the grid is looking for.

if ($rs) {
        echo "".$ID."";
    }
    else {
       header("HTTP/1.1 500 Internal Server Error");
        echo false;
    }

For inserts, my code returns the ID of the last inserted record, which I understood from the tutorials is what the grid would be looking for as a server response. If this is not correct please include the php code that will provide the correct server response for an insert.

if ($rs) {
$ID = mysql_insert_id();
        echo $ID;
    }
    else {
        header("HTTP/1.1 500 Internal Server Error");
        echo false;
    }

This really shouldn't be a mystery and should be stock documentation and included in examples. I've almost given up on this and would not expose my staff to a product, as slick and desirable as Kendo is, until the most basic crud functionality is fully documented. It just shouldn't be that hard. The grid examples on the site are not sufficient to provide comprehensive coverage of the features a grid is most useful for....CRUD interactions. The examples given in the tutorials cover some but not all functionality and don't work with custom editors.

I have several large projects coming up and would like to use Kendo UI to build the custom CMS and front-end interactions. But the lack of comprehensive documentation and working samples is making it difficult. I'm investigating now because I'll need 5-10 licenses of whatever framework I end up using. I've got 1 license for several already. I'm banking of the telerik name and the fact that there is a solid company behind this product, but just getting basic crud operations going has been a real hassle so far. It just shouldn't be that hard to find answers to basic questions. If a certain php server response is needed for each crud operation let's have it! Just provide a full on crud example with the php code that provides the right response and works with custom editors and all of the other features the grid provides so we can start using this framework.

If you can do that basic level of support I'll be very likely to go with Kendo UI vs the competition. Extjs doesn't suffer these issues. I don't like as much and don't like the price, but my guys can go to town building apps with it from day one.

Thanks for any help on this and I am willing to open a ticket if needed, but it really shouldn't be needed. Just give me a code sample that provides the proper responses for all CRUD interactions and I can take it from there.

Tony

0
Alexander Valchev
Telerik team
answered on 15 May 2012, 03:10 PM
Hello Tony,

You are returning only the ID, not the whole item row. As I mentioned in my previous reply the server should return the newly inserted item (as an array) back to the client. The update and destroy operations on the other hand will be marked as successfully completed if the response is returned with status "200 OK", e.g. the response can be empty.
I am afraid that we do not have fully working CRUD examples using PHP, but you may check this blog post as it explains how to combine KendoUI with PHP.

Thank you for the feedback, we realize that the documentation is very important part of the products and for that reason its improvement is a very high priority for us in Q2. Please note that KendoUI is a client side framework which can be used with various server side technologies - that is why currently we are providing only JavaScript documentation.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Fernando
Top achievements
Rank 1
answered on 11 Jul 2012, 10:57 PM
Hi,
    in order to have a grid displaying data and allowing to update it, from a SQL Server database:

      which methods are available? Is the only method using web services to retrieve/update data?

thanks,
Fernando
Tags
Grid
Asked by
Tony
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Tony
Top achievements
Rank 1
Fernando
Top achievements
Rank 1
Share this question
or