Questions on Kendo UI for jQuery Forum

2 answers

92 views

batch editing

I'm trying to following this example: http://demos.telerik.com/kendo-ui/grid/editing

Looking at firebug console, when I click on save button nothing happens, update url is never reached.

Here is my datasource and datagrid object:

01.var ds = new kendo.data.DataSource({

02. type: "json",

03. serverSorting: true,

04. serverPaging: true,

05. serverFiltering: true,

06. serverGrouping: true,

07. pageSize: 20,

08. transport: {

09. read: {

10. url: "http://localhost/demotelerik/bssdemo/datasource.php",

11. type: "post",

12. dataType: "json"

13. },

14. update: {

15. url: "http://localhost/demotelerik/bssdemo/aggiornadatasource.php",

16. type: "post",

17. dataType: "json"

18. },

29. },

30. batch: true,

37. schema: {

38. data: "results",

39. total: "total",

40. groups: "groups",

41. }

42.

});

01.var dg = $("#grid").kendoGrid({
02.    lockedHeader: true, //header fisso
03.     
04.    dataSource : ds,
05.    height: 600,
06.    sortable: {
07.        mode: "multiple"
08.    },
09.    pageable: {
10.        info: true,
11.        numeric: true,
12.        previousNext: true
13.    },
14.    filterable: true,
15.    columnMenu: true,
16.    toolbar: [
17.        {name: "create", text: "Nuovo"}, 
18.        {name: "save", text:"Salva"}, 
19.        {name: "cancel", text:"Annulla"},
20.        {name: "scorri", text: "Scorri Selezionate"},
21.        {name: "pdf", text: "Esporta in PDF"}
22.    ],
23.    pdf: {
24.        allPages: true
25.    },
26.    allowCopy: true,
27.    resizable: true,
28.    columnResize: function(e) {//evento colonna ridimensionata
29.        console.log(e.column.field, e.newWidth, e.oldWidth);
30.    },
31. 
32.    reorderable: true,
33.    columnReorder: function(e) {//evento colonne riodinate
34.        console.log(e.column.field, e.newIndex, e.oldIndex);
35.    },
36. 
37.    selectable: "multiple",
38. 
39.    navigatable: true,
40. 
41.    groupable: true,
42. 
43.    editable: true,
44. 
45.    columns: [
46.        "c0", 
47.        "c1",
48.        "c2", 
49.        "c3",
50.        "c4", 
51.        "c5",
52.        "c6", 
53.        "c7",
54.        "c8", 
55.        "c9",
56.        {command: [
57.            {name:"destroy", text:"Elimina"}
58.        ]}
59.    ]
60. 
61.}).data("kendoGrid");

Grid

answered on 22 Apr 2015

1 answer

173 views

Change style in resources

Hello,

We need to change styles of resources.
For example In this Demo: http://demos.telerik.com/kendo-ui/scheduler/timeline I want to set for every line (Alex, Bob...) different size, color, somewhere bold elsewhere italic at etcetera.

How can I do this ?

Best Regards !

Scheduler

answered on 22 Apr 2015

1 answer

724 views

Extension ToTreeDataSourceResult ?

I tried multiple times with many different ways to get data to be read by TreeList. While searching around I stumbled discovered that people are using ToTreeDataSourceResult extension before sending the data as Json. What is in that extension and where can I get it ?

Trivial examples that should work, but does not:

public ActionResult GetServiceList([DataSourceRequest] DataSourceRequest request, ServiceViewModel viewModel)

{

List<TestViewModel> result = new List<TestViewModel>()

{

new TestViewModel()

{

Id = 1,

ParentId = null,

Name = "Parent"

},

new TestViewModel()

{

Id = 2,

ParentId = 1,

Name = "Child"

}

};

return Json(result, JsonRequestBehavior.AllowGet);

}

And in CSHTML:

@(Html.Kendo().TreeList<IMIS.FrontEnd.Areas.Policy.Models.TestViewModel>()

.Name("treelist")

.Columns(columns =>

{

columns.Add().Field(e => e.Name);

})

.Filterable()

.Sortable()

.DataSource(dataSource => dataSource

.Read(read => read.Action("GetServiceList", "Health", new {Area="Policy"}))

.ServerOperation(false)

.Model(m =>

{

m.Id(f => f.Id);

m.ParentId(f => f.ParentId).DefaultValue(null);

m.Expanded(true);

m.Field(f => f.Name);

}) ).Height(540))

This example should make trivial Tree list, but it does nothing even though the Json data is passed. Is it because I am not using that extension ?

TreeList

answered on 22 Apr 2015

3 answers

124 views

Angular Grid Integration

Hi

As per your example for the grid coded in angular:

http://dojo.telerik.com/IkONO

We have enhanced this for the columns to be reorderable and in this event store them in the database.

In the example we are logging the order of the columns to the console, which remains the same never the less the columns are reordered by dragging.

How can we get an updated column order?

Many thanks

Grid

answered on 22 Apr 2015

6 answers

1.0K+ views

[Solved] Modal Window and AngularJS

Hi

I'm currently trying to learn all of this so if I'm being stupid please forgive me!

I'm using the ui-router from Angular and have a nested state which I would like to display inside a Window (consisting of a html view and it's related controller). Unfortunately I don't see anything in the window. If I move the ui-view div to outside of the window div, everything is displayed correctly.

I'm guessing it's something to do with how Kendo appends the Window to the end of the document body which means my ui-view is no longer in the same controller scope?

Here's my routing script:

.state("matches", {

url: "/matches",

templateUrl: "Views/matches.html"

})

.state("matches.fixture", {

params: ['FixtureID'],

views: {

'fixture' : {

templateUrl: 'Views/matches.fixture.html',

}

})

(I moved to named views thinking that this may solve the issue. Originally I was just using an empty ui-view attribute)

and the view code:

<div kendo-window="winMatch" k-title="'Fixture Detail'"

k-width="600" k-height="200" k-visible="false"

k-modal="true">

<div ui-view="fixture">

</div>

Please can you help me to get this working (if possible) or suggest a better way of using the Window with Angular?

Thanks
Keith

Window

answered on 22 Apr 2015

6 answers

331 views

Error: Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set

I am receiving this error when attempting to use Kendo UI Mobile /SPA features:

Error: Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container

I have one index.html page:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>Global Client Dashboard</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

<!--

<link rel="shortcut icon" href="images/favicon.png">

<link rel="apple-touch-icon" href="images/apple-touch-icon.png">

-->

<link rel="stylesheet" href="css/main.css">

<link rel="stylesheet" href="css/login.css">

<link rel="stylesheet" href="js/libs/kendoui/styles/kendo.mobile.all.min.css">

<script src="js/libs/kendoui/js/jquery.min.js"></script>

<script src="js/libs/kendoui/js/angular.min.js"></script>

<script src="js/libs/kendoui/js/kendo.all.min.js"></script>

<script src="js/app.js"></script>

</head>

<body style="display: none;" kendo-mobile-application k-hash-bang="true" ng-app="gcdApp">

<div data-role="view"></div>

<kendo-mobile-layout k-id="'default'">

<kendo-mobile-header>

<kendo-mobile-nav-bar>

<kendo-view-title></kendo-view-title>

</kendo-mobile-nav-bar>

</kendo-mobile-header>

<kendo-mobile-footer>

<kendo-mobile-tab-strip>

<a href="views/accounts.html" data-icon="home">Home</a>

<a href="views/about.html" data-icon="info">About</a>

<a href="views/more.html" data-icon="more">More</a>

</kendo-mobile-tab-strip>

</kendo-mobile-footer>

</kendo-mobile-layout>

<script>

new kendo.mobile.Application($(document.body), { initial: "views/login.html" });

</script>

<script src="js/initOptions.js"></script>

<script src="js/main.js"></script>

<script src="js/messages.js"></script>

<script src="js/controllers/controllers.js"></script>

<script src="js/controllers/accounts.js"></script>

<script src="js/controllers/metrics.js"></script>

</body>

</html>

I followed this tutorial to get this page up and running:
http://blogs.telerik.com/kendoui/posts/13-08-01/kendo-ui-mobile-remote-views-and-separate-html-files

I found this post in the forum, however, I am not sure how to plug into my index.html to get to work:

http://www.telerik.com/forums/problems-getting-kendo-to-work

I was hoping to get some help to get this to work correctly.

Thanks!
Dan

SPA

answered on 22 Apr 2015

3 answers

207 views

Vertical Grouping in Kendo Ui Scheduler

I am testing the scheduler code for hotel room booking

my json data :

[{"ID":1,"RoomNo":"1001","RoomType":"Double Bed Room"},{"ID":2,"RoomNo":"1002","RoomType":"Double Bed Room"},{"ID":3,"RoomNo":"1003","RoomType":"Double Bed Room"},{"ID":4,"RoomNo":"1004","RoomType":"Double Bed Room"},{"ID":5,"RoomNo":"1005","RoomType":"Double Bed Room"},{"ID":6,"RoomNo":"1006","RoomType":"Single Bed Room"},{"ID":7,"RoomNo":"1007","RoomType":"Single Bed Room"},{"ID":8,"RoomNo":"1008","RoomType":"Single Bed Room"},{"ID":9,"RoomNo":"1009","RoomType":"Single Bed Room"},{"ID":10,"RoomNo":"1010","RoomType":"Single Bed Room"}]

I want to show group by roomtype i.e., data in my scheduler will be like :

April 1 April 2 April 3

Double Bed Room

1001

1002

Single Bed Room

1006

1007

how will I group it in the datasource using resources.

Scheduler

answered on 22 Apr 2015

1 answer

71 views

Edit Grid InLine Mode Error

I have a Kendo MVC grid and using InLine Edit mode. I noticed that when I click on Edit, I get two buttons "Update" and "Cancel"

http://demos.telerik.com/kendo-ui/grid/editing-inline

If I click on Edit and do not click on "Update" or "Cancel" and move on to the next row and click on "Edit", it deletes the previous row. Sometimes, it replaces the current row with the previous row and cause other unexpected issues.

Yes, I do have defined an ID in the model.

Does anyone know what the issue is as it is really annoying nad makes the InLine editing useless.

Grid

answered on 22 Apr 2015

1 answer

126 views

Div Content in Windows Maximized - Swaping

Hello,

I have a iFrame with div to show a page, I need to add the button with full screen option to show the content of the div in windows maximized.

How I can show the content of the div in windows maximized with action button and when user close the windows return this contents of the main page (it is a swaping between content div in page to windows)?

Thanks.

Window

answered on 22 Apr 2015

2 answers

788 views

Changing datasource type from OData to Json

I’m trying to change the datasource’s type from “OData” to “json”. The new URL is returning json data. But when I change the type from OData to json, then I see the data in grid but filters & paging doesn’t work.

So I have 31 rows, then when page loads it shows 31 as page size by default, along with configured page sizes ( ie, 5,10,15,20)

Filters does not filter on any column

In below shows the old values also. Note there is no change in grid. Im not sure what else I need to change when I move from OData to Json

var gridDS: kendo.data.DataSource = createGridDataSource($grid);

$grid.kendoGrid({

dataSource: gridDS,

autoBind: true,

columnMenu: true,

scrollable: true,

sortable: true,

reorderable: true,

filterable: {

extra: false,

operators: {

string: {

eq: "Is equal to",

neq: "Is not equal to"

}

},

toolbar: [

{ template: kendo.template($("#tb-inprogress-template").html()) }

],

pageable: {

refresh: true,

pageSizes: [5, 10, 15, 20],

buttonCount: 5

},

columns: [

{

field: "BatchID",

hidden: true,

},

{

field: "TaxYear",

title: "Year",

width: "74px",

attributes: { style: "text-align: right;" },

filterable:

{

ui: taxYearFilter

}

},

{

field: "CreatedByUserName",

title: "Uploaded By",

filterable: { ui: createdByUserNameFilter }

},

{

field: "Created",

title: "Uploaded Date",

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

filterable:

{

ui: createdDateFilter

}

},

{

field: "BatchStatus",

title: "Batch Status",

filterable: {

ui: batchStatusFilter

}

},

{

field: "TotalCost",

title: "Total Cost",

filterable: false

}

]

});

function createGridDataSource(progressElem: any): kendo.data.DataSource {

return new kendo.data.DataSource({

type: "json", // ****** before ****** “odata”

transport: {

read: {

url: "/Import/GetSummary", // ****** before ****** “Api/BatchSummary"

dataType: "json",

timeout: timeout

},

requestStart: function (e: any): void {

isGridDataSourceActivelyLoading = true;

kendo.ui.progress(progressElem, true);

},

requestEnd: function (e: any): void {

isGridDataSourceActivelyLoading = false;

kendo.ui.progress(progressElem, false);

},

schema: {

data: function (data) {

return data; // ****** before ****** “data["value”]

},

total: function (data) {

return data.length // ****** before ****** “data[“odata.count”]"

},

model: {

fields: {

BatchID: { type: "number" },

TaxYear: { type: "number" },

BatchStatus: { type: "string" },

Created: { type: "date" },

CreatedByUserName: { type: "string" },

LastModifiedForSorting: { type: "date" },

TotalCost: { type: "string" },

}

},

pageSize: pageSize,

serverPaging: true,

serverFiltering: true,

serverSorting: true,

sort: [

{ field: "LastModifiedForSorting", dir: "desc" }

],

filter: [

{ field: "TaxYear", operator: "eq", value: 2015 },

{ field: "CreatedByUserName", operator: "eq", value: “James” },

{ field: "BatchStatus", operator: "neq", value: “Active” }

]

});

}

Data Source

answered on 22 Apr 2015