Custom Popup Editor for Individual Cell

2 posts, 0 answers
  1. John
    John avatar
    3 posts
    Member since:
    Jan 2015

    Posted 23 Jan 2015 Link to this post

    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;

    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. :)
  2. Alexander Popov
    Alexander Popov avatar
    1445 posts

    Posted 27 Jan 2015 Link to this post

    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.

    Alexander Popov

    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.

Back to Top