Pass parameter from to javascript.

Recently we have a requirement to put a checkbox in every gridview row, but only maximum rows allow to be selected, if you select more, the javascript need to alert you. The thing is the maximum number should get from web.config and shouldn’t be hard coded, so how pass the backend argument to the front javascript? There is a few ways to pass, but the following is working for me than others, for example using code block

Backend aspx.vb page:

    Private Sub gridview_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gdvw_Survey.RowDataBound
        Dim ck As CheckBox
            If e.Row.RowType = DataControlRowType.DataRow Then
                ck = DirectCast(e.Row.FindControl("ckselected"), CheckBox)
                ck.Attributes.Add("OnClick", "CheckGridList(" & DataController.getMaxNumber & ")")
            End If
        Catch ex As Exception
        End Try
    End Sub

Frontend page:


  <script type="text/javascript">
        function CheckGridList(maxnumber)
                var count = 0;
                for (i=0; i < document.forms[0].elements.length; i++)
                        if (document.forms[0].elements[i].type == 'checkbox') 
                            if (document.forms[0].elements[i].checked == true)
                            if (count > maxnumber)
                                    document.forms[0].elements[i].checked = false;                       
                    if (count > maxnumber)
                        alert("Only 5 items can be selected at one time.");
                        return false;
                    else { return true;}

                 <asp:GridView ID="gridview" runat="server" CellPadding="4" GridLines="None" AutoGenerateColumns="False" DataKeyNames="ID"  Width = "100%">

                            <asp:BoundField DataField="ID" HeaderText="" ReadOnly="True" Visible="False"/>  

                            <asp:BoundField DataField="Order" HeaderText="Number"  >
                                <ItemStyle Font-Size="Small" HorizontalAlign="Center" Font-Names="Arial" />
                                <HeaderStyle Font-Size="Small" HorizontalAlign="Center" Font-Names="Arial"/>

                                    <asp:CheckBox ID="ck" runat="server" Checked="false" />

                            <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width = "90%" >
                                <ItemStyle Font-Size="Small" HorizontalAlign="Left"   Font-Names="Arial"/>
                                <HeaderStyle Font-Size="Small" HorizontalAlign="Center" Font-Names="Arial" />

                        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />          
                        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                            <asp:CheckBox ID="ckladjust" runat="server" Checked="True" />

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s