Hi:
The grid is just part of a detail form, and the data for the grid is in memory, so the postback from the cancel button is very bad.
Phil
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Author Design - snippet</title> <style> body { font-family: Tahoma; font-size: 18px; color: navy; margin: 0; } #grid .k-grid-toolbar { padding: .6em 1.3em; } .add-label { vertical-align: middle; padding-right: .5em; } #existing { vertical-align: middle; } .toolbar { float: right; } </style> <link href="../../content/kendo/kendo.common-bootstrap.min.css" rel="stylesheet" /> <link href="../../content/kendo/kendo.blueopal.min.css" rel="stylesheet" /> <script src="../../scripts/jquery-1.9.1.min.js"></script> <script src="../../scripts/kendo/kendo.all.js"></script></head><body> <script type="text/x-kendo-template" id="addTemplate"> <div class="toolbar"> <label class="add-label" for="existing">Add existing:</label> <input type="search" id="existing" style="width: 300px"/> </div> </script> <div style="width: 600px;"> <div id="AuthorsGrid"></div> </div> <script type="text/javascript"> // // var aData = [{ Id: 1, Name: "Joe" }, { Id: 2, Name: "Jane" }]; $(document).ready(function () { // $('#AuthorsGrid').kendoGrid({ dataSource: aData, width: 400, toolbar: [{ name: 'create', text: " Add " }, { template: $("#addTemplate").html() }], columns: [ { field: 'Id', hidden: true }, { field: 'Name', title: 'Name', width: '350px' }, { command: 'destroy', title: ' ', width: 110 } ], editable: 'popup' }); // var AuthorGrid = $('#AuthorsGrid').data('kendoGrid'); // var authorData = [{ "Id": 11, "Name": "Andy Hunt" }, { "Id": 10, "Name": "Ben Albahari" }, { "Id": 4, "Name": "Bill Wagner" }, { "Id": 1, "Name": "Bob Martin" }, { "Id": 15, "Name": "Chad Fowler" }, { "Id": 12, "Name": "Dave Thomas" }, { "Id": 6, "Name": "Fabrice Marguerie" }, { "Id": 2, "Name": "James Newkirk" }, { "Id": 8, "Name": "Jim Wooley" }, { "Id": 3, "Name": "Jon Skeet" }, { "Id": 9, "Name": "Joseph Albahari" }, { "Id": 5, "Name": "Joseph Rattz Jr." }, { "Id": 16, "Name": "Julie Lerman" }, { "Id": 14, "Name": "Kent Beck" }, { "Id": 17, "Name": "Rowan Miller" }, { "Id": 7, "Name": "Steve Eichert" }, { "Id": 13, "Name": "Venkat Subramaniam" }]; $("#existing").kendoDropDownList({ dataTextField: "Name", dataValueField: "Id", dataSource: { data: authorData }, optionLabel: "Select an Author ...", change: function (e) { // handle selected event var dataId = this.select() - 1; if (dataId != -1) { var dataItem = this.dataSource.at(dataId); if (AuthorGrid.dataSource.get(dataItem.Id) === undefined) { // alert(dataItem.Name + ' (' + dataItem.Id + ')' + dataId); AuthorGrid.dataSource.add(dataItem); } } // e.preventDefault(); } }); }); </script></body></html>Greetings,
Im currently using a columnchart which calculates a maximum on a number field and uses a timestamp value for the date axis. Im currently using the "fit" as baseUnit for my dateAxis. However I was wondering if it might be possible to display 3 maximums in 1 hour (baseUnit: hours) without having to change the interval to 20 minutes.
So my horizontal axis would still display hours ("8:00", "9:00") but I would see 3 maximum values within each hour and this on the moment they happend.
Is this currently possible to implement the above?
Thanks in advance!
When a grid is setup with inline editing and paging, adding or editing a record and changing the current page WITHOUT clicking the Inline 'Update' or 'Cancel' buttons results in the data being updated within the datasource (as demonstrated by the 'change' event on the datasource being triggered) but without the correct operation. The 'cancel' and 'save' event on the grid are also not triggered.
This behavior is demonstrated by the following:
http://dojo.telerik.com/@djones/uKIjI/2
Hello, I have some issue about gantt dependency
we need to have an attribute "Lag" on dependency, but Kendo seems not to support it now.
So, can I have some way to capture the depdency dooubl-click event and let user edit dependecy info(including lag), just like Task pop-up editor
Please tell me what I'm doing wrong?
PHP back end editing.php
01.<?php02.require_once 'lib/DataSourceResult.php';03.require_once 'lib/Kendo/Autoload.php';04. 05.if ($_SERVER['REQUEST_METHOD'] == 'POST') {06. header('Content-Type: application/json');07. 08. $request = json_decode(file_get_contents('php://input'));09. 10. $result = new DataSourceResult('mysql:host=localhost;dbname=mydb;charset=utf8', 'root', '********');11. 12. $type = $_GET['type'];13. 14. $columns = array('project_id', 'code_tk', 'title', 'small_title');15. 16. switch($type) {17. case 'create':18. $result = $result->create('projects', $columns, $request->models, 'project_id');19. break;20. case 'read':21. $result = $result->read('projects', $columns, $request);22. break;23. case 'update':24. $result = $result->update('projects', $columns, $request->models, 'project_id');25. break;26. case 'destroy':27. $result = $result->destroy('projects', $request->models, 'project_id');28. break;29. }30. 31. echo json_encode($result,JSON_NUMERIC_CHECK);32. 33. exit;34.}35.?>HTML5/JavaScript front end index.html
01.<!DOCTYPE html>02.<html>03.<head>04. <!--<base href="http://demos.telerik.com/kendo-ui/grid/editing">-->05. <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>06. <title></title>07. <link rel="stylesheet" href="css/kendo.common-office365.min.css" />08. <link rel="stylesheet" href="css/kendo.office365.min.css" />09. <!--<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />-->10. <!--<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.office365.min.css" />-->11. 12. <script src="js/jquery.min.js"></script>13. <script src="js/kendo.all.min.js"></script>14.</head>15.<body>16.<div id="example">17. <div id="grid"></div>18. 19. <script>20. $(document).ready(function () {21. var crudServiceBaseUrl = "editing.php",22. dataSource = new kendo.data.DataSource({23. transport: {24. read: {25. url: crudServiceBaseUrl + "?type=read",26. contentType: "application/json; charset=utf-8",27. type: "POST",28. dataType: "json"29. },30. update: {31. url: crudServiceBaseUrl + "?type=update",32. contentType: "application/json; charset=utf-8",33. type: "POST",34. dataType: "json"35. },36. destroy: {37. url: crudServiceBaseUrl + "?type=destroy",38. contentType: "application/json; charset=utf-8",39. type: "POST",40. dataType: "json"41. },42. create: {43. url: crudServiceBaseUrl + "?type=create",44. contentType: "application/json; charset=utf-8",45. type: "POST",46. dataType: "json"47. },48. parameterMap: function(options, operation) {49. if (operation !== "read" && options.models) {50. return {models: kendo.stringify(options.models)};51. }52. }53. },54. batch: true,55. pageSize: 20,56. schema: {57. model: {58. id: "project_id",59. fields: {60. project_id: { editable: false, nullable: false },61. code_tk: { type: "number", validation: { min: 0, required: true } },62. title: { type: "string" },63. small_title: { type: "string" }64. }65. }66. }67. });68. 69. $("#grid").kendoGrid({70. dataSource: dataSource,71. navigatable: true,72. pageable: true,73. height: 550,74. toolbar: ["create", "save", "cancel"],75. columns: [76. "code_tk",77. { field: "title", title: "title", width: 120 },78. { field: "small_title", title: "small_title", width: 120 },79.// { field: "Discontinued", width: 120 },80. { command: "destroy", title: " ", width: 150 }],81. editable: true82. });83. });84. </script>85.</div>86. 87. 88.</body>89.</html>We have a kendo Grid, and then we have an editor template, which is named after the view model.
Inside the viewModel we have this:
[Required( ErrorMessage = "Please enter a name")]
public string Name{ get; set; }
Then inside the javascript, I create another custom rule like this :
var form = $("#AdhocGroupForm")
form.kendoValidator({
messages: {
nameexists: "This name already exists, please choose another"
},
rules: {
nameexists: function(input) {
if (input.is("[name=Name]")) {
return input.val() === "Tom";
}
return true;
}
}
});
Of course, this does nothing right now. I'm simply trying to set this up and get to the point where it's called, then I'll flesh it out to check if the provided name exists, via AJAX. However, it's not called, and that is part of the issue.
The other part is that when I do this:
var validator = $("#AdhocGroupForm").kendoValidator().data("kendoValidator");
I expect to get an object that I can call 'validate' on ( I assume this is what I need to do to trigger validation although some things I've seen make me think it will fire on each keypress ). However, this returns null. kendoValidator() returns an object, but this has no validate method, either. I believe this is my core issue, I don't have a validator to work with.The form and textbox html in my page looks like this:
<form action="/AdhocGroup/AdhocGroupForm/AdhocGroupForm" data-role="validator" method="post" novalidate="novalidate">
<input class="input k-textbox" data-val="true" data-val-nameexists="data-val-nameexists" data-val-required="Please enter a name" id="Name" name="Name" style="width: 200px;" type="text" value="" data-bind="value:Name">
The validation for the required field, with my custom error message, works fine.This is my first day using these validators, so it's possible I've missed something obvious. Thanks for any advice.
Hi, when I add a textbox to a Kendo Window, the default browser styling of the border (and possibly other things) is no longer present. See example below I copied from Kendo UI Dojo and run in IE11. I'm trying to dig through styles to override, but having no luck so far.
<!DOCTYPE html><html><head> <base href="http://demos.telerik.com/kendo-ui/window/index"> <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.silver.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.silver.min.css" /> <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script></head><body> <div id="example"> <input type="text" placeholder="test"></input> <div id="window"> <input type="text" placeholder="test"></input> <div class="armchair"><img src="../content/web/window/armchair-402.png" alt="Artek Alvar Aalto - Armchair 402" /> Artek Alvar Aalto - Armchair 402</div> <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p> <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p> <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p> <p>Source: <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p> </div> <span id="undo" style="display:none" class="k-button">Click here to open the window.</span> <script> $(document).ready(function() { var window = $("#window"), undo = $("#undo") .bind("click", function() { window.data("kendoWindow").open(); undo.hide(); }); var onClose = function() { undo.show(); } if (!window.data("kendoWindow")) { window.kendoWindow({ width: "600px", title: "About Alvar Aalto", actions: [ "Pin", "Minimize", "Maximize", "Close" ], close: onClose }); } }); </script> <style> #example { min-height:500px; } #undo { text-align: center; position: absolute; white-space: nowrap; padding: 1em; cursor: pointer; } .armchair { float: left; margin: 30px 30px 120px 30px; text-align: center; } .armchair img { display: block; margin-bottom: 10px; } </style> </div></body></html>I'm trying to use the grid with this xml. The idea on the XML is that you have a resource, which has multiple resources. Each resource has an ID and name attribute. I'd like to be able to group them and sort them. All I'm getting is a loading icon. Thanks in advance.
C