Questions on Kendo UI for jQuery Forum

9 answers

423 views

sparkline chart height not set and also axis not displayed

How to set sparkline chart height ?
I have tried too much but unable to set it.
Also how to display x and y axis and labels on it.
One more thing notes.icon is not available for mvc, any alternative for it ?

Charts

answered on 08 Jan 2021

2 answers

2.2K+ views

Multiline columns

Hey,

I have a problem displaying texts that have multiple lines in my columns (text bound to a database and linebreaks are cr lf).

In the grid the texts are displayed in a single line.

My intuition would be to use a column template as I haven't found a way to configure columns to show multiple lines. But I don't know how this template would have to look like.

Could you help me with this?

Grid

answered on 08 Jan 2021

1 answer

2.1K+ views

Horizontal scroll within (inside) of grid

Hello me and my team are trying to achieve a horizontal scroll within the expanded details view of a grid. Once the user clicks on a carrot and expands to see additional details within a grid there are input boxes and dropdowns formatted in columns. The width of these columns that hold the input boxes/dropdowns stretch beyond the page view and in order to see the right side of the screen the user must scroll all the way to the bottom of the grid and use the horizontal scroll. What we want to achieve is placing a horizontal scroll inside of the expanded view so the user can scroll without having to go all the way to the bottom and then scroll to the right.

Please note I'm talking about the content inside the expanded view and not the grid.extendReadOnly feature which already comes with the horizontal scroll out of the box. Some of the things I already tried are putting overflow-x: scroll scss within the class and apply it to the form that is essentially the content in the expanded view. I also wrapped the form into another container div which didn't work either. Any ideas on how my team and I can accomplish this? Thank you.

Grid

answered on 08 Jan 2021

3 answers

665 views

Display Grid Columns Vertically

Hi All,

I need a feature to implement to transpose a grid (i.e. displaying tabular data in the flip axis so rows becomes columns and vice versa).

Can I know whether KendoUI provides such functionality to show the grid vertically as the example?

Name Age City
Marius 35 Kristiansand
Brian 37 Grimstad
Tom 38 Arendal

And show it as:

Name Marius Brian Tom
Age 35 37 38
City Kristiansand Grimstad Arendal

Grid

answered on 07 Jan 2021

9 answers

2.9K+ views

Inline editing not triggering controller (update)

Hi team !

I'm trying to work with the inline edit mode, but I can't manage to call my controller's method when a value is changed.

My grid is diplayed correctly, and I can click on the edit button, that makes the update and cancel button appear. Cancel works fine, but Update doesn't. In fact, both buttons are doing the exact same thing : making me leave edit mode.

.Update(update => update.Action("EditingInline_Update", "PeriodesRecueil"))

I hoped this line to call my "EditingInline_Update" method in my "PeriodesRecueil" controller, but it doesn't.

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, PeriodeRecueilViewModel prVm)

{

return Json(new { });

}

Here is my html

@model List<PeriodeRecueilViewModel>

@(Html.Kendo().Grid(Model)

.Name("gridHistoPeriodesRecueil")

.NoRecords("Aucune période de récueil n'a été trouvée.")

.Columns(columns =>

{

columns.Bound(l => l.dateDebut)

.Title("Date de début")

.Width(300)

.ClientTemplate("<div class=#:hasErrorDateDebut?'orangeBack':''#>" +

"<div class=#:isActive?'greenBack':''#>" +

" #=kendo.toString(dateDebut,'dd / MM / yyyy')# " +

"</div>" +

"</div>")

.HeaderHtmlAttributes(new { style = "text-align:center;" })

.Filterable(filterable => filterable

.Extra(false)

.Messages(m => m.Info("Afficher les lignes dont la date..."))

.Operators(operators => operators

.ForDate(dt => dt.Clear()

.IsEqualTo("est...")

.IsGreaterThanOrEqualTo("est ultérieure à...")

.IsLessThanOrEqualTo("est antérieure à...")))

)

.EditorTemplateName("Date");

columns.Bound(l => l.dateFin)

.Title("Date de fin")

.Width(300)

.ClientTemplate("<div class=#:hasErrorDateFin?'orangeBack':''#> " +

"#=kendo.toString(dateFin,'dd / MM / yyyy')# " +

"</div>")

.HeaderHtmlAttributes(new { style = "text-align:center;" })

.Filterable(filterable => filterable

.Extra(false)

.Messages(m => m.Info("Afficher les lignes dont la date..."))

.Operators(operators => operators

.ForDate(dt => dt.Clear()

.IsEqualTo("est...")

.IsGreaterThanOrEqualTo("est ultérieure à...")

.IsLessThanOrEqualTo("est antérieure à...")))

)

.EditorTemplateName("Date");

columns.Template(@<text></text>)

.Title("États")

.Width(125)

.ClientTemplate("# if(hasErrorDateDebut || hasErrorDateFin) {# <div class='k-icon k-i-warning'></div> #} # " +

"# if(isActive) {# <div class='k-icon k-i-doughnut'></div> #} # " +

"# if(hasHappened) {# <div class='k-icon k-i-clock'></div> #} #")

.HeaderHtmlAttributes(new { style = "text-align:center;" });

columns.Command(command =>

{

command.Edit().Text(" ").IconClass("k-icon k-i-edit").Visible("hasNotHappened").UpdateText(" ").CancelText(" ");

command.Custom("cmdAnnuler").Text(" ").Click("cmdAnnuler").IconClass("k-icon k-i-close").Visible("hasNotHappenedAndNotToday");

})

.Title("Actions")

.Width(125)

.HeaderHtmlAttributes(new { style = "text-align:center" })

.HtmlAttributes(new { @class = "actions" });

})

.Events(events => events

.DataBound("onDataBound"))

.Editable(editable => editable.Mode(GridEditMode.InLine))

.HtmlAttributes(new { style = "text-align:center" })

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(l => l.idPeriodePaie))

.Update(update => update.Action("EditingInline_Update", "PeriodesRecueil"))

.ServerOperation(false)

.PageSize(10))

.Pageable()

.Filterable()

)

No error in the console. Any idea of what I'm doing wrong ?

Thank you,

Valentin

Grid

answered on 07 Jan 2021

21 answers

2.7K+ views

Select text on focus

How can I select the textbox's contents when it receives the focus. Ordinarily, I would call select() within jQuery's focus event handler. However, this does not work with the numeric textbox. I presume this is because the input that ultimately receives focus has style display:none when the page is loaded.

NumericTextBox

answered on 07 Jan 2021

1 answer

115 views

Button List dissapear if I use inside as Context Menu

Hello,

I had button list above grid something like this :

<ul style="list-style: none; -webkit-padding-start: 0px;">