There is an issue with the Grid

• when all columns have a width defined, and
• when the total of all column widths is less than the total width of the grid 
• will initially have the extra width distributed to them (good - not an issue)
• but when an attempt to resize a column is made, 1) every column other than the one being resized will resize to the width defined in the configuration AND 2) the column being resized will resize to take up the space left behind by the other columns becoming smaller.

Configuration for it to happen appears to be

• Resizing enabled
• Scrolling enabled
• Each column has a width defined, adding to a total width smaller than the width of the Grid's DOM element

The scenario is

1. Open the grid
2. Resize a column

Impact
Columns lose their distributed widths and the column being resized jumps away from the cursor.

An example is here:

http://dojo.telerik.com/eYUdE

Try resize the first column, you will observe the resized column growing in width and other columns losing their distributed widths. This leaves the cursor indicating an incorrect resize position.

Is there any chance this could be fixed / a work around be advised? Having the distributed column widths is this circumstance is good, but the behavior on resize is undesirable.

Having problems when using the showColumn() hideColumn() function for grids:

Why does hideColumn() function on grid scrunch up the width when enabling it?

Then when I check the checkbox to hide the first row:

It seems to scrunch the other rows to the LEFT? You demo in the DOJO doesn't do this... I was wondering if this is because I am using a hierarchical grid?

       function toggleEditing(e){
         
          var hideColumn = $(e.target).prop("checked");
          var grid = $("#grid").data("kendoGrid");
          if(hideColumn){
            grid.hideColumn(0);
          }
          else {
            grid.showColumn(0);
          }
        }

See  my Kendo UI Dojo code for behavior:
https://dojo.telerik.com/UmAgoDEs/2

Thanks!

George

  Hi

I'm using a kendoListView and a kendoPager like this :

$("#pagerLstArticle").kendoPager({
        dataSource: articles,
        pageSizes: [12, 24, 36, 48],
        messages: {
            display: "Articles {0} à {1} sur {2}"
        },
    });

I would like to adap the  kendoPager pageSizes depending on differents panels displayed or not on the screen

I can manage the kendoListView page size easily but for the kendoPager I don't know

How can I do this ?

Thank you

Isabelle

Hi!! I'm having an issue with Kendo UI JQuery.

I'm using the grid, and I have my data source defined with schema inside. All the schema fields have the property editable in false.

At some point, I need to change some of them to editable true, but I'm not able to do it so far.

I tried getting the data from the grid and updating the Datasource object manually and after that read the Datasource and refresh the grid, but is not working.

Also, try setting a completely new Datasource, and after that read the Datasource and refresh the grid, but is not working.

Also, try destroying the grid a generating a new one, but the grid never refreshes and the editable continues in false.

I see the same issue on your pages



so my question is whether there is any way to prevent this, because when there are many columns, the last borders are seriously damaged as you can see:

Since printing from the scheduler uses the current view, I was would like to make the view be 2 months.

Am trying to show multiple projects and only 30 days worth isn't quite doing it.

SIMILARLY, 

if I'm in near the end of the month, showing the Timeline Month view only shows me a few days into the future - I don't care about past days.
Is there a way to set the STARTING DATE in a month view?
IF SO, perhaps specifying an ENDING DATE is the answer to my first question (Start + 60).

Thx
Jaymer...

Hello,

We have a grid with a default grouping applied to it, and are trying to persist the expanded groups through a read operation (remote datasource).

We have been successful in persisting them through some operations using the following code:

function getExpandedGroups() {
    expandedGroups = [];
    try {
        let groupRows = $(".k-grouping-row");
        for (let i = 0; i < groupRows.length; i++) {
            let e = groupRows[i];
            let expanded = e.children[0]["ariaExpanded"];
            if (expanded === "true") {
                let groupName = $(e).find(".k-reset").text();
                let slicePos = groupName.lastIndexOf(" (");
                groupName = groupName.slice(0, slicePos);
                expandedGroups.push(groupName);
            }
        }
    }
    catch { }
    return expandedGroups;
}

function restoreExpandedGroups() {
    try {
        groupRows = $(".k-grouping-row");
        for (let i = 0; i < groupRows.length; i++) {
            let e = groupRows[i];
            let groupName = $(e).find(".k-reset").text();
            let slicePos = groupName.lastIndexOf(" (");
            groupName = groupName.slice(0, slicePos);
            if (expandedGroups.includes(groupName)) {
                attachmentTable.expandGroup(e);
            }
        }
    }
    catch { }
}

which works fine if our code calls the read event, since we can execute it before and after eg.

    let expandedGroups = getExpandedGroups();
    attachmentTable.dataSource.read().then(function () {    
        restoreExpandedGroups(expandedGroups);
    });

however, when we use any of the grid functionality like sorting on a column, there doesn't seem to be any events that we can subscribe to that occur after the grid sets the groups back to their collapsed state, and we aren't able to persist the grouping in the same way.

Are there any potential workarounds for this issue?

Thanks

Regards,

Will Douglas

Using the Kendo UI Dojo, I have the code seen at the bottom. There are also two screenshots.

If you run this, you will find that the child elements are widely spaced apart even though their own content is small.  If I change the value of item ID 1 to 10 characters, the spacing shrinks to reasonable distances (see screenshots below).  I don't understand why the parent width should affect the child widths.  Is there any way for me to correct this?

Thank you,

Tom Clark

<!DOCTYPE html>

<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/orgchart/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="https://kendo.cdn.telerik.com/themes/7.0.2/default/default-main.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <script src="https://kendo.cdn.telerik.com/2023.3.1114/js/kendo.all.min.js"></script>

    <style>
.k-card {
    border: none !important;
    background-color: inherit !important;
}

.k-orgchart-card {
    width: auto !important;
}

.k-orgchart-node-group-container {
    padding: 0 !important;
}

.k-button {
    cursor: default !important;
    outline: none !important;
}

.k-orgchart-line-v, .k-orgchart-line-h {
    color: #000000 !important;
}

.org-chart-item {
    padding: 10px 15px 10px 15px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
}

  </style>
</head>
<body>
    <div id="example">    
    <div id="orgchart"></div>

    <script>
        var data = [
            { id: 1, name: "123456789012345678901234567890", expanded: true },
            { id: 2, name: "Clevey Thrustfield", parentId: 1 },
            { id: 3, name: "Carol Baker", parentId: 1 },
            { id: 4, name: "Kendra Howell",parentId: 1 },
            { id: 5, name: "Sean Rusell",parentId: 1 },
            { id: 6, name: "Steven North", parentId: 1 },
          { id: 7, name: "Frank Furter", parentId: 1 }
        ];

        $("#orgchart").kendoOrgChart({
            dataSource: data,
          collapse: function (e) { e.preventDefault(); },
          editable: false,
          groupField: "name",
          groupHeaderTemplate: "",
          template: `<div class="org-chart-item">#: name #</div>`
        });
    </script>    
</div>
</body>
</html>

DISPLAY WHEN PARENT WIDTH IS LARGE:

DISPLAY WHEN PARENT WIDTH IS SMALL: