none
WebGrid ou o que aconselham? RRS feed

  • Discussão Geral

  • Boa tarde,

    tenho uma coleção de objetos que desejo mostrar em um grid para que tenha paginação e etc, no entanto cada coluna teria que conter mais de uma informação por exemplo:

    Tenho a classe Carro que tem {nome, urldaimagem, preco}

    na coluna do grid eu quero mostrar isto em uma disposição por exemplo igual ao site da americanas www.americanas.com.br

    onde ele mostra a imagem acima, um descritivo abaixo, e um botão algo com link para a pagina de detalhes e etc

    o que devo utilizar?, eu dei uma olhadam em webgrid e não achei nada por ai q faça isto, somente criar aquelas colunas básicas e 1 item por coluna.

    tem algum exemplo?

    a engine é razor, mvc 4

    obrigado


    • Editado Edilson quarta-feira, 10 de outubro de 2012 21:14 esqueci de adicionar a engine
    quarta-feira, 10 de outubro de 2012 21:13

Todas as Respostas

  • Edilson, não sei se com o Kendo vai ser assim tão simples fazer, vai um pouco de JavaScript, mas rola:

    http://demos.kendoui.com/web/grid/index.html

    O WebGrid é legal, mas não deram muita moral pra ele. Tem o jQGrid também, mas prefiro o Kendo.

    Abraços,


    Se sua questão foi respondida, favor marcar.

    André Baltieri
    MTAC – Microsoft Technical Audience Contributor

    Twitter: @andrebaltieri
    Blog: http://andrebaltieri.net
    Site: http://sismat.com.br

    quarta-feira, 10 de outubro de 2012 21:30
  • É grátis sim, o web. O Mobile e DataViz são pagos

    Se sua questão foi respondida, favor marcar.

    André Baltieri
    MTAC – Microsoft Technical Audience Contributor

    Twitter: @andrebaltieri
    Blog: http://andrebaltieri.net
    Site: http://sismat.com.br

    quarta-feira, 10 de outubro de 2012 21:42
  • Teria como vc colocar um exemplo, baixei os arquivos do site fiz um exemplo seguindo o site, mas não funcionou.
    quinta-feira, 11 de outubro de 2012 02:05
  • Tem no site cara!

    Se sua questão foi respondida, favor marcar.

    André Baltieri
    MTAC – Microsoft Technical Audience Contributor

    Twitter: @andrebaltieri
    Blog: http://andrebaltieri.net
    Site: http://sismat.com.br

    quinta-feira, 11 de outubro de 2012 11:43
  • Segui os exemplos do site, mas mesmo assim não consegui, será se pode ser os styles e scripts que posso estar colocando errado, vc não teria uma demo feita por vc? 

    Nos exemplos do site ele está referenciando esse script: mas nos fontes não tem

    <script src="source/kendo.all.js"></script>
    • Editado Thiago_Porto quinta-feira, 11 de outubro de 2012 13:14 Adicionar informação
    quinta-feira, 11 de outubro de 2012 13:13
  • No Html eu consegui fazer, mas no Razor engine como me falta experiência eu to apanhando.

    André, veja se consegue me ajudar, por favor. veja o código da minha view index abaixo:

    @model IEnumerable<MVCMusicStore.Models.Jogo>
    @{
        ViewBag.Title = "JOGOS HD";
    }
    
    
    
         <div id="listView"></div>
    
        <div id="pager" class="k-pager-wrap">
        </div>
        <script type="text/x-kendo-tmpl" id="template">
            <div class="product">
                <img src="../../content/web/foods/${ProductID}.jpg" alt="${ProductName} image" />
                <h3>${ProductName}</h3>
                <dl>
                    <dt>Preco:</dt>
                    <dd>${kendo.toString(UnitPrice, "c")}</dd>
                </dl>
            </div>
        </script>
        @section CustomHeader{
            <script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
            <script src="../../Scripts/kendo.all.min.js" type="text/javascript"></script>
            <script src="../../Scripts/kendo.listview.js" type="text/javascript"></script>
    
        <script>
    
           /* $(document).ready(function () {
    
                alert("adf " + $("#listView").text());
    
                $("#listView").text('adfsadf');
            });*/
    
            $(document).ready(function () {
                var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
    
                            url: "http://demos.kendoui.com/service/Products",
                            dataType: "jsonp"
    
                        }
                    },
                    pageSize: 9
                });
    
    
    
                $("#listView").kendoListView({
                    dataSource: dataSource,
                    template: "<li>${ProductName} ${UnitPrice}</li>"
                });
            });
        </script>
        }
         
      
    
    <h2>
            Index</h2>
        
        
         <ul id="listView"></ul>
    

    Da o seguinte erro ao rodar [11:11:25.337] TypeError: $("#listView").kendoListView is not a function @ http://localhost:50459/JogosHd/:46

    no entanto eu copiei o html gerado nesta página que deu erro, criei um arquivo html com isto, e colei na pasta da mesma estrutura, eu rodei o html e funcionou, então eu acho que me falta conhecimento melhor no razor.. sei la, poderia me ajudar?

    obrigado

    quinta-feira, 11 de outubro de 2012 14:22
  • <div id="grid"></div>
                <script>
                    $(document).ready(function() {
                        $("#grid").kendoGrid({
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                                },
                                schema: {
                                    model: {
                                        fields: {
                                            OrderID: { type: "number" },
                                            Freight: { type: "number" },
                                            ShipName: { type: "string" },
                                            OrderDate: { type: "date" },
                                            ShipCity: { type: "string" }
                                        }
                                    }
                                },
                                pageSize: 10,
                                serverPaging: true,
                                serverFiltering: true,
                                serverSorting: true
                            },
                            height: 250,
                            filterable: true,
                            sortable: true,
                            pageable: true,
                            columns: [{
                                    field:"OrderID",
                                    filterable: false
                                },
                                "Freight",
                                {
                                    field: "OrderDate",
                                    title: "Order Date",
                                    width: 100,
                                    format: "{0:MM/dd/yyyy}"
                                }, {
                                    field: "ShipName",
                                    title: "Ship Name",
                                    width: 200
                                }, {
                                    field: "ShipCity",
                                    title: "Ship City"
                                }
                            ]
                        });
                    });
                </script>

    No seu controller você vai criar um método que retorna um JSON

    public JsonResult....

    Depois altera o Read da grid:

    http://demos.kendoui.com/service/Northwind.svc/Orders

    Utiliza o @Url.Action para mapear o caminho do seu jsonresult

    Altera também o type de oData para Json

    Assim, tenha em mente o seguinte:

    - Vai escrever bastante JavaScript (A não ser que compre a suite completa, que tem os Helpers do MVC)
    - Vai precisar entender, fazer vários exemplos, começar do básico.

    Abraços,


    Se sua questão foi respondida, favor marcar.

    André Baltieri
    MTAC – Microsoft Technical Audience Contributor

    Twitter: @andrebaltieri
    Blog: http://andrebaltieri.net
    Site: http://sismat.com.br

    quinta-feira, 11 de outubro de 2012 16:05
  • <div id="grid"></div>
                <script>
                    $(document).ready(function() {
                        $("#grid").kendoGrid({
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                                },
                                schema: {
                                    model: {
                                        fields: {
                                            OrderID: { type: "number" },
                                            Freight: { type: "number" },
                                            ShipName: { type: "string" },
                                            OrderDate: { type: "date" },
                                            ShipCity: { type: "string" }
                                        }
                                    }
                                },
                                pageSize: 10,
                                serverPaging: true,
                                serverFiltering: true,
                                serverSorting: true
                            },
                            height: 250,
                            filterable: true,
                            sortable: true,
                            pageable: true,
                            columns: [{
                                    field:"OrderID",
                                    filterable: false
                                },
                                "Freight",
                                {
                                    field: "OrderDate",
                                    title: "Order Date",
                                    width: 100,
                                    format: "{0:MM/dd/yyyy}"
                                }, {
                                    field: "ShipName",
                                    title: "Ship Name",
                                    width: 200
                                }, {
                                    field: "ShipCity",
                                    title: "Ship City"
                                }
                            ]
                        });
                    });
                </script>

    No seu controller você vai criar um método que retorna um JSON

    public JsonResult....

    Depois altera o Read da grid:

    http://demos.kendoui.com/service/Northwind.svc/Orders

    Utiliza o @Url.Action para mapear o caminho do seu jsonresult

    Altera também o type de oData para Json

    Assim, tenha em mente o seguinte:

    - Vai escrever bastante JavaScript (A não ser que compre a suite completa, que tem os Helpers do MVC)
    - Vai precisar entender, fazer vários exemplos, começar do básico.

    Abraços,


    Se sua questão foi respondida, favor marcar.

    André Baltieri
    MTAC – Microsoft Technical Audience Contributor

    Twitter: @andrebaltieri
    Blog: http://andrebaltieri.net
    Site: http://sismat.com.br

    André,

    obrigado mas eu peguei este seu código e sobrescrevi na minha engine razor e deu erro ao rodar: Erro em tempo de execução do Microsoft JScript: O objeto não oferece suporte à propriedade ou método 'kendoGrid'

    Veja  o source da pagina:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>JOGOS HD - My ASP.NET MVC Application</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
        <script src="../../Scripts/kendo.all.min.js" type="text/javascript"></script>
        <script src="../../Scripts/kendo.web.min.js" type="text/javascript"></script>
        <script src="../../Scripts/kendo.grid.min.js" type="text/javascript"></script>
        <meta name="viewport" content="width=device-width" />
        <link href="/Content/site.css" rel="stylesheet"/>
    
        <script src="/Scripts/modernizr-2.5.3.js"></script>
    
        
        
        
    </head>
    <body>
        <!-- <p class="site-title"><a href="/">your logo here</a></p>-->
        <div id="body">
            <section class="content-wrapper main-content clear-fix">
                    <div id="header">
                        <h1>
                            ASP.NET MVC STORE </h1>
                            <ul id="navlist">
                                <li class="first"><a href="/" id="current">Home</a></li>
                                <li><a href="/Store/">Store</a></li>
                                <li><a href="/JogosHd/">Jogos HD</a></li>
                            </ul>
                            
                       
                    </div>
                    
                    
                    
        <div id="grid"></div>
                <script>
                    $(document).ready(function () {
                        $("#grid").kendoGrid({
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                                },
                                schema: {
                                    model: {
                                        fields: {
                                            OrderID: { type: "number" },
                                            Freight: { type: "number" },
                                            ShipName: { type: "string" },
                                            OrderDate: { type: "date" },
                                            ShipCity: { type: "string" }
                                        }
                                    }
                                },
                                pageSize: 10,
                                serverPaging: true,
                                serverFiltering: true,
                                serverSorting: true
                            },
                            height: 250,
                            filterable: true,
                            sortable: true,
                            pageable: true,
                            columns: [{
                                field: "OrderID",
                                filterable: false
                            },
                                "Freight",
                                {
                                    field: "OrderDate",
                                    title: "Order Date",
                                    width: 100,
                                    format: "{0:MM/dd/yyyy}"
                                }, {
                                    field: "ShipName",
                                    title: "Ship Name",
                                    width: 200
                                }, {
                                    field: "ShipCity",
                                    title: "Ship City"
                                }
                            ]
                        });
                    });
                </script>
    
    
    
    
                    
                </section>
        </div>
        <footer>
                <div class="content-wrapper">
                    <div class="float-left">
                        <p>&copy; 2012 - My ASP.NET MVC Application</p>
                    </div>
                </div>
            </footer>
        <script src="/Scripts/jquery-1.7.1.js"></script>
    
        
    </body>
    </html>

    sabe o q pode estar errado?

    obrigado mais uma  vez!

    quinta-feira, 11 de outubro de 2012 16:35
  • Só sobrescrever não vai dar certo,

    Tenta entender o que você tá fazendo!


    Se sua questão foi respondida, favor marcar.

    André Baltieri
    MTAC – Microsoft Technical Audience Contributor

    Twitter: @andrebaltieri
    Blog: http://andrebaltieri.net
    Site: http://sismat.com.br

    quinta-feira, 11 de outubro de 2012 16:47
  • Andre, obrigado mas assim, eu estou indo agora para o mais simples, não estou entendendo, porque não funciona no razor???f

    veja bem, fiz um html com o mais simples e que funciona o kendo.

    veja o codigo html que funciona

    <!DOCTYPE html>
    <html>
    <head>
        <link href="../../App_Themes/styles/kendo.default.min.css" rel="Stylesheet" type="text/css" />
        <script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
        <script src="../../Scripts/kendo.web.min.js" type="text/javascript"></script>
        <script src="../../Scripts/kendo.autocomplete.min.js" type="text/javascript"></script>
        <title></title>
        <script>
    
            var countries = ["Australia", "Canada", "United States of America"];
    
            var couns = new kendo.data.DataSource({
                data: countries
            });
    
            $(function () {
                $("#contriesAutoComplete").kendoAutoComplete({ dataSource: couns });
            });
        </script>
    </head>
    <body>
        <p>
            <input id="contriesAutoComplete" class="k-input" />
        </p>
    </body>
    </html>

    E no meu projeto mvc a mesma coisa não funciona, dando o erro "Erro em tempo de execução do Microsoft JScript: O objeto não oferece suporte à propriedade ou método 'kendoAutoComplete" ....

    isto q eu não entendo.

    meu arquivo _Layout.cshtml

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="@Url.Content("~/favicon.ico")" rel="shortcut icon" type="image/x-icon" />
        <link href="@Url.Content("../../App_Themes/styles/kendo.default.min.css")" rel="Stylesheet" type="text/css" />
        <script src="@Url.Content("../../Scripts/jquery.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("../../Scripts/kendo.web.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("../../Scripts/kendo.autocomplete.min.js")" ></script>
        
        <meta name="viewport" content="width=device-width" />
        
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        
        
        
    </head>
    <body>
        <!-- <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>-->
        <div id="body">
            <section class="content-wrapper main-content clear-fix">
                    <div id="header">
                        <h1>
                            ASP.NET MVC STORE </h1>
                            <ul id="navlist">
                                <li class="first"><a href="/" id="current">Home</a></li>
                                <li><a href="/Store/">Store</a></li>
                                <li><a href="/JogosHd/">Jogos HD</a></li>
                            </ul>
                            
                       
                    </div>
                    
                    @RenderSection("featured", required: false)
                    @RenderBody()
                    
                </section>
        </div>
        <footer>
                <div class="content-wrapper">
                    <div class="float-left">
                        <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                    </div>
                </div>
            </footer>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
    </html>

    Meu arquivo index.cshtml

    @model IEnumerable<MVCMusicStore.Models.Jogo>
    @{
        ViewBag.Title = "JOGOS HD";
    }
        
        
    <script>
        var countries = ["Australia", "Canada", "United States of America"];
    
        var couns = new kendo.data.DataSource({
            data: countries
        });
    
        $(function () {
            $("#contriesAutoComplete").kendoAutoComplete({ dataSource: couns });
        });
    </script>
        
    <p>
            <input id="contriesAutoComplete" class="k-input" />
        </p>

    abraços e obrigado.


    • Editado Edilson quinta-feira, 11 de outubro de 2012 17:30 esqueci de colocar o erro
    quinta-feira, 11 de outubro de 2012 17:29
  • Cara eu consegui,

    tive que fazer tudo dentro da

    @section scripts{

    }

    isto q eu não sabia, sou novato em ASP.NET MVC

    obrigado e abraços


    • Editado Edilson domingo, 14 de outubro de 2012 12:37 ASP.NET MVC
    quinta-feira, 11 de outubro de 2012 20:59
  • eu consegui usando o mesmo exemplo do site, mas quando fui fazer retornando de Action não deu certo.

    public class Pessoa 
            { 
                public string Nome { get; set; }
            }
    
            public JsonResult Index()
            {
                var model1 = new Pessoa { Nome = "Thiago" };
                var model2 = new Pessoa { Nome = "Thiago" };
                var model3 = new Pessoa { Nome = "Thiago" };
                var model4 = new Pessoa { Nome = "Thiago" };
    
                var banco = new List<Pessoa>();
                banco.Add(model1);
                banco.Add(model2);
                banco.Add(model3);
                banco.Add(model4);
                return Json(banco.ToList(),JsonRequestBehavior.AllowGet);
            }

    Html:

    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <div id="grid" style="height: 380px"></div>
    
    @section Scripts{
    
        <script>
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type:"json",
                        data: '@Url.Action("Index")',
                        pageSize: 10
                    },
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true
                    },
                    columns: [{
                        field: "Nome",
                        width: 90,
                        title: "First Name"
                    }
                    ]
                });
            });
                </script>        
       
        <link href="~/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="~/Kendo/styles/kendo.black.min.css" rel="stylesheet" />
        <script src="~/Kendo/js/jquery.min.js"></script>
        <script src="~/Kendo/js/kendo.all.min.js"></script>
        <script src="~/Kendo/js/cultures/kendo.culture.pt.min.js"></script>
        <script src="~/Kendo/js/cultures/kendo.culture.pt-BR.min.js"></script>
    }

    sexta-feira, 12 de outubro de 2012 15:33
  • Particularmente acho esses "componentes" de grids complicados demais principalmente para manutenção e personalização. Muito mais simples montar diretamente o html de forma clara e aberta, atendendo 100% bem cada caso, seja lá o que for pedirem saberá que poderá fazer e não se sentirá engessado por nada, não deixando virar sistema estilo desktop ou com personalizações injetáveis. Só a paginação fica legal criar um Helper.
    domingo, 14 de outubro de 2012 02:06
  • Com volume grande de dados sua table não iria funcionar, pois ele vai gerando o HTML dentro do FOR, vai ficar muito lento. Outra coisa, paginação, ordenação, busca, seria tudo feito manualmente, o que custaria muito tempo. Os componentes como KendoUi e jqgrid sao muito interessantes, mas nao pode ter preguiça de estudar JavaScript. Alias quem quiser ser web Developer hoje tem que saber JavaScript. Abraços,

    Se sua questão foi respondida, favor marcar.

    André Baltieri
    MTAC – Microsoft Technical Audience Contributor

    Twitter: @andrebaltieri
    Blog: http://andrebaltieri.net
    Site: http://sismat.com.br

    domingo, 14 de outubro de 2012 02:11
  • eu consegui usando o mesmo exemplo do site, mas quando fui fazer retornando de Action não deu certo.

    public class Pessoa 
            { 
                public string Nome { get; set; }
            }
    
            public JsonResult Index()
            {
                var model1 = new Pessoa { Nome = "Thiago" };
                var model2 = new Pessoa { Nome = "Thiago" };
                var model3 = new Pessoa { Nome = "Thiago" };
                var model4 = new Pessoa { Nome = "Thiago" };
    
                var banco = new List<Pessoa>();
                banco.Add(model1);
                banco.Add(model2);
                banco.Add(model3);
                banco.Add(model4);
                return Json(banco.ToList(),JsonRequestBehavior.AllowGet);
            }

    Html:

    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <div id="grid" style="height: 380px"></div>
    
    @section Scripts{
    
        <script>
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type:"json",
                        data: '@Url.Action("Index")',
                        pageSize: 10
                    },
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true
                    },
                    columns: [{
                        field: "Nome",
                        width: 90,
                        title: "First Name"
                    }
                    ]
                });
            });
                </script>        
       
        <link href="~/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="~/Kendo/styles/kendo.black.min.css" rel="stylesheet" />
        <script src="~/Kendo/js/jquery.min.js"></script>
        <script src="~/Kendo/js/kendo.all.min.js"></script>
        <script src="~/Kendo/js/cultures/kendo.culture.pt.min.js"></script>
        <script src="~/Kendo/js/cultures/kendo.culture.pt-BR.min.js"></script>
    }

    Thiago,

    vc conseguiu montar algum estilo estático?

    O meu eu fiz parecido com o seu e deu certo...veja o codigo

    @{
        ViewBag.Title = "JOGOS HD";
    }
    
    <p>
        Grid
        <div id="gridEmpregados">
        </div>
        <div id="gridJogos">
        </div>
    
    
    </p>
    @section scripts{
        <script src="../../Scripts/jquery-1.7.2.min.js"></script>
        <script src="../../Scripts/kendo/2012.2.710/kendo.web.min.js"></script>
    
    
    
    <script>
            $(function () {
    
       
               $("#gridJogos").kendoGrid({
                    groupable: true,
                    scrollable: true,
                    sortable: true,
                    pageable: true,
                    pages: 5,
                    dataSource: {
                        transport: {
                            read: {
                                url: "/JogosHD/PegaJogos",
                                dataType: "json"
                            }
                        }
                    ,
                        pageSize: 5
    
    
                    }
    
                });          
    
    
       });
        </script>
    }
    </div>
      public JsonResult PegaJogos()
            {
    
                List<Jogo> lstJogos = new List<Jogo>();
    
                for (int i = 1; i <= 51; i++)
                {
                    Jogo jogo = new Jogo { Nome = "Jogo Hd " + i, UrlImagem = "../Images/Jellyfish.jpg", UrlParceiro = "http://edilsonaugusto.wordpress.com.br", Preco = (2134 * i) };
    
                    lstJogos.Add(jogo);
    
                }
    
    
                return Json(lstJogos, JsonRequestBehavior.AllowGet);
    
    
            }


    domingo, 14 de outubro de 2012 12:43
  • Opá, bacana esses ai mas eu ainda acho os recursos do http://datatables.net/ o melhor e ainda mais simples de ser usado, é só você criar uma tabela e, adicionar ao javascript :
    $(document).ready(function(){
        $('#example').dataTable();
    });

    Flavio Henrique

    segunda-feira, 15 de outubro de 2012 12:13
  • Ahh mas eu acho Flavio que um listview igual ao Kendo fazer com tableless da mais trabalho...

    com o estilo deles é praticamente pronto!!! desde que saiba usar o jscript...

    segunda-feira, 15 de outubro de 2012 12:38
  • Não conhecia esse Kendo. Me diga André, ele é melhor que o DataTable?

    Júnior Pacheco

    segunda-feira, 15 de outubro de 2012 12:40
  • Galera, só um ponto com o kendoui que eu gostaria de saber, como é q faz para os textos em ingles das paginações por exemplo do listview fiquem em pt-br, pois está assim:

    1 of 10, deveria ser 1 de 10 por exemplo...

    alguém saberia como?

    quarta-feira, 7 de novembro de 2012 18:38