Questions on UI for ASP.NET MVC Forum

1 answer

101 views

Drag and Drop from Windows Explorer to Treview

Hi,

I see that Drag and Drop is enabled between Kendo components. Is it possible to drag files and folders from Windows Explorer on to the treeview, and have it register the drop event?

Thanks,
Havard

TreeView

answered on 20 Aug 2014

1 answer

736 views

How to get node Id when node is selected?

Hi,

I am new to Telerik components, and this is probably a question which is easy to answer ;

I have a treeview control on my page. All nodes in the tree have unique Ids. The treeview is not linked to a datasource; the nodes are static.

I need to catch a node selected event, and get the node Id. This is to be forwarded to other functions to enable functionality. It seems to me that I need to have a ActionLink on the nodes for the onSelect event to trigger. (?) I do not want to use the treeview for ActionLink style navigation, how can I catch onSelect events and simply get the Id of the node?

Thanks,
Havard

TreeView

answered on 20 Aug 2014

2 answers

427 views

Pass kendo upload file along with selected dropdownlist values at a time to mvc controller

Hi,

As per one of the project requirement, On button click event, I have to store uploaded file into azure blob & uploaded filename along with selected dropdown list values should be stored in table. Hence, I wanted to pass upload file along with selected dropdownlist values to mvc controller. But it is not working. Please help me.

Regards,
Harikrishna Pamu.

Upload

answered on 19 Aug 2014

1 answer

85 views

Issue with Gantt inside TabStrip item (MVC C#)

Hi,

When I insert Gantt element into TabStrip item, my left part (treelist) appears to be much less in height than the right one (timeline). I can more or less live with that by adjusting the height via JavaScript event handler of DataBound event.

However, when Gantt element is inserted into the TabStrip item, which is NOT the active one (so it does not appear immediately when the page navigated), then all diamond markers are squashed to the left margin of timeline and the height of both parts (timeline and treelist) get significantly reduced.

Please note, that there is no other element, except of Gantt, on that TabStrip item.

Could you please advise?

Gantt

answered on 19 Aug 2014

3 answers

1.3K+ views

How to show/hide elements based on model values

I want to show or hide a div in my CustomEditorTemplate based on a value in my model, but I can't figure out how to accomplish this. In my case, an event requires approval, so I want to show a button if the model's Approved property is false.

Scheduler

answered on 19 Aug 2014

1 answer

179 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

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

170 views

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

530 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

431 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