ASP.NET: GridView CRUD using Twitter Bootstrap Modal Popup




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
  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

emo-but-icon

SUBSCRIBE


item