Issue with Template Column and Hyperlink

[Lynn]

I am trying to construct something similar to (but different from) one of your demos located in https://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandwindow/defaultcs.aspx?product=window , but am having issues.

When I follow (or at least think I am following) the demo code and reproduce it as best I can for my use, the template column always comes up disabled somehow and there is no activity when I click on it. A screen capture of the resulting grid is attached.

My applicable code is shown in the snippets below.  Any pointers you can give me would be appreciated.  Obviously I've gotten something really wrong.  The object of my code is to create a column that, when clicked, executes a javascript function called enterit(recno) but right now the code is trying to execute the ShowEditForm function (but I don't really want it to display an edit form within the grid).

Javascript functions are:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function enterit(recno) {
                document.getElementById('<%= K.ClientID%>').value = recno;
                document.getElementById('<%= KI.ClientID%>').value = recno;
                document.getElementById('<%= KII.ClientID%>').value = recno;
                document.getElementById('<%= M.ClientID%>').value = "Y";
                document.getElementById('<%= MI.ClientID%>').value = "N";
                document.getElementById('<%= MII.ClientID%>').value = "N";
                document.forms["form1"].submit();
            }

            function makeNew(sender, eventArgs) {
                document.getElementById('<%= HiddenField1.ClientID%>').value = "myTarget;
                document.getElementById('<%= K.ClientID%>').value = "0";
                document.getElementById('<%= KI.ClientID%>').value = "0";
                document.getElementById('<%= KII.ClientID%>').value = "0";
                document.getElementById('<%= M.ClientID%>').value = "N";
                document.getElementById('<%= MI.ClientID%>').value = "N";
                document.getElementById('<%= MII.ClientID%>').value = "N";
                document.forms["form1"].submit();
            }

            function ShowEditForm(id, rowIndex) {
                var grid = $find("<%= RadGrid1.ClientID %>");
                var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
                grid.get_masterTableView().selectItem(rowControl, true);
                alert("My row's id value=" + id);
                //window.radopen("EditForm_csharp.aspx?EmployeeID=" + id, "UserListDialog");
                return false;
            }

        </script>
    </telerik:RadCodeBlock>
</asp:Content>

The grid/template column is defined as:

<telerik:RadGrid ID="RadGrid1" runat="server" Width="99.7%" AutoGenerateColumns="false" AllowPaging="false">
                <MasterTableView AutoGenerateColumns="False" DataKeyNames="MAB" ClientDataKeyNames="MAB" Width="100%" >
                    <Columns>

                        <telerik:GridTemplateColumn UniqueName="TemplateEditColumn">
                            <ItemTemplate>
                                    <asp:HyperLink ID="EditLink" runat="server" Text="Edit"></asp:HyperLink>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>

The RadGrid1_ItemCreated is:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        HyperLink editLink = (HyperLink)e.Item.FindControl("EditLink");
        editLink.Attributes["href"] = "javascript:void({0});";
        editLink.Attributes["onclick"] = String.Format("return ShowEditForm('{0}');", e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["MAB"], e.Item.ItemIndex);
    }
}

The grid is programmatically defined in Page_Init as shown below.  Please ignore the hypercolumn defined programmatically -- that is what I trying NOT to use.  I just haven't removed it yet.

protected void Page_Init(object sender, System.EventArgs e)
{
        GridHyperLinkColumn hypercolumn = null;
        GridBoundColumn boundcolumn = null;
        GridTemplateColumn tempcolumn = null;

        RadGrid1.EnableViewState = false;
        RadGrid1.NeedDataSource += new Telerik.Web.UI.GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource);

        RadGrid1.ID = "RadGrid1";
        RadGrid1.PageSize = 15;
        RadGrid1.AllowPaging = true;
        RadGrid1.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;
        RadGrid1.AutoGenerateColumns = false;
        RadGrid1.AllowFilteringByColumn = false;
        RadGrid1.ExportSettings.ExportOnlyData = true;
        RadGrid1.ExportSettings.IgnorePaging = true;
        RadGrid1.ExportSettings.HideStructureColumns = true;
        RadGrid1.ExportSettings.OpenInNewWindow = true;
        RadGrid1.MasterTableView.CommandItemSettings.ShowExportToCsvButton = false;
        RadGrid1.MasterTableView.CommandItemSettings.ShowExportToExcelButton = false;
        RadGrid1.MasterTableView.CommandItemSettings.ShowExportToPdfButton = false;
        RadGrid1.MasterTableView.CommandItemSettings.ShowExportToWordButton = false;
        RadGrid1.MasterTableView.CommandItemSettings.ShowAddNewRecordButton = false;
        RadGrid1.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.None;

        RadGrid1.MasterTableView.DataKeyNames = new string[] { "MAB" };

        hypercolumn = new GridHyperLinkColumn();
        hypercolumn.HeaderText = "Edit";
        hypercolumn.UniqueName = "MAB";
        hypercolumn.Text = "<img border=\"0\" alt=\"View\" src=\"../Icons/pencil_16.png\" />";
        hypercolumn.DataNavigateUrlFields = new string[] { "MAB" };
        hypercolumn.DataNavigateUrlFormatString = "OfcMABEdit.aspx?M=Y&K=" + "{0}";
        RadGrid1.MasterTableView.Columns.Add(hypercolumn);

        boundcolumn = new GridBoundColumn();
        this.RadGrid1.Columns.Add(boundcolumn);
        boundcolumn.UniqueName = "MABName";
        boundcolumn.DataField = "MABName";
        boundcolumn.HeaderText = "Name";
        boundcolumn.Visible = true;
        boundcolumn = null;

        RadGrid1.AllowPaging = Convert.ToBoolean(Session["ShowListsWithPaging"]);


}

I think that is all the affected code should need to see.  If there's anything else, please let me know.  Sorry to be a pain!

Thanks in advance!

Lynn

[Konstantin Dikov]

Hi Lynn,

From your description it is not clear what is the exact requirement and what you are trying to achieve. 

However, if the issue is with the GridTemplateColumn defined in the markup, there are several issues with your approach. 

The major issue is that you are not attaching the event handler for the OnItemCreated event of the grid, so the logic for setting the onclick attribute of the link is not executing. Furthermore, you are trying to access a DataKeyValue for "TemplateColumn", but this method needs the data field that is included in the DataKeyNames collection - the "MAB".

Following is a simplified version of your implementation that fires the ShowEditForm method with the correct parameters:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function ShowEditForm(id, rowIndex) {
            var grid = $find("<%= RadGrid1.ClientID %>");
            var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
            grid.get_masterTableView().selectItem(rowControl, true);
            alert("My row's id value=" + id);
            return false;
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadGrid ID="RadGrid1" runat="server" Width="99.7%" AutoGenerateColumns="false" AllowPaging="false">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="MAB" ClientDataKeyNames="MAB" Width="100%">
        <Columns>
            <telerik:GridTemplateColumn UniqueName="TemplateEditColumn">
                <ItemTemplate>
                    <asp:HyperLink ID="EditLink" runat="server" Text="Edit"></asp:HyperLink>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

And the code-behind:

protected void Page_Init(object sender, System.EventArgs e)
{
    RadGrid1.NeedDataSource += new Telerik.Web.UI.GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource);
    RadGrid1.ItemCreated +=RadGrid1_ItemCreated;
}

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        HyperLink editLink = (HyperLink)e.Item.FindControl("EditLink");
        editLink.Attributes["href"] = "javascript:void(0);";
        editLink.Attributes["onclick"] = String.Format("return ShowEditForm('{0}', '{1}');", e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["MAB"], e.Item.ItemIndex);
    }
}

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("MB", typeof(int));
    table.Columns.Add("MABName", typeof(string));
    table.Columns.Add("MAB", typeof(string));
    for (int i = 0; i < 5; i++)
    {
        table.Rows.Add(i, "MABName" + i, "MAB" + i);
    }

    (sender as RadGrid).DataSource = table;
}

On a side note, please keep in mind that combining declarative and programmatic approaches for defining the RadGrid structure is not supported scenario and you should only one at a time.


Best Regards,
Konstantin Dikov
Telerik

 

 

[Lynn]

Konstantin,

Wonderful!  My apologies for having sent confusing pieces to you before, but you interpreted my real questions correctly and the solution works perfectly after adding a couple of lines of JavaScript.

You were also correct about my real issue was the missing "RadGrid1.ItemCreated += RadGrid1_ItemCreated;".

Now just one more question...I have tried to programmatically create the template column, but the only example I can find is located at http://www.telerik.com/help/aspnet-ajax/grid-programmatic-creation.html , and it is so complicated that I am having trouble sorting out the basic requirements for my simple application.  Is there another example that is simpler available?

Thank you so much for the help yet today! 


Lynn

[Konstantin Dikov]

Hello Lynn,

I am really glad that the initial issue have been resolved.

As for creating template columns programmatically, the only available example is in the help article that you are referring to:

• Creating Template Columns Programmatically

However, since the requirement of the template is to implement the ITemplate interface, you can take a look at the following MSDN article, where detailed information and explanations are available:

• Creating Web Server Control Templates Programmatically

Hope this helps.


Best Regards,
Konstantin Dikov
Telerik