[Solved] Grid width to be set on ClientSide

[Nabeel]

I have a very basic problem in setting the width of the grid on clientside. The reason i need to set the width on client side is to decide width based on screen resolution. Everything is fine with this and I can set the width by this code piece

function gridCreated()
{

var

 

screenDivHeader = (l_screenWidth - 17);

 

 

sender.get_element().style.width = l_screenWidth +

"px";

 

 

sender.get_element().getElementsByTagName(

"div")[0].style.width = screenDivHeader + "px";

 

 

sender.get_element().getElementsByTagName(

"div")[1].style.width = l_screenWidth + "px";
}

This is working perfectly and i have no problems with that. The problem is when we have no scrollbars and grid is less than the screen width. Now i want to shrink the grid to its orginal contents and dont want it to be 100% expanded. When i do that I got the header and table of the grid out of allignment as attached in the screenshot. Please note, if I remove this line from the master page

 

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

I used this javascript code to shrink the grid to original contents, this is metnieond in your forums.

sender.MasterTableView._element.style.width =

"";

 

 

sender.get_element().style.width = sender.MasterTableView._element.offsetWidth +

"px";

 

2) Second problem is that when i dont set the grid's width on server side and only set it on client side and if the scrollbar appears due to client side width setting, the frozen columns wont work. Please give me a workaround for that as well.

Your immediate response is highly appreciated.

Thanks and Regards

[Veli]

Hi Nabeel,

Try calling repaint() after setting the new grid size:

function gridCreated()
{
    var screenDivHeader = (l_screenWidth - 17);

    sender.get_element().style.width = l_screenWidth + "px";
    sender.get_element().getElementsByTagName("div")[0].style.width = screenDivHeader + "px";
    sender.get_element().getElementsByTagName("div")[1].style.width = l_screenWidth + "px";

    sender.repaint();
}

I am not sure I understand the part with removing the DOCTYPE from your document, but omitting to include a doctype in your HTML doc will have the browser render your page in quirksmode and your layout may break.

Veli
the Telerik team

[Ragu]

We are trying to set the width of the columns, based on the screen resolution through the OnGridCreated client event.

But what we set through the JS doesn't reflect on the grid when its rendered. Tried repaint() after setting the individual columns. This seems like an issue.

Can you check and provide us samples or ways to set the column width from the client side?

Thanks,
Ragu...

[Venelin]

Hello Ragu,

If you want to resize grid's columns and the grid itself with them you can use the following script:

JavaScript:

function RadGrid1_GridCreated(sender, eventArgs) {
   if(/*screen resolution is...*/){
      sender.get_element().style.width = 1000+ 'px';
   } else {
      sender.get_element().style.width = 1500+ 'px';
   }
}

This will resize the grid and columns widths will adjust to fit their container, but this solution is convenient only if all of your columns have the same widths. If your columns have different widths you can use another approach.

JavaScript:

function RadGrid1_GridCreated(sender, eventArgs) {

    var gridWidth = 0;

    gridWidth += setWidth(sender, 0, 70);
    gridWidth += setWidth(sender, 1, 90);
    gridWidth += setWidth(sender, 2, 110);
    gridWidth += setWidth(sender, 3, 90);

    sender.get_element().style.width = gridWidth + 17 + 'px';
}

function setWidth(sender, index, width) {
    var headers = sender.get_masterTableView().get_columns(),
        cols = sender.get_masterTableView().ColGroup.Cols,
        columnsCount = headers.length;

    headers[index].get_element().style.width = width + 'px';
    cols[index].style.width = headers[index].get_element().offsetWidth + 'px';
    return parseInt(cols[index].style.width);
}

The setWidth function takes three arguments - the sender object, the index of the column that will be resized and the column width. Then we set widths to the headers and the col elements in the colgroup. The function returns the width of the corresponding col element in order to use it to calculate the total width of the grid. In RadGrid1_GridCreated event handler we call setWidth function and after that we adjust the grid's width.

I hope this helps.

Regards,
Venelin
Telerik