Questions on Kendo UI for jQuery Forum

1 answer

2.6K+ 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

763 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

3.2K+ 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.9K+ 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

146 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;">