ASP.NET: GridView CRUD using Twitter Bootstrap Modal Popup

Download In one of my articles I explained how to use Twitter Bootstrap Modal Popup Plugin to show gridview row details in...




In one of my articles I explained how to use Twitter Bootstrap Modal Popup Plugin to show gridview row details in a modal popup on selecting a particular gridview row. This article was well received and as a result I got many requests to write an article explaining the usage of Twitter bootstrap's Modal Plugin to implement create, read, update and delete operations in ASP.NET GridView. 

It is always better to use server side controls for CRUD operations that would allow us to easily manipulate and present data in the page with built-in and custom properties. It is also important to provide visually pleasing and user friendly pages particularly when the page involves more user interaction for operations like creating, updating or deleting records in a database. So let us use ASP.NET GridView with the simple and rich Twitter Bootstrap's Modal jQuery plugin to implement a complete CRUD package in ASP.NET Web Forms Application.



In this article, I am going to use a table in MySql Database for demonstration purpose. To run the sample application provided in the above link, you have to create required table in MySql database as explained below.

1. First let us set up the project with required libraries.

Download bootstrap files from here.

Include the latest jQuery library, bootstrap files (bootstrap.js,bootstrap.css) from the download to your project.


2. Before proceeding to create a web page, let us set up a sample dummy mysql table for our use in this application. Use the below create statement to create a table in your mysql server.

mysql> create table tblCountry(Code varchar(10),Name varchar(100),Continent varchar(50),Region varchar(50),Population bigint,IndepYear int);

For your ease I am giving few insert statements with dummy values with which you can add a few rows in the table you have created instantly.

 insert into tblCountry values('ABW','Aruba','North America','Caribbean',10300000,1956);
 insert into tblCountry values('AFG','Afghanistan','Asia','Southern and Central Asia',227200,1919);
 insert into tblCountry values('AGO','Angola','Africa','Central Africa',128780008,1975);
 insert into tblCountry values('AIA','Anguilla','North America','Caribbean',80000,1942);
 insert into tblCountry values('ALB','Albania','Europe','Southern Europe',3401200,1912);

3. Now let us proceed and add a Web Page to our Web forms application. I am going to break down the code into several parts for easy understanding.

First of all add a ScriptManager control to your webform as we are going to do everything in AJAX way. Then let us add an Update Panel with Gridview and add asynchronouspostback trigger for GridViewRowCommand Event. We are not going to use the default crud functionality that GridView provides but going to achieve the same using GridView RowCommand Event just like how we displayed details in my previous article.

<asp:ScriptManager runat="server" ID="ScriptManager1" />            
 <!-- Placing GridView in UpdatePanel-->
 <asp:UpdatePanel ID="upCrudGrid" runat="server">
  <ContentTemplate>
   <asp:GridView ID="GridView1" runat="server" 
   Width="940px" HorizontalAlign="Center"
   OnRowCommand="GridView1_RowCommand" 
   AutoGenerateColumns="false" AllowPaging="true"
   DataKeyNames="Code" 
   CssClass="table table-hover table-striped">
    <Columns>
     <asp:ButtonField CommandName="detail" 
         ControlStyle-CssClass="btn btn-info"
      ButtonType="Button" Text="Detail" HeaderText="Detailed View">
      <ControlStyle CssClass="btn btn-info"></ControlStyle>
     </asp:ButtonField>
     <asp:ButtonField CommandName="editRecord" 
      ControlStyle-CssClass="btn btn-info"
      ButtonType="Button" Text="Edit" HeaderText="Edit Record">
      <ControlStyle CssClass="btn btn-info"></ControlStyle>
     </asp:ButtonField>
     <asp:ButtonField CommandName="deleteRecord" 
      ControlStyle-CssClass="btn btn-info"
      ButtonType="Button" Text="Delete" HeaderText="Delete Record">
      <ControlStyle CssClass="btn btn-info"></ControlStyle>
     </asp:ButtonField>
     <asp:BoundField DataField="Code" HeaderText="Code" />
     <asp:BoundField DataField="Name" HeaderText="Name" />
     <asp:BoundField DataField="Continent" 
      HeaderText="Continent" />
     <asp:BoundField DataField="Region" 
      HeaderText="Region" />
     <asp:BoundField DataField="Population" 
      HeaderText="Population" />
     <asp:BoundField DataField="IndepYear" 
      HeaderText="Independence Year" />
    </Columns>
   </asp:GridView>
   <asp:Button ID="btnAdd" runat="server" 
    Text="Add New Record" CssClass="btn btn-info" 
    OnClick="btnAdd_Click" />
  </ContentTemplate>
  <Triggers>
  </Triggers>
 </asp:UpdatePanel>

In the above code, there are three button fields for performing operations such as detail, edit and delete. Later in this article I will explain how to use the Command Names of these buttons in GridView's RowCommand Event to open modal pop ups.

Next let us add code for detail view popup that displays selected gridview row in a detailsview control.

<!-- Detail Modal Starts here-->
<div id="detailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 id="myModalLabel">Detailed View</h3>
     </div>
     <div class="modal-body">
        <asp:UpdatePanel ID="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="Code" HeaderText="Code" />
                    <asp:BoundField DataField="Name" HeaderText="Name" />
                    <asp:BoundField DataField="Continent" HeaderText="Continent" />
                    <asp:BoundField DataField="Population" HeaderText="Population" />
                  <asp:BoundField DataField="IndepYear" HeaderText="Independence Year" />
                </Fields>
            </asp:DetailsView>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="RowCommand" />
            <asp:AsyncPostBackTrigger ControlID="btnAdd" EventName="Click" />
        </Triggers>
  </asp:UpdatePanel>
  <div class="modal-footer">
      <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
  </div>
</div><!-- Detail Modal Ends here -->


Next let us add code for Edit Modal Popup that contains required controls to update the existing values in a particular record.

<!-- Edit Modal Starts here -->
<div id="editModal" class="modal hide fade" 
       tabindex="-1" role="dialog" aria-labelledby="editModalLabel" 
       aria-hidden="true">
   <div class="modal-header">
       <button type="button" class="close" 
             data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="editModalLabel">Edit Record</h3>
   </div>
   <asp:UpdatePanel ID="upEdit" runat="server">
       <ContentTemplate>
     <div class="modal-body">
  <table class="table">
  <tr>
  <td>Country Code : 
  <asp:Label ID="lblCountryCode" runat="server"></asp:Label>
  </td>
  </tr>
  <tr>
  <td>Population : 
  <asp:TextBox ID="txtPopulation" runat="server"></asp:TextBox>
  </td>
  </tr>
  <tr>
  <td>Country Name:
  <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
  </td>
  </tr>
  <tr>
  <td>Continent:
  <asp:TextBox ID="txtContinent1" runat="server"></asp:TextBox>
  </td>
  </tr>
  </table>
 </div>
 <div class="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" />
  <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
 </div>
 </ContentTemplate>
 <Triggers>
  <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="RowCommand" />
  <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
 </Triggers>
</asp:UpdatePanel>
</div>
<!-- Edit Modal Ends here -->

                    
Code for Add Modal Popup goes after this, that contains controls that enables an user to create a new record in the database.

<!-- Add Record Modal Starts here-->
<div id="addModal" class="modal hide fade" tabindex="-1" role="dialog" 
      aria-labelledby="addModalLabel" aria-hidden="true">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" 
                 aria-hidden="true">×</button>
  <h3 id="addModalLabel">Add New Record</h3>
 </div>
 <asp:UpdatePanel ID="upAdd" runat="server">
  <ContentTemplate>
   <div class="modal-body">
   <table class="table table-bordered table-hover">
   <tr>
   <td>Country Code : 
   <asp:TextBox ID="txtCode" runat="server">
   </asp:TextBox>
   </td>
   </tr>
   <tr>
   <td>Country Name : 
   <asp:TextBox ID="txtCountryName" runat="server">
   </asp:TextBox>
   </td>
   </tr>
   <tr>
   <td>Continent Name:
   <asp:TextBox ID="txtContinent" runat="server">
   </asp:TextBox>
   </td>
   </tr>
   <tr>
   <td>Region:
   <asp:TextBox ID="txtRegion" runat="server">
   </asp:TextBox>
   </td>
   </tr>
   <tr>
   <td>Population:
   <asp:TextBox ID="txtTotalPopulation" runat="server">
   </asp:TextBox>
   </td>
   </tr>
   <tr>
   <td>Year of Independence
   <asp:TextBox ID="txtIndYear" runat="server">
   </asp:TextBox>
   </td>
   </tr>
   </table>
   </div>
   <div class="modal-footer">                          
   <asp:Button ID="btnAddRecord" runat="server" Text="Add" 
     CssClass="btn btn-info" OnClick="btnAddRecord_Click" />
   <button class="btn btn-info" data-dismiss="modal" 
     aria-hidden="true">Close</button>
   </div>
  </ContentTemplate>
  <Triggers>
  <asp:AsyncPostBackTrigger ControlID="btnAddRecord" EventName="Click" />
  </Triggers>
 </asp:UpdatePanel>
</div>
<!--Add Record Modal Ends here-->

Finally let us add code for confirming delete operation in a modal popup as shown below,

<!-- Delete Record Modal Starts here-->
<div id="deleteModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
   <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h3 id="delModalLabel">Delete Record</h3>
   </div>
   <asp:UpdatePanel ID="upDel" runat="server">
      <ContentTemplate>
          <div class="modal-body">
              Are you sure you want to delete the record?
              <asp:HiddenField ID="hfCode" runat="server" />
          </div>
          <div class="modal-footer">
              <asp:Button ID="btnDelete" runat="server" Text="Delete" CssClass="btn btn-info" OnClick="btnDelete_Click" />
              <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Cancel</button>
          </div>
          </ContentTemplate>
          <Triggers>
             <asp:AsyncPostBackTrigger ControlID="btnDelete" EventName="Click" />
          </Triggers>
    </asp:UpdatePanel>
</div><!--Delete Record Modal Ends here -->

Now we are done with the markup. Note that I have used UpdatePanel on every section of code, just to make the GridView operations function totally in AJAX way without refreshing the whole page. 

Before proceeding to code behind let me explain how Bootstrap Modal works. The contents to be shown on modal popup must be placed within a div with class value set to "modal" which will be hidden by default on page load and to fire the modal popup, we need to add one line of jquery code ($('#modaldivid').modal('show');) on a button or link click as we wish. With this note, let us proceed further by implementing necessary code in code-behind file.

3. Add MySql Database connection string to Web.config file.

<add connectionString="server=localhost;uid=root;password=xxxx;database=world; pooling=false;" providerName="MySql.Data.MySqlDataClient" name="MySqlConnString" />

4. In the code-behind page, let us first write code to fetch data from database and display on Page Load. This code to fetch data from database and bind to gridview for display will be reused in the later sections since after every operation (create, update or delete) we have to reload our gridview with latest information from database.

DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
   BindGrid();                         
}

public void BindGrid()
{
  try
  {
     //Fetch data from mysql database
     string connString = ConfigurationManager.ConnectionStrings["MySqlConnString"].ConnectionString;
     MySqlConnection conn = new MySqlConnection(connString);
     conn.Open();
     string cmd = "select * from tblCountry limit 10";
     MySqlDataAdapter dAdapter = new MySqlDataAdapter(cmd, conn);
     DataSet ds = new DataSet();
     dAdapter.Fill(ds);
     dt = ds.Tables[0];
     //Bind the fetched data to gridview
     GridView1.DataSource = dt;
     GridView1.DataBind();
                
  }
  catch (MySqlException ex)
  {
     System.Console.Error.Write(ex.Message);

  }  

}

Next let us write code to perform core operations (add, update and delete record from database).

private void executeUpdate(string code,int population,string countryname,string continent)
{
 string connString = ConfigurationManager.ConnectionStrings["MySqlConnString"].ConnectionString;
 try
 {
  MySqlConnection conn = new MySqlConnection(connString);
  conn.Open();
  string updatecmd = "update tblCountry set Population=@population, Name=@countryname,Continent=@continent where Code=@code";
  MySqlCommand updateCmd = new MySqlCommand(updatecmd,conn);                
  updateCmd.Parameters.AddWithValue("@population", population);
  updateCmd.Parameters.AddWithValue("@countryname", countryname);
  updateCmd.Parameters.AddWithValue("@continent", continent);
  updateCmd.Parameters.AddWithValue("@code", code);
  updateCmd.ExecuteNonQuery();
  conn.Close();
  
 }
 catch (MySqlException me)
 {
  System.Console.Error.Write(me.InnerException.Data);
 }
}

private void executeAdd(string code, string name, string continent,string region, int population, int indyear)
{
 string connString = ConfigurationManager.ConnectionStrings["MySqlConnString"].ConnectionString;
 try
 {
  MySqlConnection conn = new MySqlConnection(connString);
  conn.Open();
  string insertcmd = "insert into tblCountry (Code,Name,Continent,Region,Population,IndepYear) values (@code,@name,@continent,@region,@population,@indyear)";
  MySqlCommand addCmd = new MySqlCommand(insertcmd, conn);
  addCmd.Parameters.AddWithValue("@code", code);
  addCmd.Parameters.AddWithValue("@name", name);
  addCmd.Parameters.AddWithValue("@continent", continent);
  addCmd.Parameters.AddWithValue("@region", region);
  addCmd.Parameters.AddWithValue("@population", population);
  addCmd.Parameters.AddWithValue("@indyear", indyear);
  addCmd.ExecuteNonQuery();
  conn.Close();

 }
 catch (MySqlException me)
 {                
  System.Console.Write(me.Message);
 }
}

private void executeDelete(string code)
{
 string connString = ConfigurationManager.ConnectionStrings["MySqlConnString"].ConnectionString;
 try
 {
  MySqlConnection conn = new MySqlConnection(connString);
  conn.Open();
  string deletecmd = "delete from tblCountry where Code=@code";
  MySqlCommand delCmd = new MySqlCommand(deletecmd, conn);
  delCmd.Parameters.AddWithValue("@code", code);               
  delCmd.ExecuteNonQuery();
  conn.Close();

 }
 catch (MySqlException me)
 {
  System.Console.Write(me.Message);
 }

}

When the page initially runs, records are picked up from database and displayed in gridview. Once the user clicks the detail/edit/delete button for any row, control is passed to Gridview's RowCommand Event with the corresponding Command Name of the button that is clicked.


protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
 int index = Convert.ToInt32(e.CommandArgument);
 if (e.CommandName.Equals("detail"))
 {
  string code = GridView1.DataKeys[index].Value.ToString();
  IEnumerable<DataRow> query = from i in dt.AsEnumerable()
          where i.Field<String>("Code").Equals(code)
          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);
 }
 else if (e.CommandName.Equals("editRecord"))
 {                               
  GridViewRow gvrow = GridView1.Rows[index];                
  lblCountryCode.Text = HttpUtility.HtmlDecode(gvrow.Cells[3].Text).ToString();                
  txtPopulation.Text = HttpUtility.HtmlDecode(gvrow.Cells[7].Text);
  txtName.Text = HttpUtility.HtmlDecode(gvrow.Cells[4].Text);
  txtContinent1.Text = HttpUtility.HtmlDecode(gvrow.Cells[5].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);
  
 }
 else if (e.CommandName.Equals("deleteRecord"))
 {
  string code = GridView1.DataKeys[index].Value.ToString();
  hfCode.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);
 }

}

Heads Up!
Do not use the word "edit" and "delete" as command name for edit button, since these are reserved names that will automatically fire the Gridview RowEditing and RowDeleting events causing a runtime error. We are not using the GridView's default CRUD option here so use different words for the RowCommand event to function as expected.

Finally, in the 'OnClick' event of the buttons present inside each of the modal popup let us add necessary code to call the core methods that executes update, add and delete operations. This part also updates the user once the operation is completed successfully and closes the modal popup after refreshing the gridview with latest data.

// Handles Update Button Click Event
protected void btnSave_Click(object sender, EventArgs e)
{
string code=lblCountryCode.Text;
int population=Convert.ToInt32(txtPopulation.Text);
string countryname = txtName.Text;
string continent=txtContinent1.Text;
executeUpdate(code,population,countryname,continent);                  
BindGrid();                
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);  
}

//Handles Add record button click in main form
protected void btnAdd_Click(object sender, EventArgs e)
{
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);
 
}

//Handles Add button click in add modal popup
protected void btnAddRecord_Click(object sender, EventArgs e)
{
string code = txtCode.Text;
string name = txtCountryName.Text;
string region = txtRegion.Text;
string continent = txtContinent.Text;
int population = Convert.ToInt32(txtTotalPopulation.Text);
int indyear = Convert.ToInt32(txtIndYear.Text);
executeAdd(code, name, continent, region,population, indyear);
BindGrid();
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);
}

//Handles Delete button click in delete modal popup
protected void btnDelete_Click(object sender, EventArgs e)
{
string code=hfCode.Value;
executeDelete(code);
BindGrid();
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);
}

That's it! When the user clicks on detail button for any row,



When the user clicks on 'Edit' Button,


Once the update is done,


When the user clicks delete button,


When the user clicks Add new Record button in the main form,



Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!! 

Subscribe to GET LATEST ARTICLES!


Related

GridView 26619763738687138

Post a Comment

  1. Thank for great project.....i like it...again thanks.

    ReplyDelete
    Replies
    1. Can you reupload the file? I need your file to do my assignment

      Delete
  2. Thank you for the excellent article. It was just what i was looking for.

    I added the table search /sort /pagination from http://datatables.net/ and now when i load any of the modals, the additional functionality from datatable disappears.

    i know that it is not your code, but perhaps you can shed some light on the problem.

    ----
    BTW: to make datatables work, you'll need to add to the code:
    protected void Page_Load(object sender, EventArgs e)
    {
    GridView1.DataBound += new EventHandler(GridView1_DataBound);
    BindGrid();
    }
    void GridView1_DataBound(object sender, EventArgs e)
    {
    if (GridView1.HeaderRow != null)
    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    }

    Thank You!

    ReplyDelete
  3. Hi,

    Great post BTW.

    Everything seems to be working for me but when I insert a new record the modal does not close. I have read that this is due to the updatepanel. Is there a way to get this working?

    Many Thanks,

    A

    ReplyDelete
  4. Hi Priya,
    first of all thank you for your fantastic job.. It's really useful for me!! I have now a big trouble with my gridview.. i hope you can help me... i'm going crazy for a very simple thing. In my web application i use ajax , UpdatePanel, and "Freeze GridView Header using GridViewScroll jQuery plugin". (As you recommended, for ajax application, I put the gridviewScroll function inside the “function pageLoad”.. it works perfectly!! I also put inside the function the code to mantain scroll bar position in edit mode)
    Everything works fine except for the "Header Column Merge" .. the most simple thing :)
    I got the code at the url ‘http://gridviewscroll.aspcity.idv.tw/Demo/Advanced.aspx’. It gives me a lot of javascript errors.. so I was wondering .. is it possible that this example doesn’t work inside an UpdatePanel that is inside an ajax tabcontainer? Have you ever had this problem? Thank you in advance.. Stefania!!

    ReplyDelete
    Replies
    1. Hi Stefania,

      Did you have a chance to look in to this sample code?

      http://gridviewscroll.aspcity.idv.tw/Demo/Support.aspx#UpdatePanel

      Thanks,
      Priya

      Delete
    2. Hi Priya,
      thank you for your prompt reply. I just used the code you suggested in the example 'Header Column Merge', because i need more than 1 row in my header text.
      i tried 2 different ways. first way: If i put inside my pageLoad function this instruction : headerrowcount: 2 and i view in browser i see the double header row but both the scrollbar dont't work anymore.
      Second way: if i remove the instruction 'headerrowcount: 2' and i view in browser i get this error (in the rowcreated event): impossible to recover the property childnote of a null reference (gridviewScroll.min.js).
      thank you for your attention! :) Stefania

      Delete
  5. Hi Priya,

    thank you very much for this well explained article. This is very helpful for my current web project and it works like a charm; perfect :)
    There is one little thing I can't get work. I need a sortable gridview. Can you show me how you would do this within the code above?

    Thank you in advance,
    Frank

    ReplyDelete
  6. Thank for your great helpful project. Many many programmer will be beneficiary by your work.

    ReplyDelete
  7. Hi priya can u reply me all code working fine for me plz tell me why paging is not working .. Waiting for ur ans

    ReplyDelete
  8. Hi Priya,
    Great Post, I have a issue with similar sort of example 1) I have a gridview with edit button in each row as u have.2) A modal popup opens on clicking the edit button 3) The modal popup has a form with some textbox's and a gridview (having dropdownlist column).
    4) on clicking the first dropdown of first column the dropdown next to it in the same row will be populated having related data (eg country and state).5) (Issue)But when i click on the dropdown in the grid the popup closes, which i dont want to do.6) I have buttons also outside the grid but the that doesn't close the popup(working properly).

    ReplyDelete
    Replies
    1. I guess the problem is the form in the modal popup postbacks to pull data from server side when first dropdown value is changed. Do you have your form placed inside an updatepanel?

      If yes, try adding an asynpostback trigger on first dropdownlist change event.

      Hope this helps!

      Thanks,
      Priya

      Delete
    2. I have already tried it but unfortunately, As the control (dropdownlist) is inside the gridview the asynpostback is unable to find it.I tried to get the name from the source code as
      (select id="ddlCategory" class="form-control input-sm" onchange="javascript:setTimeout('__doPostBack(\'ctl00$cphBDTMaster$gvItems$ctl02$ddlCategory\',\'\')', 0)" name="ctl00$cphBDTMaster$gvItems$ctl02$ddlCategory">), But as the grid can have many dropdownlist how it can be used in the async trigger, can u plz help with some code snippet. Thanks Priya

      Delete
  9. Hi Priya,

    Do you have an example of how to add a search functionality to this code? I tried using the search example you gave in the other post and it works but when I click on the details or edit button, it refreshes the gridview losing the search results.
    Thank you,
    Ogechi

    ReplyDelete
  10. can you give me code for searching in grid view using only jquery(with uot using any .net coding) as possible as early

    ReplyDelete
  11. I have one grid view with 4columns like FromAddress,ToAddress,Subject and Password. Now Search the grid view From Column Wise Depands up on Particular TextBox that means I have Four TextBox's For Four GrIDVIEW columns.

    my main require ment is If we enter the FromAddress like srinivas@gmail.com in FromAddress TextBox at that time search the first column and then find any value in that column that values are highlight and at the same time I entered data as veeru@gmail.com in SECOND COLUMN ToAddress then find the values from filtered data in grid view using only jquery not connecting with database also when ever perform the searching. please send this code for me .

    thank u

    ReplyDelete
  12. hi priya

    i need delete operation logic ... i did not your delete operation logic please ....help me dude

    ReplyDelete
  13. hi priya it give this error when i click on detail button
    Unable to cast object of type 'System.Web.UI.WebControls.ContentPlaceHolder' to type 'System.Web.UI.WebControls.GridViewRow'.

    ReplyDelete
  14. Do you have a working version for Bootstrap 3.1? Your sample project works when we use the Bootstrap files included, but when we migrate to Bootstrap 3.1, the modal stops working.

    ReplyDelete
  15. Hi Priya,good job but i have a detail, it is working perfect with google chrome but with internet explorer 8 nothing at all when i try to delete or add or update a record,could you tell me if you had the same problem,please? and what is the solution?
    Thanks a lot

    ReplyDelete
    Replies
    1. Try adding htmlshim script in the head section of your aspx file. This is just an HTML5 enabling script for IE. I have used it and it works.

      http://remysharp.com/2009/01/07/html5-enabling-script/

      Thanks,
      Priya

      Delete
    2. Thanks you for your answer, i did what you recommend me but nothing, after i isntalled IE10 and nothing.which may be the problem? because with google chrome is perfect but with IE is a headache,
      thanks a lot again

      Delete
  16. Finally, i got the answer and it is working perfect.This is the solution if you are working with IE10
    esto en el head

    meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"

    Priya Darshini, Take care, good job,keep going
    thank you

    ReplyDelete
  17. I have the same problem tha Christie ... Your sample project works when we use the Bootstrap files included, but when we migrate to Bootstrap 3.1, the modal stops working. Any ideas? Thanks.

    ReplyDelete
  18. Hi Priya,

    Thank you for the great post.
    I tried implementing the same thing to my application.
    Although, when i Click the "Add Record" button on the Add modal Popup, then nothing happens. The event of the button is not triggered.
    Hope you could please help.

    Thanks

    ReplyDelete
  19. Great article -

    I'm looking to implement something very similar - but I'd also like to include some server-side validation - for example, when the user clicks 'Add Record' and attempts to enter a country code which already exists in the database I'd like a warning message to be displayed in the modal and for the modal to remain displayed on the screen until a unique country code is entered.

    I'm using ASP.NET and C# - any help would be appreciated, thanks.

    ReplyDelete
  20. Thank you for the nice article. It was very helpful article for me..Thanks a lot

    ReplyDelete
  21. hello, first of all, thanks for sharing this, its really a great work :)

    i'm having some problems using the code, i just cant make the modal appear, i'm only using the detail option, but when i click the detail button the only thing that happens is that the text "Loading... please wait" shows at the end of the page
    if i check the code it gives me this error "The source contains no DataRows."

    I'm getting the gridview populated but instead of mysql im using sql, is that making that the modal doesn't show?

    ReplyDelete
  22. Hi Priya, Can you upload again the file to dropbox? because the file has been removed.

    ReplyDelete
  23. This sample is not working for me while i am using master page.
    While click add then the modal does not appear, instead the background gets faded. Should i write in add_click the following?
    sb.Append("$('#<%=addModal.ClientID%>').modal('show');");
    instad of your "sb.Append($('#addModal').modal('show');"

    ReplyDelete
    Replies
    1. I'm also facing the same issue. It's due to bootstraps theme,i.e bootstrap.css file .When I am changing this file to latest bootstrap 3.7,Modal just not triggering. Any help is appreciated. TIA :)

      Delete
  24. Excelente artigo! Me ajudou muito.

    Muito obrigado!!!

    ReplyDelete
  25. Hola, tengo dudas con lo siguiente
    ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "DeleteModalScript", sb.ToString(), False)
    que es el "DeleteModaScript"??

    ReplyDelete
  26. Excelent, Very usefull, great project.
    Congrats!!!!
    Thank you very much

    ReplyDelete
  27. Great to the point and full of functionality. Thanks

    ReplyDelete
  28. Very helpful article. But paging is not working.Please provide some solution

    ReplyDelete



  29. Firstly talking about the Blog it is providing the great information providing by you . Thanks for that .Hope More articles from you . Next i want to share some Information about Salesforce training in Hyderabad .

    ReplyDelete
  30. I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog, I will keep visiting this blog very often 먹튀검증

    ReplyDelete
  31. YOU WILL GET CUSTOM PACKAGING BOXES OF EVERY TYPE TRY OUR Soap Boxes – Soap Packaging Boxes

    ReplyDelete
  32. Attractive section of content. I just stumbled upon your weblog and in accession capital to assert that I getactually enjoyed account your blog posts. Anyway I’ll be subscribing to your feeds and even I achievement you access consistently rapidly. ufabet168

    ReplyDelete
  33. When I read your article on this topic, the first thought seems profound and difficult. There is also a bulletin board for discussion of articles and photos similar to this topic on my site, but I would like to visit once when I have time to discuss this topic. 안전토토사이트


    ReplyDelete
  34. Hi there, I simply hopped over in your website by way of StumbleUpon. Now not one thing I’d typically learn, but I favored your emotions none the less. Thank you for making something worth reading. 메이저사이트순위


    ReplyDelete
  35. I finally found what I was looking for! I'm so happy. 안전한놀이터 Your article is what I've been looking for for a long time. I'm happy to find you like this. Could you visit my website if you have time? I'm sure you'll find a post of interest that you'll find interesting.


    ReplyDelete
  36. very great eccommerce website for custom packaging boxes try now shoe boxes cardboard

    ReplyDelete
  37. I was impressed by your writing. Your writing is impressive. I want to write like you.스포츠토토사이트 I hope you can read my post and let me know what to modify. My writing is in I would like you to visit my blog.


    ReplyDelete
  38. Your internet site has great web content. I assume it was a great chance to transform my mind once more after reading this short article. I'm creating like you. Would certainly you such as to see my blog post as well as request comments?바카라사이트

    ReplyDelete
  39. Have you noticed the news has changed its approach recently? What used to neve be brought up or discussed has changed. It’s that time to chagnge our stance on this though. ufabet168

    ReplyDelete


  40. Great work! That is the type of information that are meant to be shared
    around the net. Shame on the seek engines for no longer positioning this publish upper!
    Come on over and discuss with my site . Thanks
    =)

    Here is my webpage; 오피월드



    ReplyDelete
  41. Hello, I am one of the most impressed people in your article. 온라인바카라 If possible, please visit my website as well. Thank you.


    ReplyDelete
  42. How can you think of this? I thought about this, but I couldn't solve it as well as you.샌즈카지노I am so amazing and cool you are. I think you will help me. I hope you can help me.


    ReplyDelete
  43. Thanks for the wonderful share. Your article has proved your hard work and experience you have got in this field. Brilliant .i love it reading. Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. I am so delighted I located your blog, I really located you by mistake, while I was watching on google for something else, Anyways I am here now and could just like to say thank for a tremendous post and a all round entertaining website. Please do keep up the great work. 메이저사이트

    ReplyDelete
  44. I have to search sites with relevant information on given topic and provide them to teacher our opinion and the article. I was surfing the Internet for information and came across your blog. I am impressed by the information you have on this blog. It shows how well you understand this subject. You understand so much its practically challenging to argue along (not too I actually would want…HaHa). You certainly put the latest spin with a topic thats been discussed for decades. Great stuff, just wonderful! It is a completely interesting blog publish.I often visit your posts for my project's help about Diwali Bumper Lottery and your super writing capabilities genuinely go away me taken aback 안전놀이터

    ReplyDelete
  45. I got too much interesting stuff on your blog. I guess I am not the only one having all the enjoyment here! Keep up the good work . This is actually the kind of information I have been trying to find. Thank you for writing this information. I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post . I have read your excellent post. This is a great job. I have enjoyed reading your post first time. I want to say thanks for this post. Thank you... Lovely read. Loved the thought that is put behind it. 에볼루션카지노

    ReplyDelete
  46. Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. This is very interesting content! I have thoroughly enjoyed reading your points and have come to the conclusion that you are right about many of them. You are great. I read this article. I think You put a great deal of exertion to make this article. I like your work. Thank you so much for sharing this article with us. I would like to say you that keep uploading more 토토매거진

    ReplyDelete
  47. Very likely I’m going to bookmark your blog . You absolutely have wonderful stories. Cheers for sharing with us your blog . Thanks for sharing such information with us due to which my several concepts have been cleared. I really like your writing so a lot! percentage we keep up a correspondence extra about your article on AOL? I require an expert on this area to unravel my problem. Maybe that's you! Taking a look ahead to look you. Thanks for sharing such information with us due to which my several concepts have been cleared. Going through this post reminds me of my previous roommate! He continually kept talking about this. I am going to send this article to him. Fairly certain he will have a very good read. 토디즈

    ReplyDelete
  48. very interesting post. This is my first time visit here. I found so many interesting stuff in your blog especially its discussion.. thanks for the post! This is an excellent post I seen thanks to share it. It is really what I wanted to see hope in future you will continue for sharing such a excellent post. I wanted to thank you for this excellent read!! I definitely loved every little bit of it. I have you bookmarked your site to check out the new stuff you post. Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. 사설토토

    ReplyDelete
  49. I'm really loving the theme/design of your blog. Do you ever run into any web browser compatibility issues? A small number of my blog visitors have complained about my blog not operating correctly in Explorer but looks great in Chrome. Do you have any tips to help fix this problem? I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work. I would also motivate just about every person to save this web page for any favorite assistance to assist posted the appearance. 온카맨

    ReplyDelete
  50. You should be able to find a Wordpress Developer to build a nice looking website for you quite easily, it's the most popular platform on the web, so you have lots of options.

    ReplyDelete
  51. wordle game is an on a regular basis phrase recreation that invitations you to try to guess a five-letter phrase in simply six tries. The sport is a conundrum wherein there aren't any hints. You could have six possibilities to decrypt the phrase, together with 5 characters, and on every of these possibilities, chances are you'll select any relative or phrase containing 5 letters. In the event you enter a phrase into your keyboard after which hit the Enter key, the end result of that phrase will function a touch for the subsequent phrase. The problem is taken into account failed after the sixth strive if the phrase will not be discovered. There aren't any extra retries out there past the primary six rows in the Wordle grid. Your recreation stats will document the hassle (rows) that you've made to decode the phrase of the day.

    ReplyDelete
  52. Thank for sharing good blog. your article about ‘bootstrap’ is very useful for me. I learnt here many things, which i did’t know before. I will try these tip now, Whatever the result will be, I must share with you.

    Newspaper Ad Agency

    ReplyDelete

emo-but-icon

SUBSCRIBE


item