Hello,
I want to mass update the data of dataSource in JSON.
If you run in the following way, it seems well data is not set.
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Kendo UI Snippet</title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script></head><body> <div id="gantt"></div><script> var dataSource =new kendo.data.GanttDataSource({ data: [ { "id": 0, "orderId": 0, "parentId": null, "title": "old task1", "start": "2015-10-19", "end": "2015-10-20" }, { "id": 1, "orderId": 0, "parentId": null, "title": "old task2", "start": "2015-10-19", "end": "2015-10-20" } ] }); $("#gantt").kendoGantt({ dataSource: dataSource, views: ["week"], columns: [ { field: "title", title: "Title" }, { field: "id", title: "ID" } ]}); dataSource.fetch(function(){ dataSource.data([ { "id": 0, "orderId": 0, "parentId": null, "title": "new task1", "start": "2015-10-19", "end": "2015-10-20" }, { "id": 1, "orderId": 0, "parentId": null, "title": "new task2", "start": "2015-10-19", "end": "2015-10-20" } ]);}); </script></body></html>
Date is not displayed well as attached image.
@(Html.Kendo().DropDownList()
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
.BindTo(new SelectList((System.Collections.IDictionary)(ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"]),"Key","Value",Model)) )
@(Html.Kendo().DropDownList()
.Name("City")
.DataSource(x => {x.Read(read => read.Action("GetCities", "Home").Data("getState"))
.ServerFiltering( true); })
.DataTextField( "Text")
.DataValueField("Value")
.Enable(false)
.AutoBind(false)
.CascadeFrom("States")
)
function
getState(e) {
return {
State: $("#States").val()
};
}
Edit: Wow, it added a few dozen extra line breaks that I just removed.
A user has requested an "Update and Add" button to the left of the Kendo Update command in the grid. I was able to get this feature working in the toolbar, but it is always visible and we would prefer to get it into the command area and only visible during edit. Please advise.
Here's the Javascript snippet that saves and adds (generic so we can pass in other grid commands):
function UpdateAdd(e) { var grid = $(e).data("kendoGrid"); grid.saveRow(); grid.addRow();}
Here's the Kendo Grid in MVC/Razor (w/the working toolbar button and the command where want but as a placeholder:
@(Html.Kendo().Grid<FOO>() .Name("grid") .Columns(columns => { columns.Bound(x => x.ID).Width(250).Visible(false); columns.Bound(x => x.Name).Width(250); columns.Command(commands => { commands.Custom("Update and Add").Click("UpdateAdd"); commands.Edit();// The "edit" command will edit and update data items commands.Destroy(); // The "destroy" command removes data items }).Title("Commands").Width(200); }) .ToolBar(toolBar => toolBar.Create()) .ToolBar(toolBar => toolBar.Custom().Name("UpdateAdd").Text("Update and Add").Url("#") .HtmlAttributes(new { onclick = "UpdateAdd('#grid')" }) ) // The "create" command adds new data items .Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode .DataSource(dataSource => dataSource .WebApi() .Model(model => { model.Id(x => x.ClientCollectionTypeID); // Specify the property which is the unique identifier of the model model.Field(x => x.ClientCollectionTypeID).Editable(false); // M model.Field(x => x.Name).Editable(true); // M }) .Create(create => create.Url("/api/Foo/gridCreate")) .Read(read => read.Url("/api/Foo/grid")) .Update(update => update.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "F", id = "{0}" }))) // Action invoked when the user saves an updated data item .Destroy(destroy => destroy.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "F", id = "{0}" }))) // Action invoked when the user removes a data item .Events(e => { e.Error("onErrors"); }) ) .Pageable() .Sortable() .Scrollable() .Filterable(ftb => ftb.Mode(GridFilterMode.Row) .Operators(ops => ops .ForString(str => str.Clear() .Contains("Contains") .StartsWith("Starts with") .EndsWith("Ends with") .IsEqualTo("Is equal to") ) ) ) )
In the kendo method:
function isScrollable(element) {
if (element.className.indexOf("k-auto-scrollable") > -1) {
return true;
}
var overflow = getComputedStyles(element, ["overflow"]).overflow;
return overflow == "auto" || overflow == "scroll";
}
The element.className is undefined when I right click to open my context menu that is attached to an SVG element. Can you put some more protection in against an undefined className for the next release please? I can patch it now but ​I thought it was worth bringing to your attention.
Thanks
Kenny
Hi,
I've seen really nice future of grid on competition controls, "floated grid headers". It's behaviour of grid when on scrooling page with long grid inside, column header is always above top row (I shown it in attachements). It's pretty usefull, because user always know what's name is of every column. Do you know any posibility to add this behaviour to kendo grid? In advance thank for help.
Damian
Hello,
I have a problem with the Excel export on the datagrid when using a script built using the custom download builder tool (http://www.telerik.com/download/custom-download). Version 2015.3.930.
To reproduce the problem I used this simple page :
<!DOCTYPE html><html><head> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.material.min.css" /> <script src="//kendo.cdn.telerik.com/2015.3.930/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script> <script src="//kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script> </head><body> <script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script> <div id="example"> <div id="grid"></div> <script> $(document).ready(function() { $("#grid").kendoGrid({ toolbar: ["excel"], excel: { fileName: "Kendo UI Grid Export.xlsx", proxyURL: "//demos.telerik.com/kendo-ui/service/export", filterable: true }, dataSource: { data: products, schema: { model: { fields: { ProductName: { type: "string" }, UnitPrice: { type: "number" }, UnitsInStock: { type: "number" }, Discontinued: { type: "boolean" } } } }, }, height: 550, scrollable: false, sortable: false, filterable: false, columns: [ "ProductName", { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" }, { field: "UnitsInStock", title: "Units In Stock", width: "130px" }, { field: "Discontinued", width: "130px" } ] }); }); </script></div></body></html>
With this code, the Excel export works well.
Now, if instead of the kendo.all.min.js I will use a custom script with two configurations :
1) I select only the Grid component with the Excel export plugin --> the export works.
2) I select the Grid component ​with the Excel export plugin AND the Gantt componant --> the export failed with the javascript error: Object doesn't support property or method 'saveAsExcel'
The error only comes when the Gantt component is embedded int the custom script, and I need it...
I have made another test using the builder tool with ALL the components selected : it failed too. It makes me feel that the kendo.all.min.js is not the same script as the one the tool built (when selected all the components).
Any idea ?
Do you have an example of passing grid options to the server? This is a follow up to this question: http://www.telerik.com/forums/pass-grid-state-to-mvc-controller#hnaJEZgxu0iivfni8UxrQw
Hi there
We have to implement a Semesterview (see attachment) for our customers. In this view the dates are grouped by their weekdays. We are now considering using a kendo scheduler for this task, but we don't know whether it can be done. We have seen that there exist diefferent "views" like "Day", "WorkWeek", "Week", "Agenda" and so on - so we came up with the idea of implementing a custom view in the same manner? Is this possible and useful?
Thanks in advance and best regards