ASP.NET Custom Control, Two Grids.. Need some advice

Question

I need some advice designing a custom control which uses two grids and an Add and Remove button in between.

The Add button takes the selected item from left and add it to the right and then it removes it from the left.

The Remove button does the vice versa.

To have a fluid experience, I understand that Javascript will probably have to be involved.

Currently I'm creating a control inheriting CompositeControl with two grids and two sources. I could use a UpdatePanel so I don't have to do do a full post back on Add/Remove.

Any suggestions on the best way to approach this?

Answer 1

I did this sample using Kendo. I write some parts .I hope it would be helpful I add and remove some paths to supervisors in my sample: you need a main Action like this:

        public ActionResult AddPathToSupervisor()
    {
                return View();
    }

My sample is a bit more complete because in the view at first you choose a superviser and after that you add some paths to him. within the view you need 2 Grids and 2 buttons between for Add/Remove like this:

<div class="row">
<div class="col large">
    @(Html.Kendo().ComboBox()
    .Name("supervisor")
    .BindTo(SupervisorsSelectList)//var DocumetTypesSelectList = ViewBag.DocumetTypesSelectList as List<SelectListItem> ?? new List<SelectListItem>();
    .Events(e => e.Change("changeSupervisor"))

    )
</div>
</div>

<div class="row">
    <div class="col medium">
        <p>New Paths</p>
    </div>
    <div class="col medium">
        <p></p>
    </div>
    <div class="col medium">
        <p>Supervisor Paths</p>
    </div>

</div>

<div class="row">
    <div class="col medium">
        @(Html.Kendo().Grid<Distribution.Models.Path>()
            .Name("newPathsGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.PathId).Visible(false);
                columns.Bound(p => p.Title).Title(PathResource.Paths);
            })
            .Sortable()
            .Scrollable()
            .Navigatable()
            .Filterable(filterable => filterable.Extra(false))
                //.HtmlAttributes(new { style = "height:480px;" })
            .Resizable(resize => resize.Columns(true))
            .Selectable(s => s.Mode(GridSelectionMode.Multiple))
            .DataSource(dataSource => dataSource
                .Ajax()
                //.PageSize(15)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(p => p.PathId);
                    model.Field(p => p.PathId).DefaultValue(new Guid());
                })
                .Read(read => read.Action("FillNewSupervisorPathsGrid", "Paths"))
            )
        )
    </div>


<div class="col medium">
        <input type="button" id="addPathToSupervisor" value=">>Add>>" />
        <input type="button" id="removePathFromSupervisor" value="<<Remove<<" />
    </div>


<div class="col medium k-rtl">
        @(Html.Kendo().Grid<Distribution.Models.Path>()
            .Name("supervisorPathGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.PathId).Visible(false);
                columns.Bound(p => p.Title).Title(PathResource.Paths);
            })

        //.Pageable()
            .Sortable()
            .Scrollable()
            .Navigatable()
            .Filterable(filterable => filterable.Extra(false))
                //.HtmlAttributes(new { style = "height:480px;" })
            .Resizable(resize => resize.Columns(true))
            .Selectable(s => s.Mode(GridSelectionMode.Multiple))
            .DataSource(dataSource => dataSource
                .Ajax()
                //.PageSize(15)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(p => p.PathId);
                    model.Field(p => p.PathId).DefaultValue(new Guid());
                })
                .Read(read => read.Action("FillSupervisorPathsGrid", "Paths", new { id = ViewBag.SupervisorId }))
            )
        )
    </div>
</div>

this javascript code is to select Supervisor`s ID:

<script type="text/javascript">
function changeSupervisor(e) {
    var id = this.value();
    var supervisorPathGrid = $("#supervisorPathGrid").data("kendoGrid");
    supervisorPathGrid.dataSource.read({ id: id });
}

and here is the javascript code to add and remove paths:

<script type="text/javascript">
var supervisorPathGrid = $("#supervisorPathGrid").data("kendoGrid");
var newPathsGrid = $("#newPathsGrid").data("kendoGrid");
var selectedItem = $("#supervisor").data("kendoComboBox");

$(document).on('click', '#addPathToSupervisor', function (e) {
    e.preventDefault();
    var supervisorId = selectedItem.value();
    if (hasManyRowSelected(newPathsGrid)) {
        var values = [];
        values.push({
            name: "supervisorId",
            value: supervisorId
        });
        newPathsGrid.select().each(function () {
            values.push({
                name: "ids",
                value: newPathsGrid.dataItem(this).PathId
            });
        });
        $.ajax({
            url: '@Url.Action("AddPathToSupervisor")',
            type: 'POST',
            datatype: "json",
            traditional: true,
            data: values,
            success: function () {
                newPathsGrid.select().each(function () {
                    var $this = $(this);
                    var data = newPathsGrid.dataItem($this);
                    supervisorPathGrid.dataSource.insert(0, data);
                });
                newPathsGrid.select().each(function () {
                    var $this = $(this);
                    var data = newPathsGrid.dataItem($this);
                    newPathsGrid.removeRow($this);
                });
            },
            beforeSend: function () {
                $('#addPathToSupervisor').attr("disabled", true);
                $('#addPathToSupervisor').addClass("ajax-load");
            },
            error: function (event, request, settings) {
                ajax_exception(event);
            },
            complete: function () {
                $('#addPathToSupervisor').attr("disabled", false);
                $('#addPathToSupervisor').removeClass("ajax-load");
                grid.dataSource.read();
            },
            timeout: 50000
        });
    }
});
$(document).on('click', '#removePathFromSupervisor', function (e) {
    e.preventDefault();
    var supervisorId = selectedItem.value();
    if (hasManyRowSelected(supervisorPathGrid)) {
        var values = [];
        supervisorPathGrid.select().each(function () {
            values.push({
                name: "ids",
                value: supervisorPathGrid.dataItem(this).PathId
            });
        });
        $.ajax({
            url: '@Url.Action("RemovePathFromSupervisor")',
            type: 'POST',
            datatype: "json",
            traditional: true,
            data: values,
            success: function () {
                supervisorPathGrid.select().each(function () {
                    var $this = $(this);
                    var data = supervisorPathGrid.dataItem($this);
                    newPathsGrid.dataSource.insert(0, data);
                });
                supervisorPathGrid.select().each(function () {
                    var $this = $(this);
                    var data = supervisorPathGrid.dataItem($this);
                    supervisorPathGrid.removeRow($this);
                });
            },
            beforeSend: function () {
                $('#removePathFromSupervisor').attr("disabled", true);
                $('#removePathFromSupervisor').addClass("ajax-load");
            },
            error: function (event, request, settings) {
                ajax_exception(event);
            },
            complete: function () {
                $('#removePathFromSupervisor').attr("disabled", false);
                $('#removePathFromSupervisor').removeClass("ajax-load");
                grid.dataSource.read();
            },
            timeout: 50000
        });
    }
});

now you need 2 Post methods to add and remove paths like this :

    [HttpPost]
    public ActionResult AddPathToSupervisor(string[] ids, string supervisorId)
    {
        try
        {
            PathsBll.AddPathsToSupervisor(ids, supervisorId);
        }
        catch (Exception ex)
        {
            throw ex;
        }
        return Json(ModelState.ToDataSourceResult());
    }

    [HttpPost]
    public ActionResult RemovePathFromSupervisor(string[] ids)
    {
        try
        {
            PathsBll.RemovePathsFromSupervisor(ids);
        }

        catch (Exception ex)
        {
            throw ex;
        }
        return Json(ModelState.ToDataSourceResult());
    }

in which you can write linq to add or remove paths through ids. if you are familiar with kendo you know that you have 2 methods to fill each grid. if you need more info add comment. good lick