Questions on Kendo UI for jQuery Forum

1 answer

255 views

Hi,

I'm trying to handle with expanding all collapsed groups after editing row (in inline method).

Here is example:

http://dojo.telerik.com/olusa

Try to collapse couple of groups and then edit some row - all groups will expand automatically. I suppose that such behavior is result of data binding. How to fix this? I suppose I should use some workaround, but I don't know what events should I look at.

Grid

answered on 01 Dec 2017

1 answer

162 views

Checkboxes in Grid - Batch editing

Hi ;)

I'm trying to create a grid with a column with a checkbox option. Like in http://demos.telerik.com/kendo-ui/grid/editing

Somehow in my example (and in yours) when I click once to use the checkbox it's not possible to edit it with a second click. Just using the space-bar I can change the status of the checkbox.

Is that the normal behavior?

I'd like to use the checkbox in batch editing without using the space-bar, just clicking on it. How can I make it possible?

Thank you in advance

Grid

answered on 01 Dec 2017

5 answers

1.0K+ views

Reload tab every time it is clicked

Hi,

My tabstrips are pulling in content via ajax.

I am looking for the ability to have the tabstrip selected load a fresh ajax call every time it is selected, not just the first time.

Please advise.

Thanks.

TabStrip

answered on 01 Dec 2017

2 answers

1.6K+ views

[Solved] required validation on condition

HI,

I need to validate Model field as required only if models datasource has items. If var models = [ ] - I don't need to validate.

Thank you for your help.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>how to make required field on condition</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>

<div id="grid"></div>
<script>
// array of all brands
var brands = [
{ brandId: 1, name: "Ford" },
{ brandId: 2, name: "BMW" }
];

// array of all models
var models = [
{ modelId: 1, name: "Explorer", brandId: 1},
{ modelId: 2, name: "Focus", brandId: 1},
{ modelId: 3, name: "X3", brandId: 2},
{ modelId: 4, name: "X5", brandId: 2}
];

$("#grid").kendoGrid({
dataSource: {
data: [
{ id: 1, brandId: 1, modelId: "" } // initial data item (Ford, Focus)
],
schema: {
model: {
id: "id",
fields: {
id: { editable: false } // the id field is not editable
}
}
}
},
editable: "inline", // use inline mode so both dropdownlists are visible (required for cascading)
columns: [
{ field: "id" },
{
// the brandId column
title: "Brand",
field: "brandId", // bound to the brandId field
template: "#= brandName(brandId) #", // the template shows the name corresponding to the brandId field
editor: function(container) { // use a dropdownlist as an editor
// create an input element with id and name set as the bound field (brandId)
var input = $('<input id="brandId" required name="brandId">');
// append to the editor container
input.appendTo(container);

// initialize a dropdownlist
input.kendoDropDownList({
dataTextField: "name",
optionLabel: "Select...",
dataValueField: "brandId",
dataSource: brands // bind it to the brands array
}).appendTo(container);
}
},
{
//The modelId column
title: "Model",
field: "modelId", // bound to the modelId field
template: "#= modelName(modelId) #", //the template shows the name corresponding to the modelId field
editor: function(container) { // use a dropdownlist as an editor
var input = $('<input id="modelId" name="modelId">');
input.appendTo(container);
input.kendoDropDownList({
dataTextField: "name",
dataValueField: "modelId",
optionLabel: "Select...",
cascadeFrom: "brandId", // cascade from the brands dropdownlist
dataSource: models // bind it to the models array
}).appendTo(container);
}
},
{ command: "edit" }
]
});

function brandName(brandId) {
for (var i = 0; i < brands.length; i++) {
if (brands[i].brandId == brandId) {
return brands[i].name;
}
}
}

function modelName(modelId) {
if (modelId == null || modelId == "") {
return "";
}
for (var i = 0; i < models.length; i++) {
if (models[i].modelId == modelId) {
return models[i].name;
}
}
}
</script>
</body>
</html>

Grid

answered on 30 Nov 2017

3 answers

1.0K+ views

Some issues with treeview lazy loading (on-demand)

Hi Telerik, we use the kendo treeview and we need to load-on-demand subitems.

We have some issues.

1. When the treeview have lots of subitems, it generates too many "databind" when we expand it, if loadOnDemand = false.
But, that way, we are able to load our subitems correctly.

2. So, we prefer to use loadOnDemand = false, that generates only 2 databind, 1 when we expand, and 1 other when we set the data.

But, we're unable to set the data, if we don't add a "setTimeout", because the data item is incomplete! It looks like the "expand" event is raising too quickly, .items list doesn't contains our "loading..." item, and if I set new data to it, nothing happen.

If I add a setTimeout,the argument is ok and I can load my subitems.

So, my suggetsions are:

1. do not generate too many databind event if loadOnDemand = false?

2. can you raise the "expand" event when the data is really ready to be used?

Or, is there something we're doing wrong? We can continue using the settimeout, in fact,it works in our case because we do an "ajax" call. But, if my data is in "cache" and I don't need ajax call, I must do a setTimeout.

Sample:

https://dojo.telerik.com/isuGOn/134

Thank you

TreeView

answered on 30 Nov 2017

4 answers

787 views

How to prevent grid filter reset on push update

I am using kendo grid with signalr push updates.

I also have code for server filtering and paging working.

It all works apart from when a filter menu is open and a push update occurs. I have code intended to prevent the update and data binding - however it isn't preventing the filter menu getting reset and any filter text being cleared.

Thanks in advance..

var hubUrl = "/signalr";

var connectionGrid = $.hubConnection(hubUrl, { useDefaultPath: false });

var hubGrid = connectionGrid.createHubProxy("eventAlertsHub");

var hubGridStart = connectionGrid.start();

////////////////////////////////////////////////

// Kendo grid

$("#grid").kendoGrid({

dataSource: {

push: onPush,

type: "signalr",

transport: {

signalr: {

promise: hubGridStart,

hub: hubGrid,

server: {

read: "read"

},

client: {

read: "read",

update: "update",

destroy: "destroy",

create: "create"

}

},

schema: {

data: "Data",

total: "Total",

model: {

id: "id",

fields: {

id: {

editable: false,

nullable: true

},

LogTime: { type: "date" },

OperatingMode: { type: "string" },

StatusDescription: { type: "string" },

LogSeverity: { type: "number" },

MessageSource: { type: "string" },

MessageSourceDetails: { type: "string" }

}

},

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

pageSize: 20,

serverPaging: true,

serverFiltering: true,

serverSorting: false

},

filterable: true,

sortable: true,

pageable: true,

scrollable: true,

height: 180,

columns: [{

field: "LogTime",

width: "150px",

title: "Timestamp",

format: "{0:dd/MM/yyyy HH:mm:ss}",

filterable: {

ui: "datetimepicker"

}

}, {

field: "MessageSource",

width: "10%",

title: "Source",

values: [

{ text: "DATA_BROKER", value: "DATA_BROKER" },

{ text: "RULES_ENGINE", value: "RULES_ENGINE" },

{ text: "UI_SUBSYSTEM", value: "UI_SUBSYSTEM" },

{ text: "DATA_PUBLISHER", value: "DATA_PUBLISHER" }

],

}, {

field: "MessageSourceDetails",

width: "15%",

title: "Source Details",

filterable: false

}

,{

field: "OperatingMode",

title: "Status",

width: "10%",

values: [

{ text: "STARTUP", value: "STARTUP" },

{ text: "INITIALISATION", value: "INITIALISATION" },

{ text: "NORMAL", value: "NORMAL" },

{ text: "STOPPING", value: "STOPPING" }

],

}, {

field: "StatusDescription",

width: "55%",

title: "Message",

filterable: false

}, {

field: "LogSeverity",

width: "10%",

values: [

{ text: "DEBUG", value: 1 },

{ text: "INFO", value: 2 },

{ text: "WARN", value: 3 },

{ text: "ERROR", value: 4 },

{ text: "FATAL", value: 5 }

],

title: "Severity"

}

]

});

function onPush(e) {

console.log("Push update received type = " + e.type);

//var notification = $("#notification").data("kendoNotification");

//notification.success(e.type);

//var dataSource = $grid.dataSource;

// Check if a filter menu is open. If so, prevent binding, for binding will interfere with everyting typed in the filter

//var $filtermenu = $(".k-filter-menu");

if ($('.k-animation-container').is(":visible")) {

console.log("Filter is open push update binding cancelled ");

e.preventDefault();

}

//if (e.type === "create") {

// // Sort grid programmatically

// // http://www.telerik.com/forums/sorting-a-grid-programmatically

// dataSource.sort(dataSource._sort);

//}

};

$("#grid").data('kendoGrid').bind("dataBinding", function (e) {

console.log("Binding");

// Check if a filter menu is open. If so, prevent binding, for binding will interfere with everyting typed in the filter

// http://www.telerik.com/forums/prevent-kendo-grid-data-bind-events-when-updating-multiple-model-properties

if ($('.k-animation-container').is(":visible")) {

e.preventDefault();

console.log("Prevent binding");

}

});

Grid

answered on 30 Nov 2017

2 answers

316 views

[Solved] Kendo UI Grid XML showing data as [object Object]

Hi
I have a Kendo UI grid, that will only display values like [object object]. I have the datasource for the grid working so I know there is data.

This is my code

var ds = new kendo.data.DataSource({

transport: {

read: {

url: dataUrl + "data_xml.p",

contentType: "text/xml",

method: "POST",

processData: false,

dataType: "xml",

},

parameterMap: function() {

return formxml;

}

},

schema: {

data: "/ProDataSet/ttCustomers",

type: "xml"

},

model: {

id: "id",

fields: {

first_name: "first_name/text()",

last_name: "last_name/text()",

email: "email/text()",

num_tel: "num_tel/text()",

adresse: "adresse/text()",

}

});

Data from server :

<ProDataSet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<tt_action>

<sessionId />

<action>getdata</action>

<vstatus>0</vstatus>

<vmsg />

<field1 />

<field2 />

<field3 />

<field4 />

</tt_action>

<ttCustomers>

<id>4</id>

<first_name>Aguistin</first_name>

<last_name>Scoles</last_name>

<email>ascoles0@thetimes.co.uk</email>

<num_tel>+976 222 689 0571</num_tel>

<adresse>8 Elgar Park</adresse>

</ttCustomers>

<ttCustomers>

<id>5</id>

<first_name>Jada</first_name>

<last_name>Brigg</last_name>

<email>jbrigg1@scribd.com</email>

<num_tel>+86 114 303 0017</num_tel>

<adresse>6011 Birchwood Point</adresse>

</ttCustomers>

<ttCustomers>

<id>7</id>

<first_name>Corenda</first_name>

<last_name>Bulleyn</last_name>

<email>cbulleyn2@google.com</email>

<num_tel>+357 573 337 0942</num_tel>

<adresse>159 Sycamore Hill</adresse>

</ttCustomers>

<ttCustomers>

<id>8</id>

<first_name>Nadeen</first_name>

<last_name>Birkin</last_name>

<email>nbirkin3@answers.com</email>

<num_tel>+420 265 225 8304</num_tel>

<adresse>6600 Manitowish Drive</adresse>

</ttCustomers>

<ttCustomers>

<id>9</id>

<first_name>Cassy</first_name>

<last_name>Wickerson</last_name>

<email>cwickerson4@ucoz.com</email>

<num_tel>+237 388 473 9219</num_tel>

<adresse>823 Rockefeller Alley</adresse>

</ttCustomers>

<ttCustomers>

<id>10</id>

<first_name>Dene</first_name>

<last_name>Palk</last_name>

<email>dpalk5@omniture.com</email>

<num_tel>+62 395 367 4730</num_tel>

<adresse>2053 Kennedy Center</adresse>

</ttCustomers>

<ttCustomers>

<id>11</id>

<first_name>Garreth</first_name>

<last_name>Clayal</last_name>

<email>gclayal6@sogou.com</email>

<num_tel>+234 851 283 4750</num_tel>

<adresse>2243 Manitowish Plaza</adresse>

</ttCustomers>

<ttCustomers>

<id>13</id>

<first_name>Witty</first_name>

<last_name>Kilgour</last_name>

<email>wkilgour7@cmu.edu</email>

<num_tel>+880 457 881 2601</num_tel>

<adresse>95 Sage Way</adresse>

</ttCustomers>

<ttCustomers>

<id>14</id>

<first_name>Abbey</first_name>

<last_name>Banaszczyk</last_name>

<email>abanaszczyk8@timesonline.co.uk</email>

<num_tel>+7 813 501 5869</num_tel>

<adresse>97 Fieldstone Alley</adresse>

</ttCustomers>

<ttCustomers>

<id>15</id>

<first_name>Byrom</first_name>

<last_name>Beachamp</last_name>

<email>bbeachamp9@buzzfeed.com</email>

<num_tel>+86 879 807 3783</num_tel>

<adresse>83369 Golf Drive</adresse>

</ttCustomers>

<ttCustomers>

<id>16</id>

<first_name>Reeva</first_name>

<last_name>Moresby</last_name>

<email>rmoresbya@nba.com</email>

<num_tel>+93 131 451 6825</num_tel>

<adresse>5 Sachtjen Parkway</adresse>

</ttCustomers>

<ttCustomers>

<id>17</id>

<first_name>Hadlee</first_name>

<last_name>Klisch</last_name>

<email>hklischb@hostgator.com</email>

<num_tel>+880 783 928 3370</num_tel>

<adresse>56 Elka Street</adresse>

</ttCustomers>

<ttCustomers>

<id>18</id>

<first_name>Marie</first_name>

<last_name>Mustoo</last_name>

<email>mmustooc@microsoft.com</email>

<num_tel>+351 555 677 0044</num_tel>

<adresse>7016 Hovde Circle</adresse>

</ttCustomers>

<ttCustomers>

<id>20</id>

<first_name>Georgeanne</first_name>

<last_name>Zecchii</last_name>

<email>gzecchiid@etsy.com</email>

<num_tel>+46 368 291 6723</num_tel>

<adresse>10799 Londonderry Drive</adresse>

</ttCustomers>

<ttCustomers>

<id>21</id>

<first_name>Norah</first_name>

<last_name>Levane</last_name>

<email>nlevanee@usa.gov</email>

<num_tel>+86 636 328 8366</num_tel>

<adresse>20976 Hanover Alley</adresse>

</ttCustomers>

<ttCustomers>

<id>22</id>

<first_name>Timi</first_name>

<last_name>Abramson</last_name>

<email>tabramsonf@omniture.com</email>

<num_tel>+30 973 316 0947</num_tel>

<adresse>461 Bellgrove Way</adresse>

</ttCustomers>

<ttCustomers>

<id>23</id>

<first_name>Kirsten</first_name>

<last_name>Hearnden</last_name>

<email>khearndeng@ca.gov</email>

<num_tel>+86 818 429 5160</num_tel>

<adresse>0 Melvin Trail</adresse>

</ttCustomers>

<ttCustomers>

<id>24</id>

<first_name>Tommie</first_name>

<last_name>Haggarty</last_name>

<email>thaggartyh@shutterfly.com</email>

<num_tel>+502 320 246 3017</num_tel>

<adresse>76 Parkside Parkway</adresse>

</ttCustomers>

<ttCustomers>

<id>25</id>

<first_name>Orella</first_name>

<last_name>Gossan</last_name>

<email>ogossani@mysql.com</email>

<num_tel>+86 435 661 2497</num_tel>

<adresse>0 Blue Bill Park Parkway</adresse>

</ttCustomers>

<ttCustomers>

<id>26</id>

<first_name>Melly</first_name>

<last_name>Loidl</last_name>

<email>mloidlj@state.tx.us</email>

<num_tel>+376 969 321 3040</num_tel>

<adresse>59541 Forest Hill</adresse>

</ttCustomers>

<ttCustomers>

<id>28</id>

<first_name>Yettie</first_name>

<last_name>Petranek</last_name>

<email>ypetranekk@clickbank.net</email>

<num_tel>+970 458 555 6703</num_tel>

<adresse>3 Montana Avenue</adresse>

</ttCustomers>

<ttCustomers>

<id>29</id>

<first_name>Natal</first_name>

<last_name>Bauman</last_name>

<email>nbaumanl@diigo.com</email>

<num_tel>+86 418 984 0016</num_tel>

<adresse>03252 Division Plaza</adresse>

</ttCustomers>

<ttCustomers>

<id>30</id>

<first_name>Joela</first_name>

<last_name>Bendon</last_name>

<email>jbendonm@yolasite.com</email>

<num_tel>+357 836 602 1041</num_tel>

<adresse>056 Caliangt Hill</adresse>

</ttCustomers>

<ttCustomers>

<id>31</id>

<first_name>Timothy</first_name>

<last_name>Antonsen</last_name>

<email>tantonsenn@123-reg.co.uk</email>

<num_tel>+86 767 723 8152</num_tel>

<adresse>3 Tennessee Trail</adresse>

</ttCustomers>

<ttCustomers>

<id>32</id>

<first_name>Joye</first_name>

<last_name>Bourgeois</last_name>

<email>jbourgeoiso@t-online.de</email>

<num_tel>+33 398 217 3274</num_tel>

<adresse>14377 Spenser Crossing</adresse>

</ttCustomers>

</ProDataSet>

Grid code :

$('#customers-list').kendoGrid({

dataSource: ds,

toolbar: ["create", "save", "excel"],

excel: {

fileName: "Export.xlsx"

},

sortable: true,

columns: [{

field: "first_name",

title: "Nom",

}, {

field: "last_name",

title: "Prénom"

}, {

field: "email",

title: "Adresse Email",

}, {

field: "num_tel",

title: "Numéro de téléphone"

}, {

field: "adresse",

title: "Adresse"

}, {

command: ["edit", "destroy"],

title: " ",

width: "300px"

}],

editable: "popup",

pageable: {

pageSize: 5,

}

});

Grid

answered on 29 Nov 2017

3 answers

1.4K+ views

Dynamic schema based on data

I've built a function that loops through my data set and builds an array of the schema and detects what the data type is for each column (this is similar to excel in that it loops through the first few rows of data to determine its data type). This function returns an array that is similar structure to how the datasource schema is defined.

My problem is I cannot then figure out how to get this information into the data source configuration. calling the array directly into the datasource doesn't seem to work.

Below you can see I'm assigning the variable schema to another function that has a response similar to the one in the code block at the bottom of this post.

The full function is like so

01.function create_kendo_data_source(path, pagesize, rows_to_check_for_schema, callback) {

02. if(pagesize == undefined) {

03. pagesize = 20;

04.

05. }

06.

07. ajax_json_post(path, null, function(response) { //success

08. var schema = create_kendo_data_source_schema(response);

09.

10. console.log(schema);

11.

12. var new_schema = {

13. id: "data",

14. fields: []

15.

16. };

17.

18. for(var i in schema) {

19. var item = schema[i];

20.

21. new_schema.fields.push({

22. [item.column]: {

23. type: item.type

24.

25. }

26.

27. });

28.

29. }

30.

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

32. transport: {

33. read: function (options) {

34. options.success(response);

35.

36. }

37.

38. },

39. pageSize: pagesize,

40. schema: { new_schema

41.

42. }

43.

44. });

45.

46. ds.read();

47.

48. console.log(ds);

49.

50. if(typeof callback === "function") {

51. callback(ds);

52.

53. return true;

54.

55. } else {

56. return false;

57.

58. }

59.

60. }, function() { //error

61. return false;

62.

63. });

64.

65.}

1.1

2.:

3.{column: "column1_name", type: "string"}

4.2

5.:

6.{column: "column2_name", type: "number"}

Data Source

answered on 29 Nov 2017

7 answers

578 views

Locked columns div is too small

Hi, I use a kendo grid helper in MVC, and use locked columns.

when the grid is displayed, the div containing the locked columns hight is too small, and I have a white box at the bottom, not seeing my last row.

Can anyone tell me what I am doing wrong?

I pasted the result of my grid here: http://dojo.telerik.com/Onod/8

Here is the source code

@(Html.Kendo.Grid(Model.Analyses).
Name("grilleCumulatifLabo").
Columns(Sub(columns)
columns.Bound(Function(x) x.AfficherGraphique).
ClientTemplate("<input class='chkGraphique' type=#= ContientResultatNumeriques ? 'checkbox': 'hidden' # #= AfficherGraphique ? checked='checked':'' # />").
Title("").Width(25).Locked()
columns.Bound(Function(x) x.Libelle).Title("Analyse").Width(250).Locked().
TronquerSansInfobulle(Function(y) y.Libelle).
InfobulleHtml(Function(y) y.Libelle).
HtmlAttributes(New With {.class = "tronquer-texte"})
columns.Bound(Function(x) x.ValeurReference).Title("Valeurs de<br />référence").Width(100).Locked().
HtmlAttributes(New With {.Class = "centrer"}).
Hidden(Not Model.ContientUnitesDifferentes)
columns.Bound(Function(x) x.Unite).Title("Unités").Width(100).Locked().
HtmlAttributes(New With {.Class = "centrer"}).
Hidden(Not Model.ContientUnitesDifferentes)
If Model.Analyses.Any Then
For Each resultat In Model.Analyses.Item(0).Resultats
Dim index = Model.Analyses.Item(0).Resultats.IndexOf(resultat)
columns.Bound(Function(x) x.Resultats.Item(index).Descripteur.DescriptionCourte).
ClientTemplate("<span class='#= Resultats[" & index & "].Descripteur.ClasseStyle #'>#=Resultats[" & index & "].Descripteur.DescriptionCourte #</span>").
InfobulleHtml(Function(x) x.Resultats.Item(index).InfoBulleHtml).
InfobulleEnteteHtml(Model.Analyses.Item(0).Resultats.Item(index).NomLaboratoire).
Title(CStr(index + 1) & "<br />" & resultat.DateCollecteFormatee & "<br />" & resultat.HeureCollecteFormatee).
Width(resultat.Descripteur.Largeur).
HtmlAttributes(New With {.Class = "resultatAnalyse"})
Next
End If
End Sub).
DataSource(Sub(x) x.Ajax.
ServerOperation(False).
Group(Function(group) group.Add(Function(analyse) analyse.Chapitre)).
Sort(Function(sort) sort.Add(Function(analyse) analyse.Rang))).
Scrollable(Function(s) s.Height("100%")).
Deferred()
)

Grid

answered on 29 Nov 2017

3 answers

1.2K+ views

grid cancel event

Hi,

I have client template in some column that generate pie chart of doughnut on databinding event, everything is working well, but when I click on the edit button of each row and after I click on the cancel button then the pie chart is disappeared.

so I try to generate one more time in cancellation event and it also not good because the cancellation event is still not come to his end.

so I need event the happens after cancellation event come to his end? is some event like that exist?

someone can help me?

here is my grid and js:

@(Html.Kendo().Grid<TaskManagementUI.Models.TaskViewModel>()
.Name("GridTasks")
.Columns(columns =>
{
columns.Bound(c => c.ID).Hidden();
columns.Bound(c => c.ProjectID).Title("Project Id").Hidden();
columns.Bound(c => c.ProjectName).Title("Project Name").Hidden();
columns.Bound(c => c.Name).Title("Name");
columns.Bound(c=>c.DevelopersNames).ClientTemplate("#=DevelopersTemplate(DevelopersDataSource)#").EditorTemplateName("DevelopersEditor").Title("Developers").Sortable(false).Filterable(f => f.UI("developersMultiFilter")
.Mode(GridFilterMode.Row)
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.IsEqualTo("Is equal to"))))/*.Filterable(e => e.Enabled(false)).Sortable(false)*/;
columns.Bound(c => c.ActualStartDate).Title("Actual Start Date").EditorTemplateName("ActualStartDateEditor").Format("{0: MM/dd/yyyy}");
columns.Bound(c => c.ActualEndDate).Title("Actual End Date").EditorTemplateName("ActualEndDateEditor").Format("{0: MM/dd/yyyy}");
columns.Bound(c => c.EstimatedStartDate).Title("Estimated Start Date").EditorTemplateName("EstimatedStartDateEditor").Format("{0: MM/dd/yyyy}");
columns.Bound(c => c.EstimatedEndDate).Title("Estimated End Date").EditorTemplateName("EstimatedEndDateEditor").Format("{0: MM/dd/yyyy}");
columns.Bound(c => c.PercentCompleted).Title("Percent Completed").Width(130).ClientTemplate("<canvas id='chart_#=ID #' width='94' height='94' style='display: block; width: 94px; height: 94px;'></canvas>").EditorTemplateName("PercentCompletedEditor");
/*.ClientTemplate("#=kendo.format('{0:p2}', PercentCompleted / 100)#")*/;
columns.Bound(c => c.Comment).Title("Comment");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);

})
.Scrollable(x => x.Virtual(true))
.Resizable(resize => resize.Columns(true))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Groupable(g => g.Enabled(false))
.Filterable()
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar" style="float:left">
<a class="k-button k-button-icontext" onclick='addTaskAjax()' href="#">
<span class="k-icon k-i-add"></span> ADD TASK
</a>

<a class="k-button k-grid-excel k-button-icontext" href="#">
<span class="k-icon k-i-excel"></span>Export to Excel
</a>

</div>
</text>);
})
.Excel(excel => excel
.AllPages(true)
.FileName("Tasks.xlsx")
.Filterable(true)
.ForceProxy(true)
.ProxyURL(Url.Action("FileExportSave", "Home")))
.Pageable(pager => pager
.Refresh(true)
.PageSizes(true)
.PageSizes(new int[] { 6, 15, 20 })
.ButtonCount(5))
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn)
.Enabled(true);
})
.Events(events => events.DataBound("onDataBoundSavedTasks").Cancel("createPieAfterCancellation"))
.DataSource(dataSource => dataSource
.Ajax()
.Group(group => group.Add(p => p.ProjectName))
.PageSize(20)
.Events(events => events.Error("errorHandlerTask"))
.Read(read => read.Action("GetSavedTasks", "Task"))
.Update(update => update.Action("UpdateTask", "Task"))
.Destroy(update => update.Action("DeleteTask", "Task"))
.Model(model => model.Id(item => item.ID))))

js code:

Grid

answered on 29 Nov 2017