Dot Net: October 2013

Wednesday, 23 October 2013

JQuery Grid.

Hi Friends, here i am going to explain how to use JQuery GridView in WebForms.

By Default this Jquery Grid supports Sorting, Pagging and Searching the data within the Grid with good look and feel.

To Start this...

File -> New -> Website -> Name it as "YourWebSiteName"

In the Default.aspx page add the following script files in the <head> tag.

<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />

<link href="css/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css" />

<script src="css/jquery.js" type="text/javascript"></script>

<script src="css/jquery.dataTables.min.js" type="text/javascript"></script>

<script src="css/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>

In the following project add the following script files in the css folder.

Jquery-ui.css

jquery.dataTables_themeroller.css

jquery.js

jquery.dataTables.min.js

jquery-ui-1.9.2.custom.min.js

To download the above files click on the link below.

https://drive.google.com/file/d/0B9hDwZfSCCC5Tm1qc1NFc3B6a1k/edit?usp=sharing

Add the Following JavaScript code which applies the Jquery Grid Styles to our Normal GridView.

<script type="text/javascript">

var oTable;

$(document).ready(function() {

$('#GridView1').dataTable({

"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"iDisplayLength": 10,
"aaSorting": [[0, "asc"]],

"bJQueryUI": true,"bAutoWidth": false,"bProcessing": true,
"sDom": '<"top"i><"title">lt<"bottom"pf>',

"sPaginationType": "full_numbers","bRetrieve": true,

//----Scrolling----

"sScrollY": "275px",

"sScrollX": "100%",

"sScrollXInner": "100%",

"bScrollCollapse": true,

// ---- Print_Export_Copy ----

"sDom": 'T<"clear"><"H"lfr>t<"F"ip>',

"oLanguage": {

"sZeroRecords": "There are no Records that match your search critera",

"sLengthMenu": "Display _MENU_ records per page  ",

"sInfo": "Displaying _START_ to _END_ of _TOTAL_ records",

"sInfoEmpty": "Showing 0 to 0 of 0 records",

"sInfoFiltered": "(filtered from _MAX_ total records)",

"sEmptyTable": 'No Rows to Display.....!',

"sSearch": "Search all columns:"

},

"oSearch": {

"sSearch": "",

"bRegex": false,

"bSmart": true

},

});

$('#GridView1 tbody td').click(function() {

var aPos = oTable.fnGetPosition(this);

var aData = oTable.fnGetData(aPos[0]);

});

/* Init the table */

oTable = $('#GridView1').dataTable();

});

</script>

In Code Behind.....

In Page_load bind the data to the gridview1.

string strConnect = "server=xxxxxxxxx; user id=xxxx; pwd=xxxxxxx; database=xxxxxxxxxxxxx;";

DataSet dataset = new DataSet();

SqlDataAdapter da = new SqlDataAdapter("select column1,column2,column3 from tableName", strConnect);

da.Fill(dataset, "TableName");

GridView1.DataSource = dataset;

GridView1.DataBind();

Add the following events to the GridView Control...

OnPreRender="GridView1_PreRender"

OnRowDataBound="GridView1_RowDataBound"

protected void GridView1_PreRender(object sender, EventArgs e)

{

GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

GridView1.FooterRow.TableSection = TableRowSection.TableFooter;

GridView1.FooterRow.Cells.Clear();

}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

e.Row.Attributes.Add("onmouseover", "this.style.cursor='pointer'; tempColor= this.style.backgroundColor; this.style.backgroundColor='#2187AF';");

e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=tempColour;");

}

For Further Details

http://datatables.net/

Monday, 7 October 2013

Adding Serial Numbers in the RDLC Report

Hi Friends i think every one know how to place the serial number in the rdlc report.

=RunningValue(Fields!YOURCOLUMNNAME.Value,CountDistinct,Nothing)

This will Display the serial Numbers like

S.NO NAME REGION TARGET

1 RAM ANDHRA 13000

2 MAHI TELANGANA 15000

3 KISH RAYALASEEMA 13500

4 SAI TELANGANA 15500

5 KRTH ANDHRA 32000

6 MANI RAYALASEEMA 16500

7 RAJ TELANGANA 36000

8 MANISH TELANGANA 12500

To Display the Serial Numbers according to Region wise like

SNO NAME TARGET

1. ANDHRA

1.1 RAM 13000

1.2 KRTH 32000

2.RAYALASEEMA

2.1 KISH 13500

2.2 MANI 16500

3. TELANGANA
   3.1    MAHI            15000
   3.2    SAI                15500
   3.3    RAJ                36000

3.4 MANISH 12500

To Print the Above Format Just make a group and add the following Formula in the following way.

=RunningValue(Fields!YOURCOLUMNNAME .Value,CountDistinct,Nothing) & "." & RowNumber("table1_Group1")

Friday, 4 October 2013

JavaScript Date Validation.

Hi My dear Friends here I am going to explain how to validate the date whether the User entered the Correct Date or Not in the aspx page.

function ValidateDate() {

var validformat = /^\d{2}\-\d{2}\-\d{4}$/; //Basic check for format validity

var txtDate = document.getElementById('Your TextBox Control Id.');

var returnval = false;

if (!validformat.test(txtDate.value))

alert("Invalid Date Format. Please correct and submit again.")

else { //Detailed check for valid date ranges

var monthfield = txtDate.value.split("-")[1]

var dayfield = txtDate.value.split("-")[0]

var yearfield = txtDate.value.split("-")[2]

var dayobj = new Date(yearfield, monthfield - 1, dayfield)

if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (dayobj.getFullYear() != yearfield))

alert("Invalid Day, Month, or Year range detected. Please correct and submit again.");

else

returnval = true;

}

if (returnval == false) {

txtDate.select()

}

return returnval;

}

</script>

Note:

Call the ValidateDate in the button click like OnClientClick="return ValidateDate()”