Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    KanbanBoard / Editing
    Edit Mode
    • Dialog Mode
    • Template Mode
    <%@ Page Title="KanbanBoard-Dialog-ASP.NET-SYNCFUSION" Language="C#" MetaDescription="This example demonstrates how to edit data using a dialog box and insert, update, and delete cards in the Syncfusion ASP.NET Web Forms Kanban component." MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true" CodeBehind="Editing.aspx.cs" Inherits="WebSampleBrowser.Kanban.Editing" %>
    
    <asp:Content ID="Content4" runat="server" ContentPlaceHolderID="HeadSection">
        <script src="../Scripts/jquery.validate.min.js" type="text/javascript"></script>
    </asp:Content>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="SampleHeading" runat="server">
        <span class="sampleName">KanbanBoard / Editing</span>
    </asp:Content>
    <asp:Content ID="ControlContent" runat="server" ContentPlaceHolderID="ControlsSection">
        <ej:Kanban ID="KanbanBoard" runat="server" AllowScrolling="true" AllowTitle="true" KeyField="Status">
            <Columns>
                <ej:KanbanColumn HeaderText="Backlog" Key="Open" ShowAddButton="true" />
                <ej:KanbanColumn HeaderText="In Progress" Key="InProgress" />
                <ej:KanbanColumn HeaderText="Testing" Key="Testing" />
                <ej:KanbanColumn HeaderText="Done" Key="Close" />
            </Columns>
            <Fields Content="Summary" ImageUrl="ImgUrl" PrimaryKey="Id" />
            <ScrollSettings Width="700" Height="500" />
            <CustomToolBarItems>
                <ej:KanbanCustomToolBarItems Template="#Delete" />
            </CustomToolBarItems>
            <ClientSideEvents ToolbarClick="toolbarClick" ActionComplete="complete" />
            <EditSettings AllowAdding="true" AllowEditing="true" EditMode="Dialog">
                <EditItems>
                    <ej:KanbanEditItem EditType="String" Field="Id">
                        
                        <ValidationRules>
                            <ej:KeyValue Key="required" Value="true" />
                        </ValidationRules>
                    </ej:KanbanEditItem>
                    <ej:KanbanEditItem EditType="Dropdown" Field="Status"></ej:KanbanEditItem>
                    <ej:KanbanEditItem EditType="Dropdown" Field="Assignee"></ej:KanbanEditItem>
                    <ej:KanbanEditItem EditType="Numeric" Field="Estimate">
                        <NumericEditOptions DecimalPlaces="2" />
                        <ValidationRules>
                            <ej:KeyValue Key="range" Value="[0, 1000]" />
                        </ValidationRules>
                    </ej:KanbanEditItem>
                    <ej:KanbanEditItem EditType="TextArea" Field="Summary">
                        <ValidationRules>
                            <ej:KeyValue Key="required" Value="true" />
                        </ValidationRules>
                    </ej:KanbanEditItem>
                </EditItems>
            </EditSettings>
        </ej:Kanban>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="PropertySection" runat="server">
        <div id="sampleProperties">
            <div class="prop-kanban">
                <div class="row">
                    <div class="col-md-3">
                        Edit Mode
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ID="editMode" runat="server" ClientSideOnChange="selectChange"
                            SelectedItemIndex="0" Width="120px">
                            <Items>
                                <ej:DropDownListItem Text="Dialog Mode" Value="0" />
                                <ej:DropDownListItem Text="Template Mode" Value="1" />
                            </Items>
                        </ej:DropDownList>
                    </div>
                </div>
            </div>
        </div>
    </asp:Content>
    <asp:Content ID="ScriptContent" runat="server" ContentPlaceHolderID="ScriptSection">
        <script id="Delete" type="text/x-jsrender">
            <a class="e-customdelete  e-icon" />
        </script>
        <script type="text/template" id="template">
                         <table cellspacing="10" style="border-spacing: 11px;">
                            <tr>
                                <td style="text-align: right;">Id
                                </td>
                                <td style="text-align: left">
                                    <input id="Id" name="Id" value="{{: Id}}" class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 175px; height: 28px" disabled="disabled" />
                                </td>
                                <td style="text-align: right;">Status
                                </td>
                                <td style="text-align: left">
                                      <select id="Status" name="Status">
                                        <option value="Close">Close</option>
                                        <option value="InProgress">InProgress</option>
                                        <option value="Open">Open</option>
                                        <option value="Testing">Testing</option>                                    
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">Estimate
                                </td>
                                <td style="text-align: left">
                                    <input type="text" id="Estimate" name="Estimate" value="{{:Estimate}}" />
                                </td>
                                 <td style="text-align: right;">Assignee
                                </td>
                                <td style="text-align: left">
                                    <select id="Assignee" name="Assignee">
                                        <option value="Nancy Davloio">Nancy Davloio</option>
                                        <option value="Andrew Fuller">Andrew Fuller</option>
                                        <option value="Janet Leverling">Janet Leverling</option>
                                        <option value="Margaret hamilt">Margaret hamilt</option>
                                        <option value="Steven walker">Steven walker</option>
                                        <option value="Michael Suyama">Michael Suyama</option>
                                        <option value="Robert King">Robert King</option>
                                        <option value="Laura Callahan">Laura Callahan</option>
                                    </select>
                                </td>
                            </tr>                      
                            <tr>
                                <td style="text-align: right;">Tags
                                </td>
                                <td style="text-align: left">
                                    <input id="Tags" name="Tags" value="{{: Tags}}" class="e-field e-ejinputtext valid" style="width: 175px; height: 28px" />
                                </td>
                                <td style="text-align: right;">Priority
                                </td>
                                <td style="text-align: left">
                                    <select id="Priority" name="Priority">
                                        <option value="Low">Low</option>
                                        <option value="High">High</option>
                                        <option value="Critical">Critical</option>
                                        <option value="Normal">Normal</option>
                                        <option value="Release Breaker">Release Breaker</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">Summary
                                </td>
                                <td style="text-align: left">
                                    <textarea id="Summary" name="Summary" class="e-ejinputtext"  value="{{: Summary}}" style="width: 270px; height: 95px">{{: Summary}}</textarea>
                                </td>
                            </tr>
                        </table>                
        </script>
        <script type="text/javascript">
            $(function () {
                $("#sampleProperties").ejPropertiesPanel();
            });
            function selectChange(args) {
                var kanbanObj = $('#<%= KanbanBoard.ClientID %>').data("ejKanban");
                if (kanbanObj != undefined) {
                    kanbanObj.KanbanSelection.clear();
                    if (kanbanObj.model.isEdit)
                        $('#<%= KanbanBoard.ClientID %>').ejKanban("cancelEdit");
                    if (args.itemId == 1)
                        $('#<%= KanbanBoard.ClientID %>').ejKanban("option", { "editSettings": { editMode: "dialogtemplate", dialogTemplate: "#template" } });
                    else
                        $('#<%= KanbanBoard.ClientID %>').ejKanban("option", { "editSettings": { editMode: "dialog" } });
                }
            }
            function complete(args) {
                if (args.requestType == "refresh" || args.requestType == "save") {
                    $('#<%= KanbanBoard.ClientID %>').ejWaitingPopup("hide");
                }
                if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") {
                    $("#Estimate").ejNumericTextbox({ value: parseFloat($("#Estimate").val()), width: "175px", height: "34px", decimalPlaces: 2 });
                    $("#Assignee").ejDropDownList({ width: '175px' });
                    $("#Status").ejDropDownList({ width: '175px' });
                    $("#Priority").ejDropDownList({ width: '175px' });
                    if (args.requestType == "beginedit" || args.requestType == "add") {
                        $("#Assignee").ejDropDownList("setSelectedValue", args.data['Assignee']);
                        $("#Priority").ejDropDownList("setSelectedValue", args.data['Priority']);
                        $("#Status").ejDropDownList("setSelectedValue", args.data['Status']);
                    }
                    $(".e-field").css({ 'width': '175px', 'text-align': 'left' });
                }
            }
            function toolbarClick(args) {
                if (args.itemName == "Delete" && this.element.find(".e-kanbancard").hasClass("e-cardselection")) {
                    var selectedcard = this.element.find(".e-cardselection");
                    this.KanbanEdit.deleteCard(selectedcard.attr("id"));
                }
            }
        </script>
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="StyleSection" runat="server">
        <style type="text/css">
            .e-customdelete:before {
                content: "\e800";
                line-height: 26px;
                min-height: 26px;
                min-width: 14px;
                display: inline-block;
            }
        </style>
    </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.Kanban
    {
        public partial class Editing : System.Web.UI.Page
        {
            List<Tasks> Task = new List<Tasks>();
            protected void Page_Load(object sender, EventArgs e)
            {
                BindDataSource();
            }
            private void BindDataSource()
            {
                Task.Add(new Tasks(1, "Open", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Nancy Davloio", "../content/images/kanban/1.png", 1));
                Task.Add(new Tasks(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew Fuller", "../content/images/kanban/2.png", 1));
                Task.Add(new Tasks(3, "Open", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Janet Leverling", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet Leverling", "../content/images/kanban/3.png", 2));
                Task.Add(new Tasks(5, "Testing", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Steven walker", "../content/images/kanban/5.png", 1));
                Task.Add(new Tasks(6, "Close", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Michael Suyama", "../content/images/kanban/6.png", 1));
                Task.Add(new Tasks(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Robert King", "../content/images/kanban/7.png", 4));
                Task.Add(new Tasks(8, "Close", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Laura Callahan", "../content/images/kanban/8.png", 2));
                Task.Add(new Tasks(9, "Testing", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Nancy Davloio", "../content/images/kanban/1.png", 2));
                Task.Add(new Tasks(10, "Close", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Margaret hamilt", "../content/images/kanban/4.png", 3));
                Task.Add(new Tasks(11, "Validate", "Validate the issues reported by the customer.", "Story", "High", "Validation,Fix", 1, "Steven walker", "../content/images/kanban/5.png", 5));
                Task.Add(new Tasks(12, "Testing", "Check Login page validation.", "Story", "Release Breaker", "Testing", 0.5, "Michael Suyama", "../content/images/kanban/6.png", 3));
                Task.Add(new Tasks(13, "Open", "API improvements.", "Improvement", "High", "Grid,API", 3.5, "Robert King", "../content/images/kanban/7.png", 3));
                Task.Add(new Tasks(14, "InProgress", "Add responsive support to application", "Epic", "Critical", "Responsive", 6, "Laura Callahan", "../content/images/kanban/8.png", 3));
                Task.Add(new Tasks(15, "Open", "Show the retrieved data from the server in grid control.", "Story", "High", "Database,SQL", 5.5, "Margaret hamilt", "../content/images/kanban/4.png", 4));
                Task.Add(new Tasks(16, "InProgress", "Fix cannot open user’s default database SQL error.", "Critical", "Bug", "Database,Sql2008", 2.5, "Janet Leverling", "../content/images/kanban/3.png", 4));
                Task.Add(new Tasks(17, "Testing", "Fix the issues reported in data binding.", "Story", "Normal", "Databinding", 3.5, "Janet Leverling", "../content/images/kanban/3.png", 4));
                Task.Add(new Tasks(18, "Close", "Analyze SQL server 2008 connection.", "Story", "Release Breaker", "Grid,Sql", 2, "Andrew Fuller", "../content/images/kanban/2.png", 4));
                Task.Add(new Tasks(19, "Validate", "Validate databinding issues.", "Story", "Low", "Validation", 1.5, "Margaret hamilt", "../content/images/kanban/4.png", 2));
                Task.Add(new Tasks(20, "Close", "Analyze grid control.", "Story", "High", "Analyze", 2.5, "Margaret hamilt", "../content/images/kanban/4.png", 5));
                Task.Add(new Tasks(21, "Close", "Stored procedure for initial data binding of the grid.", "Others", "Release Breaker", "Databinding", 1.5, "Steven walker", "../content/images/kanban/5.png", 6));
                Task.Add(new Tasks(22, "Close", "Analyze stored procedures.", "Story", "Release Breaker", "Procedures", 5.5, "Janet Leverling", "../content/images/kanban/3.png", 7));
                Task.Add(new Tasks(23, "Validate", "Validate editing issues.", "Story", "Critical", "Editing", 1, "Nancy Davloio", "../content/images/kanban/1.png", 5));
                Task.Add(new Tasks(24, "Testing", "Test editing functionality.", "Story", "Normal", "Editing,Test", 0.5, "Nancy Davloio", "../content/images/kanban/1.png", 5));
                Task.Add(new Tasks(25, "Open", "Enhance editing functionality.", "Improvement", "Low", "Editing", 3.5, "Andrew Fuller", "../content/images/kanban/2.png", 5));
                Task.Add(new Tasks(26, "InProgress", "Improve the performance of the editing functionality.", "Epic", "High", "Performance", 6, "Nancy Davloio", "../content/images/kanban/1.png", 5));
                Task.Add(new Tasks(27, "Open", "Arrange web meeting with the customer to show editing demo.", "Others", "High", "Meeting,Editing", 5.5, "Steven walker", "../content/images/kanban/5.png", 6));
                Task.Add(new Tasks(28, "InProgress", "Fix editing issues reported in chrome", "Bug", "Normal", "Editing,Customer", 2.5, "Janet Leverling", "../content/images/kanban/3.png", 6));
                Task.Add(new Tasks(29, "Testing", "Fix the editing issues reported by the customer.", "Bug", "Low", "Editing,Fix", 3.5, "Janet Leverling", "../content/images/kanban/3.png", 6));
                Task.Add(new Tasks(30, "Close", "Arrange a web meeting with the customer to get editing requirements.", "Others", "Critical", "Meeting,Editing", 2, "Steven walker", "../content/images/kanban/5.png", 8));
                this.KanbanBoard.DataSource = Task;
                this.KanbanBoard.DataBind();
            }
            [Serializable]
            public class Tasks
            {
                public Tasks()
                {
                }
                public Tasks(int Id, string Status, string Summary, string Type, string Priority, string Tags, double Estimate, string Assignee, string ImgUrl, int RankId)
                {
                    this.Id = Id;
                    this.Status = Status;
                    this.Summary = Summary;
                    this.Type = Type;
                    this.Priority = Priority;
                    this.Tags = Tags;
                    this.Estimate = Estimate;
                    this.Assignee = Assignee;
                    this.ImgUrl = ImgUrl;
                    this.RankId = RankId;
    
                }
                public int Id { get; set; }
                public string Status { get; set; }
                public string Summary { get; set; }
                public string Type { get; set; }
                public string Priority { get; set; }
                public string Tags { get; set; }
                public double Estimate { get; set; }
                public string Assignee { get; set; }
                public string ImgUrl { get; set; }
                public int RankId { get; set; }
    
            }
    
        }
    }