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