It is Collection of Code snippet for web programming including dot net,MS SQL ,Scripting

Jtable Demo With Drag and Drop Row

<asp:Content ID="Content1" ContentPlaceHolderID="MC" runat="Server">

<style>

.popup-error

{

}

.popup-error ul

{

padding-left: 40px;

text-align: left;

}

.popup-error ul li

{

color: #FF0000;

font-size: 10px;

font-weight: normal;

list-style-type: disc;

}

</style>

</div>

</div>

<asp:Literal ID="Literal3" runat="server" Text="<%$Resources:GlobalResources,BusinessTypeMaster %>"></asp:Literal>

<h3>

</h3>

<table cellpadding="4" cellspacing="1" border="0" width="90%" style="margin: 12px;"

align="center">

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<%=Resources.MessageContainer.ConfimationDelete%>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<asp:Button ID="btnOK" OnClientClick="DeleteRecord();" runat="server" CausesValidation="false"

Text="<%$ Resources:GlobalResources, OK %>" /> <asp:Button ID="btnDeleteCancel"

Text="<%$ Resources:GlobalResources, Cancel %>" runat="server" OnClientClick="CloseDeletePopup();"

CausesValidation="false" />

</td>

</tr>

</table>

</div>

function CloseDeletePopup() {

$("#divDeleteBusinessType").dialog('close');

$("#<%=hfId.ClientID %>").val('');

ClearValidation();

}

$(document).ready(function () {

BindGrid();

$(function () {

$("#divDeleteBusinessType").dialog({

autoOpen: false,

width: 350,

modal: true,

effect: 'scale',

draggable: false,

resizable: false,

close: function () {

$("#<%=hfId.ClientID %>").val('');

}

});

Jtable Function

function BindGrid() {

$('#BusinessMasterGrid').jtable({

paging: true,

pageSize: 100,

sorting: false,

columnResizable: false,

columnSelectable: false,

selectOnRowClick: true,

selecting: true,

saveUserPreferences: false,

actions: {

listAction: '../Admin/BusinessTypeMasterNew.aspx/FetchAllBusinessType'

fields: {

BusinessTypeId: {

key: true,

create: false,

edit: false,

list: false

MoveUp: {

width: "2%",

list: true,

display: function (response) {

var objresponse = eval('(' + response.record.RowNumber + ')');

if (objresponse == '1' || objresponse == '2') {

var $ImgUp = $('<img id="ImgUp" alt="Up" src="../App_Themes/Default/Images/SortUp.png" style="border:none;cursor:pointer;"/>');

$ImgUp.click(function () {

$("#<%=hfId.ClientID%>").val(response.record.BusinessTypeId);

var CurrentBusinessTypeId = $("#<%=hfId.ClientID %>").val();

var CurrentRow = $(this).closest("tr")[0].rowIndex;

MoveRecord('true', CurrentBusinessTypeId, CurrentRow);

});

return $ImgUp;

}

MoveDown: {

width: "2%",

list: true,

display: function (response) {

var objresponse = eval('(' + response.record.RowNumber + ')');

if (objresponse == '0' || objresponse == '2') {

var $ImgDown = $('<img alt="Down" id="ImgDown" src="../App_Themes/Default/Images/SortDown.png" style="border:none;cursor:pointer;"/>')

$ImgDown.click(function () {

$("#<%=hfId.ClientID%>").val(response.record.BusinessTypeId);

var CurrentBusinessTypeId = $("#<%=hfId.ClientID %>").val();

var CurrentRow = $(this).closest("tr")[0].rowIndex;

MoveRecord('false', CurrentBusinessTypeId, CurrentRow);

});

return $ImgDown;

}

BusinessTypeName: {

width: '10%',

title: 'BusinessType Name',

list: true,

display: function (BusinessTypeData) {

var CurrentRow = eval('(' + BusinessTypeData.record.RowIndex + ')');

var $lnkBusinessTypeName = $('<a class="Bname" businesstypeid=' + BusinessTypeData.record.BusinessTypeId + ' rownumber=' + CurrentRow + ' style="cursor:pointer;font-weight: normal;">' + BusinessTypeData.record.BusinessTypeName + '</a>');

$lnkBusinessTypeName.click(function () {

$("#<%=hfId.ClientID%>").val(BusinessTypeData.record.BusinessTypeId);

return ShowAddEditRecord();

});

return $lnkBusinessTypeName;

}

BusinessTypeDescription: {

width: '10%',

title: 'BusinessType Description',

list: true

BookNowAccomodationText: {

width: '10%',

title: 'BookNow Accomodation',

list: true

ShowOnlyArrivalDateInBookNow: {

width: '10%',

title: 'ArrivalDate InBookNow',

list: true,

display: function (response) {

var objresposnce = eval('(' + response.record.ShowOnlyArrivalDateInBookNow + ')');

if (objresposnce == false) {

return '<span>False</span>'

}

else {

return '<span>True</span>'

}

Edit: {

title: '',

width: '3%',

sorting: false,

edit: false,

create: false,

display: function (Data) {

var $lnkEdit = $('<a style="cursor:pointer;font-weight: normal;">Edit</a>');

$lnkEdit.click(function () {

$("#<%=hfId.ClientID%>").val(Data.record.BusinessTypeId);

return ShowAddEditRecord();

});

return $lnkEdit;

}

Delete: {

title: '',

width: '3%',

sorting: false,

edit: false,

create: false,

display: function (Data) {

var $lnkDelete = $('<a style="cursor:pointer;font-weight: normal;">Delete</a>');

$lnkDelete.click(function () {

$("#<%=hfId.ClientID%>").val(Data.record.BusinessTypeId);

IsBusinessTypeDeletable();

});

return $lnkDelete;

}

rowInserted: function (event, data) {

GenerateSpan(data.row[0].cells[2], data.record.RowIndex, data.record.BusinessTypeId);

GiveIdOntr(data.row[0], data.record.RowIndex);

recordsLoaded: function (event, data) {

$(".jtable tbody").sortable({

start: function (e, ui) {

$(this).attr('data-previndex', ui.item.index());

helper: fixHelperModified,

// stop: updateIndex,

cursor: 'move',

receive: function (e, ui) {

// var i = 0;

// alert(ui.item.closest('td'));

update: function (e, ui) {

var sorted = $(".jtable tbody").sortable("serialize", { key: "sort" });

var newIndex = ui.item.index();

var oldIndex = $(this).attr('data-previndex');

oldIndex = parseInt(oldIndex);

oldIndex = oldIndex + 1;

newIndex = parseInt(newIndex);

newIndex = newIndex + 1;

$("#lblMessage").html(''); ;

var CurrentRecordId = $(this).find('#spRowId_' + oldIndex).html();

var newrecordId = $(this).find('#spRowId_' + newIndex).html();

$(this).removeAttr('data-previndex');

ChangeOrderNumeber(CurrentRecordId, newrecordId, newIndex, oldIndex);

revert: true,

zIndex: 9999,

stop: function (e, ui) {

}

}).disableSelection();

}

});

$('#BusinessMasterGrid').jtable('load');

}

End Jtable Function

var fixHelperModified = function (e, tr) {

var $originals = tr.children();

var $helper = tr.clone();

$helper.children().each(function (index) {

$(this).width($originals.eq(index).width());

$(this).height($originals.eq(index).height());

});

return $helper;

updateIndex = function (e, ui) {

//$(".jtable-data-row td", ui.item.parent()).each(function (i) {

//$(this).html(i + 1);

//});

};

Dynamically Genrate Span

function GenerateSpan(Cell, RowNumber, BusinessTypeId) {

var id = 'spRowId_' + RowNumber;

$("<span style='display:none;' id = " + id + ">" + BusinessTypeId + "</span>").appendTo($(Cell));

}

Giving Id on Jtable Tr

function GiveIdOntr(tr, index) {

$(tr).attr("id", "tr_" + index);

}

function ChangeOrderNumeber(CurrentBusinessId, OtherBusinessId, CurrentOrder, OldOrder) {

ClearUIControl();

if (CurrentBusinessId != '') {

$.ajax({

type: "POST",

url: "../Admin/BusinessTypeMasterNew.aspx/UpdateOrderNumber",

data: "{CurrentBusinessTypeId:" + CurrentBusinessId + ",OtherBusinessTypeId:" + OtherBusinessId + ",CurrentOrder:" + CurrentOrder + ",OldOrder:" + OldOrder + "}",

contentType: "application/json; charset=utf-8",

datatype: "jsondata",

async: true,

success: function (response) {

BindGrid();

}

});

}

Move Jtable Record

function MoveRecord(ChangeOrder, CurrentBusinessTypeId, CurrentRow) {

ClearUIControl();

$('#lblMessage').text('');

txtClearandFocus();

var OtherBusinessTypeId = 0;

var OtherRow = 0;

var spRowId;

if (ChangeOrder == 'true') {

OtherRow = CurrentRow - 1;

OtherBusinessTypeId = $('#spRowId_' + OtherRow)[0].innerHTML;

}

else {

OtherRow = CurrentRow + 1;

OtherBusinessTypeId = $('#spRowId_' + OtherRow)[0].innerHTML;

}

if (CurrentBusinessTypeId != '') {

$.ajax({

type: "POST",

url: "../Admin/BusinessTypeMasterNew.aspx/ChangeOrder",

data: "{CurrentBusinessTypeId:" + CurrentBusinessTypeId + ",OtherBusinessTypeId:" + OtherBusinessTypeId + "}",

contentType: "application/json; charset=utf-8",

datatype: "jsondata",

async: true,

success: function (response) {

BindGrid();

}

});

}

function SaveEditeRecord() {

$('#lblMessage').text('');

if (Page_ClientValidate("vgBusinessType")) {

var id = $("#<%=hfId.ClientID %>").val();

var Name = $("#<%=txtBusinessType.ClientID %>").val();

Name = jQuery.trim(Name);

var BusinessTypeDescription = $("#<%=txtBusinessTypeDescription.ClientID %>").val();

BusinessTypeDescription = jQuery.trim(BusinessTypeDescription)

var BookNowAccomodationText = $("#<%=txtBookNowAccomodation.ClientID %>").val();

BookNowAccomodationText = jQuery.trim(BookNowAccomodationText);

var ArrivalDateInBookNow = $('#chkArivalDate').is(':checked');

if (id != '') {

$.ajax({

type: "POST",

url: "../Admin/BusinessTypeMasterNew.aspx/UpdateBusinessType",

data: "{BusinessTypeId:" + id + ",BusinessTypename:'" + Name + "',BusinessTypeDescription:'" + BusinessTypeDescription + "',BookNowAccomodationText:'" + BookNowAccomodationText + "',ArrivalDateInBookNow:'" + ArrivalDateInBookNow + "'}",

contentType: "application/json; charset=utf-8",

datatype: "jsondata",

async: "true",

success: function (response) {

var objresposnse = eval('(' + response.d + ')');

if (objresposnse > 0) {

ClearControls();

BindGrid();

$("#<%=hfId.ClientID%>").val('');

$('#lblMessage').text("<%=Resources.MessageContainer.RecordUpdatedSuccessFully%> ");

}

else if (objresposnse == -2) {

$('#lblMessage').text("<%=Resources.MessageContainer.RecordAllReadyExist%>");

txtClearandFocus();

}

error: function (response) {

alert(response.status + ' ' + response.statusText);

}

});

}

else {

$.ajax({

type: "POST",

url: "../Admin/BusinessTypeMasterNew.aspx/InsertBusinessType",

data: "{BusinessTypename:'" + Name + "',BusinessTypeDescription:'" + BusinessTypeDescription + "',BookNowAccomodationText:'" + BookNowAccomodationText + "',ArrivalDateInBookNow:'" + ArrivalDateInBookNow + "'}",

contentType: "application/json; charset=utf-8",

datatype: "json",

async: "true",

success: function (response) {

var objresposnce = eval('(' + response.d + ')');

if (objresposnce > 0) {

ClearControls();

BindGrid();

$('#lblMessage').text("<%=Resources.MessageContainer.RecordSavedSuccesfully%>");

}

else if (objresposnce == -2) {

$('#lblMessage').text("<%=Resources.MessageContainer.RecordAllReadyExist%>");

txtClearandFocus();

}

else {

alert("Sorry!Somthing went wrong.Record didn't Insertd.");

}

error: function (response) {

alert(response.status + ' ' + response.statusText);

}

});

}

function IsBusinessTypeDeletable() {

$("#lblMessage").text('');

txtClearandFocus();

ClearUIControl();

ClearValidation();

var id = $("#<%=hfId.ClientID%>").val();

if (id != '') {

$.ajax({

type: "POST",

url: "../Admin/BusinessTypeMasterNew.aspx/IsBusinessTypeDeletable",

data: "{BusinessTypeId:" + id + "}",

contentType: "application/json; charset=utf-8",

datatype: "jsondata",

async: "true",

success: function (response) {

if (response.d == '-2') {

$("#<%=hfId.ClientID%>").val('');

$('#lblMessage').text("<%=Resources.MessageContainer.Businesstypecannotdeleted%>");

}

else {

$("#divDeleteBusinessType").dialog("open");

$("#divDeleteBusinessType").parent().find(".ui-dialog-titlebar").hide();

}

error: function (response) {

alert(response.status + ' ' + response.statusText);

}

});

}

else {

$("#<%=hfId.ClientID%>").val('')

}

function DeleteRecord() {

$('#lblMessage').text('');

ClearValidation();

ClearUIControl();

var id = $("#<%=hfId.ClientID%>").val();

if (id != '0') {

$.ajax({

type: "POST",

url: "../Admin/BusinessTypeMasterNew.aspx/DeleteBusinessType",

data: "{BusinessTypeId:" + $("#<%=hfId.ClientID%>").val() + "}",

contentType: "application/json; charset=utf-8",

datatype: "jsondata",

async: "true",

success: function (response) {

var objresposnce = eval('(' + response.d + ')');

if (objresposnce > 0) {

CloseDeletePopup();

BindGrid();

$("#<%=hfId.ClientID%>").val('');

$("#<%=lblMessage.ClientID %>").text("<%=Resources.MessageContainer.RecordDeletedSuccessFully%>");

$("#<%=txtBusinessType.ClientID %>").val('');

ClearControls();

}

else {

alert("Sorry!Somthing went wrong.Record didn't delete.");

}

});

}

function ShowAddEditRecord() {

$("#lblMessage").text('');

$("#<%=txtBusinessType.ClientID%>").val('');

$("#<%=txtBookNowAccomodation.ClientID%>").val('Accommodation');

$("#<%=txtBusinessTypeDescription.ClientID%>").val('');

ClearValidation();

var id = $("#<%=hfId.ClientID%>").val();

if (id != '') {

$.ajax({

type: "POST",

url: "../Admin/BusinessTypeMasterNew.aspx/FetchBusinessTypeById",

data: "{BusinessTypeId:" + id + "}",

contentType: "application/json; charset=utf-8",

datatype: "jsondata",

async: "true",

success: function (response) {

if (response.d == '-2') {

$("#<%=hfId.ClientID%>").val('');

$('#lblMessage').text("<%=Resources.MessageContainer.StateCannotbeEdited%>");

}

else {

var objresposnse = eval('(' + response.d.ShowOnlyArrivalDateInBookNow + ')');

if (objresposnse == false) {

$("#chkArivalDate").prop("checked", false)

}

else {

$("#chkArivalDate").prop("checked", true)

}

$("#<%=txtBusinessType.ClientID%>").val(response.d.BusinessTypeName);

$("#<%=txtBookNowAccomodation.ClientID%>").val(response.d.BookNowAccomodationText);

$("#<%=txtBusinessTypeDescription.ClientID%>").val(response.d.BusinessTypeDescription);

}

error: function (response) {

alert(response.status + ' ' + response.statusText);

}

});

}

else {

$("#<%=hfId.ClientID%>").val('')

}

function ClearControls() {

</script>

</asp:Content>

Tuesday 19 August 2014

Jtable