Hello Shan,
There is no easy way to achieve this in the current version of TPC. We have identified this as an improvement and will include it in a future release for The Portal Connector.
You can replace the default icon buttons with a text link or a button by following the steps below:
- Open the page with your grid in Sitefinity Control panel. Open grid widget designer.
- Go into "Advanced" designer settings. Add CSS class in the CssClass field (example: "myCustomGrid"). Go back to "Simple" design mode.
- Modify your custom grid template. If you are not using a custom template and no template selected you need to create one. Select a template from the list and click "Edit selected template". Select and copy the code inside of the code editor. Click 'Cancel' to get back to the Widget Designer. In the Designer click "Create new template", paste the code into the blank editor, and enter a unique template name. Something like "My Custom Grid Template".
- Find the <script> block in the code and paste the following code after the predefined functions. Replace the table class with the one you setup in the first step
$( document ).ready(function() {
var col0_Width = "40px"; // Edit button column. Adjust this if using text different from 'Edit'
var col1_Width = "50px"; // Delete button column. Adjust this if using text different from 'Delete'
var header_table = $(".myCustomGrid").find("table[id$='Header']");
var data_table = $("#"+$(".myCustomGrid").find("table[id$='Header']").attr("id").replace("_Header",""));
header_table.find("colgroup col").eq(0).css('width',col0_Width);
header_table.find("colgroup col").eq(1).css('width',col1_Width);
data_table.find("colgroup col").eq(0).css('width',col0_Width);
data_table.find("colgroup col").eq(1).css('width',col1_Width);
});
- Next find the GridButtonColumn's with the Edit and the Delete buttons. Change the ButtonType property for both from "ImageButton" to "LinkButton" (or "PushButton" if you want a button generated on the screen instead of a link ) and add Text property to generate the button text. You can set the Text to whatever text is required (i.e. "Edit", "Modify", "Update", "Delete", "Remove", "Destroy").
Alternatively, you can find and replace the following code:
<Columns>
<telerik:GridButtonColumn UniqueName="btnEdit" ButtonType="ImageButton" CommandName="Edit" />
<telerik:GridButtonColumn UniqueName="btnDelete" ConfirmText="<%$Resources:TPC_PageWidgetFrontEnd_Resources,PageWidgetFrontEnd.DeleteThisRecord.Title %>" ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" ConfirmDialogHeight="100px" ConfirmDialogWidth="220px" />
</Columns>
with
<Columns>
<telerik:GridButtonColumn UniqueName="btnEdit" ButtonType="LinkButton" CommandName="Edit" Text="Edit" ></telerik:GridButtonColumn>
<telerik:GridButtonColumn UniqueName="btnDelete" ConfirmText="<%$Resources:TPC_PageWidgetFrontEnd_Resources,PageWidgetFronEnd.DeleteThisRecord.Title %>" ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="LinkButton" CommandName="Delete" Text="Delete" ConfirmDialogHeight="100px" ConfirmDialogWidth="220px" ></telerik:GridButtonColumn>
</Columns>
- Save changes to template. Save changes to the grid. Save the page as a draft and preview. If the buttons look "cut off" or if there is too much space around them go back to editing the grid template and modify the
col0_Width and
col1_Width variables in the <script> block to achieve the desired look.
Regards,
Boris
Last modified on 07 Aug 2015 20:08 by Missing user