This is a migrated thread and some comments may be shown as answers.

Grid inline Add, Delete. Hijack edit column. Help!

2 Answers 131 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 10 Feb 2012, 12:08 AM

My requirements are as follows:

A grid with inline add capability.
A column with delete capability.
No edit capability. In line or otherwise.

My problem is twofold. One it seems the only way to get the Insert/Cancel buttons to show up on inline add is to have an edit column defined. If this is not accurate please let me know.

The second problem is once I have a edit column the add works. But I do not want to edit. I have figured out how to hide the edit button but an empty column doesn't satisfy the customer either.

I have figured out how to direct the edit column to my delete function.... but my only problem remaining is I cannot change the edit pencil sprite to be the delete X sprite or delete Trashcan sprite.. In fact what I get is both icons overlaid on top of one another. Perhaps there is a property I am unaware of to remove the edit pencil image?

Please help with either how to get the correct image to display in my hijacked edit column or if there is a simpler approach to meet my requirements that I am unaware of.

Here is my code:

<telerik:RadGrid ID="Grid" runat="server" AutoGenerateColumns="False"
       CellSpacing="0" GridLines="None" Skin="Outlook" OnNeedDataSource="GetDataSource"
       AllowAutomaticDeletes="True" AllowAutomaticInserts="True" OnItemCommand="GridOnCommand"
       OnPreRender="GridPreRender">
       <MasterTableView IsFilterItemExpanded="True" CommandItemDisplay="Top" EditMode="InPlace">
           <CommandItemSettings ShowAddNewRecordButton="true" AddNewRecordText="Add Record" />
           <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
           </RowIndicatorColumn>
           <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
           </ExpandCollapseColumn>
           <Columns>
               <telerik:GridBoundColumn FilterControlAltText="Filter Col1 column" HeaderText="Col1"
                   UniqueName="Col1" DataField="Col1">
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn FilterControlAltText="Filter Col2 column" HeaderText="Col2"
                   UniqueName="Col2" DataField="Col2">
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn FilterControlAltText="Filter Col3 column" HeaderText="Col3"
                   UniqueName="Col3" DataField="Col3">
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn FilterControlAltText="Filter Col4 column" HeaderText="Col4"
                   UniqueName="Col3" DataField="Col4">
               </telerik:GridBoundColumn>
               <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditColumn">
               </telerik:GridEditCommandColumn>
           </Columns>
       </MasterTableView>
   </telerik:RadGrid>

Code Behind:


protected void GridPreRender(object sender, EventArgs e)
       {
           foreach (GridDataItem item in Grid.MasterTableView.Items)
           {
               ImageButton btn = (ImageButton)item["EditColumn"].Controls[0];
               btn.CommandName = "Delete";
               btn.CssClass = "rgDel";
               btn.ToolTip = "Delete";
           }
       }

See the attached file for a picture of how this is currently outputting. The add in line column is expanded.

2 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 10 Feb 2012, 06:03 AM
Hello Mike,

One suggestion is you can access the EditColumn and dynamically change it as shown below. Try the following code.
c#:
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
 if (e.Item is GridDataItem)
 {
  GridDataItem item = (GridDataItem)e.Item;
  ImageButton img = (ImageButton)item["EditColumn"].Controls[0];
  img.ImageUrl = "~/Images/Delete.gif";
  img.CommandName = "delete";
 }
}

-Shinu.
0
Mike
Top achievements
Rank 1
answered on 10 Feb 2012, 05:12 PM
Thanks that worked. I read another forum post on here about custom images needing to be added to the Telerik CSS classes and I didnt want to go down that route. But it looks like that wasn't necessary. Thanks for your help and pro tip!
Tags
Grid
Asked by
Mike
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Mike
Top achievements
Rank 1
Share this question
or