Best Fit/Resize Columns and have specific Columns stay fixed widths

[Ron Weingarten]

Hello,

I am currently attempting to design a RadGrid with GridBoundColumns and GridButtonColumns. Obviously the button sizes will never change since the images will always be the same.

My issue is when resizing columns with the Best Fit option in the context menu of the RadGrid, or when resizing any column in general, the GridButtonColumns change width size when I do not want them to ever change width size.  Is there a way to Override the Best Fit and Resize functionality of the grid to not include specific columns in its recalculations, or is there a better way of handling this?

I have tried setting the HeaderStyle width to a specific size, as well as ItemStyle width, but they are always being overwritten.  I've also made the GridButtonColumns Resizable="false" with a TableLayout="Fixed" and the width of the MasterTableView is set to be a specific size so the grid does not grow or contract from left to right.  I am running the most recent version of RadControls for ASP.NET AJAX, as of 8/13/2013.

Thank you in advance for your assistance.

[Galin]

Hello Ron,

To achieve the desired appearance you should enable the Scrolling or ResizeGridOnColumnResize feature. In the attached file you can find a sample web site, which demonstrate this behavior.

I hope this helps.

Regards,
Galin
Telerik

[Ron Weingarten]

Hello,

Not exactly what I had planned on.  I wanted to have the width of the table always the same, as well as specific columns (button columns which don't need to resize).  Ended up figuring out a solution that re-sizes after a re-size.

Here is the code I added into the telerik:RadCodeBlock at the top of the page:

var inResizedResize = false;
function columnResized(sender, eventArgs) {
    if (!inResizedResize) {
        inResizedResize = true;
        var masterTableView = sender.get_masterTableView();
        var uniqueName = eventArgs.get_gridColumn().get_uniqueName();
        var editColumn = masterTableView.getColumnByUniqueName("EditCommand"); // 4th to last column
        if (editColumn != null) {
            var editColumnIndex = editColumn.get_element().cellIndex;
            editColumn.set_resizable(true);
            masterTableView.resizeColumn(editColumnIndex, 30);
            editColumn.set_resizable(false);
        }
        var statusColumn = masterTableView.getColumnByUniqueName("StatusCommand"); // 3rd to last column
        if (statusColumn != null) {
            var statusColumnIndex = statusColumn.get_element().cellIndex;
            statusColumn.set_resizable(true);
            masterTableView.resizeColumn(statusColumnIndex, 30);
            statusColumn.set_resizable(false);
        }
        var printColumn = masterTableView.getColumnByUniqueName("PrintCommand"); // 2nd to last column
        if (printColumn != null) {
            var printColumnIndex = printColumn.get_element().cellIndex;
            printColumn.set_resizable(true);
            masterTableView.resizeColumn(printColumnIndex, 30);
            printColumn.set_resizable(false);
        }
        var deleteColumn = masterTableView.getColumnByUniqueName("DeleteCommand"); // last column
        if (deleteColumn != null) {
            var deleteColumnIndex = deleteColumn.get_element().cellIndex;
            deleteColumn.set_resizable(true);
            masterTableView.resizeColumn(deleteColumnIndex, 30);
            deleteColumn.set_resizable(false);
        }
        inResizedResize = false;
    }
}

and here is what I put into the  ClientSettings tag of the telerik:RadGrid: 

<ClientEvents OnColumnResized="columnResized" />

Worked like a charm.  Had a problem initially where it would lag out because it would re-size over and over, that's why I added the "inResizedResize" bit to test if I was inside the function working on the re-size already.