i have many rows on mouseover of each row popup will openi need to close popup using javascriptif i use myModalmodalhidethen on mouse over on graph sometimes it shows previous rows graph also ltaspGridView ID34grdperformance34 runat34server34 Width3410034 BorderColor34c4e7e734 BorderWidth341px34 OnRowDataBound34grdperformanceRowDataBound34 AutoGenerateColumns34false34 gt ltColumn

Hi mukesh1Check this example Now please take its reference and correct your codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery191jqueryminjs34gtltscriptgt ltscript type34textjavascript34 src34httpmaxcdnbootstrapcdncombootstrap332jsbootstrapminjs34gtltscriptgt ltlink rel34stylesheet34 href34httpmaxcdnbootstrapcdncombootstrap332cssbootstrapmincss34 gt ltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibsChartjs250Chartminjs34gtltscriptgt ltscript type34textjavascript34gt function hidepopup 39barchart39empty 39myModal39modal39hide39 function ShowpointchartTasktitle

Show canvas Bar chart on Bootstrap Modal Popup on ASP.Net GridView mouse hover using jQuery

mukesh1

SOLVED CLOSED ACTIVE ANSWERED
User: mukesh1
Posted: on Sep 19, 2018 05:32 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 7144
Sample Code: Download

i have many rows on mouseover of each row popup will open.

i need to close popup using javascript.

if i use

$('#myModal').modal('hide');

then on mouse over on graph sometimes it shows previous rows graph also

                    <asp:GridView ID="grdperformance" runat="server" Width="100%" BorderColor="#c4e7e7" BorderWidth="1px" OnRowDataBound="grdperformance_RowDataBound"  AutoGenerateColumns="false"  >
                        <Columns>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                <div class="col-md-8">    <label>Task Title</label></div>
                                 <div class="col-md-4">      <label>Total Points</label></div>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <div class="col-md-8"><a style="color:white;" onmouseover='Showpointchart("<%#Eval("Task_title")%>","<%#Eval("Remarks1")%>","<%#Eval("Points1")%>","<%#Eval("Remarks2")%>","<%#Eval("Points2")%>","<%#Eval("Remarks3")%>","<%#Eval("Points3")%>","<%#Eval("Remarks4")%>","<%#Eval("Points4")%>","<%#Eval("Remarks5")%>","<%#Eval("Points5")%>","<%#Eval("Remarks6")%>","<%#Eval("Points6")%>","<%#Eval("Remarks7")%>","<%#Eval("Points7")%>","<%#Eval("Remarks8")%>","<%#Eval("Points8")%>","<%#Eval("Remarks9")%>","<%#Eval("Points9")%>","<%#Eval("Remarks10")%>","<%#Eval("Points10")%>")' >   <%# Eval("Task_title") %></a></div>
                                    <div class="col-md-4">
                                        <asp:Label ID="Label4" runat="server" Text='<%# Eval("Total_Points") %>'></asp:Label>
                                       
                                    </div>
                     </asp:GridView>

<div class="col-md-12">
          <div class="modal fade" id="myModal"  role="dialog"  onmousedown="hidepopup()"   >
    <div class="modal-dialog" style="width:700px">
        <!-- Modal content-->
        <div class="modal-content"  >
<div class="modal-body"   >
                <span style="color:red"> <%--Click to Close--%></span>
                <%--<br/>--%>
                Employee Task Report
                <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12" >
                   
                    <br /><br />
                    
                    <div class="col-md-12">
                   <%--//taskchart--%>
                          <canvas id="bar-chart"  width="500" height="300"></canvas>
                    </div>
                  </div>
                 
            </div>
             
            <div class="modal-footer"   >
                <hr />
                <button type="button" class="btn btn-info" onmouseover="hidepopup()" data-dismiss="modal">
                    Close</button>
            </div>
        </div>
    </div>
</div>

         function Showpointchart(title,remark1,point1,remark2,point2,remark3,point3,remark4,point4,remark5,point5, remark6,point6,remark7,point7,remark8,point8,remark9,point9,remark10,point10)
         {
             alert("ok");
             $('#myModal').modal('show');
             $('#myModal').on('shown.bs.modal', function () {
 
                 var ctx = document.getElementById("bar-chart").getContext('2d');
                 var myChart = new Chart(ctx, {
                     type: 'bar',
                     data: {
                         labels: [remark1, remark2, remark3, remark4, remark5, remark6, remark7, remark8, remark9, remark10],
                         datasets: [{
                             label: "Points",
                             data: [point1, point2, point3, point4, point5, point6, point7, point8, point9, point10],
                             backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"]
                         }]
                     },
                     options: {
                         legend: {
                             display: false
                         },
                         scales: {
                             yAxes: [{
                                 ticks: {
                                     beginAtZero: true
                                 }
                             }],
                             xAxes: [{
                                 ticks: {
                                     callback: function (value, index, values) {
                                         // return only first 4 charater of remark.
                                         return (value.substr(0, 10) + "..");
                                     }
                                 }
                             }]
                         },
                         tooltips: {
                             callbacks: {
                                 title: function (tooltipItem, data) {
                                     // Returns text to render as the title of the tooltip.
                                     return data.labels[tooltipItem[0].index];
                                 }
                             }
                         }
                     }
                 });
             })
         }
         function hidepopup() { 
             $('#myModal').modal('hide');
         }

dharmend...

0 13

Reply
ANSWER
User: dharmendr
Replied: on Sep 21, 2018 03:14 AM
Report

Hi mukesh1,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script type="text/javascript">
        function hidepopup() {
            $('#bar-chart').empty();
            $('#myModal').modal('hide');
        }
        function Showpointchart(Task_title, Remarks1, Points1, Remarks2, Points2) {
            $('#bar-chart').empty();
            $('#myModal').modal('show');
            $('#myModal').on('shown.bs.modal', function () {
                var ctx = document.getElementById("bar-chart").getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: [Remarks1, Remarks2],
                        datasets: [{
                            label: "Points",
                            data: [Points1, Points2],
                            backgroundColor: ["#3e95cd", "#8e5ea2"]
                        }]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }],
                            xAxes: [{
                                ticks: {
                                    callback: function (value, index, values) {
                                        // return only first 4 charater of remark.
                                        return value.substr(0, 4);
                                    }
                                }
                            }]
                        },
                        tooltips: {
                            callbacks: {
                                title: function (tooltipItem, data) {
                                    // Returns text to render as the title of the tooltip.
                                    return data.labels[tooltipItem[0].index];
                                }
                            }
                        }
                    }
                });
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="grdperformance" runat="server" AutoGenerateColumns="false" CssClass="table table-responsive">
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <div class="col-md-8">
                        <label>
                            Task Title</label></div>
                    <div class="col-md-4">
                        <label>
                            Total Points</label></div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div class="col-md-8">
                        <a style="color: Red;" onmouseover='Showpointchart("<%#Eval("Task_title")%>","<%#Eval("Remarks1")%>","<%#Eval("Points1")%>","<%#Eval("Remarks2")%>","<%#Eval("Points2")%>")'>
                            <%# Eval("Task_title") %></a></div>
                    <div class="col-md-4">
                        <asp:Label ID="Label4" runat="server" Text='<%# Eval("Total_Points") %>'></asp:Label>
                    </div>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <div class="col-md-12">
        <div class="modal fade" id="myModal" role="dialog" onmousedown="hidepopup()">
            <div class="modal-dialog" style="width: 300px">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-body">
                        <span style="color: red"></span>Employee Task Report
                        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                            <br />
                            <br />
                            <div class="col-md-12">
                                <%--//taskchart--%>
                                <canvas id="bar-chart" width="200" height="200"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <hr />
                        <button type="button" class="btn btn-info" onmouseover="hidepopup()" data-dismiss="modal">
                            Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("Task_title", typeof(string)), 
            new DataColumn("Remarks1", typeof(string)), new DataColumn("Points1", typeof(int)), 
            new DataColumn("Remarks2", typeof(string)), new DataColumn("Points2", typeof(int)), 
            new DataColumn("Total_Points", typeof(int)) });
        dt.Rows.Add("A", "Re1", 30, "Re2", 40, 100);
        dt.Rows.Add("B", "Re1", 50, "Re2", 60, 100);
        dt.Rows.Add("C", "Re1", 70, "Re2", 80, 100);
        grdperformance.DataSource = dt;
        grdperformance.DataBind();
    }
}

Screenshot

Show canvas Bar chart on Bootstrap Modal Popup on ASP.Net GridView mouse hover using jQuery

Company

Explore

Follow us

Contact Us