Refresh and paging not working. Getting "do you want to save or download read.json"

6 posts, 1 answers
  1. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 05 Sep 2013 Link to this post

    Hi,

    I sent an email to support 2 days ago for this as I was told that emails are responded to within 24 hours. No reply. So trying on the forums now.

    I have a grid that has columns dynamically created. It populates just fine.

    When attempting to move to the next page or do a refresh, my browser asked me if I want to download or save read.json.

    In my other grids with static columns (predefined), it works fine. It is just in this grid where the columns are dynamically created.

    How do I fix this?

    My View
    @using Kendo.Mvc.UI
    @model System.Data.DataTable
     
    @{
        Layout = null;
    }
     
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>@ViewBag.Title</title>
            <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
            <meta name="viewport" content="width=device-width" />       
            <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
            <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet" type="text/css" />
            <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
            <link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.blueopal.min.css")" rel="stylesheet" type="text/css" />     
            <script src="@Url.Content("~/Scripts/kendo/2013.2.716/jquery.min.js")"></script>
            <script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.all.min.js")"></script>
            <script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.aspnetmvc.min.js")"></script>
            <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>            
        </head>
        <body style="height: 100%">
            <div id="body">
                @(Html.Kendo().Grid(Model)
                    .Name("Grid")
                    .Columns(columns =>
                    {
                        foreach (System.Data.DataColumn column in Model.Columns)
                        {
                            columns.Bound(column.ColumnName);
                        }
                    })
                     
                    .Pageable(pager => pager.Refresh(true))  
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model =>
                            {
                                foreach (System.Data.DataColumn column in Model.Columns)
                                {
                                    model.Field(column.ColumnName, column.DataType);
                                }               
                            })
                        .Read(read => read.Action("Read", "View", new { area = "DisplayPanel" }))
                    )
                )
            </div>       
        </body>
    </html>
    My Controller
    using System;
    using System.Web.Mvc;
    using Kendo.Mvc.Extensions;
    using Kendo.Mvc.UI;
    using Smartrail.Application;
    using Smartrail.Common;
    using Smartrail.Domain.Service.Contracts;
     
    namespace SmartrailWeb.Areas.DisplayPanel.Controllers
    {
        public class ViewController : Controller
        {
            public ActionResult Index()
            {
                using (var uow = ApplicationContext.ServiceLocator.GetInstance<IPresentationUnitOfWork>())
                {
                    var service = ApplicationContext.ServiceLocator.GetService<IDisplayPanelCreatorService>(uow);
     
                    return View(service.GetDataSet(new DateTime(1990, 1, 1), null));
                }           
            }
     
            [HttpGet]
            public ActionResult Read([DataSourceRequest] DataSourceRequest request)
            {                       
                using (var uow = ApplicationContext.ServiceLocator.GetInstance<IPresentationUnitOfWork>())
                {
                    var service = ApplicationContext.ServiceLocator.GetService<IDisplayPanelCreatorService>(uow);               
                    return Json(service.GetDataSet(new DateTime(1990, 1, 1), null).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
                }
            }       
        }   
    }
    Please would someone respond ASAP. I am falling behind with my deadlines and need to get this sorted out ASAP.

    TIA
  2. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 05 Sep 2013 Link to this post

    In addition to the above, I am trying to set cell colours based on other cell values.
    IE: Two of the columns may be Call and Actual. Then we have a Variance column which displays the difference between Actual and Call. I would like to color the cell red if a negative number and leave default if 0 or positive.

    Been googling for over an hour and finding all sorts of ways of doing it, but nothing related to a grid who's columns are created dynamically.

    Sample if possible please.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 09 Sep 2013 Link to this post

    Hello Michael,

    It is hard to tell what goes wrong just from the code. I assume that there is either a JavaScript in the console when you click the pager, or for some reason the Grid is trying to perform server paging by navigating to the URL instead of paging on the client. We will need a way to reproduce the case to investigate further.

    Regarding the second question - it is covered in this code library article:

    http://www.kendoui.com/code-library/mvc/grid/ajax-binding-custom-row-styles-based-on-the-data.aspx

    To troubleshoot both cases faster, please demonstrate the problem in the code library above (use some dummy static data) so we can run and observe it and advise you further.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 10 Sep 2013 Link to this post

    Thank you. Your post was very helpful.

    I have taken the code sample, modified it to do what I need and am sharing it for those that get stuck.

    The sample now creates the columns dynamically using a DataTable. It also auto refreshes the grid every 5 seconds.
  6. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 10 Sep 2013 Link to this post

    Using the above sample, you can set the row style based on a certain condition.

    I would like to know how to set the cell style based on a condition and not the entire row. Is this possible?

    This is the current code for setting the row style...
    function onDataBound(e) {
                    var grid = $("#Grid").data("kendoGrid");
                    var gridData = grid.dataSource.view();               
     
                    for (var rowIndex = 0; rowIndex < gridData.length; rowIndex++) {                   
                        //get the item uid
                        var currentUid = gridData[rowIndex].uid;
                        //if the record fits the custom condition
                         
                        if (gridData[rowIndex].Variance < 0) {
                            //find the row based on the uid and the custom class
                            var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                            $(currenRow).addClass("customClass");
                        }
                    }
                }

    What do I need to change to set the cell style please?
  7. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 11 Sep 2013 Link to this post

    Hello again,

    You can find the <td> element you need inside of the currentRow and style it instead.
    currentRow.find('td:eq(2)').addClass('foo')

    Or you can directly execute some conditional logic inside the client template to add some element (like an icon) within the cell.

    http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq#how-do-i-have-conditional-logic-in-a-column-client-template?


    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready