Questions on Kendo UI for jQuery Forum

3 answers

327 views

Cell Style in Json Data

Hello.

I'm developing with Kendo Grid and I have a question about styling cell of every row.

I've already read some articles to style every cell in databound event.

Can I add styling rule in JSON Data Passed to Kendo Grid?

In my case I have a datatable(vb.net) that I convert to json before pass to kengo grid.

My datatable has 3 column and 50 rows.

1° col: Name / 2° col: Surname / 3° col: Style.

Every row can have a different "Style" content. "Style" is the style that I need to apply to 1° and 2° column.

Example:

PAUL BEAN color:red;

STEVE JOBS text-align:center;

SAM SMITH background-color: green;

{"data":[{"Name": "Paul", "Surname":"Bean","Style":"color:red"}, {"Name": "Steve", "Surname":"Jobs","Style":"text-align:center"}, {"Name": "Sam", "Surname":"Smith","Style":"background-color: green;"}]}

Can you explain If is possibile styling on json "data"?

I've already use databound event and I Iterate every rows but it is very slow.

Are there any alternatives?

thanks!

Grid

answered on 02 Mar 2021

1 answer

418 views

Kendo Tooltip position issue for bar chart

The tooltip shows at the top of the chart height instead of the bar height. Also unable to format the tool tip for the chart. I need to bring the tooltip at the start of the bar . Please refer the image below.

Charts

answered on 02 Mar 2021

2 answers

234 views

Show Kendo Recurrence Editor as read-only mode?

Hello,

I'm working on an app that needs to display Kendo Recurrence Editor as read-only mode. Is the component have read-only option?

Example on the attached image.

Thanks,

Scheduler

answered on 02 Mar 2021

3 answers

540 views

Kendo grid buttons – cannot override min-width

I have tried all kinds of selector permutations, but cannot seem to find the CSS selector “specificity” to override the default button min-width of 64px in kendo.common.min.css. I find that my only option is to modify Kendo’s CSS file itself – which I would prefer not to do.

The class spec: .k-grid tbody .k-button,.k-ie8 .k-grid tbody button.k-button{min-width:64px}

Desired behavior: min-width:0px

I am replacing Kendo’s text/icons with custom icons that are 16x16 (any larger and the rows get too tall). I am using the MVC wrappers (which may be irrelevant to the question).

Please advise,

Grid

answered on 02 Mar 2021

3 answers

1.2K+ views

Resize height of Spreadsheet widget to fit

When the spreadsheet loads, the width loads perfectly well and it automatically adjusts to browser resizing. Awesome sauce.

Is there a way to coax the height of the widget to do the same? Something like a height:100% so it happily resizes.

The default height of the spreadsheet leaves lots of space.

Spreadsheet

answered on 02 Mar 2021

2 answers

145 views

Multi Day events not receiving data in day view

The multi day events in the month view render correctly and receive all the properties (color, link, title, etc) in the month view but do not get them in the day view. I'm getting the title of the item in the All Day table but am not getting the event color, or url. Single day items display correctly in both month and day view.

@(Html.Kendo()

.Scheduler<EventDetailViewModel>()

.Name("schedule")

.Editable(false)

.Selectable(true)

.Date(scheduleDate)

.ShowWorkHours(false)

.StartTime(new DateTime(scheduleDate.Year, scheduleDate.Month, scheduleDate.Day, 7, 00, 00))

.EndTime(new DateTime(scheduleDate.Year, scheduleDate.Month, scheduleDate.Day, 22, 00, 00))

.Views(views =>

{

views.MonthView();

views.DayView();

})

.EventTemplateId("eventTemplate")

.DataSource(d => d.Model(m =>

{

m.Field(f => f.EventID);

m.Field(f => f.EventStartTime);

m.Field(f => f.EventTitle);

m.Field(f => f.EventCategory);

m.Field(f => f.EventColor);

m.Field(f => f.EventUrl);

}))

.BindTo(events)

.Deferred(true)

)

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

<a href="#= EventUrl #" class="calendar__link" title="#= EventTitle #" data-category="#= EventCategory #" data-color="#= EventColor #">

<span class="calendar__title">#= EventTitle #</span>

<span class="calendar__time">#= EventStartTime #</span>

</a>

</script>

Scheduler

answered on 01 Mar 2021

7 answers

296 views

Mousewheel zooms Out on both ways in Firefox and never zooms In

Zooming In and Out works well in Chrome, but I just realised it never zooms In in Firefox. By scrolling the mouse wheel both ways it always zooms Out.

Any Idea what could affect that issue? Thanks in advance!

Here is my diagram, I also tried to remove all properties, but that didn't change the described on top behaviour, nothing specific:

var kendoDiagram = diagram.kendoDiagram({

dataSource: shapesDataSource,

connectionsDataSource: connectionsDataSource,

shapeDefaults: {

editable: {

tools: false

},

visual: visualTemplate,

content: {

template: '#= typeof dataItem.customData === "undefined" || typeof dataItem.customData.status === "undefined" || dataItem.customData.status === "" ? dataItem.text : dataItem.customData.status #'

}

},

connectionDefaults: {

editable: {

tools: false

},

startCap: "FilledCircle",

endCap: 'ArrowEnd',

type: "polyline"

},

dragEnd: function(e) {

var el = e.connections[0];

if (typeof el !== 'undefined') {

var source = el.sourceConnector,

target = el.targetConnector;

if( typeof source == 'undefined' || typeof target == 'undefined') {

//console.log('connection is not connected both sides!');

el.options.stroke.color = '#ff0000';

el.options.hover.stroke.color = '#ff0000';

} else {

el.options.stroke.color = '#2e2e2e';

el.options.hover.stroke.color = '#2e2e2e';

}

},

change: function (e) {

var element = e.added[0];

if (element && element instanceof kendo.dataviz.diagram.Shape) {

var dataItem = element.dataItem;

var point = new kendo.dataviz.diagram.Point(dataItem.x, dataItem.y);

element.position(point);

}

},

pannable: {

key: "shift"

},

editable: {

resize: false,

tools: false

},

zoomMax: 3.5,

zoomMin: 0.2,

click: function(e) {

e.preventDefault();

console.log('click...');

}

}).getKendoDiagram();

Diagram

answered on 01 Mar 2021

3 answers

1.7K+ views

clearButton ?

Hello

How to add a clearButton to the kendoTextBox control ? Same as in Autocomplete ...

Thanks.

TextBox

answered on 01 Mar 2021

1 answer

200 views

Edit popup not disappeared in jQuery Grid

Hello everybody,

I have a problem on the editing popup in the Grid widget. Based on the guide, I modified the example code in order to to only accept READ and CREATE operations:

<script>

$(document).ready(function () {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: '@Url.Action("GetAssignations", "Tasks")'+'/'+'@Model.IdProject',

dataType: "json",

type: 'GET'

},

create: {

url: '@Url.Action("CreateAssignation", "Tasks")',

dataType: "json",

type: 'POST',

contentType: "application/json"

},

parameterMap: function (options, operation) {

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

var output = "";

$.each(options.models, function (index, value) {

console.log(value);

output = value;

});

return kendo.stringify(output);

}

},

batch: true,

pageSize: 20,

schema: {

model: {

id: "idAssignation",

fields: {

idProject: { type: "number", defaultValue: function () { return @Model.IdProject} },

assignee: { type: "string" },

addedOn: { type: "date", editable: false }

}

});

$("#grid").kendoGrid({

dataSource: dataSource,

pageable: true,

//height: 550,

toolbar: ["create"],

columns: [

{ field: "assignee", title: "Assignee" },

{ field: "addedOn", title: "Added on" },

],

editable: "popup"

});

</script>

Both READ and CREATE work because the data are correctly read/written into database; however, after the POST the editing popup does not disappear.

Could you give me some help?

Thanks in advance.

Filippo

Grid