This is a migrated thread and some comments may be shown as answers.

Custom Popup Editor for Individual Cell

1 Answer 86 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 23 Jan 2015, 07:06 PM
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. :)

1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 27 Jan 2015, 01:03 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question
or