Thursday, July 12, 2012

Jquery -> Dynamically add table rows/columns

    Date:    12-july-12
    Code:    Jquery, Javascript
    Purpose: Add rows to a html table dynamically depending on the selection of checkboxes   
function addSelectedItems(chkBox) {

    //the name of the checkbox is in the form of FilteredPeers[0].IsSelected where 0(zero) is the row index
    var rowindex = $(chkBox).attr('name').split("[")[1].split("]")[0];

//cell1 is the companyname which is also in the format FilteredPeers[0].CompanyName
    var field1 = document.getElementsByName('FilteredPeers[' + rowindex + '].CompanyName');

//Getting the value of the cell
    var companyname = $(field1).val();

/* Append columns to the table header row*/
    $('#tblSelected thead tr').append('<th>' + companyname + '</th>');

/* Append rows to a table */
    //        $('input[type="checkbox"]').each(function () {
    //            if ($(this).val() == 'true') {
    //                $('#tblFR').append('<tr id="1"><td colspan="2">Dyanmic row</td></tr>');
    //            } else {
    //                $('#tblFR tr').remove('<tr id="1">');
    //            }
    //        });


Wednesday, September 28, 2011

Download/Open file option on webpage

The following C# code can be used to create option for download/ open a file on the webpage.

  - - Regards.. $ree

Friday, July 15, 2011

Javascript -> Client Validations -> Refreshing Validation Summary Messages

      Validation Summary is used to display the validation messages of all the web controls on the page at one place. Usually the validation summary doesn’t refresh the validation messages when each control is validated. So, some additional functionality should be added to force it display the updated validation messages

(1). Add a Validation Summary attribute on the aspx page as below…

<%-- This is Validation Summary on aspx page--%>
<asp:ValidationSummary runat="server" ID="valSummary"
HeaderText="* Please fill the below information correctly<br/><br/>"
DisplayMode="BulletList" ShowSummary="true" ValidationGroup="Submit" CssClass="star"
       EnableClientScript="true" />

(2). Add the Javascript function for refreshing the Validation Summary on the same page.

<script type="text/javascript" language="javascript">
//--This is the javascript for refreshing Validation Summary
function RecheckValidators() {
for (var i = 0; i < Page_Validators.length; i++) {
ValidatorValidate(Page_Validators[i], null, null);

 (3). Add the below code in code behind (aspx.cs file) on page load event to call the Javascript function on each control
protected void Page_Load(object sender, EventArgs e)
  if (!IsPostBack)
//--Bind the javascript method to the onblur event of each control having validator
txtContactNumber.Attributes.Add("onBlur", "RecheckValidators('');");
txtEmailID.Attributes.Add("onBlur", "RecheckValidators('');");

Javascript -> Client Validations -> Custom validator

       Custom Validator is used to perform user-defined functionality check for the input data. The example scenario is shown in this post...

Validation Criteria: Date of birth should be minimum 18 years before the current year, that means the candidate appearing for the exam should be of 18 years or above.

(1) Add the input text field for DOB(i have used jquery calendar to  select the date).

<input type="text" runat="server" readonly="readonly" id="inputDOB" onkeydown="return false" />
<asp:CustomValidator runat="server" ID="custVal" ClientValidationFunction="validateDOB"ControlToValidate="inputDOB" Display="Dynamic" ErrorMessage="Age must be min.18 years"EnableClientScript="true" ValidationGroup="Submit"></asp:CustomValidator>

(2). Add the Javascript function to validate the DOB field

function validateDOB(source, arguments) {
 var txt = document.getElementById('<%=inputDOB.ClientID%>');
var dob = new Date(txt.value);
var currentDate = new Date();
 var yearDiff = currentDate.getFullYear() - dob.getFullYear();
if (yearDiff < 18) {
      arguments.IsValid = false;
      arguments.IsValid = true;