Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
35
Edit Link in Row
posted

So I am working with a Grid and I want the ability to put in an "Edit" button.  This edit button would take the user to an edit sub-page from the grid.  So far the only thing I found was the ability to accomplish this with a Row Template.  Would this be possible any other way?

 

    @(Html.Infragistics().Grid(Model.Stores).ID("grid1").Height("400px").AutoGenerateColumns(false).JQueryTemplating(true)

        .RowTemplate("<tr><td> <a href='#' onclick='edit()'>edit</a> </td> <td>${StoreNumber}</td> <td>${IsActive}</td>")

        .Columns(column =>

            {

                column.For(x => x.StoreNumber).HeaderText("Store Number");

                column.For(x => x.IsActive).HeaderText("Active");

                column.For(x => x.Name).HeaderText("Store Number");

                column.For(x => x.RegionDesc).HeaderText("Region");

                column.For(x => x.DistrictDesc).HeaderText("District");

                column.For(x => x.RegionDesc).HeaderText("Region");

            }).Features(features =>

            {

                features.Paging().PageSize(50).Type(OpType.Local);

                features.Filtering().Mode(FilterMode.Advanced);

            }).Virtualization(false).DataBind().Render()

        )

  • 765
    Suggested Answer
    posted

    Hi robpolak.

    My scenary maybe is the same, i solved, but, i can get the id of the row, i'm using an image, is the same way for a ActionLink don't worry, and change to another page, maybe you can apply, but open a popup. this is the code:

    @model IQueryable<CxCModels.Models.tblPaises>
    @using Infragistics.Web.Mvc;

    @{
        ViewBag.Title = "Catalogo de Pais";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
     <script type="text/javascript">

         function obtenerDato() {
             var cell = $('#gridPaises').igGridSelection('selectedCell');
             var dataview = $('#gridPaises').data('igGrid').dataSource.dataView();
             if (cell == null) {
                 window.alert("Debe Seleccionar un renglon de la tabla.")
                 return;
             }
             var cellRowId = dataview[cell.rowIndex]["idPais"];
             return cellRowId;
         }
         function crear() {
             var adress = '@Url.Action("Create")';
             window.location = adress;
         }
         function detalle() {
             var id = obtenerDato();
             var adress = '@Url.Action("Details")' + "/" + id;
             window.location = adress;
         }
         $(document).ready(function () {

             $("#gridPaises").live("iggridrendered", function (event, args) {

                 args.owner.element.find("tr:even").addClass("ui-ig-altrecord");

             });

         });
     </script>

     <div class="AlinearIzquierda">
        <table style="width: 750px">
            <tr class ="Titulos">
                    <td>Catalogo de Paises </td>
                    <td>&nbsp</td>
                    <td style="text-align:right"> <img alt="Agregar Cliente" src="@Url.Content("~/Content/Iconos/AGREGARM.png")" onclick="crear()" /></td>
            </tr>
        </table>
    @using (Html.BeginForm("Index", "Paises"))
    {
       
        <br />
       
        @(Html.Infragistics().Grid(Model).ID("gridPaises").PrimaryKey("idPais").AutoGenerateColumns(false).FixedHeaders(true).AutoGenerateLayouts(false).AutoCommit(true).DefaultColumnWidth("190px").Width("750px")
        .JQueryTemplating(true)
        .RowTemplate("<tr><td><img alt='Detalle' onclick='detalle()' src='../../../../Content/Iconos/consultarTabla.png' /></td><td>${idPais}</td><td>${Nombre}</td></tr>")
        .Columns(column =>
        {
            column.For(x => x.idPais).HeaderText(" ").Width("30px").Column.Key = "Detalle";
            column.For(x => x.idPais).HeaderText("Pais");
            column.For(x => x.Nombre).HeaderText("Nombre");
        })
            .Features(features =>
            {
                features.Sorting().ColumnSettings(settings =>
                {
                    settings.ColumnSetting().ColumnKey("Detalle").AllowSorting(false);
                });
                features.Selection().Mode(SelectionMode.Cell).MultipleSelection(false);
                features.Paging().Type(OpType.Local).PagerRecordsLabelTemplate("${startRecord} - ${endRecord} de ${recordCount} registros").PageSize(10).FirstPageLabelText("").FirstPageTooltip("Ir a primera pagina").PrevPageLabelText("").PrevPageTooltip("Ir a pagina Anterior").ShowPagerRecordsLabel(true)
                .LastPageLabelText("").LastPageTooltip("Ir a Ultima pagina").NextPageLabelText("").NextPageTooltip("Ir a Siguiente pagina").PageSizeDropDownLabel("Mostrar").PageSizeDropDownTrailingLabel("Registros");
                features.Filtering().Type(OpType.Local).FilterButtonLocation(Location.Left)
                .ColumnSettings(settings =>
                {
                    settings.ColumnSetting().ColumnKey("Detalle").AllowFiltering(false);
                });
            })
            .Height("415")
            .DataSourceUrl(Url.Action("Index"))
            .DataBind().Render()
        )
    }
    </div>

     

     

    i hope this helps.

    Regards 

     

  • 24671
    Suggested Answer
    posted

    Hi,

    This is the only way to achieve the scenario, for the time being. we plan of introducing a row edit template as future functionality , which will allow you to edit rows and additionally, you'll be able to template the row edit template such that it can include links and buttons to external forms.

    Hope it helps. Thanks

    Angel