How to set the size of an editable item?

[Kai]

Sorry, I'm lost, I think I've tried all options and read pdf and so on but I'm still not getting it right:
I've set my RadGrid to inline edit mode, Tablelayout = fixed. Now I have a GridDateTimeColumn. I've set the width to 100px using CSS. This works fine for both display and edit, but when I go to edit mode the DateItem does not fit to the column. It's larger and so the calendar pickup does not display. How do I set the size of the editable item so that it fits to its column?
Thanks

[Princy]

Hello Kai,


I am not quite sure about your requirement. I suppose you want to increase the height in edit mode. If that is the requirement, here is the code that I tried which worked as expected.
C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem item = (GridEditableItem)e.Item;
            item.Style["height"] = "110px";
        }
}

Thanks,
Princy.

[Kai]

Hi Princy,
thanks for you reply, but I want to set the width, not the height. And I'd prefer to set it in the ascx-page instead of in the backend code if that's possible. I've made an example screenshot, see below. In Read Mode it opens in 100px width, that's fine. When I set TableLayout to 'Fixed' it keeps the size at 100px, that's also fine. But the datepicker at the right do not appear because within the 100px column the editable item is larger. This could be seen in tablelayout = Auto.
So what I want: Have a date column with 100px width and when I go to edit mode the datepicker should be displayed (so that the editable item might be resized to something around 70px or so). And if possible without backend coding ;-) but if that's the only way that's also fine.
Thanks

[Pavlina]

Hi Kai,

To achieve your goal you can use the code snippet below:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem item = e.Item as GridEditableItem;
            RadDatePicker picker = (RadDatePicker)item["DateTimeColumnUniqueName"].Controls[0];
            picker.Width = Unit.Pixel(70);
        }
    }

Kind regards,
Pavlina
the Telerik team

[Kai]

Brillant. Thanks, Pavlina!