1

I'm currently evaluating the demo version of ShieldUI and have been playing with the grid control. I've bound to a local datasource and am trying to get column resizing working properly, but when I attempt to resize individual columns, there is a large jump as the column I am resizing is resized much larger and all the other columns are sized smaller. I'm guessing I have a CSS issue as the example on the ShieldUI site only changes the size between two adjacent columns, but can't figure out what I need to change in my style rules to get the same behavior as the example. Here's the code I'm using, with no additional styles defined other than linking to the full minimized ShieldUI CSS:

$("#grid1").shieldGrid({
    dataSource: {
        data: HRDataset
    },
    paging: {
        pageSize: 10
    },
    sorting: {
        multiple: false,
        allowUnsort: false
    },
    columns: [
        { field: "Employee_Name", title: "Employee Name", width: 30 },
        { field: "EmpID", title: "ID", width: 10 },
        { field: "Salary", title: "Salary", width: 20 },
        { field: "Position", title: "Position", width: 30 },
        { field: "State", title: "State", width: 10 },
        { field: "Zip", title: "Zip", width: 15 },
        { field: "Sex", title: "Sex", width: 10 },
        { field: "MaritalDesc", title: "Married", width: 10 }
    ],
    scrolling: true,
    resizing: true
});
John Kugelman
  • 349,597
  • 67
  • 533
  • 578
denkom
  • 31
  • 2

1 Answers1

1

The following term must be added scrollable: true

Bob G
  • 11
  • 1
  • 2
    You might increase the apparent helpfulness of your post by adding an explanation on why that helps and how it works and how it exactly to do that. Compare [answer]. – Yunnosch Dec 31 '22 at 16:53