Fit text into fixed width Div

Hi just do as following to fit text into fixed width div

<div id="outer" style="width:500px; height:100px; border:1px solid red;">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
    resize_to_fit();
});
function resize_to_fit(){
    var fontsize = $('div#outer div').css('font-size');
    $('div#outer div').css('fontSize', parseFloat(fontsize) - 1);
    if($('div#outer div').height() >= $('div#outer').height()){
        resize_to_fit();
    }
}
</script>

Common Functions

This function will get File Upload Control as input and save the file with adding time stamp before the file name and returns the file name.

public string UploadFile(FileUpload fup)
    {
        string FileName,TimeStamp;
        TimeStamp = DateTime.Now.ToString("yyyyMMddHHmmssfff");
        fup.SaveAs(HttpContext.Current.Server.MapPath("~/image/" + TimeStamp + "_" + fup.PostedFile.FileName));
        FileName = TimeStamp + "_" + fup.PostedFile.FileName;
        return FileName;
    }

This function will convert list to datatable.

public static DataTable ListToDataTable<T>(IEnumerable<T> list)
        {
            DataTable table = new DataTable();
            if (list != null)
            {
                PropertyDescriptorCollection properties = TypeDescriptor.GetProperties(typeof(T));
                foreach (PropertyDescriptor prop in properties)
                    table.Columns.Add(
                        prop.Name,
                        (prop.PropertyType.IsGenericType &&
                         prop.PropertyType.GetGenericTypeDefinition() == typeof(Nullable<>))
                            ? Nullable.GetUnderlyingType(prop.PropertyType)
                            : prop.PropertyType
                        );
                foreach (T item in list)
                {
                    DataRow row = table.NewRow();
                    foreach (PropertyDescriptor prop in properties)
                        row[prop.Name] = prop.GetValue(item) ?? DBNull.Value;
                    table.Rows.Add(row);
                }
            }
            return table;
        }

To Change Validators to Image

private void SetValidatorDisplay()
        {
            foreach (var validator in Page.Validators)
            {
                var reqvalidator = (validator as BaseValidator);
                if (reqvalidator != null)
                {
                    reqvalidator.Display = ValidatorDisplay.Dynamic;
                    if (!string.IsNullOrEmpty(reqvalidator.ErrorMessage))
                    {
                        if (!reqvalidator.ErrorMessage.Contains("<img"))
                        {
                            reqvalidator.ToolTip = reqvalidator.ErrorMessage;
                            string imagePath = General.VALIDATIONICON; // ADD VALIDATION IMAGE ICON TO DISPLAY VALIDATIONS
                           
                            reqvalidator.Text = @"<img src='" + imagePath + "' alt='" + reqvalidator.ToolTip + "'></img>";
                        }
                    }
                }
            }
        }

Encrypt or Decrypt the Data

Include the following class to manage cryptography in the project.

public class EncryptDecrypt
    {       
        private const string initVector = "tu89geji340t89u2";
        private const int keysize = 256;

        public static string Encrypt(string Text, string Key)
        {
            byte[] initVectorBytes = Encoding.UTF8.GetBytes(initVector);
            byte[] plainTextBytes = Encoding.UTF8.GetBytes(Text);
            PasswordDeriveBytes password = new PasswordDeriveBytes(Key, null);
            byte[] keyBytes = password.GetBytes(keysize / 8);
            RijndaelManaged symmetricKey = new RijndaelManaged();
            symmetricKey.Mode = CipherMode.CBC;
            ICryptoTransform encryptor = symmetricKey.CreateEncryptor(keyBytes, initVectorBytes);
            MemoryStream memoryStream = new MemoryStream();
            CryptoStream cryptoStream = new CryptoStream(memoryStream, encryptor, CryptoStreamMode.Write);
            cryptoStream.Write(plainTextBytes, 0, plainTextBytes.Length);
            cryptoStream.FlushFinalBlock();
            byte[] Encrypted = memoryStream.ToArray();
            memoryStream.Close();
            cryptoStream.Close();
            return Convert.ToBase64String(Encrypted);
        }

        public static string Decrypt(string EncryptedText, string Key)
        {
            byte[] initVectorBytes = Encoding.ASCII.GetBytes(initVector);
          //  byte[] DeEncryptedText = Convert.FromBase64String(EncryptedText);
            EncryptedText = EncryptedText.Replace(" ", "+");
            byte[] DeEncryptedText = Convert.FromBase64String(EncryptedText);
            PasswordDeriveBytes password = new PasswordDeriveBytes(Key, null);
            byte[] keyBytes = password.GetBytes(keysize / 8);
            RijndaelManaged symmetricKey = new RijndaelManaged();
            symmetricKey.Mode = CipherMode.CBC;
            ICryptoTransform decryptor = symmetricKey.CreateDecryptor(keyBytes, initVectorBytes);
            MemoryStream memoryStream = new MemoryStream(DeEncryptedText);
            CryptoStream cryptoStream = new CryptoStream(memoryStream, decryptor, CryptoStreamMode.Read);
            byte[] plainTextBytes = new byte[DeEncryptedText.Length];
            int decryptedByteCount = cryptoStream.Read(plainTextBytes, 0, plainTextBytes.Length);
            memoryStream.Close();
            cryptoStream.Close();
            return Encoding.UTF8.GetString(plainTextBytes, 0, decryptedByteCount);
        }
    }
 

Project Session Class to Manage Session in the Project

This Class is used to manage sessions in the system.

public class ProjectSession
    {
        public static long UserID
        {
            get
            {
                if ((HttpContext.Current.Session["UserID"]) == null)
                    return 0;
                else
                    return (long)HttpContext.Current.Session["UserID"];
            }
            set { HttpContext.Current.Session["UserID"] = value; }
        }
        public static string UserName
        {
            get
            {
                if ((HttpContext.Current.Session["UserName"]) == null)
                    return "";
                else
                    return (string)HttpContext.Current.Session["UserName"];
            }
            set { HttpContext.Current.Session["UserName"] = value; }
        }
        public static string LoginId
        {
            get
            {
                if ((HttpContext.Current.Session["LoginId"]) == null)
                    return "";
                else
                    return (string)HttpContext.Current.Session["LoginId"];
            }
            set { HttpContext.Current.Session["LoginId"] = value; }
        }
        public static long RoleID
        {
            get
            {
                if ((HttpContext.Current.Session["RoleID"]) == null)
                    return 0;
                else
                    return (long)HttpContext.Current.Session["RoleID"];
            }
            set { HttpContext.Current.Session["RoleID"] = value; }
        }
}
 

Use Multiple Grids on Partial View

Sometimes we need to have multiple grids on a single view at that time create a model which have property of different models like following.

[DataContract]
    public class DashboardGridModel
    {
        [DataMember]
        public List<MilestoneDelays> MilestoneDelay { get; set; }
        [DataMember]
        public List<Receivables> Receivable { get; set; }
        [DataMember]
        public List<PaymentDues> PaymentDue { get; set; }
 }

[DataContract]
    public class MilestoneDelays
    {
        [DataMember]
        public string CustomerName { get; set; }
        [DataMember]
        public string ProjectName { get; set; }
        [DataMember]
        public string MileStoneName { get; set; }
        [DataMember]
        public int Amount { get; set; }
        [DataMember]
        public string EndDate { get; set; }
    }
    [DataContract]
    public class Receivables
    {
        [DataMember]
        public string InvoiceNo { get; set; }
        [DataMember]
        public string InvoiceDate { get; set; }
        [DataMember]
        public string CustomerName { get; set; }
        [DataMember]
        public string ProjectName { get; set; }
        [DataMember]
        public string Amount { get; set; }
    }
    [DataContract]
    public class PaymentDues
    {
        [DataMember]
        public string InvoiceNo { get; set; }
        [DataMember]
        public string InvoiceDate { get; set; }
        [DataMember]
        public string CustomerName { get; set; }
        [DataMember]
        public string ProjectName { get; set; }
        [DataMember]
        public string Amount { get; set; }
    }

Now create a Partial view

@model Common.Models.DashboardGridModel
<div>
    <div>
        <br />
        <div class="span12 panel panel-primary grid">
            <div class="panel-heading">
                <h5 class="panel-title">Milestone Delays</h5>
            </div>
            <div class="row-fluid">
                <div id="GroupDetailGrid" class="divGrid">
                    <table class="table table-bordered table-striped table-hover gridtable">
                        <thead>
                            <tr>
                                <th>Customer Name
                                </th>
                                <th>Project Name
                                </th>
                                <th>Mile stone
                                </th>
                                <th>End Date
                                </th>
                                <th class="text-right">Amount
                                </th>
                                <th>&nbsp;
                                </th>
                            </tr>
                        </thead>
                        @foreach (var item in Model.MilestoneDelay)
                        {
                            <tr>
                                <td>@item.CustomerName
                                </td>
                                <td>@item.ProjectName
                                </td>
                                <td>@item.MileStoneName
                                </td>
                                <td>@item.EndDate
                                </td>
                                <td class="text-right">@item.Amount
                                </td>
                            </tr>
                        }
                    </table>                 
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="span12 panel panel-primary grid">
            <div class="panel-heading">
                <h5 class="panel-title">Receivables                     
                </h5>
            </div>
            <table class="table table-bordered table-striped table-hover gridtable">
                        <thead>
                            <tr>
                                <th>Invoice No
                                </th>
                                <th>Invoice Date
                                </th>
                                <th>Customer Name
                                </th>
                                <th>Project Name
                                </th>
                                <th class="text-right">Amount
                                </th>
                                <th>&nbsp;
                                </th>
                            </tr>
                        </thead>
                        @foreach (var item in Model.Receivable)
                        {
                            <tr>
                                <td>@item.InvoiceNo
                                </td>
                                <td>@item.InvoiceDate
                                </td>
                                <td>@item.CustomerName
                                </td>
                                <td>@item.ProjectName
                                </td>
                                <td class="text-right">@item.Amount
                                </td>
                            </tr>
                        }
                    </table>
          
        </div>
    </div>
    <div>
        <div class="span12 panel panel-primary grid">
            <div class="panel-heading">
                <h5 class="panel-title">Outstanding
                </h5>
            </div>
            <table class="table table-bordered table-striped table-hover gridtable">
                        <thead>
                            <tr>
                                <th>Invoice No
                                </th>
                                <th>Invoice Date
                                </th>
                                <th>Customer Name
                                </th>
                                <th>Project Name
                                </th>
                                <th class="text-right">Amount
                                </th>
                                <th>&nbsp;
                                </th>
                            </tr>
                        </thead>
                        @foreach (var item in Model.PaymentDue)
                        {
                            <tr>
                                <td>@item.InvoiceNo
                                </td>
                                <td>@item.InvoiceDate
                                </td>
                                <td>@item.CustomerName
                                </td>
                                <td>@item.ProjectName
                                </td>
                                <td class="text-right">@item.Amount
                                </td>
                            </tr>
                        }
                    </table>
        </div>
    </div>
</div>

Now add Div on webpage body where you want to load this partial view of grids.

<div id="DashboardGrids" style="width:80%;float:left;"></div>

Now add an action in controller which will be called to render partial view

[HttpGet]
        public ActionResult RanderPartial(string Criteria, string FromYear, string FromMonth, string ToYear, string ToMonth, string ProjectList)
        {
            DashBoardServices Dashboard = new DashBoardServices();
            DashboardGridModel DashboardModel = new DashboardGridModel();
            DashboardModel.MilestoneDelay = DataTableExtensoins.ToList<MilestoneDelays>(Dashboard.GetDelayedMilestoneGrid(Criteria, FromYear, FromMonth, ToYear, ToMonth, ProjectList).Tables[0]);
            DashboardModel.Receivable = DataTableExtensoins.ToList<Receivables>(Dashboard.GetReceivablesGrid(Criteria, ProjectList).Tables[0]);
            DashboardModel.PaymentDue = DataTableExtensoins.ToList<PaymentDues>(Dashboard.GetPaymentDuesGrid(Criteria, ProjectList).Tables[0]);
            return PartialView("_GridData", DashboardModel);
        }

Now add the following script and call it on button click or on document ready.

function BindGrid() {       
var Projects = "";
        $(".chk").each(function () {
            if ($(this).is(':checked'))
                Projects += $(this).val() + ",";
        });
        var ProjectList = Projects.substring(0, Projects.length - 1);
        var Criteria = $("#ddlCriteria").val();
        var From = "", To = "", Title = "";;
        var Tenure = $("#ddlTenure").val();
        var FromYear, FromMonth, ToYear, ToMonth;
        if (Tenure == "Monthly") {
            From = $("#ddlFrom").val();
            To = $("#ddlTo").val();
            FromYear = From.toString().substring(0, 4);
            FromMonth = From.toString().substring(4, 6);
            ToYear = To.toString().substring(0, 4);
            ToMonth = To.toString().substring(4, 6);
            //Title = "(Period " + $("#ddlFrom").val() + "-" + $("#ddlTo").val() + ")";
            Title = "";
        }
        $.get('../Dashboard/RanderPartial', { Criteria: Criteria, FromYear: FromYear, FromMonth:FromMonth, ToYear: ToYear,ToMonth:ToMonth, ProjectList: ProjectList }, function (data) {
            $('#DashboardGrids').html(data);
        });
    }

 

 

JQPlot Charts

To use JQPlot Charts first download JQPlot JQuery plugins from http://www.jqplot.com/

now copy the required js files from plugin to your project and add the script as follows. This script is as per my requirement so yours logic and code can differ from mine.

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.jqplot.min.js"></script>
<link href="~/Content/Styles/jquery.jqplot.css" rel="stylesheet" />
<script src="~/Scripts/jqplot.barRenderer.min.js"></script>
<script src="~/Scripts/jqplot.categoryAxisRenderer.min.js"></script>
<script src="~/Scripts/jqplot.pointLabels.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 BindChart();   
 }

 function BindChart() {
        try {
   var Projects = "";
        $(".chk").each(function () {
            if ($(this).is(':checked'))
                Projects += $(this).val() + ",";
        });
        var ProjectList = Projects.substring(0, Projects.length - 1);
        var Criteria = $("#ddlCriteria").val();
        var From = "", To = "", Title = "";;
        var Tenure = $("#ddlTenure").val();
        var FromYear, FromMonth, ToYear, ToMonth;
        if (Tenure == "Monthly") {
            From = $("#ddlFrom").val();
            To = $("#ddlTo").val();
            FromYear = From.toString().substring(0, 4);
            FromMonth = From.toString().substring(4, 6);
            ToYear = To.toString().substring(0, 4);
            ToMonth = To.toString().substring(4, 6);
            //Title = "(Period " + $("#ddlFrom").val() + "-" + $("#ddlTo").val() + ")";
            Title = "";
        }

           var ChartData = new Array();
           $.getJSON("../Dashboard/DelayedMilestoneChartData", { Criteria: Criteria, FromYear: FromYear, FromMonth: FromMonth, ToYear: ToYear, ToMonth: ToMonth, ProjectList: ProjectList }, function (temp) {
                if (temp != null || temp != undefined || temp != "") {
                    for (var m = 0; m < temp.Month.length; m++) {
                        var MonthWiseData = new Array()
                        for (var c = 0; c < temp.Company.length; c++) {
                            var flag = 0;
                            for (var i = 0; i < temp.Data.length; i++) {
                                if (temp.Data[i].Month == temp.Month[m] && temp.Data[i].CustomerName == temp.Company[c]) {
                                    MonthWiseData.push([parseInt(temp.Data[i].Amount)]);
                                    var flag = 1;
                                }
                            }
                            if (flag == 0) {
                                MonthWiseData.push([parseInt(0)]);
                            }
                        }
                        ChartData.push('[' + MonthWiseData + ']');
                    }
                    for (var m = 0; m < temp.Month.length; m++) {
                        temp.Month[m] = "{label:'" + temp.Month[m] + "'}";
                    }
                   
                   
                    var ticks = eval('"' + temp.Company + '"');
                    var legend = "[" + temp.Month + "]";
                    var ChartLabel = ticks.split(",");
                    var ChartLegend = eval(legend);
                    if (ChartData.length == 0) {
                        $("#DelayedMilestones").empty();
                        $("#DelayedMilestones").append('<h2 style="margin:130px 0 0 40px;">No Milestones Delay</h2>');                      
                    }
                    DelayedMilestones = $.jqplot('DelayedMilestones', eval('[' + ChartData + ']'), {
                        // stackSeries: true,
                        title: 'Delayed Milestones ' + Title,//(Period Jan-Mar 2014)',
                        captureRightClick: true,
                        seriesDefaults: {
                            renderer: $.jqplot.BarRenderer,
                            rendererOptions: {
                                barMargin: 30,
                                highlightMouseDown: true
                            },
                            rendererOptions: { fillToZero: false },
                            pointLabels: { show: true }
                        },
                        series: ChartLegend,
                        axes: {
                            xaxis: {
                                renderer: $.jqplot.CategoryAxisRenderer,
                                ticks: ChartLabel,
                                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                                tickRenderer: $.jqplot.CanvasAxisTickRenderer
                            },
                            yaxis: {
                                padMin: 0
                            }
                        },
                        legend: {
                            show: true,
                            location: 'ne',
                            placement: 'outsideGrid'
                        },
                        grid: { drawBorder: false }
                    }).replot();
                }
            });
        }
        catch (e) {
        }
    }   
</script>

Now Add the div in your webpage body to render the chart.

<div id="dvDelayedMilestones" class="HalfSpace"><div id="DelayedMilestones"></div></div>

Create an action to make an AJAX call for chart data like following.

[HttpGet]
        public JsonResult DelayedMilestoneChartData(string Criteria, string FromYear, string FromMonth, string ToYear, string ToMonth, string ProjectList)
        {
            DashBoardServices Dashboard = new DashBoardServices();
            DataSet dsCustomers = new DataSet();
            dsCustomers = Dashboard.GetDelayedMilestoneChart(Criteria, FromYear, FromMonth, ToYear, ToMonth, ProjectList);
            var data = DataTableExtensoins.ToList<DashboardGridModel>(dsCustomers.Tables[0]).ToList();
            var months = data.Select(m => m.Month).Distinct().ToList();
            var company = data.Select(c => c.CustomerName).Distinct().ToList();
            return Json(new { Data = data,Month = months, Company = company }, JsonRequestBehavior.AllowGet);
        }

Add or Delete Feature Details Dynamically using JQuery

Add the following script

function AddFeatureRow() {
        var row = jQuery('#feature tbody>tr:last').clone(true);
        //Retrive text box and rename its id and clear value
        var index = parseInt(jQuery("td span", row).text()) + 1;
        //jQuery("td input:text", row).val("");
        //jQuery("td input:text", row).attr('id', 'fet_' + index);
        jQuery("td [id^=txtDescription]", row).val("");
        jQuery("td [id^=txtDescription]", row).attr('id', 'txtDescription_' + index);
        jQuery("td [id^=txtDescription]", row).attr('name', 'Description_' + index);
        jQuery("td [id^=txtQuantity]", row).val("");
        jQuery("td [id^=txtQuantity]", row).attr('id', 'txtQuantity_' + index);
        jQuery("td [id^=txtQuantity]", row).attr('class', 'Quantity');
        jQuery("td [id^=txtPrice]", row).val("");
        jQuery("td [id^=txtPrice]", row).attr('id', 'txtPrice_' + index);
        jQuery("td [id^=txtPrice]", row).attr('class', 'Price');
        jQuery("td [id^=txtTotal]", row).val("");
        jQuery("td [id^=txtTotal]", row).attr('id', 'txtTotal_' + index);
        jQuery("td textarea", row).val("");
        jQuery("td textarea", row).attr('id', 'txtDescription_' + index);
        jQuery("td span", row).attr('id', 'SrNo_' + index);
        //Retrive href link and rename its attribute
        jQuery("td a", row).attr('id', 'lnk_' + index);
        jQuery(row).attr('featureid', '0');
        //row.insertBefore('#feature tbody>tr:first');
        row.insertAfter('#feature tbody>tr:last');
        jQuery(row).show();
        UpdateFeatureSequence();

    }
    //Remove Feature when user click on delete button
    function FeatureRemoveRow(obj) {
        jConfirm('Are you sure you want to delete ?', 'Delete', function (r) {
            if (r == true) {
                var RowObj = jQuery(obj).parent().parent();
                var Featureid = parseInt(jQuery(RowObj).attr('featureid'));
                var Productid = jQuery("td input:text", RowObj).attr('productid');
                //if Feature is already saved then we need to remove from db for that we are hide this row
                if (Featureid > 0 && Productid > 0) {
                    jQuery(obj).parent().parent().hide();
                }
                else {
                    jQuery(obj).parent().parent().remove();
                }
                UpdateFeatureSequence();
                calculateSum();
            }
          
        });
    }
    function UpdateFeatureSequence() {
        var count = 0;
        jQuery('#feature > tbody  tr:visible').find('.SrNo').each(function (i, e) {
            jQuery(e).text(i + 1);
            count++;
        });
        //jQuery('#feature > tbody  tr:visible').find('td textarea').each(function (i, e) {
        //    jQuery(e).attr('id', 'txtDescription_' + (i + 1));
        //});
        jQuery('#feature > tbody  tr:visible').find('[id^=txtPrice]').each(function (i, e) {
            jQuery(e).attr('id', 'txtPrice_' + (i + 1));
        });
        jQuery('#feature > tbody  tr:visible').find('[id^=txtTotal]').each(function (i, e) {
            jQuery(e).attr('id', 'txtTotal_' + (i + 1));
        });
        jQuery('#feature > tbody  tr:visible').find('[id^=txtQuantity]').each(function (i, e) {
            jQuery(e).attr('id', 'txtQuantity_' + (i + 1));
        });
        jQuery('#feature > tbody  tr:visible').find('[id^=lnk]').each(function (i, e) {
            jQuery(e).attr('id', 'lnkDelete_' + (i + 1));
            jQuery(e).attr('class', 'icon-delete');
            jQuery(e).attr('onclick', 'FeatureRemoveRow(this)');
            jQuery(e).attr('title', 'Delete');
        });
        jQuery('#feature > tbody  tr:last').find('[id^=lnk]').each(function (i, e) {
            jQuery(e).attr('id', 'lnkAdd_' + count);
            jQuery(e).attr('class', 'icon-add');
            jQuery(e).attr('onclick', 'AddFeatureRow()');
            jQuery(e).attr('title', 'Add');
        });
    }

 function SaveInvoice() {
 var InvoiceDetail = new Array();
        var srno = 1;
        $('table > tbody  tr:visible').each(function (i, e) {
            var Description = jQuery(e).find('input[id *= Description]').val();
            var Amount = jQuery(e).find('input[id *= Total]').val();
            var qty = jQuery(e).find('input[id *= Quantity]').val();
            var rate = jQuery(e).find('input[id *= Price]').val();
            var DF_MileStoneId = null;
            if ($("input[type='radio'][name='InvoiceType']:checked").val() != LS) {
                DF_MileStoneId = jQuery(e).find('select[id *= Milestone] option:selected').val()
            }
            if (Description != '' || (Amount != '')) {
                var invoiceDetail = {
                    Description: Description,
                    Amount: Amount,
                    SrNo: srno,
                    Qty: qty,
                    Qty_Unit: $('#optMaxQtyUnit option:selected').val(),
                    Rate: rate,
                    DF_MileStoneId: DF_MileStoneId
                };
                InvoiceDetail.push(invoiceDetail);
            }
            srno = srno + 1;
        });
  //Now pass the InvoiceDetail in AJAX CALL
  }

Now Create a table in which the operation will performed.

<div>              
 <table   class="table table-bordered table-striped table-hover" id="feature" cellpadding="5px" width="20%">
  <thead>
   <tr>
    <th width="7%" class="text-center">
     <label id="lblSr">Sr</label>
     <input type="hidden" value="" id="hdfTotalinvoiceAmount" />
     <input type="hidden" value="" id="hdfTotalProjectAmount" />
    </th>
    <th>
     <label id="Label1">Description</label>
    </th>
    <th>
     <label id="Label1">Milestone</label>
   
    </th>
    <th>
     <label id="Label2">Qty (Units)</label>
     <input type="hidden" value="" id="hdfMaxQty" />
    </th>
    <th>
     <label id="Label3">Rate</label>
    </th>
    <th>
     <label id="Label4">Amount</label>
    </th>
    <th width="5%">&nbsp;
    </th>
   </tr>
  </thead>
  <tbody>
   
   <tr featureid="0" style="vertical-align: top;">
    <td class="text-center">
     <span id="SrNo_1" class="SrNo">1</span>
    </td>
    <td>
     @*<textarea rows="2" cols="75" id="txtdescription_1" placeholder="e.g. project go live (10 %)"></textarea>*@
     <input type="text" name="Description" id="txtDescription_1" placeholder="e.g. Project Go Live (10 %)" style="width: 435px;" />
    </td>
    <td>
     <select  id="optMilestone" style="width: 120px;" class="milestone"   onchange="FillMilestoneAmount($(this).val(),$(this).closest('tr').prevAll('tr').length + 1)">
      <option value="0"  itemid="" >Select</option>
    
     </select>
    </td>
  
    <td>
     <input type="text" id="txtQuantity_1" class="Quantity" style="width: 85px; text-align: right;" placeholder="e.g. 1" />
    </td>
    <td>
     <input type="text" id="txtPrice_1" onkeyup="CalculateAmount(this);" class="Price" style="width: 85px; text-align: right;" placeholder="e.g. 5000" />
    </td>
    <td>
     <input type="text" id="txtTotal_1" class="Amount" readonly="true" style="width: 95px; text-align: right;" />
    </td>
    <td width="5%">
     <a href="javascript:void(0)" id="lnkAdd" class="icon-add" onclick="AddFeatureRow();">
      @*<i class="icon-add"></i>*@
     </a>
    </td>
     @{
      index = index + 1; /*Resoution of control duplicate id when we are creating clone of the hidden row*/
   }
   </tr>
   <tr featureid="0" style="display: none; vertical-align: top;">
    <td class="text-center">
     <span id="SrNo0_1" class="SrNo">1</span>
    </td>
    <td>
     @*<textarea rows="2" cols="75" id="txtDescription0_1" placeholder="e.g. Project Go Live (10 %)"></textarea>*@
     <input type="text"  name="Description" id="txtDescription0_1" placeholder="e.g. Project Go Live (10 %)" style="width: 435px;" />
    </td>
     <td>
     <select  id="sel0_1" style="width: 120px;" class="milestone"   onchange="FillMilestoneAmount($(this).val(),$(this).closest('tr').prevAll('tr').length + 1)">
      <option value="0"  itemid="" >Select</option>
     </select>
    </td>
    <td>
     <input type="text" id="txtQuantity0_1" class="Quantity" style="width: 85px; text-align: right;" placeholder="e.g. 1" />
    </td>
    <td>
     <input type="text" id="txtPrice0_1" onkeyup="CalculateAmount(this);" class="Price" style="width: 85px; text-align: right;" placeholder="e.g. 5000" />
    </td>
    <td>
     <input type="text" id="txtTotal0_1" class="Amount" readonly="true" style="width: 95px; text-align: right;" />
    </td>
    <td width="5%">
     <a href="javascript:void(0)" title="Delete" onclick="FeatureRemoveRow(this)" id="lnkDelete0_1" class="btnDelete">
      @* <i class="icon-remove"></i>*@
     </a>
    </td>
     @{
      index = index + 1; /*Resoution of control duplicate id when we are creating clone of the hidden row*/
   }
   </tr>
  </tbody>
 </table>
</div>