Custom Popup Editor for Individual Cell

[John]

Hi, I'm just getting started using UI for ASP.NET MVC and love the default popup editor. I was wondering how to create a popup editor that only shows editable data for one individual cell. Right now I have cells in a column that represent a grid of 3x3 numerical values and need the ability to edit these en masse. Right now I can edit my rows easily using inline, but this column and a few others display a List<type> of items that I have to write html elements for in javascript.

.Columns(columns =>
    {
        columns.Bound(p => p.LEXId).Hidden(true);
        columns.Bound(p => p.LEXName).Title("Name");
        columns.Bound(p => p.LEXDescription).Title("Description");
        columns.Bound(p => p.AllTranches).ClientTemplate("#= tranchesTemplate(data) #"); //edit these cells in a popup
        columns.Bound(p => p.ComponentName1).Title("Comp1");
        columns.Bound(p => p.ProximityTranche1).Title("Proximity");
        columns.Bound(p => p.ComponentName2).Title("Comp2");
        columns.Bound(p => p.ProximityTranche2).Title("Proximity");
        columns.Bound(p => p.IsActive);

        columns.Command(cmd => cmd.Edit()).Title("Update");
    })

<script type="text/javascript">

    function tranchesTemplate(item) {
        var html = "<table>";
        for (var i = 0; i < item.AllTranches.length; i++) {
            if (item.AllTranches[i]) {
                if ((i % 3 == 0) || (i == 0)) {
                    html += "<tr>";
                    html += "<td>";
                    html += item.AllTranches[i];
                    html += "</td>";
                } else {
                    html += "<td>";
                    html += item.AllTranches[i];
                    html += "</td>";
                }
            }
        }
        html += "</tr>";
        html += "</table>";
        html += "<table>";
        html += "<tr>";
        html += "<td><a class=k-button tranche-edit>Edit</a></td>";
        html += "</tr>";
        html += "</table>";
        return html;
    }
</script>

So I have all the tranches populated with the appropriate values, is there some way to quickly build out a popup 3x3 grid using jQuery? Apologies in advanced if this is answered somewhere, but my team lead is urging me to post on here. :)

[Alexander Popov]

Hello John,

You can achieve similar behavior using a custom popup editing template (see demo). I would also recommend checking this example, which illustrates how to use a nested Grid inside the editing popup.

Regards,
Alexander Popov
Telerik