RadGrid In-line Edit mode

[baqi]

I am trying to do the radgrid inline edit using the following code. I having trhe following issues whose help i coudnt find on documentation.
1) After editing or inserting and clicking on save/insert image button  the row is still in edit mode .I want it to change it back to the view mode.As it happens when i click the cancel button.
2.) How can i set my own  images(inset/update/cancel) and text for the inline editing .i am using
the following code but the grid is taking default images.

<

EditColumn ButtonType="ImageButton" CancelImageUrl="../../../../Images/16x16/Cancel.png" EditImageUrl="../../../../Images/16x16/Save.png" InsertImageUrl="../../../../Images/16x16/Save.png" UpdateImageUrl="../../../../Images/16x16/Save.png"

InsertText="Insert record" UpdateText="Update record" UniqueName="EditCommandColumn1" CancelText="Cancel edit">

</EditColumn>

3.)when i switch to edit mode , the textboxes for editing are expanding  and increasing the column width even though i am giving a fixed sixe "500px" for grid.
 i need a fix size for the textboxes so that the column width remains same when i am in edit or view mode.


Here is my code for the grid

<div style="width:500px;">

<telerik:RadGrid ID="RadGrid1" Skin="Outlook" GridLines="None" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemInserted="RadGrid1_ItemInserted"

AllowAutomaticDeletes="True" AllowAutomaticInserts="True" Width="97%" PageSize="20" OnUpdateCommand="RadGrid1_UpdateCommand" OnInsertCommand="RadGrid1_InsertCommand"

AllowAutomaticUpdates="True" AllowPaging="True" AutoGenerateColumns="False" CommandItemDisplay="Top"

>

<PagerStyle Mode="NextPrevAndNumeric" />

<MasterTableView Width="100%" DataKeyNames="ows_ID" AllowSorting="true"

CommandItemDisplay="Top" AllowPaging="true" HorizontalAlign="NotSet" AutoGenerateColumns="False">

<CommandItemSettings AddNewRecordText="Add" AddNewRecordImageUrl="../../../../Images/addcontrol.gif" />

<Columns>

<telerik:GridEditCommandColumn EditImageUrl="../../../../Images/16x16/Edit.png" ButtonType="ImageButton" UniqueName="EditCommandColumn">

<ItemStyle CssClass="MyImageButton" />

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="ows_ID" HeaderText="ID" ReadOnly="True" SortExpression="ows_ID"

UniqueName="ID" Visible="False">

<HeaderStyle Width="20px" ForeColor="Silver" />

<ItemStyle ForeColor="Silver" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn ShowSortIcon="true" DataField="ows_Section" HeaderText="Section" SortExpression="ows_Section"

UniqueName="Section">

<ItemStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ows_Pod" HeaderText="Pod" SortExpression="ows_Pod"

UniqueName="Pod">

<ItemStyle Width="50px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ows_Cube" HeaderText="Cube" SortExpression="ows_Cube"

UniqueName="Cube">

<ItemStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ows_SeatingArea" ReadOnly="true" HeaderText="Seating Area" SortExpression="ows_SeatingArea"

UniqueName="SeatingArea">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings >

<FormCaptionStyle ></FormCaptionStyle>

<EditColumn ButtonType="ImageButton" CancelImageUrl="../../../../Images/16x16/Cancel.png" EditImageUrl="../../../../Images/16x16/Save.png" InsertImageUrl="../../../../Images/16x16/Save.png" UpdateImageUrl="../../../../Images/16x16/Save.png"

InsertText="Insert record" UpdateText="Update record" UniqueName="EditCommandColumn1" CancelText="Cancel edit">

</EditColumn>

<FormTableButtonRowStyle HorizontalAlign="Right" ></FormTableButtonRowStyle>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</div>


Thanks
Abdul

[Princy]

Hi Abdul,

Try the following code snippet.

Code snippet to close the edit form:

RadGrid1.MasterTableView.ClearEditItems();

Code snippet to close the Insert form:

RadGrid1.MasterTableView.IsItemInserted = false;

Thanks
Princy.

[baqi]

Hi Princy



grid.MasterTableView.IsItemInserted = false;

 

grid.MasterTableView.EditMode = false;

I tried using these properties inside the methods RadGrid_InsertCommand  and RadGrid_UpdateCommand respectively.It didnt work out for me.In which method can i use these properties so than after each edit or add operation the row automatically change to view mode.

 

grid.MasterTableView.EditMode = false;

 

[Princy]

Hi,

You can try the above given code snippet in the Insert/UpdateCommand Event.

CS:

 protected void RadGrid1_InsertCommand(object source, GridCommandEventArgs e)
    {
        //code for performing Insert operation
        //...
        e.Item.OwnerTableView.IsItemInserted = false;
   }

protected void RadGrid1_UpdateCommand(object source, GridCommandEventArgs e)
    {
        //code for performing Update operation
        //...
        RadGrid1.MasterTableView.ClearEditItems();
   }

Thanks
Princy.

[stone]

I got same problem..
and when I debug it..I even didn't see it touch my break point in page_Load.
and any button in that page is not work.
when I click a button outside the RadGrid..it give me a blank page..the Page_load is not touched also.

after retest,,I found the problem..
there are illegal characters such as < in the single input box

[msulis]

Looks like you got an answer to #1, how about #3?  I'm having the same problem.

When I click edit, the inline textboxes appear, and function fine, but they increase the width of the grid so that scrollbars appear, which is not the desired effect. I'd like to keep the columns exactly the same size when in edit mode.

[Pavlina]

Hello,

Can you please check whether setting TableLayout = Fixed for your grid and explicitly widths for your columns (through their HeaderStyle -> Width property) alleviates the unwanted effect?

Give this suggestion a try and let me know if it works for you.

All the best,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[msulis]

Thanks Pavlina - that worked perfectly. I didn't know which properties to look for - I appreciate the help!

Michael

[Denis MORIELLI]

Hi,
that's what I need, works well... But i needed to explicitly set the column (the TextBox) width in edit mode.
This widths between Edit mode and Normal mode must be different in my case.
This is my way :
if (e.Item is GridDataInsertItem && e.Item.IsInEditMode)
{
    TextBox editedBox = (TextBox)((GridDataInsertItem)e.Item["column"].Controls[0];
    editedBox.Width = Unit.Pixel(25);
}

Hope this help

[Kal Pag]

Hi all experts here,
I am looking for a solution for #2 myself. Any insight would be appreciated. I am sure its some property, but I cant find it anywhere.

I want the edit button to display the default image that comes with the RadGrid (the pencil) but I need a custom css styled button to display for update and cancel.
It would perfect, if I can use cancel and update/insert buttons from the "EditForm" layout  of the RadGrid.

Please help.

Thanks,
Kal.

[Kal Pag]

Can someone please help me out here?

Thanks in advance,
Kal.

[Pavlina]

Hello Kal,

You can specify the update and cancel image urls directly through the GridEditCommandColumn tag. See this help topic for details:
Customizing the action buttons in Telerik RadGrid

Kind regards,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Kal Pag]

Hi.
Thanks for the response. I dont want to use images(.jpg, .png, gif). I want to use css enabled buttons. Is there a way you can do this?

Let me know.
Thanks,
Kal.

[Pavlina]

Hi Kal,

You could set CssClass property of the asp:Button to rgEdit, rgDel, rgUpdate or rgCancel (Css classes of the buttons related with editing).

Additionally, I suggest you review the following forum thread which elaborates on similar subject.
http://www.telerik.com/community/forums/aspnet-ajax/grid/using-csssprites-in-gridhyperlinkcolumn.aspx

I hope this helps.

Greetings,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[STEPHEN]

From another site, credit to Chris May at chrismay.org. Hopefully yhis will help everyone struggling with the edit fields being larger than the regular fields.

A developer wanted to customize his “edit” form with a telerik rad grid, and we found it less than simple to change the textboxes and other editcontrols to make them more narrow, and/or other customizations.

 

I did some research and came across a few different technique for doing this that I am going to share with everyone.

 

Template Columns

The first option, which is the one he used because it is the easiest, is to convert your columns to “template columns.”  Converting columns changes:

 

<telerik:GridBoundColumn DataField="EmployeeEmail" DataType="System.Int32" HeaderText="EmployeeEmail"

SortExpression="EmployeeEmail" UniqueName="EmployeeEmail" />

 

To this:

 

<telerik:GridTemplateColumn DataField="EmployeeEmail"

    HeaderText="EmployeeEmail" SortExpression="EmployeeEmail"

    UniqueName="EmployeeEmail">

    <EditItemTemplate>

        <asp:TextBox ID="EmployeeEmailTextBox" runat="server"

            Text='<%# Bind("EmployeeEmail") %>'></asp:TextBox>

    </EditItemTemplate>

    <ItemTemplate>

        <asp:Label ID="EmployeeEmailLabel" runat="server"

            Text='<%# Eval("EmployeeEmail") %>'></asp:Label>

    </ItemTemplate>

</telerik:GridTemplateColumn>

 

 

As you can see, this gives you control over the actual textbox item that will be displayed when you are in edit mode.

 

But using template columns can also be a bit of a pain, because you losing some of the simplicity that you had before when you simply allowed the rad grid to deal with the details of the display/edit cell items.  This also complicates things when you try to do anything in the ItemDataBound or ItemCreated events on the rad grid.  You can’t just grab the column, you have to dig deeper, looking for the contained child controls to find your actual edit control.

 

ItemDataBound

 

    Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) HandlesRadGrid1.ItemDataBound

        If TypeOf e.Item Is GridEditableItem And e.Item.IsInEditMode Then

            Dim editItem As GridEditableItem = e.Item

            If TypeOf editItem.Item("EmployeeId").Controls(0) Is TextBox Then

                CType(editItem.Item("EmployeeId").Controls(0), TextBox).Width = 30

            End If

        End If

    End Sub

 

 

In this example, I am setting the width of the EmployeeId textbox to only 30px.

 

 

CreateColumnEditor

 

    Protected Sub RadGrid1_CreateColumnEditor(ByVal sender As Object, ByVal e AsTelerik.Web.UI.GridCreateColumnEditorEventArgs) Handles RadGrid1.CreateColumnEditor

        If TypeOf e.ColumnEditor Is GridTextBoxColumnEditor Then

            If e.Column.UniqueName = "FirstName" Then

                CType(e.ColumnEditor, GridTextBoxColumnEditor).TextBoxStyle.Width = 30

                CType(e.ColumnEditor, GridTextBoxColumnEditor).TextBoxControl.Style.Add("text-align", "right")

            End If

        End If

    End Sub

 

 

I believe this event is fired when the grid is creating the edit columns.  You hook into this event, and then modify the textboxstyle in order to change the look of the edit control.

 

 

Defined Column Editor

 

You can achieve the same results as in CreateColumnEditor without writing any code if you drop a GridTextBoxColumnEditor on your page (outside of the RadGrid) like so:

 

<telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server">

    <TextBoxStyle Width="50px" />

</telerik:GridTextBoxColumnEditor>

 

And then in your column you specify the ID of the editor you want to use, like this:

 

<telerik:GridBoundColumn DataField="UserId" DataType="System.Int32" HeaderText="UserId"ColumnEditorID="GridTextBoxColumnEditor1"

    SortExpression="UserId" UniqueName="UserId">

</telerik:GridBoundColumn>

 

[Pavlina]

Hi STEPHEN,

Thank you for sharing your findings with us - thus you can help other community members which search similar type of functionality.

Kind regards,
Pavlina
the Telerik team