Questions on UI for ASP.NET MVC Forum

1 answer

182 views

Kendo Grid Filter Icons Not Displaying In IE10

The column filter icon is not being displayed in IE10 for the columns that have to be scrolled to see. The columns that are visible when the page loads do have the filter icon, but the rest of the columns do not have it when you scroll with the mouse. However, when you scroll with the keyboard using the arrow keys, the filter icons are loaded, and it works fine in FireFox and Chrome.

<link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.blueopal.min.css" rel="stylesheet" />
<script src="~/Scripts/js/kendo.web.min.js"></script>
<script src="~/Scripts/js/kendo.aspnetmvc.min.js"></script>

@(Html.Kendo().Grid(Model)
        .Name("myGrid")
        .Columns(columns =>
        {
            columns.Bound...
        })
         .DataSource(d => d
            .Ajax()
            .ServerOperation(false)
            .Read(r => r.Action("Read", "Report").Data("dataForQuery")))
         .Groupable()
         .Filterable(f => f
            .Extra(false)
            .Operators(o => o.ForString(s => s.Clear()
                   .Contains("Contains")
                   .StartsWith("Starts with")
                   .IsEqualTo("Is equal to")
                 )
            )
        )
        .Pageable(pager => pager
            .PageSizes(new int[] { 10, 20, 50 })
        )
        .Events(ev => ev.DataBound("onDataBound"))
        .Sortable()
        .HtmlAttributes(new { style = "width: 90%;" })
        .Scrollable(s => s.Height("100%"))

    }
        )
        )

Grid

answered on 19 Aug 2014

1 answer

1.4K+ views

[Solved] Dynamic columns based on List in ViewModel

Dynamic columns seem to be incredibly tricky within the MVC Grid wrappers. I'm trying to build a grid where the columns represent a user-selectable range of years. As such, I have no knowledge of how many will be present at build time.

ViewModel:
<code>
public class Indicator
{
public Grid Grid { get; set; }
}

public class Grid
{
public List<string> Columns { get; set; }
public List<GridRow> Rows { get; set; }
}

public class GridRow
{
public string Label { get; set; }
public List<decimal> Values { get; set; }
public List<GridRow> ChildRows { get; set; }
}
</code>

Controller method:
<code>
public ActionResult Index()
{
Indicator i = new Indicator();
i.Grid = new Grid();
i.Grid.Columns = new List<string> { "2011", "2012", "2013", "2014", "2015" };
i.Grid.Rows = new List<GridRow>
{
new GridRow { Label = "First", Values = new List<decimal> { 5M, 2M, 1M, 8M, 10M } },
new GridRow { Label = "Second", Values = new List<decimal> { 2M, 2M, 4M, 8M, 9M } },
new GridRow { Label = "Third", Values = new List<decimal> { 12M, 8M, 1M, 9M, 3M } }
};
return View(i);
}
</code>

View:
<code>
@model MyProject.ViewModels.Indicator

@(Html.Kendo().Grid(Model.Grid.Rows)
.Name("testGrid")
.Columns(columns =>
{
columns.Bound(r => r.Label).Title("Type");
int i = -1;
foreach (var c in Model.Grid.Columns) {
++i;
columns.Bound(r => r.Values.ElementAt(i)).Title(c);
}
})
)
</code>

The problem is that r.Values.ElementAt(i) dies with: Bound columns require a field or property access expression. If I create a complex object in place of the list of decimals, I can then address a decimal field directly. However, this seems convoluted. Also, if I try to run .Format("{0}") at that point, 0 is the only element I can address and it points back to the first item in the List of complex objects, therefore printing that value across all columns.

I'm having a hard time wrapping my head around how to get a dynamic number of columns into the Grid in a usable fashion.

Grid

answered on 19 Aug 2014

1 answer

176 views

[Solved] Cascading window and parameter

Hello,

I am currently working on a View with multiple window.

In the main window, I have a grid of data.
In this screen I have a button used to add a new entry in my database.

Once pushed button, a window opens for first start creating the folder that will be in several stage but in the same view. The more steps are done through multiple windows in the same view.

So my problem is that I would pass the ID of the file created after the first window in the other window without reloading the page / view from each window opening.

Here's how I did for the moment :

<button class="k-button k-button-icontext pull-left" id="CreateFolder">@Resources.Add</button>

@(Html.Kendo().Grid<Data.Models.Folder>()

.Name("Table")

.Columns(columns =>

{

columns.Bound(c => c.ShopName);

columns.Bound(c => c.SaleDate).Format(Resources.FormatDate);

columns.Bound(c => c.folderStatusTitle);

columns.Bound(c => c.CustomerFullName);

})

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Groupable()

.Filterable()

.Reorderable(r => r.Columns(true))

.Sortable()

.ColumnMenu()

.Resizable(r => r.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.ServerOperation(true)

.Model(model => model.Id(p => p.FolderID))

.Read(read => read.Action("FolderList", "Folder"))

.Destroy("DeleteFolder", "Folder")

)

@{

Html.Kendo().Window().Name("Create")

.Title("createcustomer")

.Visible(false)

.Modal(true)

.Resizable()

.Draggable(true)

.Width(600)

.Content(() =>

{

@Html.RenderAction("Create");

})

.Render();

}

<script>

$("#CreateFolder").click(function (e) {

e.preventDefault();

var wnd = $("#Create").data("kendoWindow");

wnd.center().open();

});

</script>

This is the first step. With this I can open the first window without problem. And associate my customer to a new folder.
I associate my client through a grid, where I get the customer ID in javascript and returns it in my controller.

Here are the grid and controller :

@(Html.Kendo().Grid<Data.Models.CreateCustomer>()

.Name("TableCustomer")

.Columns(columns =>

{

columns.Bound(c => c.LastName).Title(Resources.HeaderGridCustomerLastname);

columns.Bound(c => c.FirstName).Title(Resources.HeaderGridCustomerFirstname);

columns.Bound(c => c.Address).Title(Resources.HeaderGridCustomerAddress);

})

.Events(events => events.Change("onChanges"))

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single))

.Filterable()

.Reorderable(r => r.Columns(true))

.Sortable()

.ColumnMenu()

.Resizable(r => r.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.ServerOperation(true)

.Model(model => model.Id(p => p.CustomerID))

.Read(read => read.Action("CustomerList", "Customer"))

.Events(events => events.Change("onDataChange"))

)

My controller :



[HttpPost]

public ActionResult CreateCustomer([DataSourceRequest]DataSourceRequest request, Folder folder)

{

using (LSContext db = new LSContext())

{

if (ModelState.IsValid)

{

var entity = new Customer

{

LastName = customer.LastName,

FirstName = customer.FirstName,

Address = customer.Address,

};

db.Customers.Add(entity);

//Insert the entity in the database

db.SaveChanges();

var folders = new Folder

{

CompanyID = Convert.ToInt32(UserCompanyID),

CustomerID = entity.CustomerID

};

db.Folders.Add(folders);

db.SaveChanges();

                          TempData["FolderID"] = folders.FolderID;

}

return Json(new[] { folder }.ToDataSourceResult(request, ModelState));

}

Then comes my problem.

We are still in the same view. Once I send the form used to close the first window open and my second this piece of javascript:

<script>

$(document).ready(function () {

$(function () {

var Isvalid = false;

$("form").kendoValidator({

validate: function (event) {

var validatation = event.valid;

//alert(event.valid);

Isvalid = true;

}

});

$('form').submit(function (e) {

var wnd = $("#Create-Customer").data("kendoWindow");

var wndCreate = $("#Create").data("kendoWindow");

e.preventDefault();

if (Isvalid == true) {

$.post(this.action, $(this).serialize(), function (response) {

if (response.error) {

alert(response.error);

}

else {

var wndFolder = $("#Address-Folder");

wndFolder.kendoWindow({

Name: "Address-Folder",

modal: true,

resizable:true,

width: "600px",

visible: false,

actions: ["Minimize", "Maximize"],

title: "@Resources.AddressFolder",

content: "Folder/AddressFolder/",

});

wnd.close();

wndCreate.close();

wndFolder.data("kendoWindow").refresh({

url: "Folder/AddressFolder/@TempData["FolderID"]",

});

wndFolder.data("kendoWindow").open();

wndFolder.data("kendoWindow").center();

}

}, 'json');

}

});

</script>

My idea is that once the saved folder, I would like to get its ID to open my second window with information about it. That's why I use TempData. But the window is set to the opening of the frame. I want it to be created and initialized after the form validation. But for now, despite the conditions javascript code, the window is initialized at the openning of the view.

I try to refresh the view, but nothing works for now.

Can you told me if this is possible ? Or how can I pass the ID on different Window.

Sorry for this long post and sorry for my english.

If it is not very clear or precise, I'm sorry and I wish I brought more accuracy

Best Regards,

Window

answered on 18 Aug 2014

1 answer

536 views

DateTimeOffset column filtering and sorting

Hi,

I am currently following the advice in this thread http://www.telerik.com/forums/using-datetimeoffset-in-column-filter in order to display datetimeoffset data in a grid. My questions are:

1) Are there plans to implement native support for the datetimeoffset type? It is a useful type for uniquely identifying a point in time above what datetime offers, so would be a useful type to support. The current solution seems a bit of a hack and native support would be much better.

2) Do I need to add any additional code to support columns sorting of datetimeoffsets as well as filtering? At present I am converting the datetimeoffsets to datetimes in my viewmodel to get around this issue.

My current code is as follows. The MapFilters function is as in the previous post. Should I be implementing a MapSorts function too? If so what would this look like?

Regards,

Michael

public ActionResult LogEntries_Read([DataSourceRequest] DataSourceRequest request)

{

try

{

using (var db = new SysLogContext())

{

// convert datetimeoffsets to datetimes in the filters and sorts since Kendo does not support datetimeoffset

if (request.Filters.Any())

{

request.Filters.MapFilters(descriptor =>

{

if (descriptor.Member == "Date")

{

descriptor.Value = new DateTimeOffset((DateTime) descriptor.Value);

}

});

Grid

answered on 18 Aug 2014

1 answer

439 views

Limiting number of items in a grid

Hi,

I have a dataset with millions of entries in it which I am displaying in the grid using the following code:

@(Html.Kendo().Grid<LogEntryViewModel>()

.Name("logsGrid")

.Columns(columns =>

{

columns.Bound(c => c.Id).Width(70);

columns.Bound(c => c.Date).Format("{0:dd/MM/yy H:mm:ss}").Width(140);

columns.Bound(c => c.IpAddress).Width(120);

columns.Bound(c => c.Message);

})

.Scrollable( )

.Sortable()

.Filterable()

.Pageable(pager => pager

.Input(true)

.Numeric(true)

.Info(true)

.Refresh(true))

.Resizable(resize => resize.Columns(true))

.HtmlAttributes(new {style = "height: 600px"})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(50)

.Read(read => read.Action("LogEntries_Read", "Home", new { maxResults = Model.MaxResults, }))

)

I would like to limit the amount of items returned (maxResults), say 1000 entries. I need this to work with server side filtering:

public ActionResult LogEntries_Read([DataSourceRequest] DataSourceRequest request, int maxResults)

{

try

{

using (var db = new SysLogContext())

{

IQueryable<LogEntry> logs = db.LogEntries.Take(maxResults);

try

{

var result = logs.ToDataSourceResult(request, logEntry => new LogEntryViewModel()

{

Id = logEntry.Id,

IpAddress = logEntry.IpAddress,

Date = logEntry.Date.DateTime,

Message = logEntry.Message,

});

return Json(result);

}

The problem with my code is that the .Take(maxResults) is performed before the filtering and sorting. This means that my grid does not display the correct results as expected, since the items are truncated before the filtering.

Is there a way of specifying a maximum number of returned entries in the ToDataSourceResult function? I need the filtering/sorting to be applied (server side) and then the returned results limited to <maxResults>, after the filtering and sorting is applied. I absolutely do not want millions of entries to be sent and then post-filtered, the filtering has to be done server side and then a limited number of results returned from the ToDataSourceResult function.

Thanks,

Michael

Grid

answered on 18 Aug 2014

4 answers

245 views

kendoUpload Checking file size

Hi,

I am trying to check the selected file sizes using IE8.

ie. Javascript as below:

$(document).ready(function () {
$("#attachments").kendoUpload({
select: onSelect
});
});

Then when trying to retrieve the size in an onSelect javascript event of the selected files, null is returned for the size of the file.
See attached jpg of IE8 javascript debugger.

Is there any workaround for this IE8 issue?

Thanks,

Matt

Upload

answered on 18 Aug 2014

1 answer

163 views

Binding to multiple series

I havet his Json

[{"NumberOfDays":"41","Month":"1","year":"2013"},{"NumberOfDays":"8","Month":"2","year":"2013"},{"NumberOfDays":"14","Month":"3","year":"2013"},{"NumberOfDays":"6","Month":"4","year":"2013"},{"NumberOfDays":"-10","Month":"5","year":"2013"},{"NumberOfDays":"15","Month":"6","year":"2013"},{"NumberOfDays":"6","Month":"7","year":"2013"},{"NumberOfDays":"9","Month":"8","year":"2013"},{"NumberOfDays":"17","Month":"9","year":"2013"},{"NumberOfDays":"19","Month":"10","year":"2013"},{"NumberOfDays":"6","Month":"11","year":"2013"},{"NumberOfDays":"16","Month":"12","year":"2013"},{"NumberOfDays":"0","Month":"3","year":"2014"},{"NumberOfDays":"6","Month":"4","year":"2014"},{"NumberOfDays":"10","Month":"5","year":"2014"},{"NumberOfDays":"9","Month":"6","year":"2014"},{"NumberOfDays":"0","Month":"7","year":"2014"},{"NumberOfDays":"0","Month":"1","year":"2014"},{"NumberOfDays":"0","Month":"2","year":"2014"},{"NumberOfDays":"0","Month":"8","year":"2014"},{"NumberOfDays":"0","Month":"9","year":"2014"},{"NumberOfDays":"0","Month":"10","year":"2014"},{"NumberOfDays":"0","Month":"11","year":"2014"},{"NumberOfDays":"0","Month":"12","year":"2014"}]

Then I create this chart

@(Html.Kendo().Chart<AceoHR.Models.simpleClass.simpleChartClass>()
.Name("chart")
.Title("Egenmeldingsdager")
.DataSource(ds => ds.Read(read =>
read.Action("GetStatsSickDaysByMonth", "SickDays"))
.Group(g => g.Add(v => v.year))
)
.Series(series =>
{
series.Line(value => value.NumberOfDays, category => category.Month).Name("#:group.month#").Labels(labels => labels.Visible(false).Color("Red")).Color("Blue");
//series.Area(model => model.NumberOfDays, ).CategoryField("Month");
})
.CategoryAxis(axis => axis
.Categories(model => model.NumberOfDays)
.Labels(labels => labels.Rotation(-90))
.Justify()
.Crosshair(c => c.Visible(true))
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Shared(true)
.Format("{0:N0}")
)
)

The problem is that I'm not able to make this look as it should, check out the attach screenshot. The x axis should show the 12 months, the values on the graphs should show the NumberOfDays

Any advice

Chart

answered on 15 Aug 2014

1 answer

202 views

Grid, after refresh template stops working

After i change datasource of my grid i cant use my editortemplate.

01.<%=

02. Html.Kendo().Grid<InvoerPortaal.Models.VW_GetAllergenen_Result>()

03. .Name("Allergenen")

04. .Columns(columns =>

05. {

06. columns.Bound(p => p.AllergeenNaam);

07.

columns.Bound(p => p.AllergeenType).EditorTemplateName("AllergeenTypeEditor").Title("AllergeenType").ClientTemplate("thisismyclienttemplate");

08. })

09. .Editable(editable => editable.Mode(GridEditMode.InCell))

10. .HtmlAttributes(new { style = "height:430px;" })

11. .Events(events => events.Change("AllergenenTypeEditor_Change"))

12. .DataSource(dataSource => dataSource

13. .Ajax()

14. .Batch(true)

15. .ServerOperation(true)

16. .Read(read => read.Action("Allergenen_Read", "Home", new { ArtikelID = 1}))

17. .Events(events => events.Error("errorHandler"))

18. .Model(model =>

19. {

20. model.Id(p => p.Allergeen_ID);

21. model.Field(p => p.AllergeenNaam).Editable(false);

22. model.Field(p => p.AllergeenType).DefaultValue(1);

23. })

24. .Update(update => update.Action("AllergeenType_Update", "Home"))

25. )

26.%>

When clicking other grid to get "artikelid" i change datasource.read and then refresh the datasource.

1.var grid = $("#Artikelen").data("kendoGrid").dataItem(this.select());

2.var allergenenGrid = jQuery("#Allergenen").data("kendoGrid");

3.allergenenGrid.dataSource.read({ ArtikelID: grid.HBC_ArtikelID });

4.allergenenGrid.refresh();

5.$('.content-wrapper').show();

When I then try to edit the "AllergeenType" with the editortemplate i get the following error:

In chrome: Uncaught TypeError: undefined has no properties
In firefox: can't convert undefined to object
In IE11: (translate from dutch to english) Can't find object template from not defined empty value.(something like that)

As trace error it comes here:

(function(data<br>/**/) {<br>var o,e=kendo.htmlEncode;with(data){o='thisismyclienttemplate';}return o;<br>})

where thisismyclienttemplate is the string i filled in my clienttemplate, but i dont really see whats wrong with that, my clienttemplate shows up as it supposed to, but when i click the cell i get that error and my editortemplate doesn't show up.

Hope anyone could help me out.

Grid

answered on 15 Aug 2014

2 answers

741 views

'Kendo.Mvc.UI.Fluent.EditorToolFactory' does not contain a definition for 'InsertFile' and no extension method 'InsertFile' accepting a first argument

I'm trying to implement the Kendo editor. It was working great until I tried to add in the file upload feature. I've stripped out all the kendo files and re added to make sure I had the latest version including the dll. This is my _Layout header...

<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="~/Content/HighRes.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
@Styles.Render("~/Content/kendo/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
</head>

I feel like this is just a boneheaded error. Any idea what i'm doing wrong....?

Editor

answered on 14 Aug 2014

3 answers

443 views

VB Syntax

I need to know what the grid syntax for an update looks like in VB.. the lack of vb documentation is shocking.

I tried this code, but the update callback never fires, but it doesn't complain about it either.

@Code
    Html.Kendo().Grid(Of FAQRecord)() _
        .Name("FAQGrid") _
        .Columns(Sub(c)
                         c.Bound(Function(faq) faq.FAQID)
                         c.Bound(Function(faq) faq.Question)
                         c.Bound(Function(faq) faq.Answer)
                         c.Command(Sub(e) e.Edit()).Width(160)
                 End Sub) _
        .Pageable() _
        .Sortable() _
        .Filterable() _
        .Editable(Function(edit) edit.Mode(GridEditMode.PopUp)) _
        .DataSource(Function(d)
                            d.Ajax() _
                                .Read(Function(read) read.Action("FAQ_Read", "Home")).Model(Sub(rs) rs.Id(Function(rf) rf.FAQID)) _
                                .Update(Function(update) update.Action("FAQ_Update", "Home"))
                    End Function) _
        .Render()
End Code

The controller signature looks like this:
Function FAQ_update(request As DataSourceRequest, data As FAQRecord) As ActionResult
'do stuff
Return Json(result.ToDataSourceResult(request, ModelState))
End Function

Grid

answered on 14 Aug 2014