This is a migrated thread and some comments may be shown as answers.

Convert from server side to client side binding

1 Answer 133 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Microchick asked on 17 May 2017, 04:48 PM

Hello, can you convert this code into client side binding?

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyNamespaceGrid.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title id="HTMLTITLE">Default</title>

<link href="/CSS/jquery-ui.min.css" type="text/css" rel="stylesheet" media="screen" />
<link href="/CSS/jquery-ui.structure.min.css" type="text/css" rel="stylesheet" media="screen" />
<link href="/CSS/jquery-ui.theme.min.css" type="text/css" rel="stylesheet" media="screen" />
<script src="/CSS/jquery-1.4.2.min.js"></script>

<style type="text/css">
.HeaderGrey {
background-color: #939da2 !important;
background-image: none !important;
color: White !important;
border-right: 1px solid white !important;
font-weight: bold !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}

.SubHeaderGrey {
background-color: #A9B4B9 !important;
background-image: none !important;
color: White !important;
border-right: 1px solid white !important;
font-weight: bold !important;
}

.HeaderGreyNoBorder {
background-color: #939da2 !important;
background-image: none !important;
color: White !important;
font-weight: bold !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}

.SubHeaderGreyNoBorder {
background-color: #A9B4B9 !important;
background-image: none !important;
color: White !important;
font-weight: bold !important;
border-right: 1px solid #A9B4B9 !important;
}

.BlueText {
color: Blue !important;
}

.rgPager, .rgPager a {
font-family: Verdana, Helvetica, Arial, sans-serif !important;
}

.rgWrap {
font-family: Verdana, Helvetica, Arial, sans-serif !important;
}

div.RadGrid .rgRow td,
div.RadGrid .rgAltRow td {
padding: 5px;
}

.RadGrid_Default .rgMasterTable td.rgGroupCol, .RadGrid_Default .rgMasterTable td.rgExpandCol {
border-color: white !important;
background: white none !important;
}

.rgDetailTable {
border: none !important;
}

.rgCollapse {
background-image: url('/CSS/Images/ui-icons_469bdd_256x240minus.png') !important;
background-position: 0px 0px !important;
}

.rgExpand {
background-image: url('/CSS/Images/ui-icons_469bdd_256x240plus.png') !important;
background-position: 0px 0px !important;
}
</style>
<script type="text/javascript">
function AddArrowIcons(sender, args) {
var column = args.get_column();
switch (column.get_uniqueName()) {
case "ExpandColumn":
break;
default:
column
.get_element()
.innerHTML +=
"  <span class=\"ui-icon ui-icon-triangle-2-n-s\" style=\"float:right;-webkit-transform: scale(2);-ms-transform: scale(2);background-image: url(/CSS/images/ui-icons_ffffff_256x240.png)\"></span>"; //setting new HeaderText
break;
}
}
</script>
</head>

<body>
<form id="form1" runat="server">
<div style="padding-left: 0px">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>

<table>
<tr>
<td>Person Type:</td>
<td>
<asp:DropDownList runat="server" Width="175px" ID="ddlPersonType">
<asp:ListItem Selected="True" Value="Parent">Parent</asp:ListItem>
<asp:ListItem Value="SubAccount">Sub Account</asp:ListItem>
<asp:ListItem Value="Individual">Individual</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td>SIN Number - last 4 digits:</td>
<td>******<asp:TextBox runat="server" ID="txtSINNumber" MaxLength="4" Width="90px"></asp:TextBox></td>
</tr>
<tr>
<td>Name on Account:</td>
<td>
<asp:TextBox runat="server" ID="txtName" Width="175px"></asp:TextBox></td>
</tr>
<tr>
<td>Staus:</td>
<td>
<asp:DropDownList runat="server" Width="175px" ID="ddlStatus">
<asp:ListItem Selected="True" Value="All"> All </asp:ListItem>
<asp:ListItem Value="Normal">Normal</asp:ListItem>
<asp:ListItem Value="Expired">Expired</asp:ListItem>
</asp:DropDownList></td>
</tr>

<tr>
<td>
<asp:Button ID="btnFilter" Text="Filter" runat="server" OnClick="btnFilter_OnClick" class="btn110x21" />
</td>
<td>
<span class="ui-icon ui-icon-close" style="float: left; background-image: url(/CSS/images/ui-icons_222222_256x240.png)"></span>
<asp:LinkButton runat="server" ID="btnClearFilter" OnClick="btnClearFilter_OnClick" Text="Reset"></asp:LinkButton></td>
</tr>
</table>

<div style="padding-top: 10px">
<telerik:RadGrid ID="RadGrid2" runat="server" Width="1100px"
OnDetailTableDataBind="RadGrid1_DetailTableDataBind" AutoGenerateColumns="False" ShowStatusBar="False" PageSize="3"
AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="True" GridLines="None" OnItemDataBound="RadGrid2_OnItemDataBound" AllowCustomPaging="False">
<PagerStyle Mode="NextPrevAndNumeric" Position="Bottom" PageSizeControlType="RadComboBox"></PagerStyle>
<MasterTableView HierarchyLoadMode="ServerBind" DataKeyNames="ParentAccountID,SinNumber,PersonType" Name="Parent" ExpandCollapseColumn-Display="false"
Font-Names="Verdana,Helvetica,Arial, sans-serif" Font-Size="12px">
<Columns>
<telerik:GridExpandColumn UniqueName="ExpandColumn" HeaderStyle-CssClass="HeaderGreyNoBorder"></telerik:GridExpandColumn>
<telerik:GridBoundColumn HeaderText="Person Type" HeaderButtonType="TextButton"
DataField="PersonType" UniqueName="PersonType" ItemStyle-HorizontalAlign="Left" HeaderStyle-CssClass="HeaderGrey">
</telerik:GridBoundColumn>

<telerik:GridTemplateColumn SortExpression="SinNumber" HeaderText="SIN Number" HeaderButtonType="TextButton"
UniqueName="SinNumber" ItemStyle-HorizontalAlign="Left" HeaderStyle-CssClass="HeaderGrey">
<ItemTemplate>
<asp:HyperLink runat="server" ID="HyperLink2" CssClass="BlueText" Text='<%# Eval("SinNumber") %>' NavigateUrl="Demo.aspx">
</asp:HyperLink>
</ItemTemplate>
</telerik:GridTemplateColumn>

<telerik:GridBoundColumn SortExpression="ParentAccountID" HeaderText="ParentAccountID" HeaderButtonType="TextButton"
DataField="ParentAccountID" UniqueName="ParentAccountID" Visible="False">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="AccountHolderName" HeaderText="Name" HeaderButtonType="TextButton"
DataField="AccountHolderName" UniqueName="AccountHolderName" ItemStyle-HorizontalAlign="Left" HeaderStyle-CssClass="HeaderGrey">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="Status" HeaderText="Status" HeaderButtonType="TextButton"
DataField="Status" UniqueName="Status" ItemStyle-HorizontalAlign="Left" HeaderStyle-CssClass="HeaderGrey">
</telerik:GridBoundColumn>
</Columns>
<SortExpressions>
<telerik:GridSortExpression FieldName="AccountHolderName"></telerik:GridSortExpression>
</SortExpressions>

<DetailTables>
<telerik:GridTableView DataKeyNames="ParentAccountID,SinNumber,PersonType" Font-Names="Verdana,Helvetica,Arial, sans-serif" Font-Size="12px">
<Columns>
<telerik:GridBoundColumn SortExpression="PersonType" HeaderText="Person Type" HeaderButtonType="TextButton"
DataField="PersonType" UniqueName="PersonType" ItemStyle-HorizontalAlign="Left" HeaderStyle-CssClass="SubHeaderGrey" HeaderStyle-Width="160px">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn SortExpression="SinNumber" HeaderText="SIN Number" HeaderButtonType="TextButton"
UniqueName="SinNumber" ItemStyle-HorizontalAlign="Left" HeaderStyle-CssClass="SubHeaderGrey">
<ItemTemplate>
<asp:HyperLink runat="server" ID="HyperLink1" CssClass="BlueText" Text='<%# Eval("SinNumber") %>' NavigateUrl="Demo.aspx">
</asp:HyperLink>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn SortExpression="ParentAccountID" HeaderText="ParentAccountID" HeaderButtonType="TextButton"
DataField="ParentAccountID" UniqueName="ParentAccountID" Visible="False">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="AccountHolderName" HeaderText="Name" HeaderButtonType="TextButton"
DataField="AccountHolderName" UniqueName="AccountHolderName" ItemStyle-HorizontalAlign="Left" HeaderStyle-CssClass="SubHeaderGrey">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="Status" HeaderText="Status" HeaderButtonType="TextButton"
DataField="Status" UniqueName="Status" ItemStyle-HorizontalAlign="Left" HeaderStyle-CssClass="SubHeaderGrey">
</telerik:GridBoundColumn>
</Columns>
<SortExpressions>
<telerik:GridSortExpression FieldName="AccountHolderName"></telerik:GridSortExpression>
</SortExpressions>
</telerik:GridTableView>
</DetailTables>
</MasterTableView>
<ClientSettings>
<ClientEvents OnColumnCreated="AddArrowIcons" />
</ClientSettings>
</telerik:RadGrid>
</div>
</div>
</form>
</body>
</html>

Default.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using Telerik.Web.UI;

namespace MyNamespaceGrid
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var accounts = GetFitleredAccounts();
RadGrid2.DataSource = accounts;
}

protected void RadGrid2_OnItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item is GridDataItem && e.Item.OwnerTableView.Name == "Parent")
{
GridDataItem item = (GridDataItem)e.Item;
if (item.GetDataKeyValue("PersonType").ToString() == "Individual")
{
(item["ExpandColumn"].Controls[0]).Visible = false;
}
}
}

protected void btnFilter_OnClick(object sender, EventArgs e)
{
RadGrid2.DataSource = GetFitleredAccounts();
RadGrid2.Rebind();
}

protected void btnClearFilter_OnClick(object sender, EventArgs e)
{
txtSINNumber.Text = "";
txtName.Text = "";
ddlStatus.SelectedIndex = 0;
ddlPersonType.SelectedIndex = 0;

var accounts = GetAccounts();
RadGrid2.DataSource = accounts;
RadGrid2.Rebind();
}

protected void RadGrid1_DetailTableDataBind(object sende, GridDetailTableDataBindEventArgs e)
{
if (e.DetailTableView.ParentItem.DataItem == null)
{
int ParentAccountId = (int)e.DetailTableView.ParentItem.GetDataKeyValue("ParentAccountID");
List<ParentAccount> row = (List<ParentAccount>)e.DetailTableView.DataSource;
ParentAccount r = row.Where(z => z.ParentAccountID == ParentAccountId).FirstOrDefault();
e.DetailTableView.DataSource = r.SubAccounts;
}
else
e.DetailTableView.DataSource = ((ParentAccount)e.DetailTableView.ParentItem.DataItem).SubAccounts;
}
private List<ParentAccount> GetFitleredAccounts()
{
var accounts = GetAccounts();

// is there a better way to initalize this
var result = accounts.Where(s => s.ParentAccountID != null);

#region Parent Filter

if (ddlPersonType.Text == "Parent")
{
result = accounts.Where(s => s.PersonType == "Parent");

if (!string.IsNullOrEmpty(txtSINNumber.Text))
{
result = result.Where(s => s.SinNumber.EndsWith(txtSINNumber.Text));
}
if (!string.IsNullOrEmpty(txtName.Text))
{
result = result.Where(s => s.AccountHolderName.ToUpper().Contains(txtName.Text.ToUpper()));
}
if (ddlStatus.SelectedIndex != 0)
{
result = result.Where(s => s.Status == ddlStatus.Text);
}
return result.ToList();
}

#endregion

#region Individual Filter

if (ddlPersonType.Text == "Individual")
{
result = accounts.Where(s => s.PersonType == "Individual");

if (!string.IsNullOrEmpty(txtSINNumber.Text))
{
result = result.Where(s => s.SinNumber.EndsWith(txtSINNumber.Text));
}
if (!string.IsNullOrEmpty(txtName.Text))
{
result = result.Where(s => s.AccountHolderName.ToUpper().Contains(txtName.Text.ToUpper()));
}
if (ddlStatus.SelectedIndex != 0)
{
result = result.Where(s => s.Status == ddlStatus.Text);
}
return result.ToList();
}

#endregion

#region Sub Account Filter

if (ddlPersonType.Text == "SubAccount")
{
//inital dataset based on account type
var resultList = accounts.Where(t => t.SubAccounts != null).ToList();

if (!string.IsNullOrEmpty(txtSINNumber.Text))
{

// Remove items for the parent table
for (int i = resultList.Count() - 1; i >= 0; i--)
{
bool foundMatch = false;

if (resultList[i].SubAccounts != null)
{
foreach (var sub in resultList[i].SubAccounts)
{
if (sub.SinNumber.EndsWith(txtSINNumber.Text))
{
foundMatch = true;
}
}
}

if (foundMatch == false)
resultList.Remove(resultList[i]);
}

//filter child list
resultList.ForEach(
c => c.SubAccounts.RemoveAll(i => !i.SinNumber.EndsWith(txtSINNumber.Text)));

return resultList;
}
if (!string.IsNullOrEmpty(txtName.Text))
{
// Remove items for the parent table
for (int i = resultList.Count() - 1; i >= 0; i--)
{
bool foundMatch = false;

if (resultList[i].SubAccounts != null)
{
foreach (var sub in resultList[i].SubAccounts)
{
if (sub.AccountHolderName.ToUpper().Contains(txtName.Text.ToUpper()))
{
foundMatch = true;
}
}
}

if (foundMatch == false)
resultList.Remove(resultList[i]);
}

//filter child list
resultList.ForEach(
c =>
c.SubAccounts.RemoveAll(
i => !i.AccountHolderName.ToUpper().Contains(txtName.Text.ToUpper())));

return resultList;
}
if (ddlStatus.SelectedIndex != 0)
{
// Remove items for the parent table
for (int i = resultList.Count() - 1; i >= 0; i--)
{
bool foundMatch = false;

if (resultList[i].SubAccounts != null)
{
foreach (var sub in resultList[i].SubAccounts)
{
if (sub.Status == ddlStatus.Text)
{
foundMatch = true;
}
}
}

if (foundMatch == false)
resultList.Remove(resultList[i]);
}

//filter child list
resultList.ForEach(c => c.SubAccounts.RemoveAll(i => i.Status != ddlStatus.Text));

return resultList;
}
}

#endregion

return accounts;

}

private List<ParentAccount> GetAccounts()
{

#region Hardcoded data

List<ParentAccount> accounts = new List<ParentAccount>
{
new ParentAccount
{
ParentAccountID = 2,
PersonType = "Individual",
AccountHolderName = "Grace Nix",
SinNumber = "7501",
Status = "Normal"
},

new ParentAccount
{
ParentAccountID = 3,
PersonType = "Parent",
AccountHolderName = "Andrew Mill",
SinNumber = "7535",
Status = "Normal",
SubAccounts = new List<SubAccount>
{
new SubAccount
{
ParentAccountID = 3,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Joe Danny",
SinNumber = "7600",
Status = "Normal"
},
new SubAccount
{
ParentAccountID = 3,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Chris Robminson",
SinNumber = "7626",
Status = "Normal"
}
,new SubAccount
{
ParentAccountID = 3,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Alex Fisher",
SinNumber = "7600",
Status = "Normal"
},
new SubAccount
{
ParentAccountID = 3,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Mark Reece",
SinNumber = "7626",
Status = "Normal"
}
,
new SubAccount
{
ParentAccountID = 3,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Dale Morison",
SinNumber = "7600",
Status = "Expired"
},
new SubAccount
{
ParentAccountID = 3,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Rob Mason",
SinNumber = "7626",
Status = "Normal"
}
}
}

,
new ParentAccount
{
ParentAccountID = 4,
PersonType = "Parent",
AccountHolderName = "Wes Allman",
SinNumber = "7501",
Status = "Normal",
SubAccounts = new List<SubAccount>
{
new SubAccount
{
ParentAccountID = 4,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Gin Un",
SinNumber = "2222",
Status = "Normal"
},
new SubAccount
{
ParentAccountID = 4,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Mick Colt",
SinNumber = "3333",
Status = "Expired"
}
}
},

new ParentAccount
{
ParentAccountID = 6,
PersonType = "Parent",
AccountHolderName = "Tracy Anderson",
SinNumber = "7535",
Status = "Expired",
SubAccounts = new List<SubAccount>
{
new SubAccount
{
ParentAccountID = 6,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Jon Wex",
SinNumber = "7600",
Status = "Expired"
},
new SubAccount
{
ParentAccountID = 6,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Ruan Juan",
SinNumber = "7626",
Status = "Normal"
}
}
},
new ParentAccount
{
ParentAccountID = 18,
PersonType = "Parent",
AccountHolderName = "Marie Wilson",
SinNumber = "3333",
Status = "Normal",
SubAccounts = new List<SubAccount>
{
new SubAccount
{
ParentAccountID = 18,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Ron Ottan",
SinNumber = "7600",
Status = "Normal"
},
new SubAccount
{
ParentAccountID = 18,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Will Naw",
SinNumber = "7626",
Status = "Normal"
}
}
},
new ParentAccount
{
ParentAccountID = 19,
PersonType = "Parent",
AccountHolderName = "Dan Can",
SinNumber = "7535",
Status = "Normal",
SubAccounts = new List<SubAccount>
{
new SubAccount
{
ParentAccountID = 19,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Esther Cran",
SinNumber = "3333",
Status = "Normal"
},
new SubAccount
{
ParentAccountID = 19,
SubAccountID = 12,
PersonType = "Sub Account",
AccountHolderName = "Paul Max",
SinNumber = "7626",
Status = "Normal"
}
}
}
};

#endregion
return accounts;
}
}

public class ParentAccount
{
public int ParentAccountID { get; set; }
public string PersonType { get; set; }
public string SinNumber { get; set; }
public string AccountHolderName { get; set; }
public string Status { get; set; }

public List<SubAccount> SubAccounts;
}

public class SubAccount
{
public int SubAccountID { get; set; }
public int ParentAccountID { get; set; }
public string PersonType { get; set; }
public string SinNumber { get; set; }
public string AccountHolderName { get; set; }
public string Status { get; set; }

}

}

Convert from server side to client side binding

1 Answer, 1 is accepted