Questions on Kendo UI for jQuery Forum

11 answers

3.1K+ views

Hello,

I was wondering, is there a out of the box way to setup a template that would be shown only if the listview is empty. For instance lets say we have a product list with search. If you search something that matches no results now my listview area would be empty. I want it to display nice big letters saying "No products match your search".

One way I thought I could do this is to have two divs. One with the listview and another one with this message and bind them to a visible / invisible view model property that shows the product data source item count. That way the listview would be shown when there are products, and the message would be shown when the count is at 0.

I guess it would work, but seems rough. Is there a better way or should I stick to my idea?

ListView

answered on 24 Apr 2020

1 answer

232 views

Grid Create with Web API

I'm following along with the Grid inline edit demo and trying to create a new record, saving it to the locals serer via Web API. When Create, then Save the new record, nothing happens. The grid mode doesn't change out of Create mode. The Create function on my server never gets called. The savechanges event does fire. I've tested my Web API create function with Postman and it seems to work. Attached is a VS project with web page and server.

Thanks, Mark

Grid

answered on 24 Apr 2020

2 answers

328 views

Telerik.Web.Spreadsheet.Workbook reference not found

Hi, we are working with Kendo.MVC.Q3.2018.

the requirement to visualize excel spreadsheets arised. I tried to follow this example: https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/spreadsheet/spreadsheet-processing#load-data-from-external-file

but I can't find a reference to class Telerik.Web.Spreadsheet.Workbook.

can you confirm if is that part of Kendo.MVC.Q3.2018 or separate product?

regards

Spreadsheet

answered on 23 Apr 2020

1 answer

219 views

Column locking

Can we dynamically lock and unlock the columns? Is it possible to have an indicator (like an icon next to a title) that the column is currently locked?

Thanks

Grid

answered on 23 Apr 2020

1 answer

268 views

Column title formatting

What kind of formatting is implemented for multi language applications? The fundamental problem we are having is that different languages have considerably different lengths of column names. What's available to avoid the hard widths for column titles?

Thanks

Grid

answered on 23 Apr 2020

6 answers

549 views

Show/Hide columns in gantt list

Hi,

I am aware that hideColumn/showColumn is not current option for gantt widget, but I need to provide different views of columns based on user preferences (click on menu). Also, I already upvoted feature request.

Is there any reasonable way to do this beside deleting and redrawing complete gantt with different settings.

Use case is something like:

Default view contains Title, Start, End

View One contains: Title, Start, End, Percent

View Two contains: Title, Percent

When I click button "View One" it simply adds column percent to the view (data is present in datasource).

Thank you and regards.

Gantt

answered on 23 Apr 2020

1 answer

200 views

Problems with inline edit of subgrid

I've got a grid with a child grid. I'm trying to provide edit functionality for the child grid. Add and Update functions don't work. When I press the Save button nothing happens. I noticed a knowledge base post discussing how to do this. We'll its not really a discussion just some code with a title but no description of what's going on. Reading the code it seems like there can be a binding issue with the parent grid. I implemented the same code in my grids and it made no difference. I removed what I thought was the code to help the binding problem from the sample and I can't see any difference in the operation of the girds. I'm wondering if someone could clue me in here? May this issues was fixed recently and I'm looking at an out dated article in the knowledge base, or, of course I could have screwed something up.

Here's the link to the knowledge base article.

https://docs.telerik.com/kendo-ui/knowledge-base/edit-master-row-data-in-detail-template

Here's a link to code where I attempted to remove the code for the parent table binding issue.

https://jsfiddle.net/6afd93pn/

Grid

answered on 23 Apr 2020

2 answers

690 views

export pdf add watermark

Hi all,

I try to add a watermark on an export to pdf using template model but it doesn't work.

somebody know how to do this ?

here the link of my try :

https://dojo.telerik.com/aGOHaDUt

<!DOCTYPE html>

<html>

<head>

<base href="https://demos.telerik.com/kendo-ui/gantt/pdf-export">

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css" />

<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jszip.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>

</head>

<body>

<script type="x/kendo-template" id="page-template">

<div class="page-template">

<div class="watermark">C O N F I D E N T I A L</div>

</div>

</script>

<div id="example">

<div id="gantt"></div>

</div>

<style>

/*

Use the DejaVu Sans font for display and embedding in the PDF file.

The standard PDF fonts have no support for Unicode characters.

*/

.k-gantt {

font-family: "DejaVu Sans", "Arial", sans-serif;

}

/* Hide toolbars during export */

.k-pdf-export .k-gantt-toolbar

{

display: none;

}

.page-template .watermark {

font-weight: bold;

font-size: 400%;

text-align: center;

margin-top: 30%;

color: #aaaaaa;

opacity: 0.1;

transform: rotate(-35deg) scale(1.7, 1.5);

}

</style>

<script>

// Import DejaVu Sans font for embedding

// NOTE: Only required if the Kendo UI stylesheets are loaded

// from a different origin, e.g. cdn.kendostatic.com

kendo.pdf.defineFont({

"DejaVu Sans" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",

"DejaVu Sans|Bold" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",

"DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",

"DejaVu Sans|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",

"WebComponentsIcons" : "https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf"

});

</script>

<script src="https://kendo.cdn.telerik.com/2020.1.406/js/pako_deflate.min.js"></script>

<script>

$(document).ready(function() {

var serviceRoot = "https://demos.telerik.com/kendo-ui/service";

var tasksDataSource = new kendo.data.GanttDataSource({

batch: false,

transport: {

read: {

url: serviceRoot + "/GanttTasks",

dataType: "jsonp"

},

update: {

url: serviceRoot + "/GanttTasks/Update",

dataType: "jsonp"

},

destroy: {

url: serviceRoot + "/GanttTasks/Destroy",

dataType: "jsonp"

},

create: {

url: serviceRoot + "/GanttTasks/Create",

dataType: "jsonp"

},

parameterMap: function(options, operation) {

if (operation !== "read") {

return { models: kendo.stringify(options.models || [options]) };

}

},

schema: {

model: {

id: "id",

fields: {

id: { from: "ID", type: "number" },

orderId: { from: "OrderID", type: "number", validation: { required: true } },

parentId: { from: "ParentID", type: "number", defaultValue: null, validation: { required: true } },

start: { from: "Start", type: "date" },

end: { from: "End", type: "date" },

title: { from: "Title", defaultValue: "", type: "string" },

percentComplete: { from: "PercentComplete", type: "number" },

summary: { from: "Summary", type: "boolean" },

expanded: { from: "Expanded", type: "boolean", defaultValue: true }

}

});

var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({

transport: {

read: {

url: serviceRoot + "/GanttDependencies",

dataType: "jsonp"

},

update: {

url: serviceRoot + "/GanttDependencies/Update",

dataType: "jsonp"

},

destroy: {

url: serviceRoot + "/GanttDependencies/Destroy",

dataType: "jsonp"

},

create: {

url: serviceRoot + "/GanttDependencies/Create",

dataType: "jsonp"

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return { models: kendo.stringify(options.models) };

}

},

schema: {

model: {

id: "id",

fields: {

id: { from: "ID", type: "number" },

predecessorId: { from: "PredecessorID", type: "number" },

successorId: { from: "SuccessorID", type: "number" },

type: { from: "Type", type: "number" }

}

});

var gantt = $("#gantt").kendoGantt({

dataSource: tasksDataSource,

dependencies: dependenciesDataSource,

views: [

{ type: "week", selected: true },

"month"

],

columns: [

{ field: "id", title: "ID", width: 60 },

{ field: "title", title: "Title", editable: true, sortable: true },

{ field: "start", title: "Start Time", format: "{0:MM/dd/yyyy}", width: 100, editable: true, sortable: true },

{ field: "end", title: "End Time", format: "{0:MM/dd/yyyy}", width: 100, editable: true, sortable: true }

],

toolbar: ["append", "pdf"],

pdf: {

fileName: "Kendo UI Gantt Export.pdf",

proxyURL: "https://demos.telerik.com/kendo-ui/service/export",

template: $("#page-template").html()

},

height: 700,

showWorkHours: false,

showWorkDays: false,

snap: false

}).data("kendoGantt");

$(document).bind("kendo:skinChange", function() {

gantt.refresh();

});

</script>

</body>

</html>

thx for help :)

Gantt

answered on 23 Apr 2020

7 answers

775 views

Is it possible to load data from HTML table with pagination?

I am using kendo grid to populate data in that grid i use HTML table as datasource. With the help initialization from table demo sample i loaded data in grid. But my problem is to show pagination for that grid?

Grid