[Solved] How do I customize the Update and Cancel Image?

[Andy Byrne]

                            <telerik:RadGrid runat="server" AllowPaging="True" ID="grdAddedFlyerItems" OnNeedDataSource="grdAddedFlyerItems_NeedDataSource"
                                Width="375px" OnRowDrop="grdAddedFlyerItems_RowDrop" AllowMultiRowSelection="true"
                                PageSize="7" AutoGenerateColumns="false">
                                <MasterTableView DataKeyNames="ItemID" Width="100%" EditMode="InPlace">
                                    <EditFormSettings>
                                        <EditColumn UniqueName="EditCommandColumn1" ButtonType="imageButton" CancelText="Cancel this action"
                                            UpdateText="Save changes" EditText="Edit record" CancelImageUrl="~/App_Themes/Default/Buttons/notapprovedicon.gif"
                                            UpdateImageUrl="~/App_Themes/Default/Buttons/saveicon.gif">
                                        </EditColumn>
                                    </EditFormSettings>
                                    <Columns>
                                        <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn"
                                            EditImageUrl="~/App_Themes/Default/Buttons/editicon.gif">
                                            <ItemStyle CssClass="nowrap" />
                                            <HeaderStyle Width="10px" />
                                        </telerik:GridEditCommandColumn>
                                        <telerik:GridButtonColumn ButtonType="ImageButton" ConfirmText="Remove this item from added items?"
                                            CommandName="RemoveItem" Text="Remove Item" UniqueName="DeleteColumn" ImageUrl="~/App_Themes/Default/Buttons/recyclebin_small.gif">
                                            <HeaderStyle Width="10px" />
                                        </telerik:GridButtonColumn>
                                        <telerik:GridBoundColumn DataField="ItemCompany" HeaderText="Prefix" SortExpression="ItemCompany"
                                            UniqueName="ItemCompany" ReadOnly="true">
                                            <HeaderStyle Width="35px" />
                                            <ItemStyle CssClass="nowrap" />
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn HeaderText="Item Nbr" SortExpression="ItemNumber" DataField="ItemNumber"
                                            UniqueName="ItemNumber" ReadOnly="true">
                                            <HeaderStyle Width="65px" />
                                            <ItemStyle CssClass="nowrap" />
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="Description" HeaderText="Description" SortExpression="Description"
                                            UniqueName="Description" ReadOnly="true">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridNumericColumn DataField="Price" HeaderText="Price" DataFormatString="{0:C}"
                                            SortExpression="Price" UniqueName="Price" />
                                    </Columns>
                                    <NoRecordsTemplate>
                                        <div style="height: 30px; cursor: pointer;">
                                            No items to view</div>
                                    </NoRecordsTemplate>
                                    <PagerStyle Mode="NumericPages" PageButtonCount="4" />
                                </MasterTableView>
                                <ClientSettings AllowRowsDragDrop="True">
                                    <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
                                    <ClientEvents OnRowDropping="onRowDropping" />
                                </ClientSettings>
                            </telerik:RadGrid>

It works fine if I take out EditForms="InPlace" in the MasterTableView but it seems like there should be a way to customize these icons easily when using InPlace edit mode.

Thanks,
Andy

[Sebastian]

Hello Andy,

With InPlace editing you can specify the update and cancel image urls directly through the GridEditCommandColumn tag. See this help topic for details:

http://www.telerik.com/help/aspnet-ajax/gridcustomizeactionbuttons.html

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Byrne]

Thank you that worked nicely.
 
I'm having another problem: the ENTER and ESC keys aren't working in edit mode.  I do have another button in the form (outside of the grid) that I focus when the user first hits the page, but I would like the ENTER and ESC keys to work for Update and Cancel.

I already blocked the Enter key using info from this thread: http://www.telerik.com/community/forums/aspnet-ajax/grid/enter-key-hit-on-the-textbox-in-the-radgrid.aspx

Any idea how to make this work?

Thanks,
Andy

[Sebastian]

Hello Andy,

The [ENTER] and [ESCAPE] keys should work as expected as long as you focus the grid first  with key combination as specified on this online demo of the product:

http://demos.telerik.com/aspnet-ajax/grid/examples/client/keyboardnavigation/defaultcs.aspx

You can verify that for yourself - for example perform edit and update operation, then focus the grid with the key combination, switch item in edit mode, focus the Update button and press [ENTER] or hit [ESCAPE] to exit edit mode.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Byrne]

Well, that example isn't working for me either... I pressed the enter key when updating a row of the demo you linked and nothing happened?  The escape key did work properly... I'm using IE version 8.0.6001.18702 if this makes any difference.

To be specific, I'm really only interested in the enter and escape keys working when editing a single row of a grid.  I want the grid to be "selected" when the user hits the edit button on a particular column (I'm assuming this already happens but just want to be sure).

Thanks,
Andy

[Sebastian]

Hi Andy,

Can you please confirm that you focused the Update LinkButton first (tabbing in the edit form) before pressing the [Enter] key from the keyboard? This should do the trick. I tested that under IE 7/8 and FireFox 3.x browser and it worked as expected.

Regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Byrne]

Yes, that works.  Also the ESC key works without having to highlight the cancel field.

What I'm looking for is the ability to save the row without them having to highlight the update button first (just like the ESC key from the example).

[Sebastian]

Hello Andy,

This is not supported out-of-the-box.

If you would like to trigger update command on [Enter] key press without the Update button being focused, you will need to intercept the OnKeyPress client event of the grid, check whether the key code is 13 (as illustrated in the forum thread you referenced before) and invoke the update command explicitly through the fireCommand method from the client API.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.