Code for kanban

@section SampleHeading{
    <span class="sampleName">KanbanBoard-Dialog-ASP.NET MVC-SYNCFUSION</span>}
@section MetaTags{
    <meta name="description" content="This example demonstrates how to edit data using a dialog box and insert, update, and delete cards in the Syncfusion ASP.NET MVC Kanban component.">
}
@using Syncfusion.JavaScript.Models;
@section ScriptReferenceSection{
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
}
@section ControlsSection{
    @(Html.EJ().Kanban("Kanban")
                     .DataSource(ds => ds.URL("GetData").CrudURL("Crud").Adaptor(AdaptorType.UrlAdaptor))
                   .Columns(col =>
                   {
                       col.HeaderText("Backlog").Key("Backlog").ShowAddButton(true).Add();
                        col.HeaderText("Doing").Key("Doing").ShowAddButton(true).Add();
                       col.HeaderText("Done").Key("Done").ShowAddButton(true).Add();
                        col.HeaderText("Testing").Key("Testing").Add();
                       col.HeaderText("Release Braking").Key("ReleaseBraking").Add();
                       col.HeaderText("Deployed").Key("Deployed").Add();
                            col.HeaderText("User Testing").Key("UAT").Add();
                       col.HeaderText("Completed").Key("Completed").Add();
                   }).AllowTitle(true)
                   .AllowSelection(true)
                      .AllowScrolling(true)
                    .ScrollSettings(sSettings => { sSettings.Width(700).Height(800); })
                     .AllowToggleColumn(true)

                   .KeyField("Status")
                   .Fields(field =>
                   {

                       field.PrimaryKey("Id");
                       field.Content("Summary");
                       field.Tag("Status");
                       field.CollapsibleCards(collapsibleCards =>
                       {
                          collapsibleCards.Field("Status").Key("Close");
                       });
                    })
                   .CustomToolbarItems(cus =>
                               {
                                   collapsibleCards.Field("Status").Key("Close");
                               });
                           })
                           .CustomToolbarItems(cus =>
                                       {
                                           cus.Template("#Delete").Add();
                               })
                               .EnableTouch(true)

                                  .EditSettings(edit =>
                          {
                              edit.AllowAdding(true)
                                  .AllowEditing(true)

                                  .EditItems(e =>
                                  {
                                      edit.AllowAdding(true)
                                          .AllowEditing(true)


                                      e.Field("Status").EditType(KanbanEditingType.Dropdown).Add();
                                      e.Field("Assignee").EditType(KanbanEditingType.Dropdown).Add();
                                      e.Field("Progress").EditType(KanbanEditingType.Dropdown).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).ValidationRules(rule => { rule.AddRule("range", "[0,100]"); }).Add();
                                      e.Field("Estimate").EditType(KanbanEditingType.Numeric).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).ValidationRules(rule => { rule.AddRule("range", "[0,100]"); }).Add();
                                      e.Field("Summary").EditType(KanbanEditingType.TextArea).ValidationRules(rule => { rule.AddRule("required", true); }).Add();
                                  }).EditMode(KanbanEditMode.DialogTemplate);
                          })
                  .AllowTitle(true)
                  .AllowSelection(true)
                  .KeyField("Status")
                         .ClientSideEvents(eve =>
                                 {
                                    eve
                                 .ToolBarClick("toolbarClick")
                                 .ActionComplete("complete");
                         })

             .Fields(field =>
                  {
                      field.Color("Type")
                           .Content("Summary")
                           .ImageUrl("ImgUrl")
                           .PrimaryKey("Id");

                  })
                   .FilterSettings(filter =>
        {
            filter.Text("Janet Issues").Query("new ej.Query().where('Assignee', 'equal', 'Janet')").Description("Displays issues which matches the assignee as 'Janet").Add();
            filter.Text("Closed  Issues").Query("new ej.Query().where('Status', 'equal', 'Close')").Description("Display the 'Closed' issues").Add();
        })

                  .CardSettings(card =>
                    {

                        card.ColorMapping(color =>
                        {
                            color.Add("#cb2027", "Backlog")
                                .Add("#67ab47", "Doing")
                                .Add("#fbae19", "Done")
                                .Add("#fbae19", "ReleaseBraking")
                                .Add("#fbae19", "Deployed")
                                 .Add("#fbae19", "UAT")
                                    .Add("#fbae19", "Completed")
                                .Add("#6a5da8", "Testing");
                        });
                        card.Template("#cardTemplate");
                    })
    )

}
@section PropertiesSection{
    <div class="row">
        <div class="col-md-3">
            Edit mode
        </div>
        <div id="ddl1">
            <ul>
                <li value="dialog">Dialog Mode</li>
                <li value="dialogtemplate">Template Mode</li>
            </ul>
        </div>
        <div class="col-md-3">
            @(Html.EJ().DropDownList("kanbanEditMode")
                    .TargetID("ddl1")
                    .Width("120px")
                    .SelectedItemIndex(0)
                    .ClientSideEvents(eve => { eve.Change("selectChange"); })
            )
        </div>
    </div>
}
@section ScriptSection{
    <script id="Delete" type="text/template">
        <a class="e-customdelete  e-icon" />
    </script>
    <script id="template" style="display: none" type="text/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="Doing">BackLog</option>
                        <option value="Doing">Doing</option>
                        <option value="Done">Done</option>
                        <option value="Completed">Completed</option>
                        <option value="Testing">Testing</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td style="text-align: right;">
                    SOP Number:
                </td>
                <td style="text-align: left">
                    <input type="text" id="SopNumber" name="SopNumber" value="{{:SopNumber}}" />
                </td>


            </tr>

            <tr>
                <td style="text-align: right;">
                    Days Consumed
                </td>
                <td style="text-align: left">
                    <label>{{:DaysLeft}}</label>

                </td>
                <td style="text-align: right;">
                    Days Left
                </td>
                <td style="text-align: left">
                    <input type="text" id="DaysLeft" name="DaysLeft" value="{{:DaysLeft}}" />

                </td>
            </tr>
            <tr>
                <td style="text-align: right;">
                    Progress
                </td>
                <td style="text-align: left">
                    <input type="text" id="Progress" name="Progress" value="{{:Progress}}" />
                </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;">
                    Tasks
                </td>
                <td style="text-align: left">
                    Add Task
                </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;">
                    Location
                </td>
                <td style="text-align: left">
                    <div>
                        <label>
                            @Html.RadioButton("onsite", "On-Site")
                            On-Site
                        </label>
                    </div>
                    <div>
                        <label>
                            @Html.RadioButton("Remote", "Remote")
                            Remote
                        </label>
                    </div>

                </td>
                <td style="text-align: right;">
                    Type
                </td>
                <td style="text-align: left">
                    <select id="Priority" name="Priority">
                        <option value="Support">Support</option>
                        <option value="Hardware">Hardware</option>
                        <option value="Development">Development</option>


                    </select>
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">
                    Assigned To
                </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>


            </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) {
            if (this.getSelectedValue() == "dialogtemplate")
                $("#Kanban").ejKanban("option", { "editSettings": { editMode: this.getSelectedValue(), dialogTemplate: "#template" } });
            else
                $("#Kanban").ejKanban("option", { "editSettings": { editMode: this.getSelectedValue() } });
        }
        function complete(args) {
            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") {
                $("#Progress").ejNumericTextbox({ value: parseFloat($("#Progress").val()), width: "175px", height: "34px", decimalPlaces: 2 });
                $("#DaysLeft").ejNumericTextbox({ value: parseFloat($("#DaysLeft").val()), width: "175px", height: "34px", decimalPlaces: 2 });


                $("#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>
    <script id="cardtemplate" type="text/x-jsrender">
        <table class="e-templatetable">
            <tbody>
                <tr>
                    <td class="photo">
                        <img class="e-imgCard" src="{{:ImageUrl}}" .png">
                    </td>
                    <td class="details">
                        <table>
                            <tbody>
                                <tr>
                                    <td class="CardHeader">   Assignee: </td>
                                    <td>{{:Assignee}}</td>
                                </tr>
                                <tr>
                                    <td class="CardHeader">   Summary: </td>
                                    <td>{{:Summary}}</td>
                                </tr>
                                <tr>
                                    <td class="CardHeader">   Type: </td>
                                    <td>{{:Type}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td class="e-trianglecell">
                        "  // You need to define td for applycolor
                        <div class="e-bottom-triangle {{:Type}}"></div>
                    </td>
                </tr>
            </tbody>
        </table>
    </script>
    <style type="text/css">
        .e-kanban .e-kanbancard .Improvement {
            border-bottom-color: #67ab47;
        }

        .e-kanban .e-kanbancard .Bug {
            border-bottom-color: #cb2027;
        }

        .e-kanban .e-kanbancard .Story {
            border-bottom-color: #179bd7;
        }

        .e-kanban .e-kanbancard .Epic {
            border-bottom-color: #fbae19;
        }

        .e-kanban .e-kanbancard .Others {
            border-bottom-color: #6a5da8;
        }

        .e-trianglecell {
            padding: 0;
        }

        .e-templatetable {
            width: 100%;
            border-collapse: collapse;
        }

        .details > table {
            margin-left: 2px;
            border-collapse: separate;
            border-spacing: 2px;
            width: 100%;
        }

        .details td {
            vertical-align: top;
        }

        .details {
            padding: 8px 8px 10px 0;
        }

        .photo {
            padding: 8px 6px 10px 6px;
            text-align: center;
        }

        .CardHeader {
            font-weight: bolder;
            padding-right: 10px;
        }
    </style>
}
@section StyleSection{
    <style type="text/css" class="cssStyles">
        .e-customdelete:before {
            content: "\e800";
            line-height: 26px;
            min-height: 26px;
            min-width: 14px;
            display: inline-block;
        }
    </style>
}