Erobo Software | Scripts: C# | Creating a Hiercharchical RadGrid using Telerik

Scripts: C# :: Telerik web controls :: Library Article #16

Developer's Section

Creating a Hiercharchical RadGrid using Telerik
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr

Rating: \| Rate It:
Average Votes: (13691)
Favorites:

This tutorial demostrates how to use the Add, Update, and Delete Commands inside the Telerik hierarchical grid. We also show how to hide entire columns, trigger javascript events, and temporarily disable ajax to execute async upload operations.

In the following code snippet we declare a hierarchical radgrid which contains the three most commonly used operations: add, update and delete. This grid contains 3 levels or 3 detail tables. We will have all editing commands at the first, second, and third level. We will also use the prerender command to hide/delete columns from a hierarchical radgrid. The radgrid declared as RadGrid1 is ajaxified which simplies the process of updating the data. the method conditionalPostback is used to disable ajax in the event that the user clicks the download attachment button.

See below:
Cars.aspx

	Code Snippet 1

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Cars.ascx.cs"
Inherits="Dev.Cars" %>

<script language="javascript">

//<![CDATA[
//On insert and update buttons click temporarily disables
//ajax to perform upload actions

var disableAjaxInstance = false;

function conditionalPostback(sender, eventArgs) {
  var theRegexp = new RegExp("\.lnkDownFile$", "ig");
  if (eventArgs.get_eventTarget().match(theRegexp) || disableAjaxInstance) {
    eventArgs.set_enableAjax(false);
    disableAjaxInstance = false;
  }
}

function configureSearchField(thisObj) {

  thisObj.value = '';
  thisObj.style.color = "black";

}

/* Check if the input is valid number */
function CheckValNumber(source, args) {
  var arrInputs = source.parentNode.getElementsByTagName('input');

  var sText = arrInputs[0].value;
  var ValidChars = "0123456789";
  var IsNumber = true;
  var Char;

  for (i = 0; i < sText.length && IsNumber == true; i++) {
    Char = sText.charAt(i);
    if (ValidChars.indexOf(Char) == -1) {
      IsNumber = false;
    }
  }

  if (IsNumber == false) {
    args.IsValid = false;
  } else {
    args.IsValid = true;

  }

}

function resetCustomValidatorNumber(source) {
  var arrspans = source.parentNode.getElementsByTagName('span');
  arrspans[0].style.display = 'none';

}

function removeFileCarInformation(thisAttId, remRef) {
  var vvc = confirm("Are you sure you want to delete this file?");
  if (vvc == true) {

    var thisElem = document.getElementById(remRef).style.display = "none";

    $find("<%=RadAjaxManager.GetCurrent(this.Page).ClientID %>")
                    .ajaxRequest("delete CarInformation attachment:" + thisAttId);

  }
}

function getDownload(thisAttId) {

  var myradManager = $find("<%=RadAjaxManager.GetCurrent(this.Page).ClientID %>");

  //myradManager.set_enableAjax(false);
  //set_enableAjax

  disableAjaxInstance = true;

  myradManager.ajaxRequest("download CarInformation attachment:" + thisAttId);
}

function HierarchyExpanding(sender, args) {
  var firstClientDataKeyName = args.get_tableView().get_clientDataKeyNames()[0];
  //args.set_cancel(true);
}

function HierarchyCollapsing(sender, args) {
  var firstClientDataKeyName = args.get_tableView().get_clientDataKeyNames()[0];
  //args.set_cancel(true);
}

function onUploadF() {
  alert("Only doc, txt, xlsx, xls, docx, pdf, rtf, xml, jpeg, jpg, and
                                                       gif files can be uploaded")
}

// ]]>

function EmailDocument() {
  var oManager = window.radopen("CarEmail.aspx", null);
  oManager.setSize(530, 530); //Width, Height
  oManager.center();
  oManager.SetActive();
}

function SendFeedBack(qId) {
  var oManager = window.radopen("CarFeedBack.aspx?qid=" + qId, null);
  oManager.setSize(530, 530); //Width, Height
  oManager.center();
  oManager.SetActive();
}

</script>


<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server"
InitialDelayTime="3"
MinDisplayTime="3" Skin="Default" />

<1-- decleare hierarchical radgrid -->
<telerik:RadGrid ID="RadGrid1" runat="server" Width="100%" ShowStatusBar="true"
GridLines="None"
OnItemCommand="RadGrid1_ItemCommand"
OnDeleteCommand="RadGrid1_DeleteCommand"
OnInsertCommand="RadGrid1_InsertCommand"
OnUpdateCommand="RadGrid1_Update"
OnItemDataBound="RadGrid1_ItemCreated"
OnPageIndexChanged="GridView1_PageIndexChanged"
OnPreRender="RadGrid1_PreRender"
OnDetailTableDataBind="RadGrid1_DetailTableDataBind"
AutoGenerateColumns="False" PageSize="7"
AllowAutomaticUpdates="true" AllowAutomaticDeletes="true" AllowPaging="True"
>
<PagerStyle Mode="NumericPages" ForeColor="Black" Position="TopAndBottom"></PagerStyle>
<ClientSettings>
  <ClientEvents OnHierarchyExpanding="HierarchyExpanding"
OnHierarchyCollapsing="HierarchyCollapsing" />
</ClientSettings>
<MasterTableView Width="100%" Name="Master" DataKeyNames="MakeID"
AllowMultiColumnSorting="True"
  HierarchyDefaultExpanded="true" CommandItemDisplay="Top"
InsertItemDisplay="Top"
  ShowHeader="false" HierarchyLoadMode="Client">
  <CommandItemTemplate>
    <div style="display: none;">
      <asp:LinkButton ID="btnAdd" runat="server" CommandName="InitInsert"
       Text="" Visible="false">
      </asp:LinkButton>
      <asp:LinkButton ID="LinkButton1" runat="server" CommandName="PerformInsert" Text=""
        Visible="false">
      </asp:LinkButton>
      <asp:LinkButton runat="server" ID="lnkDownFile" Text=""
      OnCommand="Button0_Click"></asp:LinkButton>
    </div>
  </CommandItemTemplate>
  <DetailTables>
    <telerik:GridTableView DataKeyNames="ModelId,ParentModelId"
    HorizontalAlign="Right"
      Name="CarDetails" Width="100%" HierarchyDefaultExpanded="true"
      CommandItemDisplay="Top"
      InsertItemDisplay="Top" AllowPaging="True" PageSize="500"
      ShowHeader="false"
      HeaderStyle-Height="0px" HierarchyLoadMode="Client">
      <Columns>
        <telerik:GridBoundColumn HeaderText="ModelId" DataField="ModelId"
          UniqueName="model_id"
          Visible="false">
        </telerik:GridBoundColumn>
        <telerik:GridTemplateColumn HeaderText="" HeaderStyle-Height="0px"
          UniqueName="model_text">
          <ItemTemplate>
            <b>Car Name</b>: <%# Eval("CarText") %> -
            <a href="javascript:SendFeedback('<%# Eval("ModelId") %>')">FeedBack</a>

            <br><br>
            <asp:Label runat="server" ID="attachmentstable"
            Visible="false"></asp:Label>
          </ItemTemplate>
          <HeaderStyle Width="610" />
        </telerik:GridTemplateColumn>
        <telerik:GridButtonColumn ButtonType="ImageButton" ImageUrl="grid/edit.gif"
          ItemStyle-HorizontalAlign="Right" runat="server" CommandName="Edit"
          UniqueName="model_edit">
          <HeaderStyle Width="20" />
        </telerik:GridButtonColumn>
      </Columns>
      <CommandItemTemplate>
        <div style="display: none;">
          <asp:LinkButton ID="btnAdd" runat="server" CommandName="InitInsert"
          Text="" Visible="false">
          </asp:LinkButton>
          <asp:LinkButton ID="LinkButton1" runat="server" CommandName="PerformInsert"
            Text=""
            Visible="false">
          </asp:LinkButton>
          <asp:LinkButton runat="server" ID="lnkDownFile" Text=""
          OnCommand="Button0_Click"></asp:LinkButton>
        </div>
      </CommandItemTemplate>
      <DetailTables>
        <telerik:GridTableView DataKeyNames="ModelId,ParentModelId"
          HorizontalAlign="Right"
          Name="CarChildrenDetails" Width="100%" HierarchyDefaultExpanded="true"
          AllowPaging="False"
          PageSize="7" ShowHeader="false" TableLayout="Fixed" HierarchyLoadMode="Client">
          <Columns>
            <telerik:GridBoundColumn HeaderText="" HeaderStyle-Height="0px"
            DataField="ModelId"
              UniqueName="model_id" Visible="false">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn HeaderText="" HeaderStyle-Height="0px"
              UniqueName="model_text">
              <ItemTemplate>
                <b>Car X Name</b>: <%# Eval("CarText") %> -
                <a href="javascript:SendFeedback('<%# Eval("ModelId") %>')">FeedBack</a>
                <br><br>
                <asp:Label runat="server" ID="attachmentstable" Visible="false"></asp:Label>
              </ItemTemplate>
              <HeaderStyle Width="610" />
            </telerik:GridTemplateColumn>
            <telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="model_edit"
              ImageUrl="grid/edit.gif"
              ItemStyle-HorizontalAlign="Right" runat="server" CommandName="Edit">
              <HeaderStyle Width="20" />
            </telerik:GridButtonColumn>
          </Columns>
          <CommandItemTemplate>
            <div style="display: none;">
              <asp:LinkButton ID="btnAdd" runat="server" CommandName="InitInsert" Text=""
              Visible="false">
              </asp:LinkButton>
              <asp:LinkButton ID="LinkButton1" runat="server" CommandName="PerformInsert"
                Text=""
                Visible="false">
              </asp:LinkButton>
              <asp:LinkButton runat="server" ID="lnkDownFile" Text=""
               OnCommand="Button0_Click"></asp:LinkButton>
            </div>
          </CommandItemTemplate>
          <EditFormSettings EditFormType="Template">
            <FormTemplate>
              <table border="0" cellpadding="2" cellspacing="2" width="100%"
                style="background-color:White">
                <tr>
                  <td valign="top">

                  </td>
                  <td valign="top" align="right" colspan="3">
                  </td>
                </tr>
                <tr>
                  <td valign="top" class="text">
                    <b>Car Text:</b>
                  </td>
                  <td valign="top" colspan="3">
                    <asp:Label runat="server" ID="car_text" Text='<%# Bind("CarText") %>'>
                    </asp:Label>
                  </td>
                </tr>
                <tr>
                  <td valign="top" colspan="3">

                  </td>
                </tr>
                <tr>
                  <td valign="top" class="text">

                  </td>
                  <td valign="top" class="text">
                    This Car has not yet been released to the market
                      <asp:CheckBox ID="CarNotApp"
                      runat="server"></asp:CheckBox><br />
                  </td>
                </tr>
              </table>
              <br><br>
              <asp:Table runat="server" ID="attachmentstable" Width="650px"
              style="background-color:White">
              </asp:Table>
              <br />
              <br />
              <b>Upload Documents(s)</b>
              <telerik:RadAsyncUpload ID="thisAsyncUp" OnClientValidationFailed="onUploadF"
                AllowedFileExtensions="doc,txt,xlsx,xls,docx,pdf,rtf,xml,jpeg,jpg,gif"
                runat="server" MaxFileSize="270000000">
              </telerik:RadAsyncUpload>
              <br />
              <br />
              <asp:Button ID="btnUpdate" runat="server" CausesValidation="true" Text="Insert" />
              <asp:Button ID="btnCancel" CommandName="Cancel" CausesValidation="false"
               Text="Cancel"
                runat="server" />
            </FormTemplate>
          </EditFormSettings>
        </telerik:GridTableView>
      </DetailTables>
      <EditFormSettings EditFormType="Template">
        <FormTemplate>
          <table border="0" cellpadding="2" cellspacing="2" width="100%"
            style="background-color:White">
            <tr>
              <td valign="top">

              </td>
              <td valign="top" align="right" colspan="3">
              </td>
            </tr>
            <tr>
              <td valign="top" class="text">
                <b>Car Text:</b>
              </td>
              <td valign="top" colspan="3">
                <asp:Label runat="server" ID="car_text" Text='<%# Bind("CarText") %>'>
                </asp:Label>
              </td>
            </tr>
            <tr>
              <td valign="top" colspan="3">

              </td>
            </tr>
            <tr>
              <td valign="top" class="text">

              </td>
              <td valign="top" class="text">
                This Car has not yet been released to the market  <asp:CheckBox
                ID="CarNotApp"
                  runat="server"></asp:CheckBox><br />
              </td>
            </tr>
          </table>
          <br><br>
          <asp:Table runat="server" ID="attachmentstable" Width="650px"
          style="background-color:White">
          </asp:Table>
          <br />
          <br />
          <b>Upload Documents(s)</b>
          <telerik:RadAsyncUpload ID="thisAsyncUp" OnClientValidationFailed="onUploadF"
          AllowedFileExtensions="doc,txt,xlsx,xls,docx,pdf,rtf,xml,jpeg,jpg,gif"
            runat="server" MaxFileSize="270000000">
          </telerik:RadAsyncUpload>
          <br />
          <br />
          <asp:Button ID="btnUpdate" runat="server" CausesValidation="true"
          Text="Insert" />
          <asp:Button ID="btnCancel" CommandName="Cancel" CausesValidation="false"
          Text="Cancel"
            runat="server" />
        </FormTemplate>
      </EditFormSettings>
    </telerik:GridTableView>
  </DetailTables>
  <Columns>
    <telerik:GridBoundColumn HeaderText="MakeID" DataField="MakeID"
      UniqueName="make_id"
      Visible="false">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn HeaderText="make Name" DataField="MakeText"
      UniqueName="catText">
      <HeaderStyle Width="610px" />
    </telerik:GridBoundColumn>
    <telerik:GridTemplateColumn HeaderText="Make Type" UniqueName="makeType"
     Visible="false">
      <ItemTemplate>
        <asp:Label runat="server" ID="lblmakeType"
        Text='<%# (Convert.ToInt16(Eval("makeType")) == 1)? "Car" : "SUV" %>' />
      </ItemTemplate>
      <HeaderStyle Width="20px" />
    </telerik:GridTemplateColumn>
  </Columns>
  <EditFormSettings EditFormType="Template">
    <FormTemplate>
       make Name:
      <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind( "MakeText") %>'
      Width="350px"></asp:TextBox>
      <br />
      <br />
      <asp:Button ID="btnUpdate" runat="server" CausesValidation="true" Text="Insert" />
      <asp:Button ID="btnCancel" CommandName="Cancel" Text="Cancel" runat="server" />
    </FormTemplate>
  </EditFormSettings>
</MasterTableView>
</telerik:RadGrid>

Now in the next page we will be look at the code behind.

See other Scripts in Telerik web controls

Submit Your Scripts:

If you would like to have your Javascripts published in this section please fill out
the form below: