Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    Gantt / Selection
    Selection Mode
    • Row
    • Cell
    Selection Type
    • Single
    • Multiple
    <%@ Page Title="Gantt-Selection-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This example illustrates cell and row selection available in the Syncfusion Gantt chart control." AutoEventWireup="true" MasterPageFile="~/Samplebrowser.Master" CodeBehind="Selection.aspx.cs" Inherits="WebSampleBrowser.Gantt.Selection" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="SampleHeading" runat="server">
        <span class="sampleName">Gantt / Selection</span>
    </asp:Content>
    <asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ScriptSection">   
      
       <script type="text/javascript">
           function load(args) {
               this.getColumns()[0].width = 60;
           }
            $(function () {
                $("#sampleProperties").ejPropertiesPanel();
            });
            function onModeChange(args) {
                $('#<%= GanttControlSelection.ClientID %>').ejGantt("model.selectionMode", args.text.toLowerCase());
            }
           function onTypeChange(args) {
               $('#<%= GanttControlSelection.ClientID %>').ejGantt("model.selectionType", args.text.toLowerCase());          
           }
        </script>
    </asp:Content>
    <asp:Content ID="ControlContent" runat="server" ContentPlaceHolderID="ControlsSection">
        <div style="width: 100%; height: 100%; overflow: visible;">
            <ej:Gantt ID="GanttControlSelection" runat="server" AllowSelection="true" AllowColumnResize="true"
                TaskIdMapping="Id" TaskNameMapping="Name" ScheduleStartDate="02/23/2017" ScheduleEndDate="03/15/2017"
                StartDateMapping="StartDate" EndDateMapping="EndDate" ProgressMapping="PercentDone"
                ChildMapping="Children" AllowGanttChartEditing="false" SplitterPosition="60%"
                TreeColumnIndex="1" IsResponsive="true" Load="load">
                <SizeSettings Width="100%" Height="450px" />
            </ej:Gantt>
        </div>
    </asp:Content>
    <asp:Content ID="Content4" runat="server" ContentPlaceHolderID="PropertySection">
        <div id="sampleProperties">
            <div class="prop-grid">
                <div class="row">
                    <div class="col-md-3">
                        Selection Mode
                    </div>
                    <div class="col-md-3">
                        <div>
                            <div id="modes">
                                <ul>
                                    <li>Row</li>
                                    <li>Cell</li>                                
                                </ul>
                            </div>
                        </div>
                        <ej:DropDownList ID="mode" ClientIDMode="Static" runat="server" ClientSideOnChange="onModeChange" Value="row" Text="row" Width="120px" SelectedItemIndex="0" TargetID="modes"></ej:DropDownList>
                    </div>
                </div>   
                 <div class="row">
                    <div class="col-md-3">
                       Selection Type
                    </div>
                    <div class="col-md-3">
                        <div id="types">
                            <ul>
                                <li>Single</li>
                                <li>Multiple</li>                            
                            </ul>
                        </div>
                        <ej:DropDownList ID="selectiontype" runat="server" ClientIDMode="Static" ClientSideOnChange="onTypeChange" Value="Single" Width="120px" TargetID="types"></ej:DropDownList>
                    </div>
                </div>        
            </div>
        </div>
    </asp:Content>
    
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebSampleBrowser.Gantt
    {
        public partial class Selection : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                var DataSource = this.GetDataSource();
                this.GanttControlSelection.DataSource = DataSource;
                this.GanttControlSelection.DataBind();
            }
            #region Create DataSource for Selection Gantt control
    
            private List<BusinessObject> GetDataSource()
            {
                List<BusinessObject> list = new List<BusinessObject>();
    
                list.Add(new BusinessObject()
                {
                    Id = 1,
                    Name = "Parent Task 1",
                    StartDate = "02/27/2017",
                    EndDate = "03/03/2017",
                    PercentDone = "40",
                    Children = (new List<BusinessObject>()
                        {
                            new BusinessObject()
                            {
                                Id = 2,
                                Name = "Child Task 1",
                                StartDate = "02/27/2017",
                                EndDate="03/03/2017",
                                PercentDone = "40",
                            },
                            new BusinessObject()
                            {
                                Id = 3,
                                Name = "Child Task 2",
                                StartDate = "02/27/2017",
                                EndDate="03/03/2017",
                                PercentDone = "40"                            
                            },
                            new BusinessObject()
                            {
                                Id = 4,
                                Name = "Child Task 3",
                                StartDate = "02/27/2017",
                                EndDate="03/03/2017",
                                PercentDone = "40"                            
                            }
                        })
    
                });
    
                list.Add(new BusinessObject()
                {
                    Id = 5,
                    Name = "Parent Task 2",
                    StartDate = "03/06/2017",
                    EndDate = "03/10/2017",
                    PercentDone = "40",
                    Children = (new List<BusinessObject>()
                        {
                            new BusinessObject()
                            {
                                Id = 6,
                                Name = "Child Task 1",
                                StartDate = "03/06/2017",
                                EndDate="03/10/2017",
                                PercentDone = "40",
                            },
                            new BusinessObject()
                            {
                                Id = 7,
                                Name = "Child Task 2",
                                StartDate = "03/06/2017",
                                EndDate="03/10/2017",
                                PercentDone = "40",
                            },
                            new BusinessObject()
                            {
                                Id = 8,
                                Name = "Child Task 3",
                                StartDate = "03/06/2017",
                                EndDate="03/10/2017",
                                PercentDone = "40",
                            },
                            new BusinessObject()
                            {
                                Id = 9,
                                Name = "Child Task 4",
                                StartDate = "03/06/2017",
                                EndDate="03/10/2017",
                                PercentDone = "40",
                            }
                        })
    
                });
                list.Add(new BusinessObject()
                {
                    Id = 10,
                    Name = "Parent Task 3",
                    StartDate = "03/13/2017",
                    EndDate = "03/17/2017",
                    PercentDone = "40",
    
                    Children = (new List<BusinessObject>()
                        {
                            new BusinessObject()
                            {
                                Id = 11,
                                Name = "Child Task 1",
                                StartDate = "03/13/2017",
                                EndDate="03/17/2017",
                                PercentDone = "40"
                            },
                            new BusinessObject()
                            {
                                Id = 12,
                                Name = "Child Task 2",
                                StartDate = "03/13/2017",
                                EndDate="03/17/2017",
                                PercentDone = "40",
                            },
                            new BusinessObject()
                            {
                                Id = 13,
                                Name = "Child Task 3",
                                StartDate = "03/13/2017",
                                EndDate="03/17/2017",
                                PercentDone = "40"
                            },
                            new BusinessObject()
                            {
                                Id = 14,
                                Name = "Child Task 4",
                                StartDate = "03/13/2017",
                                EndDate="03/17/2017",
                                PercentDone = "40"
                            },
                            new BusinessObject()
                            {
                                Id = 15,
                                Name = "Child Task 5",
                                StartDate = "03/13/2017",
                                EndDate="03/17/2017",
                                PercentDone = "40"
                            }
                        })
                });
                return list;
            }
            #endregion
    
            #region BusinessObject Creation
            public class BusinessObject
            {
                public string StartDate { get; set; }
                public int Id { get; set; }
                public string Name { get; set; }
                public string EndDate { get; set; }
                public string PercentDone { get; set; }
                public List<object> ResourceID { get; set; }
                public List<BusinessObject> Children { get; set; }
                public string Predescessor { get; set; }
            }
            #endregion
        }
    }