india: Jquery Grid Sample Code in C#

Demo Grid View Image

Feature :
Jquery Search
Paging
Export In Excel,Pdf,Copy and Print

Step :1
Put this code in Script Part


<script data-pace-options='{ "restartOnRequestAfter": true }' src="js/plugin/pace/pace.min.js"></script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
if (!window.jQuery) {
document.write('<script src="js/libs/jquery-2.1.1.min.js"><\/script>');
}
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
if (!window.jQuery.ui) {
document.write('<script src="js/libs/jquery-ui-1.10.3.min.js"><\/script>');
}
</script>


<script src="js/app.config.js"></script>


<script src="js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script>


<script src="js/bootstrap/bootstrap.min.js"></script>


<script src="js/notification/SmartNotification.min.js"></script>


<script src="js/smartwidgets/jarvis.widget.min.js"></script>


<script src="js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>


<script src="js/plugin/sparkline/jquery.sparkline.min.js"></script>


<script src="js/plugin/jquery-validate/jquery.validate.min.js"></script>


<script src="js/plugin/masked-input/jquery.maskedinput.min.js"></script>


<script src="js/plugin/select2/select2.min.js"></script>


<script src="js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>


<script src="js/plugin/msie-fix/jquery.mb.browser.min.js"></script>


<script src="js/plugin/fastclick/fastclick.min.js"></script>




<script src="js/demo.min.js"></script>


<script src="js/app.min.js"></script>



<script src="js/speech/voicecommand.min.js"></script>


<script src="js/smart-chat-ui/smart.chat.ui.min.js"></script>
<script src="js/smart-chat-ui/smart.chat.manager.min.js"></script>


<script src="js/plugin/datatables/jquery.dataTables.min.js"></script>
<script src="js/plugin/datatables/dataTables.colVis.min.js"></script>
<script src="js/plugin/datatables/dataTables.tableTools.min.js"></script>
<script src="js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script src="js/plugin/datatable-responsive/datatables.responsive.min.js"></script>

<script type="text/javascript">

// DO NOT REMOVE : GLOBAL FUNCTIONS!

$(document).ready(function () {

pageSetUp();

/* // DOM Position key index //

l - Length changing (dropdown)
f - Filtering input (search)
t - The Table! (datatable)
i - Information (records)
p - Pagination (paging)
r - pRocessing
< and > - div elements
<"#id" and > - div with an id
<"class" and > - div with a class
<"#id.class" and > - div with an id and class

Also see: http://legacy.datatables.net/usage/features
*/

/* BASIC ;*/
var responsiveHelper_dt_basic = undefined;
var responsiveHelper_datatable_fixed_column = undefined;
var responsiveHelper_datatable_col_reorder = undefined;
var responsiveHelper_datatable_tabletools = undefined;

var breakpointDefinition = {
tablet: 1024,
phone: 480
};

/* TABLETOOLS */
$('#datatable_tabletools').dataTable({

// Tabletools options:
// https://datatables.net/extensions/tabletools/button_options
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-4'f><'col-sm-6 col-xs-6 hidden-xs'l><'col-sm-6 col-xs-6 hidden-xs'T>r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-sm-6 col-xs-12'p>>",
"oTableTools": {
"aButtons": [
"copy",
"csv",
"xls",
{
"sExtends": "pdf",
"sTitle": "SmartAdmin_PDF",
"sPdfMessage": "SmartAdmin PDF Export",
"sPdfSize": "letter"
},
{
"sExtends": "print",
"sMessage": "Generated by EdsetGO <i>(press Esc to close)</i>"
}
],
"sSwfPath": "js/plugin/datatables/swf/copy_csv_xls_pdf.swf"
},
"autoWidth": true,
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bInfo": true,
"iDisplay":true,
"iDisplayLength": 15,
"aLengthMenu": [[10, 25,50, 100, -1], [10, 25, 50, 100, "All"]],
"preDrawCallback": function () {
// Initialize the responsive datatables helper once.
if (!responsiveHelper_datatable_tabletools) {
responsiveHelper_datatable_tabletools = new ResponsiveDatatablesHelper($('#datatable_tabletools'), breakpointDefinition);
}
},
"rowCallback": function (nRow) {
responsiveHelper_datatable_tabletools.createExpandIcon(nRow);
},
"drawCallback": function (oSettings) {
responsiveHelper_datatable_tabletools.respond();
}
});

/* END TABLETOOLS */

})

//$(document).ready(function () {
// $('#example').DataTable({
// dom: 'T<"clear">lfrtip',
// tableTools: {
// "sSwfPath": "../swf/copy_csv_xls_pdf.swf"
// }
// });
//});

</script>


<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>

Step 2 :
C# Code : Put this code in .Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="Edsetgo.WebForm3" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<!-- We recommend you use "your_style.css" to override SmartAdmin

specific styles this will also ensure you retrain your customization with each SmartAdmin update.

<!-- Specifying a Webpage Icon for Web Clip

Ref: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->

<%--<script src="media/js/jquery.js"></script>

function codeAddress() {

PageMethods.showdata("A", OnSuccess, OnError);

}

function OnSuccess(data) {

if (data.length > 0) {

setData(data);

}

function OnError(error) {

alert('in error');

}

window.onload = codeAddress;

function setData(data) {

var doc = $.parseJSON(data);

alert(doc);

}

function DisableRow(tableID)

{

try {

debugger;

var chkboxlist;

var lastRow = tableID.rows.length;

var conf = confirm("Are you sure want to delete ?? ");

if (conf == true) {

for (var i = 1; i < lastRow; i++) {

var row = tableID.rows[i];

var chkbox = row.cells[0].childNodes[0];

var x = $(chkbox).val();

if (null != chkbox && true == chkbox.checked) {

chkboxlist = chkboxlist + ',' + x;

tableID.deleteRow(i);

lastRow--;

i--;

}

else if (null != chkbox && false == chkbox.checked) {

}

else {

return false;

}

$("#getcheckboxid").val(chkboxlist);

document.getElementById('<%= getcheckboxid.ClientID %>').value = chkboxlist;

}

catch (e) {

alert(e);

}

</script>

.modalBackground

{

position: absolute;

z-index: 6000 !important;

top: 0px;

left: 0px;

background-color: #000;

filter: alpha(opacity=60);

-moz-opacity: 0.6;

opacity: 0.6;

}

</style>

</head>

<body>

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>

<h2>Data table</h2>

</header>

<div>

</div>

</div>

<thead>

<tr>

<th data-hide="phone">Action</th>

<th data-hide="phone,tablet">Country</th>

</tr>

</thead>

<%=getData()%>

</tbody>

</table>

</div>

<asp:UpdatePanel ID="UpdatePanel_basicProfile" runat="server">

<tr>

<asp:Button ID="btnadd" CssClass="btn btn-primary" Text="Add" runat="server"/>

</td>

<asp:Button ID="btndisable" CssClass="btn btn-primary" Text="Disable" runat="server" OnClick="btnAddCountrydisable_Click" OnClientClick ="return DisableRow(example);"/>

</td>

</button>

<strong>Success</strong>

</div>

</td>

</tr>

</table>

<asp:Panel ID="pnlPopup" runat="server" CssClass="smart-form client-form" BackColor="White" Style="display:none">

<tr>

<td >

<h2 style="color:white; font-size:medium"><span class="widget-icon"> <i class="fa fa-edit"></i> </span>Add Office Location</h2>

</header></div>

</td>

</tr>

<label>Select</label>

<asp:DropDownList ID="ddlCountry" DataTextField="name" DataValueField="id" width="100%" runat="server" AppendDataBoundItems="true">

</asp:DropDownList>

</label>

</section>

</div>

<br />

</div>

</td>

</tr>

</table>

<asp:Button ID="btnAddcountryPopUP_MYCountry" runat="server" CssClass="btn btn-primary" OnClick="btnAddcountryPopUP_MYCountry_Click" Text="Add" />

<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" CssClass="btn btn-primary" />

<br />

</footer>

</asp:Panel>

<asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnadd" PopupControlID="pnlPopup"

DropShadow="true" BackgroundCssClass="modalBackground" Enabled="True" CancelControlID ="btnCancel" >

</asp:ModalPopupExtender>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</article>

</form>

Step 3 :
C# Code : Put this code in .Cs File

using System.Data;
using System.Web.Services;
using System.Web.Script.Serialization;
using System.Data.SqlClient;
using System;
using System.Collections.Generic;

namespace Edsetgo
{
public partial class WebForm3 : System.Web.UI.Page
{
DbCon dbcon = new DbCon();
protected void Page_Load(object sender, EventArgs e)
{

}

public string getData()
{
string htmlStr = "";
dbcon.ClearParameters();
dbcon.AddParameters("@Operation", (int)OperationType.GetOfficeLocation, SqlDbType.SmallInt);
SqlDataReader dr = dbcon.cmdquery("Ed_GetOfficeLocation_Department_position");
dbcon.ClearParameters();
while (dr.Read())
{
int id = Convert.ToInt16(dr["id"]);
string status = dr["status"].ToString();
string CountryName = dr["CountryName"].ToString();
if (status == "Enable")
{
htmlStr += "<tr><td><input type=\"checkbox\" id=\"chk" + id + "\" value=\"" + id + "\" onchange=\"myFunction(" + id + ")\" /></td><td>" + CountryName + "</td></tr>";
}
else if (status == "Disable")
{
htmlStr += "<tr><td><input type=\"checkbox\" id=\"chk" + id + "\" checked value=\"chk" + id + "\" onchange=\"myFunction()\"/></td><td>" + CountryName + "</td></tr>";

}
}

return htmlStr;
}

protected void btnAddCountrydisable_Click(object sender, EventArgs e)
{
var Checkedid = getcheckboxid.Value;
string[] checklist = Checkedid.Split(',');
for (int i = 1; i < checklist.Length; i++)
{
try
{
dbcon.AddParameters("@country_Fk", 0, SqlDbType.SmallInt);
dbcon.AddParameters("@status", (char)Status.Disable, SqlDbType.Char, 1);
dbcon.AddParameters("@Operation", (int)OperationType.DisableOfficeCountry, SqlDbType.SmallInt);
dbcon.AddParameters("@id", Convert.ToInt16(checklist[i]), SqlDbType.SmallInt);
dbcon.AddParameters("@name", "", SqlDbType.VarChar, 60);
dbcon.cmdnonquery("Ed_UpdateOfficeLocation_Department_position");
dbcon.ClearParameters();
getData();
}
catch (Exception ex)
{
}
}

}

protected void btnAddcountryPopUP_MYCountry_Click(object sender, EventArgs e)
{
try
{
dbcon.AddParameters("@country_Fk", ddlCountry.SelectedValue, SqlDbType.SmallInt);
SqlDataReader dr = dbcon.cmdquery("Ed_CheckOfficeLocation");
dbcon.ClearParameters();
if (dr.Read())
{
if (dr[1].ToString() == "D")
{
dbcon.AddParameters("@Operation", (int)OperationType.EnableOfficeCountry, SqlDbType.SmallInt);
dbcon.AddParameters("@id", 0, SqlDbType.SmallInt);
dbcon.AddParameters("@status", (char)Status.Enable, SqlDbType.Char, 1);
dbcon.AddParameters("@country_Fk", ddlCountry.SelectedValue, SqlDbType.SmallInt);
dbcon.AddParameters("@name", "", SqlDbType.VarChar, 60);
dbcon.cmdnonquery("Ed_UpdateOfficeLocation_Department_position");
dbcon.ClearParameters();
}
else
{
// lblErrorMsg.Visible = true;
// lblErrorMsg.Text = ddlCountry.SelectedItem.Text + " Already added in List";
mpe.Show();

}
}
else
{
dbcon.AddParameters("@country_Fk", ddlCountry.SelectedValue, SqlDbType.SmallInt);
dbcon.AddParameters("@status", (char)Status.Enable, SqlDbType.Char, 1);
dbcon.AddParameters("@Operation", (int)OperationType.InsertOfficeCountry, SqlDbType.SmallInt);
dbcon.AddParameters("@name", "", SqlDbType.VarChar, 60);
dbcon.cmdnonquery("Ed_InsertOfficeLocation_Department_position");
dbcon.ClearParameters();
}
// log.LogTable("emp_country", Convert.ToInt32(Session["UserIDFk"].ToString()), Convert.ToInt32(Session["UserIDFk"].ToString()));

getData();

}
catch (Exception ex)
{
// exceptionstore.AddEditException(ex, "Admin add/disable country,Department,position screen");

}

}

}
}

2 comments:

Vivek PainulyNovember 13, 2014 at 10:12 PM
nice job..easy to implement...but is it responsive?
actually i implement this...but its not responsive...may be i miss something...must reply
Rahul VyasNovember 13, 2014 at 10:14 PM
Hi Vivek,

You Need to be give bootstrap.Js Class include in you'r project to make this grid Responsive

Thanks
Rahul Vyas

Thursday, November 13, 2014

Jquery Grid Sample Code in C#

2 comments: