This is a migrated thread and some comments may be shown as answers.

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

5 Answers 52 Views
Grid
This is a migrated thread and some comments may be shown as answers.
DominionZA
Top achievements
Rank 1
DominionZA asked on 05 Sep 2013, 12:42 PM
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

5 Answers, 1 is accepted

Sort by
0
DominionZA
Top achievements
Rank 1
answered on 05 Sep 2013, 04:54 PM
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.
0
Accepted
Petur Subev
Telerik team
answered on 09 Sep 2013, 09:41 AM
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!
0
DominionZA
Top achievements
Rank 1
answered on 10 Sep 2013, 10:32 AM
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.
0
DominionZA
Top achievements
Rank 1
answered on 10 Sep 2013, 02:47 PM
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?
0
Petur Subev
Telerik team
answered on 11 Sep 2013, 02:52 PM
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!
Tags
Grid
Asked by
DominionZA
Top achievements
Rank 1
Answers by
DominionZA
Top achievements
Rank 1
Petur Subev
Telerik team
Share this question
or