Questions on Kendo UI for jQuery Forum

5 answers

2.2K+ views

grid.setOptions with functions within the grid

Hello,

I am trying to implement a complex grid that has 4 functions defined, on dataBound, columnMenuInit, and 2 on change. We noticed that, when using setOptions/getOptions from local storage, the functionality of our column menu is lost (an error about t[e] not being defined pops up).

Now, I have researched and apparently the JSON.stringify we have to apply before storing does away with the functions, this is, they are lost when setting the options to local storage: however, I was trying to implement a workaround I saw while researching, where basically the function was stored separately, and added after parsing the rest of the options before loading them to the grid again.

My problem now is that the function is getting added to the parsed options object as what I believe is an Unicode string (the representation of it on Chrome dev tools comes up as a string instead of a function). The error thrown when trying to JSON.parse it is that there's a "u" token at position 1, so that's what leads me to think in this way.

My question is: is there any way I can assign the function stored separately on local storage to grid options before applying them to the grid, in order to not lose any functionality? I would be happy just storing and re-adding the columnMenu function (I guess I could extend this to the other ones if it's possible, later on). What would be your advice in this case?

Thank you!

Grid

answered on 20 Apr 2017

1 answer

1.0K+ views

setting className con custom command put CSS class on wrong element

The className specified is applied on A tag but not on the right inner SPAN tag

try this code on dojo , see the attached screenshot

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/grid/custom-command">

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

<title></title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common.min.css" />

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.blueopal.min.css" />

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.blueopal.mobile.min.css" />

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

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

</head>

<body>

<script src="../content/shared/js/people.js"></script>

<div id="example">

<div id="grid"></div>

<div id="details"></div>

<script>

var wnd,

detailsTemplate;

$(document).ready(function () {

var grid = $("#grid").kendoGrid({

dataSource: {

pageSize: 20,

data: createRandomData(50)

},

pageable: true,

height: 550,

columns: [

{ field: "FirstName", title: "First Name", width: "140px" },

{ field: "LastName", title: "Last Name", width: "140px" },

{ field: "Title" },

{ command: { text: "View Details", click: showDetails, className : 'k-icon k-i-copy' }, title: " ", width: "180px" }]

}).data("kendoGrid");

wnd = $("#details")

.kendoWindow({

title: "Customer Details",

modal: true,

visible: false,

resizable: false,

width: 300

}).data("kendoWindow");

detailsTemplate = kendo.template($("#template").html());

});

function showDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

wnd.content(detailsTemplate(dataItem));

wnd.center().open();

}

</script>

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

<div id="details-container">

<h2>#= FirstName # #= LastName #</h2>

<em>#= Title #</em>

<dl>

<dt>City: #= City #</dt>

<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>

</dl>

</div>

</script>

<style type="text/css">

#details-container

{

padding: 10px;

}

#details-container h2

{

margin: 0;

}

#details-container em

{

color: #8c8c8c;

}

#details-container dt

{

margin:0;

display: inline;

}

</style>

</div>

</body>

</html>

Grid

answered on 20 Apr 2017

1 answer

2.2K+ views

Filtering blank values in kendo grid

Hi,

I am developing a MVC Project with kendo ui. One of the requirement is to filter blank values in grid columns. The filter option should be a part of existing filter options present with column headers. How can we implement the same?

Data Source

answered on 20 Apr 2017

1 answer

290 views

DatePicker Popup Kendo Grid - Angular 2

I cannot get the DatePicker Popup to sit on the top of the grid, it seems to cut off at the footer. I've tweaked with the CSS to no avail. Has anyone had any luck?

DatePicker

answered on 20 Apr 2017

3 answers

112 views

Kendo grid filter customizations

How can we customize kendo grid filter options "Is empty","Is not empty" etc like the code which is mentioned below.

.Filterable(filter => filter.Mode(GridFilterMode.Menu).Extra(false)
.Operators(oper => oper.ForString(str => str.Clear()
.IsEqualTo("Is equal to")
.Contains("Contains")
.StartsWith("Starts with")
)))

Data Source

answered on 20 Apr 2017

1 answer

156 views

[Solved] Dropdown filtering style

Hello,

can anyone tell me why the dropdown not fits when filtering("contains") ??

1.@(Html.Kendo().DropDownListFor(m => m.Planstelle).BindTo(Model.AvailablePlanstellen)

2. .Filter("contains")

3. .HtmlAttributes(new { style = "width: 100%; margin-right: 10px" }))

this makes me crazy ^^

Best Regards

DropDownList

answered on 20 Apr 2017

1 answer

128 views

Columns extending past grid

Please see attached: I have very complex setup for my grids, but are there any known issues when the columns extend past the grid? For instance, if the total width of all the columns extent past the size of the grid, or if certain modes are turned on at the same time?

Grid

answered on 20 Apr 2017

6 answers

523 views

Resizing scheduler on edit/create event popup, events don't move and resize with scheduler

We have need to make the kendo scheduler visible when the create/edit popup is brought up (by double clicking an event already there, or a free spot on the scheduler), so we resize the scheduler and fit the popup off to the right in the space now open. I have it resizing using the open, close, activate, and deactivate events of the window to control when to resize the scheduler.

However, when it resizes, the events stay the same size and don't move while the days in the week and month view squish with the resize, making all the events out of place until the scheduler refreshes. However, when refreshing after resizing the scheduler, the edit/create popup closes, which throws an exception because the scheduler edit event can no longer find components that were defined in the edit html template...

Is there a good way to resize the scheduler and have events follow the resize on edit/create popup open?

Scheduler

answered on 20 Apr 2017

1 answer

432 views

[Solved] Load on Demand = false triggers databound event constantly

I have an event that needs to fire after the whole tree is rendered. And it needs to be fired only once, but the databound event keeps firing. Is there another event that triggers when the whole tree is fully rendered?

TreeView

answered on 19 Apr 2017

1 answer

264 views

Is there a way to hide columns in the exportPDF event without changing what is onscreen for a Kendo UI Grid?

When I am using the exportPDF event, I can hide the column on the grid, export it and after it is done show the column again. However, I don't want to have to hide the column as it is a noticeable change on the page. Is there a way to hide the column with affecting the grid on the page?

Grid

answered on 19 Apr 2017