I have one inbox grid based on telerik. is it possible to replace it with jquery.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MessageInboxNew.aspx.cs"
Inherits="Communication_MessageInboxNew" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="../Common/validation.js" type="text/javascript"></script>
<script type="text/javascript">
var ispostback = false;
var strGroupId;
function deleteCheck() {
var i;
var theForm = document.forms['mainForm'];
if (!theForm) {
theForm = document.mainForm;
}
var boolChecked = false;
var length = theForm.elements.length;
for (var i = 0; i < length; i++) {
if (theForm.elements[i].type == "checkbox") {
if (theForm.elements[i].id != "chkSelect") {
if (theForm.elements[i].checked == true)
boolChecked = true;
}
}
}
if (boolChecked == false) {
alert('Please select the message(s)');
return false;
}
else {
if (confirm('Are you sure you want to delete the message(s)?')) {
return true;
}
else {
return false;
}
}
}
function selectCheckFolder() {
var check;
check = document.getElementById('cboFolders').selectedIndex;
if (check == 0) {
alert("Please select the Folder");
return false;
}
else {
var theForm = document.forms['mainForm'];
if (!theForm) {
theForm = document.mainForm;
}
var boolChecked = false;
var length = theForm.elements.length;
for (var i = 0; i < length; i++) {
if (theForm.elements[i].type == "checkbox") {
if (theForm.elements[i].id != "chkSelect") {
if (theForm.elements[i].checked == true)
boolChecked = true;
}
}
}
if (boolChecked == false) {
alert("Please select the message(s)");
return false;
}
}
}
function selectAll() {
var i, length;
var theForm = document.forms['mainForm'];
if (!theForm) {
theForm = document.mainForm;
}
length = theForm.elements.length;
for (var i = 0; i < length; i++) {
if (document.mainForm.chkAll.checked == true) {
theForm.elements[i].checked = "true";
}
else {
theForm.elements[i].checked = false;
document.mainForm.chkAll.checked = false;
}
}
}
function checkAllClear() {
var i, length;
var theForm = document.forms['mainForm'];
if (!theForm) {
theForm = document.mainForm;
}
length = theForm.elements.length;
for (var i = 0; i < length; i++) {
if (document.mainForm.chkAll.checked == true) {
if (theForm.elements[i].checked = "false") {
document.mainForm.chkAll.checked = false;
}
}
}
}
function ShowMessage1(index) {
window.open("MessageReadNew.aspx?data=" + index, 'mywindow', 'width=1200,height=600,Resizable=yes');
}
function RedirectFunction() {
var checkMode = document.getElementById('hdnMode')
if (checkMode.value == "0")
window.parent.iFrmRight.location.href = 'MessageInboxNew.aspx';
else if (checkMode.value == "DEL")
window.parent.iFrmRight.location.href = 'MessageInboxNew.aspx?mode=DEL';
else
window.parent.iFrmRight.location.href = 'MessageInboxNew.aspx?data=' + checkMode.value;
}
function onLoadPage() {
try {
var i = 0;
while (parent.top.document.body.childNodes[i]) {
if (parent.top.document.body.childNodes[i].id == "systemWorking") {
parent.top.document.body.childNodes[i].style.display = "none";
}
i++;
}
} catch (ex) { }
}
function OnRowClick(sender, args) {
try {
document.getElementById('hdnRowclickRefresh').value = "1";
var Row = args.get_itemIndexHierarchical();
if (document.getElementById('hdnReplyConfirm').value == "0")
document.getElementById('hdnRowReply').value = Row;
if (document.getElementById('hdnReadmsg').value != "")
document.getElementById('hdnReadmsg').value = document.getElementById('hdnReadmsg').value + "$" + Row;
else
document.getElementById('hdnReadmsg').value = "$" + Row;
var str = args._tableView._dataItems[Row]._element.cells[5].innerHTML;
args._tableView._dataItems[Row]._element.cells[5].innerHTML = str.replace("LinkBold", "LinkNormal");
if (args._tableView._dataItems[Row]._element.cells[8].innerHTML.indexOf("replymsg") == -1)
args._tableView._dataItems[Row]._element.cells[8].innerHTML = "<IMG SRC='../Style Sheets/CommonImages/read.gif' />";
} catch (ex) { }
}
function RowMouseOut(sender, args) {
try {
var count = 1;
var checkRow = 1;
if (document.getElementById('hdnReadmsg').value != "") {
var Row = document.getElementById('hdnReadmsg').value.split('$');
while (Row[count]) {
var str = args._tableView._dataItems[Row[count]]._element.cells[5].innerHTML;
args._tableView._dataItems[Row[count]]._element.cells[5].innerHTML = str.replace("LinkBold", "LinkNormal");
if (args._tableView._dataItems[Row[count]]._element.cells[8].innerHTML.indexOf("replymsg") == -1)
args._tableView._dataItems[Row[count]]._element.cells[8].innerHTML = "<IMG SRC='../Style Sheets/CommonImages/read.gif' />";
count++;
}
while (Row[count]) {
checkRow = args._tableView._dataItems[Row[count]]._element.cells[5].innerHTML.search("LinkBold");
if (checkRow == -1)
break;
count++;
}
if (checkRow != -1)
document.getElementById('hdnReadmsg').value = "";
}
if (document.getElementById('hdnReply').value == "1" && document.getElementById('hdnReplyConfirm').value == "1") {
args._tableView._dataItems[document.getElementById('hdnRowReply').value]._element.cells[8].innerHTML = "<IMG SRC='../Style Sheets/CommonImages/replymsg.gif' />";
document.getElementById('hdnReply').value = "0";
document.getElementById('hdnReplyConfirm').value = "0"
}
} catch (ex) {
}
}
function funmonthNo(text) {
var MonthDate = text.split(',')[1];
var month = MonthDate.split(' ')[1];
switch (month) {
case "January":
return "01";
case "February":
return "02";
case "March":
return "03";
case "April":
return "04";
case "May":
return "05";
case "June":
return "06";
case "July":
return "07";
case "August":
return "08";
case "September":
return "09";
case "October":
return "10";
case "November":
return "11";
default:
return "12";
}
}
function funmonth(month) {
switch (month) {
case "01":
return "January";
case "02":
return "February";
case "03":
return "March";
case "04":
return "April";
case "05":
return "May";
case "06":
return "June";
case "07":
return "July";
case "08":
return "August";
case "09":
return "September";
case "10":
return "October";
case "11":
return "November";
default:
return "December";
}
}
function GridCreating(sender, args) {
sender.ClientSettings.Scrolling.ScrollHeight = (window.screen.height - 450).toString() + "px";
document.getElementById('RadGridInbox').style.height = (window.screen.height - 420).toString() + "px";
}
</script>
<style type="text/css">
body
{
margin: 0px;
overflow: hidden;
}
.qsfexHeader
{
background: transparent url('../header-bg.gif') no-repeat 0 0;
height: 27px;
text-indent: 9px;
color: #15428b;
font: bold 12px/27px Arial,Verdana,sans-serif;
}
div.RadWindow.RadWindow_Vista.rwNormalWindow.rwTransparentWindow td.rwCorner, div.RadWindow.RadWindow_Vista.rwNormalWindow.rwTransparentWindow td.rwTitlebar, div.RadWindow.RadWindow_Vista.rwTransparentWindow td.rwFooterCenter
{
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100) !important;
opacity: 1 !important;
-moz-opacity: 1.0 !important;
}
</style>
<title></title>
</head>
<body önload="onLoadPage();">
<form runat="server" id="mainForm">
<input id="hdnRowclickRefresh" name="hdnRowclickRefresh" type="hidden" runat="server"
value="0" />
<input id="hdnUserTimeZone" name="hdnUserTimeZone" type="hidden" runat="server" />
<input id="hdnTimezoneId" name="hdnTimezoneId" type="hidden" runat="server" />
<input id="hdnsendertimezone" name="hdnsendertimezone" type="hidden" runat="server" />
<input id="hdnFolderName" type="hidden" name="hdnFolderName" runat="server" />
<input id="hdnMode" type="hidden" name="hdnMode" runat="server" />
<asp:Label ID="lblFolderName" runat="server" Visible="false"></asp:Label>
<input id="hdnMsgCount" name="hdnMsgCount" type="hidden" runat="server" value="" />
<input id="hdnQueryString" name="hdnQueryString" type="hidden" runat="server" value="" />
<input id="hdnReadmsg" name="hdnReadmsg" type="hidden" runat="server" value="" />
<input id="hdnReply" name="hdnReply" type="hidden" runat="server" value="0" />
<input id="hdnRowReply" name="hdnRowReply" type="hidden" runat="server" value="0" />
<input id="hdnReplyConfirm" name="hdnReplyConfirm" type="hidden" runat="server" value="0" />
<input id="hdnDateForExpand" name="hdnDateForExpand" type="hidden" runat="server"
value="" />
<input id="hdnDateForExpandForSp" name="hdnDateForExpandForSp" type="hidden" runat="server"
value="" />
<input id="hdnDateToExpand" name="hdnDateToExpand" type="hidden" runat="server" value="" />
<input id="hdnGroupId" name="hdnGroupId" type="hidden" runat="server" value="" />
<input id="hdnSortOrder" name="hdnSortOrder" type="hidden" runat="server" value="0" />
<input id="hdnCallForSort" name="hdnCallForSort" type="hidden" runat="server" value="0" />
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadWindowManager ID="Singleton" Skin="Vista" Width="900" Height="630" VisibleStatusbar="false"
RestrictionZoneID="mainForm" Behaviors="Close,Resize,Minimize,Maximize,Move"
runat="server" EnableShadow="true">
</telerik:RadWindowManager>
<table>
<tr>
<td valign="top">
<br />
<table width="95%" cellspacing="0" cellpadding="0" runat="server">
<tr>
<td class="CellMainHeaderEven" width="100%">
<asp:Label ID="Label1" Text="Folder:Inbox" runat="server"></asp:Label>
<input id="Hidden1" type="hidden" name="hdnFolderName" runat="server" />
</td>
</tr>
<tr>
<td>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
<telerik:RadGrid ID="RadGridInbox" runat="server" OnItemDataBound="RadGrid_ItemBound"
Height="700px" AllowSorting="true" AllowMultiRowSelection="true" AllowPaging="false"
ShowGroupPanel="false" GridLines="None" AutoGenerateColumns="false" Skin="Vista"
OnNeedDataSource="RadGridInbox_NeedDataSource" önItemCommand="RadGridInbox_Itemcommand">
<MasterTableView AllowMultiColumnSorting="false" TableLayout="Fixed" Width="100%"
CellPadding="0" BorderWidth="0px">
<Columns>
<telerik:GridTemplateColumn>
<HeaderStyle Width="45px" HorizontalAlign="Center"></HeaderStyle>
<ItemTemplate>
<asp:Label ID="lblSlNo" runat="server"></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn>
<HeaderStyle Width="34px"></HeaderStyle>
<HeaderTemplate>
<input type="CHECKBOX" id="chkAll" onclick='selectAll()' önmouseover="this.style.cursor='pointer';" />
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" id="chkSelect" name="chkSelect" runat="server" önmouseover="this.style.cursor='pointer';" />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn UniqueName="TemplateColumn2" SortExpression="Column1" HeaderText="From"
DataField="Column1">
<HeaderStyle Width="100px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="MsgSender_DateTime" DataField="MsgSender_DateTime"
SortExpression="MsgSender_DateTime" HeaderText="Date">
<HeaderStyle Width="80px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="MsgSender_Subject" GroupByExpression="From Group By From"
SortExpression="MsgSender_Subject" HeaderText="Subject" DataField="MsgSender_Subject">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="Section_Name" SortExpression="Section_Name"
HeaderText="SectionName" DataField="Section_Name">
<HeaderStyle Width="130px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="Course_Name" SortExpression="Course_Name" HeaderText="CourseName"
DataField="Course_Name">
<HeaderStyle Width="150px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="MsgReciever_Msgread">
<HeaderStyle Width="30px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="MsgSender_Attachment" UniqueName="MsgSender_Attachment"
HeaderImageUrl="../Style Sheets/CommonImages/ico_attchment.gif">
<HeaderStyle Width="30px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridButtonColumn Text="Delete" CommandName="Delete" ButtonType="ImageButton">
<HeaderStyle Width="35px" />
<ItemStyle HorizontalAlign="Center" />
</telerik:GridButtonColumn>
<telerik:GridBoundColumn DataField="MsgReciever_ResourceId" UniqueName="MsgReciever_ResourceId"
Display="false">
<HeaderStyle Width="0px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="MsgSender_Subject" UniqueName="MsgSender_Subject"
Display="false">
<HeaderStyle Width="0px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="MsgSender_Id" UniqueName="MsgSender_Id" Display="false">
<HeaderStyle Width="0px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="intPkVal" UniqueName="DraftID" Display="false">
<HeaderStyle Width="0px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="MsgReciever_GroupId" UniqueName="MsgReciever_GroupId"
Display="false">
<HeaderStyle Width="0px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="MsgSender_Date" DataField="MsgSender_Date" SortExpression="MsgSender_Date"
DataFormatString="{0:d}" Display="false">
<HeaderStyle Width="0px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="MsgSenderId" UniqueName="MsgSenderId" Display="false">
<HeaderStyle Width="0px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="MsgSender_ResourceId" UniqueName="MsgSender_ResourceId"
Display="false">
<HeaderStyle Width="0px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="FirstName" UniqueName="FirstName" Display="false">
<HeaderStyle Width="0px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="LastName" UniqueName="LastName" Display="false">
<HeaderStyle Width="0px"></HeaderStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="MsgReciever_IsReplied" UniqueName="MsgReciever_IsReplied"
Display="false">
<HeaderStyle Width="0px"></HeaderStyle>
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings EnableRowHoverStyle="true" AllowExpandCollapse="true" AllowGroupExpandCollapse="true">
<Selecting AllowRowSelect="True"></Selecting>
<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="275px"></Scrolling>
<ClientEvents OnRowClick="OnRowClick" OnRowMouseOut="RowMouseOut" önGridCreating='GridCreating' />
</ClientSettings>
</telerik:RadGrid>
</td>
</tr>
<tr runat="server" id="trButtons">
<td class="CellContentEven">
<asp:Button ID="btnDelete" TabIndex="1" runat="server" CssClass="ButtonNormal" Text="Delete"
OnClick="btnDelete_Click"></asp:Button>
<asp:Label ID="lblMoveTo" runat="server" CssClass="label">Move to </asp:Label>
<asp:DropDownList ID="cboFolders" TabIndex="2" runat="server" CssClass="combobox">
<asp:ListItem Value="0" Selected="True">Select..</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnMove" TabIndex="3" runat="server" CssClass="ButtonNormal" Text="Move"
OnClick="btnMove_Click"></asp:Button>
</td>
<td class="CellContentEven">
<asp:Label ID="lblFolderID" runat="server" Width="64px" Visible="False"></asp:Label>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
window.$ = $telerik.$;
$(function () {
if ($('.rgGroupHeader')) {
$('.rgGroupHeader').each(function (index) {
$(this).attr('data-RowHeader', index);
});
}
if (!ispostback) {
$('[data-RowHeader]').slice(0, 5).each(function () {
var icon = $(this).children().eq(0);
var inputCtrl = $(icon).children();
$(inputCtrl).attr({
'class': 'rgCollapse',
'titleGroup': 'collapse'
});
});
} else {
var strGroupId = $("#hdnGroupId").val().split('$');
if ($.trim($("#hdnGroupId").val()).length > 0) {
$('[data-RowHeader]').each(function () {
var dateString = $(this).text();
var MonthDate = dateString.split(',')[1];
var month = MonthDate.split(' ')[1];
month = funmonthNo(dateString);
var Date = $.trim(MonthDate.split(' ')[2]);
var Year = $.trim(dateString.split(',')[2]);
var TrimDate = month + '#' + Date + '#' + Year;
for (var count = 0; count < strGroupId.length; count++) {
if (strGroupId[count] == TrimDate) {
var icon = $(this).children().eq(0);
var inputCtrl = $(icon).children();
$(inputCtrl).attr({
'class': 'rgCollapse',
'title': 'collapse Group'
});
}
}
});
} else {
$('.rgRow,.rgAltRow').each(function () {
$(this).css('display', 'none');
});
}
}
var DateCtrl = $('#RadGridInbox').find('th').eq(4).children();
$(DateCtrl).on('click', function () {
$("#hdnCallForSort").val("1");
GetExpandedRow();
});
$('#RadGridInbox th').not('DateCtrl').on('click', function () {
GetExpandedRow();
});
$('.rgExpand').on('click', function () {
$(this).parent().parent().next().css('display', 'none');
$(this).attr('class', 'rgExpand');
$(this).attr('title', 'Expand Group');
var strDateMonthYear = "";
var strDateForSp = "";
var strDate = "";
var Grouptxt = "";
strGroupId = "";
$('.rgCollapse').each(function () {
var text = $(this).parent().next().text();
var MonthDate = text.split(',')[1];
var month = MonthDate.split(' ')[1];
month = funmonthNo(text);
var Date = $.trim(MonthDate.split(' ')[2]);
var Year = $.trim(text.split(',')[2]);
if (strGroupId == "")
strGroupId = month + '#' + Date + '#' + Year;
else
strGroupId = strGroupId + '$' + month + '#' + Date + '#' + Year;
if (strDateForSp == "") {
strDateForSp = Year + '-' + month + '-' + Date;
if (parseInt(month, 10) < 10)
month = month.substring(1, 2);
if (parseInt(Date, 10) < 10)
Date = Date.substring(1, 2);
strDate = month + "/" + Date + "/" + Year;
}
else {
strDateForSp = strDateForSp + '$' + Year + '-' + month + '-' + Date;
if (parseInt(month, 10) < 10)
month = month.substring(1, 2);
if (parseInt(Date, 10) < 10)
Date = Date.substring(1, 2);
strDate = strDate + '$' + month + "/" + Date + "/" + Year;
}
});
var text = $(this).parent().next().text();
var MonthDate = text.split(',')[1];
var month = MonthDate.split(' ')[1];
month = funmonthNo(text);
var Date = $.trim(MonthDate.split(' ')[2]);
var Year = $.trim(text.split(',')[2]);
if (strGroupId == "")
strGroupId = month + '#' + Date + '#' + Year;
else
strGroupId = strGroupId + '$' + month + '#' + Date + '#' + Year;
if (strDateForSp == "") {
strDateForSp = Year + '-' + month + '-' + Date;
if (parseInt(month, 10) < 10)
month = month.substring(1, 2);
if (parseInt(Date, 10) < 10)
Date = Date.substring(1, 2);
strDate = month + "/" + Date + "/" + Year;
}
else {
strDateForSp = strDateForSp + '$' + Year + '-' + month + '-' + Date;
if (parseInt(month, 10) < 10)
month = month.substring(1, 2);
if (parseInt(Date, 10) < 10)
Date = Date.substring(1, 2);
strDate = strDate + '$' + month + "/" + Date + "/" + Year;
}
if (strGroupId != "")
$("#hdnGroupId").val(strGroupId);
if (strDateForSp != "") {
$("#hdnDateForExpandForSp").val(strDateForSp);
$("#hdnDateForExpand").val(strDate);
}
var masterTable = $find("RadGridInbox").get_masterTableView();
masterTable.rebind();
});
$(".rgRow,.rgAltRow")
.find('[alt=Delete]')
.on('click', function () {
GetExpandedRow();
});
});
function GetExpandedRow() {
var strDateMonthYear = "";
var strDateForSp = "";
var strDate = "";
var Grouptxt = "";
strGroupId = "";
$('.rgCollapse').each(function () {
var text = $(this).parent().next().text();
var MonthDate = text.split(',')[1];
var month = MonthDate.split(' ')[1];
month = funmonthNo(text);
var Date = $.trim(MonthDate.split(' ')[2]);
var Year = $.trim(text.split(',')[2]);
if (strGroupId == "")
strGroupId = month + '#' + Date + '#' + Year;
else
strGroupId = strGroupId + '$' + month + '#' + Date + '#' + Year;
if (strDateForSp == "") {
strDateForSp = Year + '-' + month + '-' + Date;
if (parseInt(month, 10) < 10)
month = month.substring(1, 2);
if (parseInt(Date, 10) < 10)
Date = Date.substring(1, 2);
strDate = month + "/" + Date + "/" + Year;
}
else {
strDateForSp = strDateForSp + '$' + Year + '-' + month + '-' + Date;
if (parseInt(month, 10) < 10)
month = month.substring(1, 2);
if (parseInt(Date, 10) < 10)
Date = Date.substring(1, 2);
strDate = strDate + '$' + month + "/" + Date + "/" + Year;
}
});
$("#hdnGroupId").val(strGroupId);
if (strDateForSp != "") {
$("#hdnDateForExpandForSp").val(strDateForSp);
$("#hdnDateForExpand").val(strDate);
}
}
</script>
</form>
</body>
</html>