Telerik Forums
Kendo UI for jQuery Forum
10 answers
229 views
Hi Guys,

Have just tripped over the following issue whereby ordering multiple columns via the 'reorderColumn' method is not honouring the width of the moved column when hidden columns are involved.

To illustrate the issue please run the following dojo

    http://dojo.telerik.com/iQUNo
    
- If you hit the Reorder button the columns are reordered keeping their original column width.

- Now edit the dojo and set the ShippedDate field's hidden attribute to true and rerun.

- If you now hit the Reorder button the columns are reordered but you will notice the column widths do not match their original size.

i.e. The ShipCity column width now appears to be 50 instead of 200.

NOTE: If you inspect the underlying grid.columns object the column widths are correct.

As an aside the above dojo also highlights a CSS issue whereby the page number is being incorrectly positioned.

Regards
Alan
Petar
Telerik team
 answered on 11 Jan 2021
4 answers
260 views

In my Autocomplete I need to show grouped items, but groups have to be sorted non-alphabetically.

As the Autocomplete doesn't have such option, I tried using the serverGrouping option, but I guess I'm doing something wrong.

In fact the list of groups and items is correctly displayed (see attached picture #1), but typing any character in the input shows the NO DATA FOUND message (see attached picture #2 - typing "c" should show "Coffee" and "Cake"). Additionally items sorting doesn't seem to work.

This is the Autocomplete and its DataSource initialization code:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
          url: "xxxxxxxxxxxxxxxxxxxxxx",
          dataType: "json"
        }
    },
    schema: {
        groups: 'groups',
    },
    serverGrouping: true,
    group: {
        field: "category",
    },
    sort: { field: "name", dir: "asc" }
});
 
$("#destinationIn").kendoAutoComplete({
    dataTextField: "name",
    height: 400,
    placeholder: "Ovunque",
    dataSource: dataSource,
});

 

This is the json data returned by the server call:

{
   "groups":[
      {
         "field":"category",
         "value":"Beverages",
         "items":[
            { "name":"Lemonade" },
            { "name":"Tea" },
            { "name":"Coffee" }
         ]
      },
      {
         "field":"category",
         "value":"Seafood",
         "items":[
            { "name":"Salmon" },
            { "name":"Mackerel" }
         ]
      },
      {
         "field":"category",
         "value":"Desserts",
         "items":[
            "name":"Ice cream" },
            { "name":"Cake" }
         ]
      }
   ]
}

 

Why the Autocomplete doesn't seem to work? Am I missing something in the Autocomplete settings, or DataSource settings, or JSON being sent by the server?

And why the sorting of items doesn't work?

Martin
Telerik team
 answered on 11 Jan 2021
9 answers
1.5K+ views
Is there a way to load a grid without any locked columns initially and then lock a column?  If I load a grid with no locked columns then I don't even get the option in the column menu to lock.  I also noticed that if I load a grid with one column locked that I can not unlock that column either without first locking another column.  Is this behavior intended and if so is this going to change in the future?
Petar
Telerik team
 answered on 11 Jan 2021
1 answer
285 views

Hello,

 

I'm trying to change the time dynamically for each day and each employee individual.

I've achieved that for all Views except the timlineMonth!

So every time I change the business hours dynamically, then the timelineMonth View does not work and one of these errors appear in the chrome devtools

kendo.all.js:113735 Uncaught TypeError: Cannot read property 'children' of undefined

OR

Uncaught TypeError: Cannot read property 'end' of undefined

 

I took the first Dojo example from you :

https://www.telerik.com/forums/how-to-set-business-hours-day-wise#6omvyHlQFkWOQVe1OTWdnw

 

and edited it to reproduce the issue:

https://dojo.telerik.com/aqekoJAG

 

steps to reproduce the issue:

1- change the time from the droplist (select) above the scheduler

2- change the view to timelineMonth

3- open debugger (e.g. devtools console) to see one of the error that I mentioned above 

 

 Thanks in advance

 

K.Ramadan

Aleksandar
Telerik team
 answered on 08 Jan 2021
9 answers
432 views
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 ?
Nikolay
Telerik team
 answered on 08 Jan 2021
2 answers
2.3K+ views

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?

Hans-Jürgen
Top achievements
Rank 1
Veteran
 answered on 08 Jan 2021
1 answer
2.3K+ views

     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.

Georgi Denchev
Telerik team
 answered on 08 Jan 2021
3 answers
699 views

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

Georgi Denchev
Telerik team
 answered on 07 Jan 2021
9 answers
3.0K+ views

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

Tsvetomir
Telerik team
 answered on 07 Jan 2021
21 answers
2.8K+ views
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.
Tsvetomir
Telerik team
 answered on 07 Jan 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?