none
Set ID en las filas de webgrid RRS feed

  • Pregunta

  • Estimados el caso es una simple pregunta, teniendo el siguiente WebGrid:

        @grid.GetHtml(
            htmlAttributes: new { id = r.Next() },
            columns: grid.Columns( 
                grid.Column("cl1"),
                grid.Column("cl2"),
                grid.Column("cl3"),
                grid.Column("cl4"),
                grid.Column("cl5")
            ))

    Necesito darle a cada tr un data-attr1 y un id, como se hace?, busco información y no logro que pase.

    de ante mano, gracias.

    jueves, 5 de noviembre de 2015 17:50

Todas las respuestas

  • ME auto respondo, ocurre lo siguiente, cree la siguiente grilla ocn webgrid:

        @grid.GetHtml(
            htmlAttributes: new { id = r.Next() },
            rowStyle: "analizar",
            columns: grid.Columns(
                grid.Column(columnName: "idHidden", style: "rowHidden idHidden", format: (item) => { return item.archivoID; }),
                grid.Column(columnName: "dataRowHidden", style:"rowHidden dataRowHidden", format: (item) => {return item.nombre + "-" + item.formato;}),
                grid.Column("nombre", "Archivo", format: (item) => { return Html.Raw("<a href=\"" + Url.Action(item.ruta.Substring(item.ruta.LastIndexOf("\\Documentos") + "\\Documentos".Length + 1).Replace("\\", "/"), "Documentos") + "\">" + item.nombre.Substring(0, item.nombre.LastIndexOf('.')) + "</a>"); }),
                grid.Column("icono", format: (item) => { return Html.Raw("<img src=\"" + Url.Action(item.icono, "Images") + "\"/>"); }),
                grid.Column("created_at", "Fecha creación"),
                grid.Column("usuarioCreacion", "Autor"),
                grid.Column("peso", "Tamaño", format: (item) => { return item.peso + "Bytes"; }),
                grid.Column(columnName: "", format: (item) => { return Html.Raw("<a href=\"#\" class=\"linkImgDelete\" data-archivo=\"" + item.nombre + "\" data-extencion=\"" + item.formato + "\" data-id=\"" + item.archivoID + "\" data-carpeta=\"" + ViewBag.carpeta + "\" onclick=\"eliminarArchivoEdit(this);\"> <span class=\"icon-bin\"></span></a>"); })
            ))

    si se dan cuenta, las dos primeras columnas son con el respectivo id y data-row que necesitaba insertar, por css hice:

    .rowHidden
    {
        display:none;
    }


    así oculto las columnas relacionadas para que no se vean, ahora como asigno el id con el data-row?, la respuesta es Jquery:

     $(document).ready(function () {
            $(".analizar").each(function () {
                var dataRow = $(this).find(".dataRowHidden").html()
                var id = $(this).find(".idHidden").html()
    
                $(this).attr("id", id);
                $(this).attr("data-row", dataRow);
    
                $("th").each(function () {
                    if ($(this).html().indexOf("idHidden") != -1 || $(this).html().indexOf("dataRowHidden") != -1)
                    {
                        $(this).css("display","none")
                    }
                })
            })
        })

    Como pueden ver, asigo el respectivo id y data-row al tr y una vez hecho esto, recorro cada th para poder esconder la cabecera de dichas columnas.

    Es la solución que encontré, la mejor?, no lo se. Espero que comenten sus observaciones, y si pueden darme una forma de hacerlo mas elegante estaré muy agradecido.

    Saludos.

    • Propuesto como respuesta Camilo A. Villa jueves, 5 de noviembre de 2015 22:15
    jueves, 5 de noviembre de 2015 18:45