Questions on Kendo UI for jQuery Forum

0 answers

101 views

Alert is not showing thr current row id in ... please help

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://localhost/tp-ms/static/js/jquery.min.js"></script>
    <script src="http://localhost/tp-ms/static/controls/kendoui/js/kendo.web.min.js"></script>
    <link href="http://localhost/tp-ms/static/controls/kendoui/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://localhost/tp-ms/static/controls/kendoui/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://localhost/tp-ms/static/controls/kendoui/js/kendo.all.min.js" rel="stylesheet" />
     <link rel="stylesheet" href="http://localhost/tp-ms/static/css/grids-min.css" type="text/css">

</head>
<body>
<div id="grid">
</div>
<script>
var dataSample = [];
dataSample.push({
    OrderID: "1",
    ShipName: "line 1"
});
dataSample.push({
    OrderID: "2",
    ShipName: "line 2"
});
dataSample.push({
    OrderID: "3",
    ShipName: "line 3"
});

var dataSource = new kendo.data.DataSource({
    data: dataSample,
    schema: {
        model: {
            id: "OrderID"
        }
    },
    pageSize: 10
});

$("#grid").kendoGrid({
    dataSource: dataSource,
    selectable: true,
   change: function() {
        var row = this.select();
        var id = row.data("id");
       alert(id); // showing undefined but i want the current id...
    },
    columns: ["OrderID", "ShipName"],

});

</script>

</body>
</html>

Grid

asked on 12 Jul 2012

1 answer

198 views

Error while doing remote paging/Sorting

HI I am getting error object does not support this property in kendo.ui.all.js in line d.transport=new n.data.transports[a.type] when I try to get Json data from server.
If i use odata in type highlighted bold below error not come but data is not bind to grid.

This is happening when I use latest beta version of kendo.all.min.js Please see the attached image

Here is my code

$(self.options.element).kendoGrid({
dataSource: {
type: "json",
serverPaging: true,
serverSorting: true,
serverFiltering: true,
allowUnsort: true,
pageSize: 10,
transport: {
read: {
url: self.options.dataURL, //URL to get data
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: {}
},
parameterMap: function (options) {
options.portfolioIDs = self.options.portfolioID;
return JSON.stringify(options);
}
},
schema: {
data: "d.data",
total: "d.__Count"
}
},
height: 600,
resizable: true,
reorderable: true,
filterable: true,
sortable: true,
pageable: true,
columns: self._contractConfig.generatedCols //Object with column information

});

Grid

answered on 12 Jul 2012

0 answers

146 views

Adding a Column to a Grid doesn't work when binding data to property in ViewBag

Hi,

I'm trying to add to a Grid a column that doesn't exist in the model. That column only have an icon with some functionality. The problem is the icons doesn't appear when binding data from a property in the ViewBag:

@(Html.Kendo().Grid<Models.Location>()

.Name("availableStops")

.BindTo((IEnumerable<Models.Location>)ViewBag.AvailableLocations)

.Columns(columns =>

{

columns.Bound(p => p.Id).Title("ID");

columns.Bound(p => p.StopLocation).Title("Description");

columns.Template(@<text></text>).ClientTemplate("<span class='k-icon k-add' title='Add' style='cursor:pointer;' onclick='addStop(this)'></span>").Title("Add");

})

.DataSource(dataSource => dataSource.Server().Model(model => model.Id(p => p.IRN)))

)

and appear when I'm populating the grid using an ajax call:

@(Html.Kendo().Grid<SpyMobileLibraryRoute.Models.UISpyFmtLOC>()

.Name("availableStops")

.Columns(columns =>

{

columns.Bound(p => p.Id).Title("ID");

columns.Bound(p => p.StopLocation).Title("Description");

columns.Template(@<text></text>).ClientTemplate("<span class='k-icon k-add' title='Add' style='cursor:pointer;' onclick='addStop(this)'></span>").Title("Add");

})

.DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("GetLocations", "Location")))

)

Thanks in advance.

Grid

asked on 12 Jul 2012

7 answers

312 views

Listview issues - endlessScroll and list loading from datasource

I have two issues with my listview which I would appreciate help with.

1) The listview takes a while to display (aprox 3 seconds). I navigate to the view that has the listview, the h1 of the view appears but it takes a while before the listview is displayed. This happens every time, not just the first time it is loaded.

2) I have added endlessScroll: true and scrollTreshold: 30 to my listview. This seems to display the data from the datasource in a continuous loop that never ends. Is this supposed to happen? I would only want to display the contents of the datasource once and not have this repeating.

I have the following code:

var DataSource = new kendo.data.DataSource({

pageSize: 5,

transport: {

read: "data.php",

dataType: "json",

},

error: function(e) {

alert(e.responseText);

},

sort: { field: "date", dir: "desc" },

schema: {

model: {

id: "id",

fields: {

item: { type: "string" },

date: { type: "date", "string" },

total:{ type: "string" },

status: { type: "string" },

isnew: { type: "string" },

dispatched: { type: "string" }

}

});

<div data-role="view" id="list" data-init="listinit">

<h2>List</h2>

<ul id="list"></ul>

</div>

<script id="list_template" type="text/x-kendo-template">

#

if(status == 1){

var statusText = 'Open';

var statusColour = 'green';

} else if(status == 2) {

var statusText = 'Closed';

var statusColour = 'blue';

} else {

var statusText = 'Problem';

var statusColour = 'red';

}

#

<div style="font-size:70%;padding-right:10%"><div style="float:left;margin-right:3px;">ID. #= id#</div><div style="float:right;" >#= date #</div><div style=

"clear:both;text-align:center;padding: 0 5px;width: 60px;float:left;background-color:#= statusColour #; color: white;font-weight:bold"

>#= statusText #</div><div style="float:right;margin-right:3px;">Total: #= total #</div><div style="clear:both;"></div></div></a></script>

<script>

function listinit(){

$("#list").kendoMobileListView({

dataSource: DataSource,

pullToRefresh: true,

appendOnRefresh: false,

style: "inset",

endlessScroll: true,

scrollTreshold: 30, //treshold in pixels

template: $("#list_template").text()

});

}

</script>

ListView (Mobile)

answered on 11 Jul 2012

4 answers

1.5K+ views

Request for Support on Editable Grid

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: " ", 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;
    }
}
?>

Grid

answered on 11 Jul 2012

6 answers

385 views

How to trigger a method from a user selection or button press

My general goal is this: I have two views, each with a <Select> control. After the user selects a value in the first <select> control, I wish to fill the second <select> based on the first value.

For example, the 1st select allows the user to choose a customer, then the 2nd select in the 2nd view is filled with locations where that customer operates. (and only that customer).

This seems like a common thing people would need to do, so I bet there's a simple solution that I'm missing, being pretty new to web development in general. My apologies if this is the case.

My first attempt was to add an "onchange=method" property to the 1st select, and point it to a method to fill the 2nd select. This did nothing, the method was not invoked. I determined that I needed to set AutoPostBack="True". I did this by replacing the <select> with <asp:DropDownList > since the <select> did not appear to support the autopostback property.

This failed to work at all on Opera running under the Android 2.3.3 emulator.
This *kinda* worked worked when viewed on Chrome under Windows, the method is invoked, but then after the postback, the entire app is reloaded and it goes back to a view before the one with the 1st select. And even if it went to the correct view, this reloading of the app would be pretty bad anyway. And regardless, it's a mobile app that has to work on mobile browsers.

Is there a different approach to accomplish this? Do I have use AJAX?

FYI, I am developing in Visual Studio 2010, and using C# for the code behind.

Thanks,
Tim

General Discussions

answered on 11 Jul 2012

1 answer

117 views

Error in Grid / Inline editing / edit numeric field

in your example online when I add a record and fill out the field "Units in stock," there is an error in the compilation:
Example, entering 7.5, video displays 7.05, I will illustrate the sequence::
The field has the default value 0| ( | cursor position)
I hit 7 in numeric keyboard
appears on the screen 7|0
I press "." in numeric keyboard
appears on screen 7.0|
I press 5 on the numeric keyboard
Video appears to 7:05|

Tips ... ?
Thank you.

Grid

answered on 11 Jul 2012

0 answers

191 views

client side oauth

I'm considering using KendoUI for a mobile app and I was wondering if it supports oauth 1.0 as part of the DataSource component or in some other way? More specifically can I do a full oauth handshake to get an access token and then can I make ajax calls using that token (along with the other parameters required by the protocol)

Thanks, r.

General Discussions

asked on 11 Jul 2012

2 answers

206 views

[Solved] Binding to JSON only containing list of values, not dictionary

I have a remote json datasource which comes in as follows:

[["Advantage", null, "2012-05-07T01:54:02.130000", "sqlsvrautosysjobs", "2012-05-07T01:54:02.130000", "sqlsvrautosysjobs", 1], ["ALDOP", null, "2012-05-07T01:54:02.130000", "sqlsvrautosysjobs", "2012-05-07T01:54:02.130000", "sqlsvrautosysjobs", 1]]

How can I bind my datasource to this? I cannot change the datasource so I will need to use ordinal references or something like that. I've tried the following with no luck:

$("#grid").kendoGrid({

dataSource: {

type: "json",

transport: {

read: {

url: 'list',

dataType: 'json',

contentType: 'application/json'

}

},

schema: {

model: {

fields: {

SourceSystem: { type: "string" },

ModifiedComment: { type: "string" },

CreatedDate: { type: "date" },

ModifiedDate: { type: "date" },

ModifiedUser: { type: "string" },

Version: { type: "number" }

}

},

pageSize: 10,

serverPaging: true,

serverFiltering: true,

serverSorting: true

},

height: 250,

filterable: true,

sortable: true,

pageable: true,

columns: [{

field:"SourceSystem",

title: "Source"

}, {

field: "ModifiedComment",

title: "Comment",

filterable: false

},

"Version",

{

field: "CreatedDate",

title: "Created Date",

width: 100,

format: "{0:MM/dd/yyyy}"

}, {

field: "ModifiedDate",

title: "Modified Date",

width: 100,

format: "{0:MM/dd/yyyy}"

}, {

field: "ModifiedUser",

title: "Modified By"

}

]

});

Any ideas?

Data Source

answered on 11 Jul 2012

2 answers

141 views

New features in 2012 Q2 beta for treeview

I've downloaded in the 2012 Q2 beta and the "changes" file under treeview says only:

Allow disabled items to be expanded / collapsed through the API

In December 2011, there was discussion of dynamic loading capability being added to the Jan 2012 release.
It didn't happen.
I also saw discussion of dynamic loading of tree data being added to the march 2012 release.
It didn't happen.
Based on the beta doc above, It appears that dynamic loading for treeview won't happen for the 2012 Q2 (July) release.
Is this correct?
I've asked about this feature before but have not had a response.
Here's what I think would be enough for my application:
Display the expansion triangle regardless of whether a node has children or not.
Then there would be something for a user to click on and I could handle the event and
get the children from the server and populate the tree with custom javascript.
The "don't display expansion triangle if no children" is "too clever". Please add
a configuration option to a tree to "disable" this "too clever" feature.

If no response to this message (just like my other questions), I'll assume Treeview is no longer being worked on.

TreeView

answered on 11 Jul 2012