Telerik Forums
Kendo UI for jQuery Forum
1 answer
169 views

Hi everyone,

I'm currently working on a Kendo UI Grid and I need the filter menus to dynamically update based on the data currently displayed in the grid. Specifically, I want the filter options to reflect only the unique values of the data that is currently visible after applying other filters.

I'm using Kendo UI version 2021.3.914.

I found a solution that achieves exactly what I want in this example: Kendo UI Dojo Example. However, the solution in the example does not work with my version of Kendo UI.

Could someone please help me understand how to implement this functionality in my version of Kendo UI? Any guidance or suggestions would be greatly appreciated.

Thank you in advance!

Nikolay
Telerik team
 answered on 23 Jul 2024
1 answer
109 views

When a column is set to sticky in a grid and the user clicks edit and then cancel, that column become unsticky for that row only. I noticed this also happens if the user clicks edit, makes any change, and then clicks save. This happened when I upgraded from 2022 to 2024 so the bug was created somewhere in there. To reproduce, see this dojo: 
https://dojo.telerik.com/@dojolee/evOPeBey

  1. Shrink the right side of the screen until it is pretty small (about 700px)
  2. Click Run and make sure there is a horizontal scroll. If not, shrink the right and click run again.
  3. Scroll and notice that the first column sticks
  4. Click edit on the first row
  5. Click cancel
  6. Scroll and notice that the first row no longer has a sticky column.

Note: I reported the bug here: https://feedback.telerik.com/kendo-jquery-ui/1658638-sticky-column-unsticks-after-clicking-cancel-in-grid

Martin
Telerik team
 answered on 22 Jul 2024
0 answers
164 views

Hello

I hope this message finds you well.

 

I am currently facing an issue with the Kendo Grid when using locked columns. Specifically, when I set the width for the last column and then reduce the browser zoom level to 80%, the widths of the header table and the data table do not fit proportionally. Here are the details:

  1. Issue Description:

    • Component: Kendo Grid
    • Problem: When there are locked columns and I set the width of the last column, adjusting the browser zoom level to 80% causes the widths of the header table and the data table to not fit proportionally.
    • Current Behavior: At 80% browser zoom, the header and data tables' widths are not aligned correctly, leading to a misalignment in the grid display.

     

  2. Steps to Reproduce:

    • Set up a Kendo Grid with locked columns.
    • Set the width for the last column.
    • Reduce the browser zoom level to 80%.
    • Observe the misalignment between the header and data table widths.

    I have attached photos for your reference.

    - Default(100%)

    - 80%

    Could you please provide some guidance on how to resolve this issue or suggest any potential workarounds? Any insights or resources you could share would be greatly appreciated.

    Additionally, when applying " width: 100% !important " to the tables, there is a misalignment between the header and content areas.

    Could you please look into this issue as well?

     

    Thank you in advance for your time and assistance. I look forward to your response.

    Best regards,

     

    soyoung
    Top achievements
    Rank 1
    Iron
     updated question on 22 Jul 2024
    0 answers
    61 views

    Hi,

    I have attempted to reload a Kendo TreeView control with a new TreeViewDataSource...

    function reloadLists() { console.log("In reloadLists():"); var ds2 = new kendo.data.TreeListDataSource({ data: actionsV2, schema: { model: Models.TREELISTMODELTWO } }); ds2.read(); var vw2 = ds2.view(); _view.set("actionsObserv", vw2); $("#actionsTreelist").data("kendoTreeList").setDataSource(_view.get("actionsObserv"));

    }


    ...but when the new dataSource is loaded I noticed the expander arrows do not work. The top one disappears when clicking on it:

    The other ones do not function, there is no change when I click on them. I cannot contract an expanded branch, nor can I expand a contracted branch. What am I missing? Is this a bug? Here is a link to the Kendo Dojo  with an example:

    Kendo TreeList Reload List Example | Kendo UI Dojo (telerik.com)

    Thanks again for your help and patience ^__^

    George

    George
    Top achievements
    Rank 3
    Bronze
    Bronze
    Iron
     updated question on 19 Jul 2024
    1 answer
    818 views

    I am trying to upgrade my Kendo UI Jquery installation from 2022 to 2024 and it is not going smoothly. One issue I'm having is that now my grids with locked columns do not span the whole width of their container. In the old version, the k-grid-table would expand to fill the width of the k-grid-content but now it seems that the columns retain their width, rather than growing like they used to. So now there is a large white space between the last column and the vertical scrollbar. I did notice that if I remove the inline style in the developer tools that is applied to the k-grid-table in the unlocked section, it fixes it. 

    Another issue I just discovered is on the multiselect. It seems that the class that used to be applied when the list was expanded is not there anymore ".k-state-border-down". I used this to target the down arrow and change it to a checkmark but now it seems there is no class to target in CSS. How would I change the arrow icon when the multiselect is expanded?

     

    Old Version:

    New Version: 

     

    How do I fix this, and is there documentation somewhere on all of the breaking changes between the two versions and how to fix them? 

    Yordan
    Telerik team
     answered on 19 Jul 2024
    1 answer
    145 views

    Hi Team 

    When converting a date string to a Date object using the kendo.toString method, the month name is displayed according to the Islamic calendar instead of the Gregorian calendar. This issue arises when using the Arabic culture settings.

    dojo - https://dojo.telerik.com/IPadawaP

    Observation - I think it considers the month incorrectly and shows the month name as per Islamic calendar.

    Any help is appreciated.

    Angel Petrov
    Telerik team
     answered on 19 Jul 2024
    2 answers
    109 views

    hello,

    When i am set any one colum "Locked : true" After All Colum "columnMenu" Have a "Set Column Position" Option.
    so my quesion is can i unable other Column "columnmenu" "Set Column Position" Option.


     

     

     

    Georgi Denchev
    Telerik team
     answered on 19 Jul 2024
    1 answer
    106 views

    Hi,

    I am trying to define a Model for my kendoTreeList.

    Normally I would define a Model like:


    var Product = kendo.data.Model.define({
        id: "ProductID", // Defines the field to be used as the identifier.
        fields: {
            // Define the fields of the model and their data types.
            ProductID: { type: "number" },
            ProductName: { type: "string" },
            QuantityPerUnit: { type: "string" },
            UnitPrice: { type: "number" },
            UnitsInStock: { type: "number" },
            Discontinued: { type: "boolean" }
        }
    });

     

    But with the TreeList  you normally have to define the Model like this with a parentId:

                                model: {
                                    id: "EmployeeId",
                                    parentId: "SupervisorId",
                                    fields: {
                                        SupervisorId: { field: "SuperviorId", nullable: true },// this is the parent.
                                        EmployeeId: { field: "EmployeeId", type: "number" }, 
                                    },
                                    expanded: true
                                }


    I don't think kendo.data.Model.define works for this type of model  because it doesnt have some of the properties like parentId or expanded. Is there something I can substitute it with?

    What I am trying to do is create a class of Models and I can slide the Model definition in like:


        $("#reportsTreeList").kendoTreeList({
    
            dataSource:
            {
                data: reports,
                schema: {
                    model: Models.TREELISTMODEL
                }
            },
            height: "auto",

    OR:


    var ds = new kendo.data.DataSource({ data: reportsList, schema: { model: Models.TREELISTMODEL }});

    this approach seems to work with a kendo spreadsheet or a grid... but TreeView  seems to break.

    Thanks again for your help and patience!

    George

    George
    Top achievements
    Rank 3
    Bronze
    Bronze
    Iron
     answered on 18 Jul 2024
    0 answers
    91 views

    Hello,

    Requirement to implement 'More' button in Week view of MVC scheduler as Month view has.

    I tried suggestion given in this article https://docs.telerik.com/kendo-ui/knowledge-base/implement-more-events-button-in-week-view

    example is here https://dojo.telerik.com/IGOQinES.

    Want to change two points,

    1. The position of More button from bottom of the slot to right side of the slot shown as in below image.

    2. Slot with single appointment also showing 'More' button, why?

    Appreciate for the support. 

    Thanks,

    BP

    B
    Top achievements
    Rank 1
     updated question on 18 Jul 2024
    1 answer
    63 views

    Hi,

    I can see that the PivotGrid has a "Compact" display mode in the ASP.NET AJAX libraries: https://docs.telerik.com/devtools/aspnet-ajax/controls/pivotgrid/layouts/overview  

     

    Is there a "Compact" mode that renders nested rows with only a slight offset instead of creating a whole new column in the jQuery libraries, or even in ASP.NET MVC version?

     

    Kind regards,
    Ilya

    Martin
    Telerik team
     answered on 18 Jul 2024
    Narrow your results
    Selected tags
    Tags
    Grid
    General Discussions
    Charts
    Data Source
    Scheduler
    DropDownList
    TreeView
    MVVM
    Editor
    Window
    DatePicker
    Spreadsheet
    Upload
    ListView (Mobile)
    ComboBox
    TabStrip
    MultiSelect
    AutoComplete
    ListView
    Menu
    Templates
    Gantt
    Validation
    TreeList
    Diagram
    NumericTextBox
    Splitter
    PanelBar
    Application
    Map
    Drag and Drop
    ToolTip
    Calendar
    PivotGrid
    ScrollView (Mobile)
    Toolbar
    TabStrip (Mobile)
    Slider
    Button (Mobile)
    Filter
    SPA
    Drawing API
    Drawer (Mobile)
    Globalization
    LinearGauge
    Sortable
    ModalView
    Hierarchical Data Source
    Button
    FileManager
    MaskedTextBox
    View
    Form
    NavBar
    Notification
    Switch (Mobile)
    SplitView
    ListBox
    DropDownTree
    PDFViewer
    Sparkline
    ActionSheet
    TileLayout
    PopOver (Mobile)
    TreeMap
    ButtonGroup
    ColorPicker
    Pager
    Styling
    MultiColumnComboBox
    Dialog
    Chat
    DateRangePicker
    Checkbox
    Timeline
    Drawer
    DateInput
    ProgressBar
    MediaPlayer
    ImageEditor
    TextBox
    OrgChart
    Effects
    Accessibility
    PivotGridV2
    ScrollView
    BulletChart
    Licensing
    QRCode
    ResponsivePanel
    Switch
    TextArea
    Wizard
    CheckBoxGroup
    Localization
    Barcode
    Breadcrumb
    Collapsible
    MultiViewCalendar
    Touch
    RadioButton
    Stepper
    Card
    ExpansionPanel
    Rating
    RadioGroup
    Badge
    Captcha
    Heatmap
    AppBar
    Loader
    Security
    TaskBoard
    Popover
    DockManager
    FloatingActionButton
    CircularGauge
    ColorGradient
    ColorPalette
    DropDownButton
    TimeDurationPicker
    ToggleButton
    TimePicker
    BottomNavigation
    Ripple
    SkeletonContainer
    Avatar
    Circular ProgressBar
    FlatColorPicker
    SplitButton
    Signature
    Chip
    ChipList
    VS Code Extension
    AIPrompt
    PropertyGrid
    Sankey
    Chart Wizard
    OTP Input
    SpeechToTextButton
    InlineAIPrompt
    StockChart
    ContextMenu
    DateTimePicker
    RadialGauge
    ArcGauge
    AICodingAssistant
    +? more
    Top users last month
    Top achievements
    Rank 1
    Iron
    Iron
    Iron
    Rob
    Top achievements
    Rank 3
    Bronze
    Bronze
    Iron
    ivory
    Top achievements
    Rank 1
    Iron
    Nurik
    Top achievements
    Rank 2
    Iron
    Iron
    YF
    Top achievements
    Rank 1
    Iron
    Want to show your ninja superpower to fellow developers?
    Top users last month
    Top achievements
    Rank 1
    Iron
    Iron
    Iron
    Rob
    Top achievements
    Rank 3
    Bronze
    Bronze
    Iron
    ivory
    Top achievements
    Rank 1
    Iron
    Nurik
    Top achievements
    Rank 2
    Iron
    Iron
    YF
    Top achievements
    Rank 1
    Iron
    Want to show your ninja superpower to fellow developers?
    Want to show your ninja superpower to fellow developers?