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");
}).Features(features =>
features.Paging().PageSize(50).Type(OpType.Local);
features.Filtering().Mode(FilterMode.Advanced);
}).Virtualization(false).DataBind().Render()
)
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> </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
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