Questions on Kendo UI for jQuery Forum

3 answers

343 views

Issues with Kendo Spreadsheet

So far these are the issues/limitations I've come across:

1) Merging cells with formulas causes them to disappear (Big Bug)

2) Named Cells (Aliases) don't exist like in Excel (Limitation)

3) Changing row height causes bizarre effect where active row no longer lines up with row number (Bug)

4) Can not hide worksheet or create readonly cells (Limitation)

5) Scrolling causes borders to disappear (Bug)

Spreadsheet

answered on 14 Apr 2016

1 answer

488 views

Excel export not working on Microsoft edge

I'm having trouble with export to Excel functionality of KendoGrid. When trying to run saveAsExcel my application crashes when trying to export the grid data to an Excel and closes Edge.
This is my code:
var grid:any = $(this.element).data("kendoGrid");
grid.saveAsExcel();
And the kendoGrid configuration:
excel: {
allPages: true,
filterable: true,
fileName: this.application.appId + '.xlsx'
},
Anyone has the same problem?

Grid

answered on 14 Apr 2016

2 answers

108 views

To many items ?

Hi,

i' am trying to create a autocomplete widget with many items (10.000). When i type in i recieved to many items and the hight of the autocomplete is not recognized.

and items appear out of the box. How can i solve this. I have no chace to reduce the data by the server via server filtering - it's not a really fast database..

Second question: The are two request made to the web service - why ?

My code is here:

01.guimodule.artikelautocomplete = (function () {

02.

03.

04. var dsArtikel = new kendo.data.DataSource({

05.

06. type: "json",

07. pageSize: 20,

08. transport: {

09. read: {

10. url: "http://xxx.xx.xx.xx/DataService/json/artikel/select_for_autocomplete.pvx",

11. type: "post",

12. dataType: "json"

13. }

14. }

15. });

16.

17. var artikelac = $("#artikelautocomplete").kendoAutoComplete({

18. template: "<table><tr><td>"+

19. "# var bez = data.b.split('|')##: data.n #</td><td>#: bez[0] #</td><tr>"+

20.

21. "<tr><td></td><td>#:bez[1]#</td></tr>"+

22. "</table>",

23. dataSource: dsArtikel,

24. height: 600,

25.

26. filter: "contains",

27. highlightFirst: true,

28. dataTextField: "b"

29. }).data("kendoAutoComplete");

30.

31. //

32. artikelac.list.width(400);

33.

34.

35.

36.

37.console.log("Artikelautocomplete was initialized");

38.

39.return {}

40.

41.

42.}());

Thanks in advance,

Dirk

AutoComplete

answered on 14 Apr 2016

3 answers

108 views

Grouping

HI,

1. My First Clarification

I need to group concatenation of two hidden columns. Say for example - My Columns are 1. FirstName 2. LastName.

But I want to group by Cancatenation of EmpId - Dep (Example : Group BY: 1 - HR)

2. Second Clarification

Always I want to show the grouping columns with " No records found" message for individual group.

Ex : 1 - HR

No records found

2 - IT

FirstName LastName

Palanisamy N

. Please find the attached screenshot for further reference.

Grid

answered on 14 Apr 2016

5 answers

218 views

Problem with date format

I have the following date picker:

The dateFormat is set to "dd-MMM-yyyy". When I display the value of {{incident.dateOfIncident}} it is showing as:

"2016-03-09T05:00:00.000Z"

but the date picker is blank. Why? and how do I get it to display the date in the dateFormat?

I have read on a different post about parseFormats but I cant seem to get it to work. If I am in fact supposed to use parseFormats what format would I use?

DatePicker

answered on 14 Apr 2016

3 answers

294 views

Collapsing or expanding panel causes page jump to top on mobile devices

I have a Panelbar on a website I'm developing, with a large number of panels (dynamic, but it can be up to 12); most of these panels contains Kendo Grids, but some contain just text. On mobile devices, I've found that expanding or collapsing a panel that contains a Grid, will cause the page to jump to the top. Since the panels are a bit further down the page, we're finding this to be really annoying. It does not happen on a desktop screen though, even if I shrink the window down to about a mobile size (it does happen when I use Chrome's mobile emulation setting, however). Is there a way that I can prevent this from happening? Thank you.

Trent

PanelBar

answered on 14 Apr 2016

3 answers

227 views

[Solved] Strange behaviour in category assignment/grouping for charts, bug?

I am encountering some very strange behaviour when trying to produce a chart with stacked bars:

var mock_data = [

                { "Field1": "Type A", "Field2": "1", "Cost": 123 },

                { "Field1": "Type A", "Field2": "2", "Cost": 234 },

                { "Field1": "Type A", "Field2": "3", "Cost": 345 },

                { "Field1": "Type A", "Field2": "4", "Cost": 456 },

                { "Field1": "Type A", "Field2": "5", "Cost": 567 },

                { "Field1": "Type B", "Field2": "1", "Cost": 765 },

                { "Field1": "Type B", "Field2": "2", "Cost": 654 },

                { "Field1": "Type B", "Field2": "3", "Cost": 543 },

                { "Field1": "Type B", "Field2": "4", "Cost": 432 },

                { "Field1": "Type B", "Field2": "5", "Cost": 321 },

                { "Field1": "Type C", "Field2": "1", "Cost": 100 },

                { "Field1": "Type C", "Field2": "2", "Cost": 150 },

                { "Field1": "Type C", "Field2": "3", "Cost": 200 },

                { "Field1": "Type C", "Field2": "4", "Cost": 250 },

                { "Field1": "Type C", "Field2": "5", "Cost": 300 },

    ];



$("#chart2").empty();

$("#chart2").kendoChart({

    dataSource: {

        data: mock_data,

        group: {

            field: "Field1"

        }

    },

    series: [{

        type: "column",

        field: "Cost",

        stack: true,

    }],

    valueAxis: [{

        name: "cost",

        title: {

            text: "Cost (£)"

        }

    }],

    categoryAxis: {

        field: "Field2",

        label: "Field 2 Label",

        dir: "asc"

    },

    dataBound: function (e) {

        var axis = e.sender.options.categoryAxis;

        axis.categories = axis.categories.sort()

    }

});

I am finding that the ordering of the data is strongly influencing how the grouping is performed, but more often than not elements of the data are finding their way into the wrong category.With the data ordered as shown above, I find that the category 2 entry for Type A is shifted into category 5, and the entries for Type A are subsequently each shifted along one category. I cannot seem to find a way to order the data when it is supplied that produces the correct result.

Is there some particular way the data needs to be sorted in order for this to assign the correct categories?

Charts

answered on 14 Apr 2016

2 answers

366 views

Kendo Grid not displaying data

My grid keeps on coming up empty. What could I be doing wrong?

HTML

<head>
<title></title>
<script src="include/libraries/jquery/jquery-1.12.3.min.js"></script>
<link href="include/libraries/kendo/css/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="include/libraries/kendo/css/kendo.common-bootstrap.min.css" rel="stylesheet" />

<script src="include/libraries/kendo/js/kendo.all.js"></script>
<script src="include/libraries/kendo/js/kendo.all.min.js"></script>
<script src="include/libraries/kendo/js/kendo.aspnetmvc.min.js"></script>
<script src="include/libraries/kendo/js/kendo.custom.min.js"></script>
<script src="include/libraries/kendo/js/kendo.timezones.min.js"></script>

<meta charset="utf-8" />
</head>
<body>
<div id="grid">
<div class="demo-section k-content wide">
<div>
<h4>Add or update a record</h4>
<div data-role="grid"
data-editable="true"
data-toolbar="['create', 'save']"
data-columns="[
{ 'field': 'CourseID' },
{ 'field': 'CourseName' },
{ 'field': 'IsActive' },
]"
data-bind="source: courses,
visible: isVisible,
events: {
save: onSave
}"
style="height: 200px"></div>
</div>
</div>

<script>

var viewModel = kendo.observable( {


isVisible: true,
onSave: function(e) {
kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
},

courses: new kendo.data.DataSource({
schema: {
model: {
id: "CourseID",
fields: {
CourseID: { type: "number" },
CourseName: { type: "string" },
IsActive:{type:"boolean"}
}
}
},
batch: true,
transport: {
read: {
type:"GET",
url: "http://localhost:51447/api/Courses",
dataType: "jsonp"
},

parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
}
})
});
kendo.bind($("#grid"), viewModel);
</script>
</div>

</body>

Controller Code

// GET: api/Courses

public IQueryable<object> GetCourses()
{
return db.Courses.Select(
o => new
{
CourseID = o.CourseID,
CourseName = o.CourseName,
IsActive = o.IsActive
});

//}).Where(l => l.IsActive == false);
}

JSON returned

[{"CourseID":1,"CourseName":"Beauty Therapy","IsActive":true},{"CourseID":2,"CourseName":"Software Development","IsActive":true},{"CourseID":3,"CourseName":"Bookkeeping and Accounting","IsActive":true}]

MVVM

answered on 14 Apr 2016

1 answer

236 views

[Solved] Date / Time picker format problem in Grid

Hi,

I believe I have bumped into a styling problem. When a Kendo DatePicker or DateTimePicker is used in a Kendo Grid's filtering menu, the texts at centuries depth is not wrapped, thus appear broken. See attached screenshot & plunker: http://plnkr.co/edit/OsIlCii3AgJQsW2vELuF?p=preview

The problem seems to be caused by the following style:

.k-menu .k-menu-group {

//...

white-space: nowrap;

}

This is inherited from the filter menu's UL element.

Best,

Ama

DatePicker

answered on 13 Apr 2016

1 answer

184 views

Getting Kendo Editor to edit mode when a button is clicked

I have a Kendo Editor, defined as below:

@(Html.Kendo().Editor()
.Name("RestrictionsEditor")
.Tag("div")
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.CreateLink().Unlink()
.InsertImage()
.TableEditing()
.FontColor().BackColor()
)
.Value(@<text><p> This editor is readonly and will get into edit mode only after 'Edit' button is clicked</p></text>))

I have editor as readonly initially and I am doing that as below:

{

var editor = $("#RestrictionsEditor").data("kendoEditor"),
editorBody = $(editor.body);

// make readonly
editorBody.removeAttr("contenteditable").find("a").on("click.readonly", false);
})

</script>

Now, I have been trying to get the editor to edit mode when a button is clicked.

I have defined my button as below right above my editor:

And I am writing the Javascript as:

When I run my code, the editor is in readonly mode initially and as soon as I click 'Edit' button it takes me back to the original page, out of the modal. Forgot to mention, Editor is inside of a tab in modal.

How can I achieve this behavior - Kendo Editor in readonly mode initially and after 'Edit' button is clicked, Editor gets in edit mode.

Thanks!

Editor

answered on 13 Apr 2016