Questions on Kendo UI for jQuery Forum

1 answer

107 views

Cant submit support tickets on Kendo Complete license holder

Hi folks

I'm trying to submit a support ticket but can't because "Issue Area" has no options to select from the drop down.

I didn't really know where to report to support that I can't report to support so I'm posting here.

You may already be aware of this and fixing it right now.

Thanks.
Michael.

Tried:
Chrome 20.0.1132.47 m
Firefox 13.0.1

Select element has no child options. No JavaScript errors thrown.
Account: esofx

General Discussions

answered on 12 Jul 2012

0 answers

77 views

New for editor

What is the right tool for new developers of new HTML5 markup language?

General Discussions

asked on 12 Jul 2012

10 answers

1.0K+ views

Overriding datasource's JSON parse and stringify - wholesale

Is there any way to override the way the datasource is parsing and stringifying the JSON data, when using the transport? Currently, the Kendo utilities do not handle dates right (at least when using ubiquitous .NET/JSON server libraries). So on both the parameterMap and parse config lines, I have overrides there but they are hardcoded to specific fields since having to deal with javascript object/property level still.

What I want to do is take over the whole parse and stringify with a client library that handles dates better. I cannot seem to hook in the right place - before the raw data is already treated by the Kendo utils. Is this possible while using the rest of the transport functionality and if so, where do I intercept this?

Thanks!
Mike

Data Source

answered on 12 Jul 2012

1 answer

135 views

Binding dropdownlist to a subarray

Hello,
hoping that this will be simple, i am trying to show all the root collections exposed by a odata service. The code looks like this

$(document).ready(
function () {
$("#widgetList").kendoDropDownList({
dataSource:
{
type: "json",
transport:
{
read: "/DynamicOData/oData/?$format=json"
}
}
})
});

the values returned are by the service is

{

"d" : {

"EntitySets": [

"TopSellers", "WorstSellers"

]

}

}

DropDownList

answered on 12 Jul 2012

0 answers

90 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

188 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

119 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

300 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.4K+ 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

345 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