I'm in the process of upgrading an existing MVC 5 application to Core 2. Kendo UI Grid is used to display documents and has the Kendo Upload control added to the toolbar of the Grid.
This works fine in the MVC 5 implementation as shown below:
@(Html.Kendo().Grid<ViewModels.Documents>()
.Name("filesGrid")
.ToolBar(t => t.Template(
@<text>
)
@(Html.Kendo().Upload()
.Name("files")
.HtmlAttributes(new { aria_label = "files" })
.Async(a => a.Save("DocumentSave", "Home", new { requestId = ViewBag.RequestId }))
.Events(e => e.Success("onUploadSuccess"))
.ShowFileList(false) // Hide the file list as we're displaying uploaded files in the Grid
)
</text>
))
.Columns(columns =>
{
columns.Bound(f => f.FileName).ClientTemplate(Html.ActionLink("#=FileName#", "Download", "Home", new { id = "id" }, null).ToHtmlString().Replace("id", "#=DocumentId#")).Title("File name");
// Calculate the file size in KB, round it up and display it in a client template
//columns.Bound(f => f.DataLength).ClientTemplate("#= Math.ceil(DataLength / 1024) #").Title("File size in KB").Width(150);
columns.Bound(f => f.DataLength).Title("File size").Width(150);
columns.Command(command => command.Destroy()).Width(100);
})
.Sortable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(m => m.Id(f => f.DocumentId))
.Read(read => read.Action("DocumentsRead", "Home", new { requestId = ViewBag.RequestId }))
.Destroy(update => update.Action("DocumentDelete", "Home"))
)
)
However in ASP.NET Core 2 KendoUICore 2018.1.117, the .ToolBar(t => t.Template() method is no longer available, it appears it has been replaced by ClientTemplate. When I attempt to embed the same markup for UI Upload inside ClientTemplate, I get an error "Cannot convert lambda expression to type 'string' because it is not a delegate type"
.ToolBar(t => t.Create()).ToolBar(toolbar =>
{
toolbar.ClientTemplate(@<text>Html.Kendo().Upload()</text>);
}
)
Thanks for the input!
Dear all..
Good day!
Hello, I'm Ucu, I have some issue/bug that I can't find/solve it. I generated some excel spreadsheet using Kendo.
When the spreadsheet open, and then I click the cells or I press the keyboard to move into other cells, the height of window Spreadsheet is change dynamically, increment +2 px. I try to the in , but nothing change, the height of window still change upper and upper. how can I solve this? please let me know if you have experience with me, how to solve this..here is my js code
01.
function initiateSheet(tipeLayanan){
02.
if(tipeLayanan=="H123"){
03.
pengangkatanStart = dummyGetObject.result.dealer.pengangkatanStart;
04.
//console.log("pengangkatanStart di JS: "+pengangkatanStart);
05.
createSheetConfigPerfH1("Performance H1");
06.
createSheetConfigPerfH23("Performance H23");
07.
createSheetConfigPotH1();
08.
createSheetConfigPotH23();
09.
createSheetConfigSummary();
10.
createSheetConfigEvalForm();
11.
$("#spreadsheet").kendoSpreadsheet({
12.
render: function(e){
13.
//Hides the insert button
14.
$(".k-spreadsheet .k-spreadsheet-sheets-bar .k-button").hide();
15.
16.
//Hides the remove icon
17.
$(".k-spreadsheet .k-spreadsheet-sheets-bar .k-spreadsheet-sheets-remove").hide();
18.
},
19.
toolbar:false,
20.
sheets:[sheetPerformanceH1,sheetPerformanceH23,sheetPotentialH1,sheetPotentialH23,sheetSummary,sheetEvaluationForm],
21.
pdf: {
22.
size: "auto",
23.
area: "sheet",
24.
landscape: false,
25.
fitWidth: true,
26.
hCenter: true,
27.
vCenter: false,
28.
fileName: dummyGetObject.result.dealer.dealerCode+"_Evaluation Dealer TA.pdf",
29.
guidelines: false,
30.
margin: {
31.
left: 25,
32.
right: 40,
33.
top: 20,
34.
bottom: 20
35.
}
36.
}
37.
});
38.
createSummary();
39.
}
40.
}
and then here is my
01.
<
script
src
=
"http://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css"
></
script
>
02.
<
script
src
=
"http://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css"
></
script
>
03.
<
script
src
=
"http://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css"
></
script
>
04.
<
script
src
=
"http://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css"
></
script
>
05.
06.
<
script
src
=
"http://code.jquery.com/jquery-1.12.4.min.js"
></
script
>
07.
<
script
src
=
"http://kendo.cdn.telerik.com/2017.3.913/js/jszip.min.js"
></
script
>
08.
<
script
src
=
"http://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"
></
script
>
09.
10.
<!--<script src="libs/kendo-2017.3.913/kendo.all.min.js"></script>-->
11.
<
div
style
=
"display: block;height: 96%;"
>
12.
<!--<button onclick="myFunction()" id="save">Save Changes!</button>-->
13.
<
div
id
=
"spreadsheet"
style
=
"width: 100%; height:100%"
></
div
>
14.
<
button
id
=
"save"
class
=
"saveBtn"
>Save As Draft</
button
>
15.
<
button
id
=
"submit"
class
=
"submitBtn"
>Submit</
button
>
16.
<
button
id
=
"export"
class
=
"exportBtn"
>Download File</
button
>
17.
</
div
>
18.
<
script
src
=
"libs/kendo-2017.2.614/kendo.all.min.js"
></
script
>
19.
<!--<link href="libs/kendo-2017.2.614/kendo.common.min.css" rel="stylesheet" />-->
20.
<
script
src
=
"app/pages/evaluationdealerspreadsheet/evaluationdealerspreadsheet_sheetConfig.js"
></
script
>
for detail, I attach the screenshot of my issues. see attachments.
I hope I can find the answer here. Thanks in advance
Hello! I am using the exact same code as in this example: https://demos.telerik.com/kendo-ui/spreadsheet/datasource
When I try to add 1 validation like this:
sheet.range("$B2").validation({
from: '{ "Foo item 1", "Bar item 2", "Baz item 3" }',
dataType: "list",
messageTemplate: "Number should match the validation.",
showButton: true,
comparerType: "list",
type: "reject"
});
it works fine and shows it with no problem, but when I add a second one, the headers are not shown and I get this error:
Uncaught TypeError: Cannot read property 'indexOf' of undefined
at r.set (kendo.all.min.js:27)
at r.set (kendo.all.min.js:27)
at kendo.all.min.js:586
at init.forEach (kendo.all.min.js:511)
at init._sheetChange (kendo.all.min.js:586)
at init.trigger (kendo.all.min.js:4)
at init.triggerChange (kendo.all.min.js:526)
at init._set (kendo.all.min.js:518)
at init._property (kendo.all.min.js:518)
at init.validation (kendo.all.min.js:521)
This is all the code I added to the example:
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
var sheet = spreadsheet.activeSheet();
sheet.range("$B2").validation({
from: '{ "Foo item 1", "Bar item 2", "Baz item 3" }',
dataType: "list",
messageTemplate: "Number should match the validation.",
showButton: true,
comparerType: "list",
type: "reject"
});
sheet.range("$C2").validation({
from: '{ "Ble item 1", "Ble item 2", "Ble item 3" }',
dataType: "list",
messageTemplate: "Number should match the validation.",
showButton: true,
comparerType: "list",
type: "reject"
});
Please help! thanks
Hi,
I have a Kendo Drop down, displaying remote data (of type odata) implemented as follows:
$("#listDropDown").kendoDropDownList({
filter: "contains",
dataTextField: "displayName",
dataValueField: "fieldid",
optionLabel: "Please Select..."
dataSource: {
type: "odata-v4",
transport: {
read: function (options) {
$.ajax({
url: someURL,
dataType: "json",
success: function (result) {
options.success(result);
},
error: function (result) {
console.log(result);
}
});
}
}
}
});
the 'fieldId' in this case is of type GUID. The drop down is created successfully and displaying data on screen. Using the no data template i can also successfully add a new item and refresh the drop down to the item is available on the list.
I would like to dynamically set the selecteditem on the drop to the item that has just been added. I am using the following code.
$("#listDropDown").data("kendoDropDownList").value(newFieldId);
'newfieldId' is a GUID that has been returned by the ajax call which has just created the new item. This is getting a value successfully, however doesnt appear to work. I have also tried hard coding this to use a value which i know existsin the drop down which i pass in as a string as i would expect a GUID to and this still doesnt work. This leads me to believe i havent configured my drop down correctly for using the GUID as the datavalue field.
Can you confirm if this is the case?
Many thanks
I have issue with getting grid name from toolbar component.
I have nested grid with dynamicly fill name, in these grid i have toolbar with combobox. OnChange event in these combo i need to refresh grid where is combo placed. How i can get name of the grid?
<
script
id
=
"template"
type
=
"text/x-kendo-template"
>
@(Html.Kendo().Grid<
Rule.TreeViewItem
>()
.Name("grid_#=Text#")
.Columns(columns =>
{
columns.Bound(o => o.HasChildren).Hidden();
columns.Bound(o => o.Text).Filterable(flr => flr.Cell(cell => cell.Operator("contains").ShowOperators(false)));
columns.Bound(o => o.ObjectPath).Filterable(flr => flr.Cell(cell => cell.Operator("contains").ShowOperators(false)));
columns.Bound(o => o.ChildrenPath).Filterable(flr => flr.Cell(cell => cell.Operator("contains").ShowOperators(false)));
})
.ToolBar(t => t
.Template("#= kendo.render(kendo.template($('\\#comboTemp').html()), [{ Text, ChildrenPath }]) #")
)
.Events(e => e.DataBound("removeExpander"))
.Resizable(resize => resize.Columns(true))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Model(m => m.Id(o => o.ObjectPath))
.Read(read => read.Action("GetAttributes", "Rule", new {objectPath = "#= ChildrenPath #"}))
)
.Pageable(pageable => pageable
.Input(true)
.Numeric(false)
.PageSizes(new int[] {10, 20, 50, 100})
.Refresh(true)
)
.AutoBind(false)
.Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
.ToClientTemplate()
)
</
script
>
<
script
type
=
"text/x-kendo-template"
id
=
"comboTemp"
>
@(Html.Kendo().DropDownList()
.Name("targetFor#=Text#")
.DataTextField("SchemaName")
.DataValueField("SchemaPath")
.Events(events => events.Change("onNestedSchemaChange"))
.DataSource(ds =>
ds.Read("GetTargetSchemas", "Rule", new { objectPath = "#=ChildrenPath#" })
)
.ToClientTemplate()
)
</
script
>
<
script
type
=
"text/javascript"
>
function onNestedSchemaChange(e) {
// code here
}
</
script
>
I'm able to export a .xls file without any trouble, but I would like to make it password protected. Is this supported?
I found this: https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/features/protection/worksheet which appears to be what I'm trying to achieve, only in JavaScript.
Hello,
I would like to customize the hours display as follows:
9H
11H
14H
16H
18H
18H30
19H
My Code:
$("#schedulerQ").kendoScheduler({
date: new Date('28/01/2018 09:00'),
startTime: new Date(),
views: [{ type: "week",
dateHeaderTemplate: kendo.template("<span class='days-name'>#=kendo.toString(date, 'dddd dd/MM')#</span>")}],
minorTickCount: 1, // display one time slot per major tick
majorTick: 60,
allDaySlot: false,
selectable: true,
...
});
but I have the display:
09:00
10:00
11:00
12:00
....
I need your help, Thanks.
Hi,
We have one grid in which we have one column for every day between two different dates, it works fine with one year but fails when we have more than one, you could see the error into this Dojo (https://dojo.telerik.com/asIVaS/2). It works with our previous version (2017R2SP1) but fails with newest ones. It looks like there are one error into rowtemplate. There is something wrong or any workaround to skip that error?
Thanks in advance