[Solved] Editable Grid with a Collection in a Column Supporting Ajax

[Kolie]

    I have a list of items I am trying to display in a grid. The following type is the item bound to the grid:

public class JobViewModel

    {

 

         

        [TypeConverter(typeof(CommisionConverter))]

        public class JobGridCommision

        {

            public long Id;

            public string Name;

 

            public float Percent;

            public decimal Value;

        }

        [ReadOnly(true)]

        public long Id;

        [Required]

        public string Name;

        [Required]

        public string Number;

        [DataType(DataType.Currency), Required]

        public decimal Cost;

        [UIHint("ClientCommision")]

        public List<JobGridCommision> Sell = new List<JobGridCommision>();

        [UIHint("ClientCommision")]

        public List<JobGridCommision> Write = new List<JobGridCommision>();

        [UIHint("ClientCommision")]

        public List<JobGridCommision> Run = new List<JobGridCommision>();

        [UIHint("ClientCommision")]

        public List<JobGridCommision> Referrals = new List<JobGridCommision>();

        public JobViewModel() { }

     }

}


The code I am using for the grid view is as follows:

@using JobMan.Core.Domain.Job
@using JobMan.Web.Controllers
@using JobMan.Web.Models
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@helper ListCommision(JobViewModel jobitem, CommisionType type)
{


    <span>test</span>

    List<JobViewModel.JobGridCommision> commisionList;
    switch (type)
    {
        case CommisionType.Run:
            commisionList = jobitem.Run;
            break;
        case CommisionType.Sell:
            commisionList = jobitem.Sell;
            break;
        case CommisionType.Write:
            commisionList = jobitem.Write;
            break;
        case CommisionType.Referral:
        default:
            commisionList = jobitem.Referrals;
            break;

    }
    for (var i = 0; i < commisionList.Count(); i++)
    {
        @jobitem.Sell[i].Name;
    }

}


<script>
    function template(item) {
        var html = "<ul id=\"Commision\" class=\"commision-list\">";
        for (var i = 0; i < item.length; i++) {
            html += "<li>";
            html += item[i].Name;
            html += " ";
            html += item[i].Value;
            html += "</li>";
        }
        html += "</ul>";
        return html;
    }
</script>

<script type="text/javascript">
    function onEdit(e) {
        var x = $(e.form).find('#Commision');

        $("<div class=\"CommisionItem\"></div>").appendTo("#Commision");
        var newdiv = $("#Commision").lastChild;
        // Add each item and fill it in from the data here.
    }
</script>


@(
    @Html.Telerik().Grid<JobViewModel>()
        .Name("Grid")
        .Columns(columns =>
                     {
                         columns.Bound(p => p.Id).Hidden();
                         columns.Bound(p => p.Name);
                         columns.Bound(p => p.Number);
                         columns.Bound(p => p.Cost);
                         columns.Bound(p => p.Sell).Template(@<text>
                                                                  @ListCommision(item, CommisionType.Sell)
                                                              </text>).EditorTemplateName("ClientCommision").ClientTemplate("<#= template(data.Sell) #>");

                         columns.Command(command =>
                                             {
                                                 command.Edit();
                                                 command.Delete();
                                             }).Width(200);
                     }).ToolBar(toolbar => toolbar.Insert())
        .Editable(editable => editable.Mode(GridEditMode.InLine))
         .DataKeys(keys =>
                       {
                           keys.Add(p => p.Id);
                       }
        )
         .Pageable()
        .Sortable()
        .Scrollable()
        .DataBinding(dataBinding =>
                     dataBinding.Ajax().Select("_SelectAjaxEditing", "Jobs")
                                .Insert("_InsertAjaxEditing", "Jobs")
                                .Update("_SaveAjaxEditing", "Jobs")
                                .Delete("_DeleteAjaxEditing", "Jobs"))
        .ClientEvents(events=>events.OnEdit("onEdit"))

)

My client commision editor template is as follows:

@using System.Collections

<div id="Commision">
@if (Model != null)
{
    foreach (var commision in Model)
    {
        @(Html.Telerik().DropDownList().Name("CommisionContact").BindTo(new SelectList((IEnumerable) ViewData["contacts"], "Id", "Name", commision.Id)))
        @(Html.Telerik().PercentTextBox().Value(commision.Percent).DecimalDigits(2).HtmlAttributes(new { style = string.Format("width:{0}px;min-width: 0px;margin-right: 20px;", 90) }).Name("Percent"))
        @(Html.ActionLink("X","DeleteCommision"))
    }
}
else
{
    <div class="CommisionItem">
    @(Html.Telerik().DropDownList().HtmlAttributes(new { style = string.Format("width:{0}px;min-width: 0px;margin-right: 10px;", 150) }).Name("Contact").BindTo(new SelectList((IEnumerable) ViewData["contacts"], "Id", "Name")))
    @(Html.Telerik().PercentTextBox().DecimalDigits(2).HtmlAttributes(new { style = string.Format("width:{0}px;min-width: 0px;margin-right: 20px;", 90) }).Name("Percent"))
    @(Html.ActionLink("X","DeleteCommision"))
    </div>
}

</div>

What I am trying to do in the grid is display each job item. In the "Sell" column in view mode I want to display the name and value of the current commision. This is currently working. Because I am using Ajax, when I switch into edit mode, the client template is called, but with an empty Model. I therefor am creating a single empty entry with a Dropdown, Percent Text, and Link to remove each item. This is also working. I am unsure if this is the best way to continue but what I believe I have to do next is in the javascript onEdit function, recreate what I have in my ClientCommision EditorTemplate for each item. If this is indeed the case I am unsure how to create the telerik themed and scripted items in pure javascript. It would also seem that using an editor template with Ajax is largely useless, as I have to create the template in the onEdit function anyways.

Please advise on what the correct approach would be with this matter. Thank you for your time.