add css attribute data-toggle=dropdown from code behind

Question

User1587720337 posted

I have a link button inside grid view, which is used to display another sub-grid. To call the link button I have used the following code

protected void gvGrid_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Assign")
{

LinkButton lnkAssign = (LinkButton)row1.FindControl("lnkAssign");

lnkAssign.Attributes.Add("data-toggle", "dropdown");

}

aspx code for link button:

<asp:LinkButton CommandArgument='<%# DataBinder.Eval(Container.DataItem, "id") %>' ID="lnkAssign" runat="server" CommandName="Assign" ToolTip="Assign to Group"><i class="md md-group" ></i></asp:LinkButton>

Problem:

When I click on the link button, on the first click its not opening the sub-grid. it required a double click to show the sub-grid. Any idea what's causing this and how to fix it?

Answer 1

User475983607 posted

Double clicking or needed to submit two HTTP GETs usually points to a logical design bug related to the page life cycle and/or state management.  Set a break point and step through your code using the Visual Studio debugger.

Answer 2

User1587720337 posted

when I click the button it's hitting the breakpoint and code fire in a single click.  I tried to call the javascript function for testing and it seems to be working on single click

ScriptManager.RegisterStartupScript(this, typeof(string), "Error", "alert('hi');", true);

but the  lnkAssign.Attributes.Add("data-toggle", "dropdown"); is not working on single click. I wonder if we can use the script manager for the CSS as well.

any other ideas?

Answer 3

User475983607 posted

[e-mail]

when I click the button it's hitting the breakpoint and code fire in a single click.  I tried to call the javascript function for testing and it seems to be working on single click

ScriptManager.RegisterStartupScript(this, typeof(string), "Error", "alert('hi');", true);

but the  lnkAssign.Attributes.Add("data-toggle", "dropdown"); is not working on single click. I wonder if we can use the script manager for the CSS as well.

any other ideas?

I have no idea and cannot reproduce your exact issue. It does seems to be an issue related to timing.  If you have JavaScript as well as server side code then you need to understand that JavaScript runs/initializes when the page loads and before submitting a GET (link) or POST (button click).  The response form a GET or POST overwrites the previous JavaScript.

You also have to pay attention to the event order in the page life cycle.

Answer 4

User-1716253493 posted

Your code activate dropdown to the linkbutton only, it's not activate sub-grid

Maybe you can set the attribute in the rowdatabound instead.

Or js to activate sub-grid in the rowcommand event

Answer 5

User1587720337 posted

Perfect, adding the code in rowdatabound fixed the issue

protected void gvGrid_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int intID = Convert.ToInt32(gvGrid.DataKeys[e.Row.RowIndex].Values[0]);
GridView gvList1 = (e.Row.FindControl("gvList1") as GridView);
LinkButton lnkAssign = (e.Row.FindControl("lnkAssign") as LinkButton);
if(lnkAssign!=null)
{
lnkAssign.Attributes.Add("data-toggle", "dropdown");
}
try
{
DataTable dtGetist = new DataTable();
int intGroup = 0;
using (SqlConnection conn = new SqlConnection(strConnection))
{
if (conn.State == ConnectionState.Closed)
{
conn.Open();
}
using (SqlCommand cmd = new SqlCommand("SPU_ContactInGroup", conn))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.CommandText = "SPU_ContactInGroup";
cmd.Parameters.Add(new SqlParameter("@ClientID", SqlDbType.Int)).Value = Convert.ToInt32(Session["ClientID"]);
cmd.Parameters.Add(new SqlParameter("@ContactID", SqlDbType.Int)).Value = intID;
using (SqlDataReader sda = cmd.ExecuteReader())
{
dtGetist.Load(sda);
gvList1.Visible = true;
gvList1.DataSourceID = string.Empty;
gvList1.DataSource = dtGetist;
gvList1.DataBind();
}

foreach (GridViewRow row in gvList1.Rows)
{
LinkButton lnkGroupSearch1 = (LinkButton)row.FindControl("lnkAdd");
intGroup = Convert.ToInt32(dtGetist.Rows[row.RowIndex]["ExistsInGroup"]);
if (intGroup == 1)
{
lnkGroupSearch1.ForeColor = System.Drawing.Color.LightSeaGreen;
}
}
}
}
lnkAssign.Attributes.Add("data-toggle", "dropdown");
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
}
}

Answer 6

User-1330468790 posted

Hi, Srishti Bharti,

 

Reason:

The reason why you need to click twice to trigger the drop down function is that you only add the attribute "data-toggle" with "dropdown" in the first postback and nothing else.

Therefore, you need to click the link button again to call the "dropdown" javascript function.

 

Solution:

Apart from adding the attribute, you still need to make the drop down toggle taking effect by calling the javascript function, which is introduced in bootstrap document.

https://getbootstrap.com/docs/4.0/components/dropdowns/#via-javascript

 

Be careful!

If you add the "data-toggle='dropdown'" to the button/link button, the button cannot trigger post back anymore since the button.js of bootstrap defined e.preventDefault().

Hence, you possibly need to handle this problem.

// BUTTON DATA-API
// ===============

$(document)
  .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    var $btn = $(e.target)
    if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
    Plugin.call($btn, 'toggle')
    if (!($(e.target).is('input[type="radio"]') || $(e.target).is('input[type="checkbox"]'))) e.preventDefault() // here's the issue
  })
  .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
  })

More details, you can refer to below code:

.aspx Page:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
                OnRowCommand="GridView1_RowCommand">
                <Columns>
                    <asp:BoundField DataField="id" HeaderText="ID" />
                    <asp:BoundField DataField="data" HeaderText="Data" />
                    <asp:TemplateField HeaderText="Command">
                        <ItemTemplate>
                            <div class="dropdown">
                                
                                <asp:LinkButton ID="lnkAssign" CssClass="btn btn-primary dropdown-toggle" runat="server" Text="Click to Dropdown"
                                    CommandArgument='<%#Eval("id") %>' CommandName="Assign" ToolTip="Assign to Group"></asp:LinkButton>
                                
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

Code behind:

 // Simulation of the data
        private static DataTable _gridviewDT;
        public static DataTable GridviewDT
        {
            get
            {
                if (_gridviewDT is null)
                {
                    _gridviewDT = new DataTable();

                    _gridviewDT.Columns.Add("id", typeof(int));
                    _gridviewDT.Columns.Add("data", typeof(string));

                    _gridviewDT.Rows.Add(1, "data1");
                    _gridviewDT.Rows.Add(2, "data2");
                    _gridviewDT.Rows.Add(3, "data3");
                    _gridviewDT.Rows.Add(4, "data4");

                }

                return _gridviewDT;
            }
            set
            {
                _gridviewDT = value;
            }
        }
        

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

        public void BindGridView()
        {
            GridView1.DataSource = GridviewDT;
            GridView1.DataBind();
        }

        

        protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName == "Assign")
            {

                LinkButton lnkAssign = (LinkButton)e.CommandSource;

                lnkAssign.Attributes.Add("data-toggle", "dropdown");
                string id = lnkAssign.ClientID;

                ScriptManager.RegisterStartupScript(this, this.GetType(), "dropdownJS", "$('#" + id + "').dropdown('toggle');", true);

            }
        }

Demo:

 

Hope this can help you.

Best regards,

Sean