How to fire click event of the LinkButton in gridview and Show PopUp window in asp.net

Question

I have tried to build one gridview with dynamic columns based the data source using the template fields in asp.net through code behind.

For that, to implement we have developed one class DynamicTemplate which implements the ITemplate interface. In that template fields i have inserted the LinkButton in each cell and when i click that cell link button i need to show the one Popup with selected cell value.

For Detailed Sample Please download from this link

For that I have created one Default.asxp page and wrote the following.

  public partial class Default : System.Web.UI.Page
    {
        DataTable dt;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                GenateGridView();

        }

        private void GenateGridView()
        {
            TemplateField tempField;
            DynamicTemplate dynTempItem;
            LinkButton lnkButton;
            Label label;

            GridView gvDynamicArticle = new GridView();

            gvDynamicArticle.Width = Unit.Pixel(500);
            gvDynamicArticle.BorderWidth = Unit.Pixel(0);
            gvDynamicArticle.Caption = "<div>Default Grid</div>";
            gvDynamicArticle.AutoGenerateColumns = false;

            DataTable data = getBindingData();

            for (int i = 0; i < data.Columns.Count; i++)
            {
                tempField = new TemplateField();
                dynTempItem = new DynamicTemplate(ListItemType.AlternatingItem);

                lnkButton = new LinkButton();

                lnkButton.ID = string.Format("lnkButton{0}", i);
                lnkButton.Visible = true;

                string ColumnValue = data.Columns[i].ColumnName;
                tempField.HeaderText = ColumnValue;

                if (ColumnValue == "EmpName")
                {
                    label = new Label();

                    label.ID = string.Format("Label{0}", i);
                    dynTempItem.AddControl(label, "Text", ColumnValue);
                    label.Width = 100;
                }
                else
                {
                    dynTempItem.AddControl(lnkButton, "Text", ColumnValue);
                    lnkButton.Click += lnkButton_Click;
                }
                tempField.ItemTemplate = dynTempItem;
                gvDynamicArticle.Columns.Add(tempField);
                //////grdUserPivotDateTwo.Columns.Add(tempField);
            }

            gvDynamicArticle.DataSource = data;
            gvDynamicArticle.DataBind();

            divContainer.Controls.Add(gvDynamicArticle);

        }

        void lnkButton_Click(object sender, EventArgs e)
        {
            // showing cell values in popUp here.. 
            ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('cell clicked')");
        }


        private DataTable getBindingData()
        {
            dt = new DataTable();
            dt.Columns.Add(new DataColumn("EmpName"));
            dt.Columns.Add(new DataColumn("Monday"));
            dt.Columns.Add(new DataColumn("TuesDay"));
            dt.Columns.Add(new DataColumn("WednesDay"));
            dt.Columns.Add(new DataColumn("ThursDay"));

            dt.Rows.Add("EmpOne", "p", "p", "p", "a");
            dt.Rows.Add("EmpTwo", "p", "a", "p", "p");
            dt.Rows.Add("EmpThree", "p", "p", "p", "a");
            dt.Rows.Add("EmpFour", "p", "a", "p", "p");
            dt.Rows.Add("EmpFive", "p", "p", "p", "a");
            dt.Rows.Add("EmpSix", "a", "p", "p", "p");

            return dt;

        }



    }

and corresponding DynamicTemplate class is

public class DynamicTemplate : System.Web.UI.ITemplate
{
    System.Web.UI.WebControls.ListItemType templateType;
    System.Collections.Hashtable htControls = new System.Collections.Hashtable();
    System.Collections.Hashtable htBindPropertiesNames = new System.Collections.Hashtable();
    System.Collections.Hashtable htBindExpression = new System.Collections.Hashtable();

    public DynamicTemplate(System.Web.UI.WebControls.ListItemType type)
    {
        templateType = type;
    }

    public void AddControl(WebControl wbControl, String BindPropertyName, String BindExpression)
    {
        htControls.Add(htControls.Count, wbControl);
        htBindPropertiesNames.Add(htBindPropertiesNames.Count, BindPropertyName);
        htBindExpression.Add(htBindExpression.Count, BindExpression);

    }

    public void InstantiateIn(System.Web.UI.Control container)
    {
        PlaceHolder ph = new PlaceHolder();

        for (int i = 0; i < htControls.Count; i++)
        {

            //clone control 
            Control cntrl = CloneControl((Control)htControls[i]);

            switch (templateType)
            {
                case ListItemType.Header:
                    break;
                case ListItemType.Item:
                    ph.Controls.Add(cntrl);
                    break;
                case ListItemType.AlternatingItem:
                    ph.Controls.Add(cntrl);
                    ph.DataBinding += new EventHandler(Item_DataBinding);
                    break;
                case ListItemType.Footer:
                    break;
            }
        }
        ph.DataBinding += new EventHandler(Item_DataBinding);

        container.Controls.Add(ph);

    }
    public void Item_DataBinding(object sender, System.EventArgs e)
    {
        PlaceHolder ph = (PlaceHolder)sender;
        GridViewRow ri = (GridViewRow)ph.NamingContainer;
        for (int i = 0; i < htControls.Count; i++)
        {
            if (htBindPropertiesNames[i].ToString().Length > 0)
            {
                Control tmpCtrl = (Control)htControls[i];
                String item1Value = (String)DataBinder.Eval(ri.DataItem, htBindExpression[i].ToString());
                Control ctrl = ph.FindControl(tmpCtrl.ID);

                Type t = ctrl.GetType();
                System.Reflection.PropertyInfo pi = t.GetProperty(htBindPropertiesNames[i].ToString());

                pi.SetValue(ctrl, item1Value.ToString(), null);
            }

        }



    }

    private Control CloneControl(System.Web.UI.Control src_ctl)
    {
        Type t = src_ctl.GetType();
        Object obj = Activator.CreateInstance(t);
        Control dst_ctl = (Control)obj;
        PropertyDescriptorCollection src_pdc = TypeDescriptor.GetProperties(src_ctl);
        PropertyDescriptorCollection dst_pdc = TypeDescriptor.GetProperties(dst_ctl);

        for (int i = 0; i < src_pdc.Count; i++)
        {

            if (src_pdc[i].Attributes.Contains(DesignerSerializationVisibilityAttribute.Content))
            {

                object collection_val = src_pdc[i].GetValue(src_ctl);
                if ((collection_val is IList) == true)
                {
                    foreach (object child in (IList)collection_val)
                    {
                        Control new_child = CloneControl(child as Control);
                        object dst_collection_val = dst_pdc[i].GetValue(dst_ctl);
                        ((IList)dst_collection_val).Add(new_child);
                    }
                }
            }
            else
            {
                dst_pdc[src_pdc[i].Name].SetValue(dst_ctl, src_pdc[i].GetValue(src_ctl));
            }
        }

        return dst_ctl;

    }
}

Here the Data showing in gridview is fine. Here the Issues are when i click on the linkButton the page reloads and no grid is displaying after the postback .

second issue is, for LinkButton the Click Event is not firing .

Please provide me the help full information/Sample to show the modal window when we click on the linkButton of the gridview.

Answer 1

You need to use ajax model popup expender.

Design a panel with your fields and use the model popup expender to display that popup

This link has the sample of it

www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/modalpopup/modalpopup.aspx

and in your link button click you have to use show method to open popup

Answer 2

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            GenateGridView();

    }

this code is generating a gridview only if it is not a postback, but when you click a linkbutton a postpack occurs and that's the reason why gridview doesnt show again when you click on the linkbutton.

add the following code(additional else part included to your if code) to show gridview when you click lnkButton

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            GenateGridView();
        else
        {
            string ctrlName = Request.Params.Get("__EVENTTARGET").Trim();

            if (!String.IsNullOrEmpty(ctrlName))
            {
                if (ctrlName.StartsWith("lnkButton"))
                {
                    GenateGridView();
                }
            }

        }

    }

Answer 3

It will be a good choice to use CommandName property for the linkbutton on the Gridview and give it a specfic name and in the code file and exactly work with it in RowCommand event of your GridView as following in this example :

first here is the .aspx file :

    <div>
        <asp:GridView ID="GridViewStudents" runat="server" AutoGenerateColumns="False" OnRowCommand="GridViewStudents_RowCommand">
            <Columns>
                <asp:TemplateField HeaderText="Stud_ID" Visible="False">
                    <ItemTemplate>
                        <asp:Label ID="LabelStudID" runat="server" Text='<%# Eval("Stud_ID") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="FKFather_ID" Visible="False">
                    <ItemTemplate>
                        <asp:Label ID="LabelFkFatherID" runat="server" Text='<%# Eval("Fk_Father_ID") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Student Name">
                    <ItemTemplate>
                        <asp:Label ID="LabelStudName" runat="server" Text='<%# Eval("Stud_Name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Class Name">
                    <ItemTemplate>
                        <asp:Label ID="LabelRowlevelName" runat="server" Text='<%# Eval("Stud_Level_Row_Name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Delete">
                    <ItemTemplate>
                        <asp:ImageButton ID="ImageButtonDelete" runat="server" CommandArgument='<%# Eval("Stud_ID") %>' CommandName="Remove" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>

<div style="direction: ltr">
    <asp:Panel ID="Panel1" runat="server" Visible="false">
        <asp:Label ID="Labelpopupmessage" runat="server" Text=""></asp:Label>
        <br />
        <asp:Button ID="Buttonaccept" runat="server" Text="نعم" OnClick="Buttonaccept_Click" />
        <asp:Button ID="Buttoncancel" runat="server" Text="لا" OnClick="Buttoncancel_Click" />
    </asp:Panel>
    <asp:HiddenField ID="HiddenField1" runat="server" />
    <asp:ModalPopupExtender runat="server" ID="ModalPopupExtenderStudent" PopupControlID="ButtonSubmit" TargetControlID="HiddenField1" CancelControlID="Buttoncancel">
    </asp:ModalPopupExtender>
</div>

and here is the code implementation of my illustration :

        protected void GridViewStudents_RowCommand(object sender, GridViewCommandEventArgs e)
                {
                    if (e.CommandName == "Remove")
                    {
                       // I stored the ID of the selected Student I want to delete in a viewstate.
                                    ViewState.Add("DeletedStudDetailID",Convert.ToInt32(e.CommandArgument));
 ModalpopupExtender.Show();
                    }

                 }

// Here in the accept delete button I used that code ..
        protected void Buttonaccept_Click(object sender, EventArgs e)
        {
            try
            {
                if (ViewState["DeletedStudDetailID"] != null)
                {
                    StudentDetail StudDet = Data.StudentDetails.Single(SD => SD.Fk_Stud_ID == Convert.ToInt32(ViewState["DeletedStudDetailID"]));
                    Data.StudentDetails.DeleteOnSubmit(StudDet);
                    Student Stud = Data.Students.Single(S => S.Stud_ID == Convert.ToInt32(ViewState["DeletedStudDetailID"]));
                    Data.Students.DeleteOnSubmit(Stud);
                    Data.SubmitChanges();
                }
                this.ResultMessage = "Delete Done Sucessfully !!";
            }
            catch
            {
                this.ErrorMessage = "Delete operation disordered !!";
            }
            finally
            {
                ModalPopExtender.Hide();
            }

        }

I hope it helps in your issue and I wish you a happy day :) !!

Answer 4

First, your GridView will be created when calling GenateGridView method, so you have to call this method everytime you do post back, then your Page_Load should be

protected void Page_Load(object sender, EventArgs e)
{
   GenateGridView();
}

Second, I would present you the other way to add LinkButton to GridView dynamically. I modified your GenateGridView to just add only label into DynamicTemplate , also add this line gvDynamicArticle.RowDataBound += new GridViewRowEventHandler(gvDynamicArticle_RowDataBound); to handle adding LinkButton.

private void GenateGridView()
{
    TemplateField tempField;
    DynamicTemplate dynTempItem;
    Label label;

    GridView gvDynamicArticle = new GridView();

    gvDynamicArticle.Width = Unit.Pixel(500);
    gvDynamicArticle.BorderWidth = Unit.Pixel(0);
    gvDynamicArticle.Caption = "<div>Default Grid</div>";
    gvDynamicArticle.AutoGenerateColumns = false;
    gvDynamicArticle.RowDataBound += new GridViewRowEventHandler(gvDynamicArticle_RowDataBound);
    DataTable data = getBindingData();

    for (int i = 0; i < data.Columns.Count; i++)
    {
        tempField = new TemplateField();
        dynTempItem = new DynamicTemplate(ListItemType.AlternatingItem);

        string ColumnValue = data.Columns[i].ColumnName;
        tempField.HeaderText = ColumnValue;

        label = new Label();

        label.ID = string.Format("Label{0}", i);
        dynTempItem.AddControl(label, "Text", ColumnValue);
        label.Width = 100;

        tempField.ItemTemplate = dynTempItem;
        gvDynamicArticle.Columns.Add(tempField);
    }

    gvDynamicArticle.DataSource = data;
    gvDynamicArticle.DataBind();

    divContainer.Controls.Add(gvDynamicArticle);
}

I implement like this in RowDataBound event handler of the GridView to add LinkButton and hide the Label which we added it before:

protected void gvDynamicArticle_RowDataBound(object sender, GridViewRowEventArgs e) 
{
    for (int j = 1; j < e.Row.Cells.Count; j++)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            LinkButton lnkButton = new LinkButton();
            lnkButton.ID = string.Format("lnkButton{0}{1}", e.Row.DataItemIndex, j);
            lnkButton.Click += new EventHandler(lnkButton_Click);

            Label tempLabel = e.Row.FindControl("Label" + j) as Label;
            lnkButton.Text = tempLabel.Text;
            lnkButton.CommandArgument = tempLabel.Text;

            tempLabel.Visible = false;

            e.Row.Cells[j].Controls.Add(lnkButton);
        }
    }
}

You can also set any value to CommandArgument of LinkButton, then you can show it in the alert.

Final, seems you want to show some value in the alert, you may code like this

public void lnkButton_Click(object sender, EventArgs e)
{
    // showing cell values in popUp here.. 
    LinkButton lnk = (LinkButton)sender;
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('cell clicked, value " + lnk.CommandArgument + "')", true);
}