Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Convert from server side to client side binding

1 Answer 102 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Microchick
Top achievements
Rank 1
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 +=
                    "&nbsp;&nbsp;<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; }

    }

}

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 22 May 2017, 08:10 AM
Hello,

I am afraid client-side binding is not supported with hierarchy.

Regards,
Eyup
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Microchick
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or