Home > DeveloperSection > Articles > Editable Grid View System using BootStrap in ASP.Net

Editable Grid View System using BootStrap in ASP.Net


ASP.Net ASP.Net 
Ratings:
39 Comment(s)
 97203  View(s)
Rate this:

Editable Grid View System using BootStrap in ASP.Net

 

In this blog, I’m explaining how to make a gridview editable using bootstrap in asp.net.

Step 1:                              

First create an asp.net empty web application and add a web form to the solution.

Step 2:

Now add a gridview by drag and drop from the toolbox and give these properties and event:

 


OnRowCommand="GridView1_RowCommand"

AutoGenerateColumns=”false

AllowPaging=” true

DataKeysName=” ID

 

As you make true to these properties, your gridview will look like this:

Editable Grid View System using BootStrap in ASP.Net

Step 3:

Now add the below code in the .aspx.cs file: 

protectedvoid Page_Load(object sender, EventArgs e)

{

        DataLoad();

}

      

publicvoid DataLoad()

{

   string  message = string.Empty;

   try

   {

               

      SqlConnection connection = GlobalClass.OpenConnection(out message);

      if (connection != null && string.IsNullOrEmpty(message))

      {

          string cmd = "select * from GridView";

          SqlDataAdapter dAdapter = newSqlDataAdapter(cmd, connection);

          DataSet ds = newDataSet();

          dAdapter.Fill(ds);

          dt = ds.Tables[0];

                    //Bind the fetched data to gridview

          grdvCrudOperation.DataSource = dt;

          grdvCrudOperation.DataBind();

          grdvCrudOperation.Columns[3].Visible = false;

 

       }

   }

   catch (Exception ex)

   {

        message = ex.Message;

   }

   finally

   {

        GlobalClass.CloseConnection(out message);

   }

}

 

When you run the above code, this will display all values from Employee table.

Step 4:

To make the gridview editable, create three button field inside gridview

 

1.

<asp:ButtonFieldCommandName="detail" ControlStyle-CssClass="btn btn-info"    ButtonType="Button"Text="Detail"HeaderText="Detailed View">

<ControlStyleCssClass="btn btn-info"></ControlStyle>

</asp:ButtonField>

 

2.

<asp:ButtonFieldCommandName="editRecord" ControlStyle-CssClass="btn btn-info"ButtonType="Button"Text="Edit"HeaderText="Edit Record">

<ControlStyleCssClass="btn btn-info"></ControlStyle>

</asp:ButtonField>

 

3.

<asp:ButtonFieldCommandName="deleteRecord" ControlStyle-CssClass="btn btn-info"ButtonType="Button"Text="Delete"HeaderText="Delete Record">

<ControlStyleCssClass="btn btn-info"></ControlStyle>

</asp:ButtonField>

Step 5:

Now add the code to the events:

Details

protectedvoid GridView1_RowCommand(object sender, GridViewCommandEventArgs e)

{

     int index = Convert.ToInt32(e.CommandArgument);

     if (e.CommandName.Equals("detail"))

     {

          int ID = Convert.ToInt32(grdvCrudOperation.DataKeys[index].Value.ToString());

          IEnumerable<DataRow> query = from i in dt.AsEnumerable()

          where i.Field<int>("ID").Equals(ID)

          select i;

          DataTable detailTable = query.CopyToDataTable<DataRow>();

          DetailsView1.DataSource = detailTable;

          DetailsView1.DataBind();

          System.Text.StringBuilder sb = new System.Text.StringBuilder();

          sb.Append(@"<script type='text/javascript'>");

          sb.Append("$('#detailModal').modal('show');");

          sb.Append(@"</script>");

          ScriptManager.RegisterClientScriptBlock(this, this.GetType(),     "DetailModalScript", sb.ToString(), false);

     }

}

 

RowEditing

protectedvoid GridView1_RowCommand(object sender, GridViewCommandEventArgs e)

{

    int index = Convert.ToInt32(e.CommandArgument);

    if (e.CommandName.Equals("editRecord"))

    {

       GridViewRow gvrow = grdvCrudOperation.Rows[index];

       HfUpdateID.Value = HttpUtility.HtmlDecode(gvrow.Cells[3].Text).ToString();               

       txtNameUpdate.Text = HttpUtility.HtmlDecode(gvrow.Cells[4].Text);

       txtEmailIDUpdate.Text = HttpUtility.HtmlDecode(gvrow.Cells[5].Text);

       txtAddressUpdate.Text = HttpUtility.HtmlDecode(gvrow.Cells[6].Text);

       txtContactUpdate.Text = HttpUtility.HtmlDecode(gvrow.Cells[7].Text);

       lblResult.Visible = false;

       System.Text.StringBuilder sb = new System.Text.StringBuilder();

       sb.Append(@"<script type='text/javascript'>");

       sb.Append("$('#editModal').modal('show');");

       sb.Append(@"</script>");

       ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "EditModalScript",    sb.ToString(), false);          

   }

}

 

protectedvoid btnSave_Click(object sender, EventArgs e)

{

   string message = string.Empty;

   try

   {

 

     SqlConnection connection = GlobalClass.OpenConnection(out message);

     if (connection != null && string.IsNullOrEmpty(message))

    {

         SqlCommand cmd = newSqlCommand("Proc_UpdateGridView", connection);

         cmd.CommandType = CommandType.StoredProcedure;

         cmd.Parameters.AddWithValue("@ID",HfUpdateID.Value);

         cmd.Parameters.AddWithValue("@Name", txtNameAdd.Text.Trim());

         cmd.Parameters.AddWithValue("@EmailID", txtEmailIDAdd.Text.Trim());

         cmd.Parameters.AddWithValue("@Address", txtAddressAdd.Text.Trim());

         cmd.Parameters.AddWithValue("@Contact", txtContactAdd.Text.Trim());

         int row = cmd.ExecuteNonQuery();

     }

   }

   catch (Exception ex)

   {

        message = ex.Message;

   }

   finally

   {

       GlobalClass.CloseConnection(out message);

   }

   DataLoad();

   System.Text.StringBuilder sb = new System.Text.StringBuilder();

   sb.Append(@"<script type='text/javascript'>");

   sb.Append("alert('Records Updated Successfully');");

   sb.Append("$('#editModal').modal('hide');");

   sb.Append(@"</script>");

   ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "EditHideModalScript", sb.ToString(), false);

}

 

RowDeleting

protectedvoid GridView1_RowCommand(object sender, GridViewCommandEventArgs e)

{

    int index = Convert.ToInt32(e.CommandArgument);

    if (e.CommandName.Equals("deleteRecord"))

    {

        string code = grdvCrudOperation.DataKeys[index].Value.ToString();

        HfDeleteID.Value = code;

        System.Text.StringBuilder sb = new System.Text.StringBuilder();

        sb.Append(@"<script type='text/javascript'>");

        sb.Append("$('#deleteModal').modal('show');");

        sb.Append(@"</script>");

        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "DeleteModalScript", sb.ToString(), false);

    }

}

protectedvoid btnDelete_Click(object sender, EventArgs e)

{

   string message = string.Empty;

   try

   {

 

      SqlConnection connection = GlobalClass.OpenConnection(out message);

      if (connection != null && string.IsNullOrEmpty(message))

      {

          SqlCommand cmd = newSqlCommand("Proc_DeleteGridView", connection);

          cmd.CommandType = CommandType.StoredProcedure;

          cmd.Parameters.AddWithValue("@ID", HfDeleteID.Value);

          int row = cmd.ExecuteNonQuery();

      }

   }

   catch (Exception ex)

   {

       message = ex.Message;

   }

   finally

   {

       GlobalClass.CloseConnection(out message);

   }

   DataLoad();

   System.Text.StringBuilder sb = new System.Text.StringBuilder();

   sb.Append(@"<script type='text/javascript'>");

   sb.Append("alert('Record deleted Successfully');");

   sb.Append("$('#deleteModal').modal('hide');");

   sb.Append(@"</script>");

   ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "delHideModalScript", sb.ToString(), false);

}

 

RecordInserted

protectedvoid btnAdd_Click(object sender, EventArgs e) //Open Model popup

{

   System.Text.StringBuilder sb = new System.Text.StringBuilder();

   sb.Append(@"<script type='text/javascript'>");

   sb.Append("$('#addModal').modal('show');");

   sb.Append(@"</script>");

   ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "AddShowModalScript", sb.ToString(), false);

           

}

protectedvoid btnAddRecord_Click(object sender, EventArgs e)

{

   string message = string.Empty;

   try

   {

 

      SqlConnection connection = GlobalClass.OpenConnection(out message);

      if (connection != null && string.IsNullOrEmpty(message))

      {

         SqlCommand cmd = newSqlCommand("Proc_SaveGridView", connection);

         cmd.CommandType = CommandType.StoredProcedure;

         cmd.Parameters.AddWithValue("@Name", txtNameAdd.Text.Trim());

         cmd.Parameters.AddWithValue("@EmailID", txtEmailIDAdd.Text.Trim());

         cmd.Parameters.AddWithValue("@Address", txtAddressAdd.Text.Trim());

         cmd.Parameters.AddWithValue("@Contact", txtContactAdd.Text.Trim());

         int row = cmd.ExecuteNonQuery();

      }

   }

   catch (Exception ex)

   {

        message = ex.Message;

   }

    finally

    {

        GlobalClass.CloseConnection(out message);

    }

    DataLoad();

    System.Text.StringBuilder sb = new System.Text.StringBuilder();

    sb.Append(@"<script type='text/javascript'>");

    sb.Append("alert('Record Added Successfully');");

    sb.Append("$('#addModal').modal('hide');");

    sb.Append(@"</script>");

    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "AddHideModalScript", sb.ToString(), false);

}

 

 

 

GridView.aspx

<%@PageLanguage="C#" AutoEventWireup="true"CodeBehind="GridView.aspx.cs"Inherits="GridViewCRUDBootstrapExample.Default"%>

 

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

    <title></title>

    <linkhref="Styles/bootstrap.css" rel="stylesheet"/>

    <scriptsrc="Scripts/jquery-1.8.2.js"></script>

    <scriptsrc="Scripts/bootstrap.js"></script>

</head>

<body>

    <formid="form1"runat="server">

        <divstyle="width: 90%; margin-right: 5%; margin-left: 5%; text-align: center">

            <asp:ScriptManagerrunat="server"ID="ScriptManager1"/>

 

            <h1>Grid View System</h1>

 

            <asp:UpdatePanelID="upCrudGrid"runat="server">

                <ContentTemplate>

                    <asp:GridViewID="grdvCrudOperation"runat="server"Width="940px"HorizontalAlign="Center"

                        OnRowCommand="GridView1_RowCommand"AutoGenerateColumns="false"AllowPaging="true"

                        DataKeyNames="ID"CssClass="table table-hover table-striped">

                        <Columns>

                            <asp:ButtonField CommandName="detail"ControlStyle-CssClass="btn btn-info"ButtonType="Button"Text="Detail"HeaderText="Detailed View">

                                <ControlStyleCssClass="btn btn-info"></ControlStyle>

                            </asp:ButtonField>

                            <asp:ButtonField CommandName="editRecord"ControlStyle-CssClass="btn btn-info"ButtonType="Button"Text="Edit"HeaderText="Edit Record">

                                <ControlStyleCssClass="btn btn-info"></ControlStyle>

                            </asp:ButtonField>

                            <asp:ButtonField CommandName="deleteRecord"ControlStyle-CssClass="btn btn-info"ButtonType="Button"Text="Delete"HeaderText="Delete Record">

                                <ControlStyleCssClass="btn btn-info"></ControlStyle>

                            </asp:ButtonField>

                            <asp:BoundField DataField="ID"HeaderText="ID"/>

                            <asp:BoundField DataField="Name"HeaderText="Name"/>

                            <asp:BoundField DataField="EmailID"HeaderText="EmailID"/>

                            <asp:BoundField DataField="Address"HeaderText="Address"/>

                            <asp:BoundField DataField="Contact"HeaderText="Contact NO"/>

                        </Columns>

                    </asp:GridView>

                    <asp:ButtonID="btnAdd"runat="server"Text="Add New Record"CssClass="btn btn-info"OnClick="btnAdd_Click"/>

                </ContentTemplate>

                <Triggers>

                </Triggers>

            </asp:UpdatePanel>

 

            <divid="detailModal" class="modal hide fade"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">

                <divclass="modal-header">

                    <buttontype="button" class="close"data-dismiss="modal"aria-hidden="true">×</button>

                    <h3id="myModalLabel">Details</h3>

                </div>

                <divclass="modal-body">

                    <asp:UpdatePanelID="UpdatePanel2"runat="server">

                        <ContentTemplate>

                            <asp:DetailsView ID="DetailsView1"runat="server"CssClass="table table-bordered table-hover"BackColor="White"ForeColor="Black"FieldHeaderStyle-Wrap="false"FieldHeaderStyle-Font-Bold="true"FieldHeaderStyle-BackColor="LavenderBlush"FieldHeaderStyle-ForeColor="Black"BorderStyle="Groove"AutoGenerateRows="False">

                                <Fields>

                                    <asp:BoundField DataField="Name"HeaderText="Name"/>

                                    <asp:BoundField DataField="EmailID"HeaderText="EmailID"/>

                                    <asp:BoundField DataField="Address"HeaderText="Address"/>

                                    <asp:BoundField DataField="Contact"HeaderText="Contact NO"/>

                                </Fields>

                            </asp:DetailsView>

                        </ContentTemplate>

                        <Triggers>

                            <asp:AsyncPostBackTrigger ControlID="grdvCrudOperation"EventName="RowCommand"/>

                            <asp:AsyncPostBackTrigger ControlID="btnAdd"EventName="Click"/>

                        </Triggers>

                    </asp:UpdatePanel>

                    <divclass="modal-footer">

                        <buttonclass="btn btn-info"data-dismiss="modal"aria-hidden="true">Close</button>

                    </div>

                </div>

            </div>

 

            <divid="editModal" class="modal hide fade"tabindex="-1"role="dialog"aria-labelledby="editModalLabel"aria-hidden="true">

                <divclass="modal-header">

                    <buttontype="button" class="close"data-dismiss="modal"aria-hidden="true">×</button>

                    <h3id="editModalLabel">Edit Record</h3>

                </div>

                <asp:UpdatePanelID="upEdit"runat="server">

                    <ContentTemplate>

                        <divclass="modal-body">

                            <asp:HiddenField ID="HfUpdateID"runat="server"/>

                            <tableclass="table">

                                <tr>

                                    <td>Name : </td>

                                    <td>

                                        <asp:TextBox ID="txtNameUpdate"runat="server"></asp:TextBox></td>

                                    <td>

                                </tr>

                                <tr>

                                    <td>EmailID</td>

                                    <td>

                                        <asp:TextBox ID="txtEmailIDUpdate"runat="server"></asp:TextBox></td>

                                </tr>

                                <tr>

                                    <td>Address</td>

                                    <td>

                                        <asp:TextBox ID="txtAddressUpdate"runat="server"></asp:TextBox></td>

                                </tr>

                                <tr>

                                    <td>Contact No</td>

                                    <td>

                                        <asp:TextBox ID="txtContactUpdate"runat="server"></asp:TextBox></td>

                                </tr>

                            </table>

                        </div>

                        <divclass="modal-footer">

                            <asp:Label ID="lblResult"Visible="false"runat="server"></asp:Label>

                            <asp:Button ID="btnSave"runat="server"Text="Update"CssClass="btn btn-info"OnClick="btnSave_Click"/>

                            <buttonclass="btn btn-info"data-dismiss="modal"aria-hidden="true">Close</button>

                        </div>

                    </ContentTemplate>

                    <Triggers>

                        <asp:AsyncPostBackTrigger ControlID="grdvCrudOperation"EventName="RowCommand"/>

                        <asp:AsyncPostBackTrigger ControlID="btnSave"EventName="Click"/>

                    </Triggers>

                </asp:UpdatePanel>

            </div>

 

            <divid="addModal" class="modal hide fade"tabindex="-1"role="dialog"aria-labelledby="addModalLabel"aria-hidden="true">

                <divclass="modal-header">

                    <buttontype="button" class="close"data-dismiss="modal"aria-hidden="true">×</button>

                    <h3id="addModalLabel">Add New Record</h3>

                </div>

                <asp:UpdatePanelID="upAdd"runat="server">

                    <ContentTemplate>

                        <divclass="modal-body">

                            <tableclass="table table-bordered table-hover">

                                <tr>

                                    <td>Name : </td>

                                    <td>

                                        <asp:TextBox ID="txtNameAdd"runat="server"></asp:TextBox></td>

                                </tr>

                                <tr>

                                    <td>EmailID :</td>

                                    <td>

                                        <asp:TextBox ID="txtEmailIDAdd"runat="server"></asp:TextBox></td>

                                </tr>

                                <tr>

                                    <td>Address:</td>

                                    <td>

                                        <asp:TextBox ID="txtAddressAdd"runat="server"></asp:TextBox></td>

                                </tr>

                                <tr>

                                    <td>Contact No:</td>

                                    <td>

                                        <asp:TextBox ID="txtContactAdd"runat="server"></asp:TextBox></td>

                                </tr>

                            </table>

                        </div>

                        <divclass="modal-footer">

                            <asp:Button ID="btnAddRecord"runat="server"Text="Add"CssClass="btn btn-info"OnClick="btnAddRecord_Click"/>

                            <buttonclass="btn btn-info"data-dismiss="modal"aria-hidden="true">Close</button>

                        </div>

                    </ContentTemplate>

                    <Triggers>

                        <asp:AsyncPostBackTrigger ControlID="btnAddRecord"EventName="Click"/>

                    </Triggers>

                </asp:UpdatePanel>

            </div>

 

            <divid="deleteModal" class="modal hide fade"tabindex="-1"role="dialog"aria-labelledby="delModalLabel"aria-hidden="true">

                <divclass="modal-header">

                    <buttontype="button" class="close"data-dismiss="modal"aria-hidden="true">×</button>

                    <h3id="delModalLabel">Delete Record</h3>

                </div>

                <asp:UpdatePanelID="upDel"runat="server">

                    <ContentTemplate>

                        <divclass="modal-body">

                            Are you sure you want to delete the record?

                            <asp:HiddenField ID="HfDeleteID"runat="server"/>

                        </div>

                        <divclass="modal-footer">

                            <asp:Button ID="btnDelete"runat="server"Text="Delete"CssClass="btn btn-info"OnClick="btnDelete_Click"/>

                            <buttonclass="btn btn-info"data-dismiss="modal"aria-hidden="true">Cancel</button>

                        </div>

                    </ContentTemplate>

                    <Triggers>

                        <asp:AsyncPostBackTrigger ControlID="btnDelete"EventName="Click"/>

                    </Triggers>

                </asp:UpdatePanel>

            </div>

 

        </div>

    </form>

</body>

</html>

 

 

 

Use this BootStrap File :-

 

 

 

<linkhref="Styles/bootstrap.css"rel="stylesheet"/>

 

<scriptsrc="Scripts/jquery-1.8.2.js"></script>

 

<scriptsrc="Scripts/bootstrap.js"></script>

 

Download and add the above three files into your projects because it’s mandatory for using the bootstrap libraries and methods.

 

When you run the project, it will show you all the values from the database.

 

Output

Editable Grid View System using BootStrap in ASP.Net

 

When you click the “Add New Record” button:

 Editable Grid View System using BootStrap in ASP.Net

 

 

Fill the form with your appropriate values and click on “Add” button. Clicking on “Add” button will insert the record.

Editable Grid View System using BootStrap in ASP.Net

 

When you click the “Detail” button:

 

Editable Grid View System using BootStrap in ASP.Net

 

When you click the “Edit” button:

 

Editable Grid View System using BootStrap in ASP.Net

Fill the form with your appropriate values and click on “Update” button. Clicking on “Update” button will Updated the record.

 

 

Editable Grid View System using BootStrap in ASP.Net

 

When you click the delete button:

I have deleted the “Dev Karan Patel” record.

 

Editable Grid View System using BootStrap in ASP.Net

 

If you click “Delete” button then record deleted

 

Editable Grid View System using BootStrap in ASP.Net


Great Article

By Earl Kimble on   2 years ago
I actually have a need for this currently. I have tried to follow your tutorial here but I am having some trouble with the global files. Can you post a zip of the solution?

Hello

By Jolaade Fadare on   2 years ago
Great tutorial, I followed it but it keeps giving this error ----> "The name 'GlobalClass' does not exist in the current context"

Here is my Global Class

By Kamlakar Singh on   2 years ago
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for GlobalClass
/// </summary>
public class GlobalClass
{
    public GlobalClass()
    {
        //
        // TODO: Add constructor logic here
        //
    }

    public static SqlConnection OpenConnection(out string message)
    {
        SqlConnection connection;
        message = string.Empty;

        var con = HttpContext.Current.Session["con"];
        if (con != null && con.GetType() == typeof(SqlConnection))
        {
            connection = con as SqlConnection;
        }
        else
        {
            string constring = System.Configuration.ConfigurationManager.ConnectionStrings["conString"].ConnectionString;//Take connection string from web.config in encrypted form
            //string decryptcs = Security.Decrypt(encryptcs);//decrypt connectionstring
            connection = new SqlConnection(constring);
            HttpContext.Current.Session["con"] = connection;
        }

        try
        {
            connection.Open();
        }
        catch (Exception ex)
        {
            message = ex.Message;
        }

        return connection;
    }

    public static void CloseConnection(out string message)
    {
        message = string.Empty;
        try
        {
            var con = HttpContext.Current.Session["con"];
            if (con != null && con.GetType() == typeof(SqlConnection))
            {
                SqlConnection connection = con as SqlConnection;
                connection.Close();
            }
        }
        catch (Exception ex)
        {
            message = ex.Message;
        }
    }
}

Hello

By mugisha viktor on   2 years ago
please can anybody help me ?
when i run this codes ,return this error :

Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index


Multiple GridView1_RowCommand errors

By Mike Johnson on   2 years ago
I'm getting an error stating that multiple definitions of GridView1_RowCommand exist...which I can see in the code. Can you post a complete project file for download?

No data in modal windows

By Nelson Rodriguez on   2 years ago
Hi. I run de project succesfully .. but when i try to open a modal window nothing happend. The modal window is empty!!!

Why it could be happening

Thanks

i Need this for my final project

By yasir Babar on   2 years ago
i m working on my final project so kindly if you have source code plez send me because i tried a lot the project runs successfully and datagrid is also working fine and when i click button add the add modal is not appearing .. 

AddModal window is not appearing

By yasir Babar on   2 years ago
when i click add button the main window screen change color to dark but the modal is not appearing what is wrong with it.. it think something is wrong in script code..
this is the code behind my add new record button

System.Text.StringBuilder sb = new System.Text.StringBuilder();

            sb.Append(@"<script type='text/javascript'>");

            sb.Append("$('#addModal').modal('show');");

            sb.Append(@"</script>");

            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "AddModalScript", sb.ToString(), false); 

Hi Yasir Babar

By Kamlakar Singh on   2 years ago
I Test your code but here is open modal successfully
i think you are miss any step
are you fallow every step
are you add these file ( jquery file,bootstrap.css, Bootstrap.js)
and are you Create procedure and table in database
and where is your connection string
and are you use GlobalClass.cs file
every thing tell me clearly then i solve your problem exatly

Hi Kamlakar sing

By yasir Babar on   2 years ago
Thanks for feedback,
yes i m using bootsrtap.css,bootsrtap.js and jquery-1.8.2.min.js files and i have tables and data in database my gridview access the database successfully.
i m not using GlobalClass.cs because i have database connection class

Hi Yasir Babar

By Kamlakar Singh on   2 years ago
Now send your source code
Then i solve your problem

Hi Kamlakar sing

By yasir Babar on   2 years ago
send me your email address. i will send you my source code and also database table 

Hi Kamlakar sing

By yasir Babar on   2 years ago
Thanks for helping ,
i have send source code with database 

Same Problem

By Carlos Freire on   2 years ago
Hi
I am same problem of Kamlakar sing
what was the solution?

Carlos

Can one of you guys send the file to me as well ?

By Vincent Pfeifer on   2 years ago
Kamlakar,

Can someone send the Source and the DB?
Pfeifer.vincent (at)gmail(dot)(com)

Hi Kamlakar

By alp ayder on   2 years ago
Nice works!. I've got some errors. Can you send the project file and the database please?

uzunal (at) gmail com

Thanks



Model is not working

By Manoj Pokhare on   one year ago

Hi Kamlakar,


I tried your code. Grid is displayed but model is not working. please send me your email id so that I will send my code for your review.

Thanks
Manoj P

Try this to make it work

By Ric Pullen on   one year ago
.change the class to only modal fade
<div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">

add     <div class="modal-dialog">
            <div class="modal-content">

between the top  and the modal header.  (ensure you add the closing tags)  after putting these in and removing hide value i got it working for editing (as that is all i wanted).

model pop up window is not showing

By waqas qazi on   one year ago

Hi Kamlakar,


plz send me the project

jibleg

By Jose Israel Ble Gonzalez on   one year ago
send project and database, please


Black background for modal window (opacity: 0.8) not shown

By Rainer Schwindel on   one year ago
Hi Kamlakar,
greatings from germany and many thanks for your example. I saved a lot of time in doing it by myself. I only have to problems:
1. I don't het the black background (VS2013, bootstrap 3)
2. after saving the data the modal window closes but in the grid th fields change to edit format

any ideas?
Thank you!

not working on dropdown list control

By Nestor Floresca on   one year ago
Is it possible to add a dropdown list control on boostrap modal..? 
I tried your code and replaced the textbox control with a dropdown list.. The only problem I have, when a user selected a value.. It always return the first item on the dropdown list..  I also noticed when i add an autopostback=true the boostrap modal disappear.. Any suggestion on how to resolve the issue..?  

Please send final code

By Jorge Perez on   one year ago

Hi Kamlakar,

 

Can you please send me the final project after the modifications you have made so far?

 

I am having issues displaying the modal forms. 

 

Thanks

 

Jorge



Answer of not showing data on modal popup - detail,edit

By Megha Sharma on   one year ago
Must use Update panel and follow that front end code

//front end code
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
 <div class="modal-dialog">
            <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Details</h4>
      </div>
      <div class="modal-body">
        <div class="bs-example">
        <div class="form-group">
             //your structure here
        </div></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>               
</div>
 </ContentTemplate></asp:UpdatePanel>



THANK YOU Ric Pullen

By Daniel Ramirez on   one year ago
Your answer about how to use the modal fade, It help me a lot.

send final code

By amaia a on   one year ago
can you send me the project?

I'm working on the last few days.

By Mehmet polat on   10 months ago
Hello, it's me when I run I modes "Edit," "Update", "Delete" does not appear as black pages .. looks just background ..

hi

By Faruk Bodır on   9 months ago
send project and database, please
farukbodir@hotmail.com


Code

By Johnny Oz on   9 months ago
nice! could you send me the code please?

the code please

By Aiman Mutasem-bellh on   8 months ago
thank you mr  Kamlakar Singh  send me
the source code file Please !

aiman_mutasem@hotmail.com

the source code file Please !

By Radhey Shyam on   8 months ago
sir Could pLease send the source code file  email chair@live.in

Help with buttons dont works

By Luis Solis on   7 months ago
I need Help with teh button events dont work any??

Thanks it is useful article

By Manoj Bhatt on   7 months ago
Thanks kamlanker it is very useful and helpful article.

Need the code

By Dennis Sojo on   5 months ago
Hi, great example!

Could you please send the code? 

Do you happen to have the same example in VB instead of C#?

Thanks.

Code and DB, please

By Daoose Nox on   4 months ago
Could I please have the code and the db?


All-in-one ASP.net solution

By Апостол Апостолов on   3 months ago
There's a very good ASP.net suite by ShieldUI that I have a fantastic experience with and it is a very good solution for everything ASP.net. It is described on https://www.shieldui.com/products/aspnet

Source Code

By Yll Kallaba on   3 months ago
Thank you mr  Kamlakar Singh  
Please send me 
the source code file Please !

Works Perfectly.... Thank you a lot

By Fadi Awaragi on   2 months ago
Very helpful article... thank you for this amazing code... everything works good.

model pop up window is not showing

By weimen ho on   one month ago
Very helpful article. But model pop up window is not showing
I tried your code. Grid is displayed but model is not working


Don't want to miss updates? Please click the below button!

Follow MindStick