Questions on UI for ASP.NET MVC Forum

13 answers

129 views

Grid will not render in Hierarchy (VB.net)

I am trying to render a grid hierarchy. Here is my code.

Parent Grid

@Code

Html.Kendo().Grid(Of BenchStatusIndicatorMVC.Target)() _

.Name("Grid") _

.ToolBar(Function(t)

t.Search()

End Function) _

.Columns(Sub(c)

c.Bound(Function(p) p.StandardId)

c.Bound(Function(p) p.PC)

c.Bound(Function(p) p.DateEntered)

c.Bound(Function(p) p.DateModified)

c.Bound(Function(p) p.Type)

End Sub) _

.Pageable(Sub(x)

x.PageSizes(True)

End Sub) _

.ClientDetailTemplateId("template") _

.Sortable() _

.Filterable() _

.DataSource(Function(d)

d.Ajax() _

.Read(Function(read) read.Action("Target_Read", "Target")) _

.ServerOperation(False) _

.Model(Sub(m)

m.Id(Function(i) i.StandardId)

End Sub)

End Function) _

.Render()

End Code

Grid

answered on 06 Nov 2020

7 answers

1.1K+ views

Chunked Upload

I'm trying to set up an upload for some quite large files, which involves using chunked asynchronous uploads.

Once the file has been transferred, a record is saved to a database, with details of the file name, and an ID passed back to the web page.

I was able to get this working when the upload wasn't using chunks, but I'm now a bit stuck.

The example in your documentation (https://docs.telerik.com/aspnet-mvc/html-helpers/editors/upload/chunk-upload ) seems to be written for .later versions of the >NET framework (or .NET core), as I cannot find namespaces to include IFormFile or JsonSerializer . I'm using .NET Framework 4.7.2

I have got a version working (the file is saved to the upload folder), however, when the upload is complete, it does not call the Save procedure., which saves a record to a database, renames the file, and passes back a fileID.

The code is:-

public ActionResult ChunkSave(IEnumerable<HttpPostedFileBase> files, string metaData)

{

if (metaData == null)

{

return Save(files);

}

MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(metaData));

var serializer = new DataContractJsonSerializer(typeof(ChunkMetaData));

ChunkMetaData chunkData = serializer.ReadObject(ms) as ChunkMetaData;

string path = String.Empty;

string uploadFolder = SystemsPortal.Properties.Settings.Default.GLInterfaceUploadFolder;

if (chunkData.chunkIndex == 0)

{

//1st chunk - check if file exists, and if so, delete before saving

path = Path.Combine(uploadFolder, chunkData.fileName);

if (System.IO.File.Exists(path))

{

System.IO.File.Delete(path);

}

path = String.Empty;

// The Name of the Upload component is "files"

if (files != null)

{

foreach (var file in files)

{

path = Path.Combine(uploadFolder, chunkData.fileName);

AppendToFile(path, file.InputStream);

}

Models.FileResult fileBlob = new Models.FileResult();

fileBlob.uploaded = chunkData.totalChunks - 1 <= chunkData.chunkIndex;

fileBlob.fileUid = chunkData.uploadUid;

return Json(fileBlob);

}

The control definition is:-

@(Html.Kendo().Upload()

.Name("files")

.Multiple(false)

.Events(e => e.Success("ulSuccess"))

.Async(a => a

.Save("ChunkSave", "GLInterfaceUpload")

.ChunkSize(250000)

.AutoUpload(true)

)

function ulSuccess(e) { var response = e.XMLHttpRequest.responseText; fileID = response; alert(fileID); e.sender.enable(false); $('#divButton').show(); }

The Success event does fire, but the data returned, but as the Save procedure has never been called, no fileID is passed back.

How can I get this working as it should?

Thanks

Upload

answered on 06 Nov 2020

1 answer

986 views

Expand/Collapse Column for Kendo Grid in MVC

Hello. I am trying to find a way to Expand/Collapse columns for a Kendo Grid in MVC. I see this implementation for js:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-expand-collapse-columns-group-button-click

But I would like to find the same functionality example for MVC please.

Grid

answered on 06 Nov 2020

3 answers

959 views

Kendo hierarchical grid MVC

.ClientTemplate() is not working inside the child grid. I'm also posting the example explaining the issue.

This is the Parent grid:

@(Html.Kendo().Grid(Model.DeliquencRulesGridVM)
.Name("deliquencRulesGridVM")
.Columns(columns =>
{
columns.Bound(c => c.Id).Hidden();

columns.Bound(c => c.RuleNumber)
.Title(@AonWrapStringResources.Deliquency_Label_RuleNumber)
.Width(200)
.HtmlAttributes(new { })
.Filterable(f => f.Extra(false)
.Messages(m => m.Info(@StringResources.Generic_GridFilter_Refine + " " + @AonWrapStringResources.Deliquency_Label_RuleNumber + ":")));

})
.ClientDetailTemplateId("deliquency-grid")
.Events(e => e
.DataBound("delinquency.gridDataBound")
)
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(10)
.Model(model =>
{
model.Id(p => p.Id);
})
.ServerOperation(false)

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

And this is the child grid in which .ClientTemplate() is not working.

Could you please help me on this. It would be much appreciated if you can help me on this.

General Discussions

answered on 05 Nov 2020

6 answers

690 views

Kendo bar chart not showing labels properly when scrolled along Y axis

I have created a bar chart which has data of about thousand objects. Objects have both positive and negative values. When the chart is initially rendered all the labels are displayed properly. If there are only positive or only negative values and even when I scroll along Y axis, then labels are clearly seen for all the bars. But if both positive and negative values are there in the chart and as I scroll along Y axis, labels start disappearing. I don't understand why such behaviour is seen. I am not using any custom function to render labels. Just

categoryAxis:

labels: {
rotation: 'auto',
position: 'start'
}

General Discussions

answered on 05 Nov 2020

9 answers

257 views

Upgraded to 2020 and now I cannot publish to Azure

Hi,

I upgraded to 2020 of the Telerik ASP.NET MVC UI and using the Grid control Export to Excel feature in my cloud application. During upgrade,Telerik required me to upgrade my System.Web.Mvc reference to a newer version, which I did. My web application is working fine on my local system, but now when I'm trying to publish the project to Azure I get the following error in my preview...

Could not load type 'System.Web.Mvc.ViewUserControl<DateTime?>'.

And I am not able to publish.

Any ideas on what is causing this and what I need to fix to publish my project to Azure?

Thanks,

Shawn

General Discussions

answered on 04 Nov 2020

3 answers

118 views

Events misalignment after Grouping WeekTimeLine

Hello,

I'm trying to make a WeekTimeLine without TimeHeader, only date and Employee.

So I did this in scheduler => View() =>

views.TimelineWeekView(weekView =>

{

weekView.Title("Woche");

weekView.WorkDayStart(8, 0, 0);

weekView.WorkDayEnd(18, 0, 0);

weekView.ColumnWidth(25);

weekView.DateHeaderTemplate("#= kendo.toString(date,'ddd/d')#");

weekView.MajorTimeHeaderTemplate("<p>-</p>");

weekView.Groups(g =>

{

g.Date(true);

g.Orientation(SchedulerGroupOrientation.Vertical);

});

weekView.MajorTick(600);

weekView.MinorTickCount(1);

});

If i show the WeekTimeLine_View Grouped with 9 Employees, then it works great, but starting from the 10th, the Event in the PNG starts to go outside the Lines of its Employee.

All the Events in the PNG end at 18:00, the first 4 start at 08:00 and the last small one starts at 17:00.

Any Idea what can cause this Problem ?

Thanks in advance

Ramadan

Scheduler

answered on 04 Nov 2020

5 answers

451 views

Using Custom Views

I'm using a scheduler in cshtml:

@(Html.Kendo().Scheduler<TaskViewModel>()

.Name("scheduler")

.Views(views => { views.CustomView("ThreeDayView"); })

.DataSource(d => d

.Read("Read", "Home")

.Create("Create", "Home")

.Destroy("Destroy", "Home")

.Update("Update", "Home")

)

In this scheduler I'm using a custom view defined below. This works fine in making the scheduler only show 3 days at a time. However the next day and previous day functionality doesn't work. I'm assuming I have to overwrite the previousday and nextday functionality, but am not sure how. What I expect to happen is for the view to advance 1 day at a time (i.e. April 16 - 18 moves to April 17 - 19).

Also I am wanting to add custom edit functionality. So when a task / event is clicked on, I want to do something other then opening the edit window (i.e set some variable) I think this is done with overwriting the editable function in the below jscript, but again am not sure how. Any help and/or examples are greatly appreciated

var ThreeDayView = kendo.ui.MultiDayView.extend({

options: {

selectedDateFormat: "{0:D} - {1:D}"

},

name: "ThreeDayView",

calculateDateRange: function () {

//create a range of dates to be shown within the view

var selectedDate = this.options.date,

start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),

idx, length,

dates = [];

for (idx = 0, length = 3; idx < length; idx++) {

dates.push(start);

start = kendo.date.nextDay(start);

}

this._render(dates);

}

});

Scheduler

answered on 04 Nov 2020

5 answers

1.6K+ views

Grid Sort by Group

Hello, this is my very first day with Kendo UI for ASP.NET MVC.

01.@(Html.Kendo().Grid<DataLibrary.ProjectCost>()

02. .Name("CostGrid")

03. .Columns(columns =>

04. {

05. columns.Bound(c => c.Month)

06. .Width(100)

07. .Title("Mois")

08. .Hidden();

09. columns.Bound(c => c.SupplierName)

10. .Width(300)

11. .Title("Fournisseur")

12. .HtmlAttributes(new { @style = "text-align:left;" })

13. .HeaderHtmlAttributes(new { @style = "text-align:left;" });;

14. columns.Bound(c => c.OrderAmount)

15. .Format("{0:C}")

16. .Width(100)

17. .Title("Commandé")

18. .HtmlAttributes(new { @style = "text-align:right;" })

19. .ClientGroupHeaderColumnTemplate("#= kendo.format('{0:C}',sum)#");

20. columns.Bound(c => c.InvoiceAmount)

21. .Format("{0:C}")

22. .Width(100)

23. .Title("Facturé")

24. .HtmlAttributes(new { @style = "text-align:right;" })

25. .ClientGroupHeaderColumnTemplate("#= kendo.format('{0:C}',sum)#");

26. })

27. .DataSource(dataSource => dataSource

28. .Ajax()

29. .Sort( s =>

30. {

31. s.Add("Month").Descending();

32. s.Add("SupplierName").Descending();

33. })

34. .Aggregates(aggregates =>

35. {

36. aggregates.Add(c => c.OrderAmount).Sum();

37. aggregates.Add(c => c.InvoiceAmount).Sum();

38. })

39. .Group(groups =>

40. {

41. groups.Add(c => c.Month);

42. })

43. .Read(read => read.Action("CostSummary", "Project", new { ID = Model.projectID }))

44. )

45. .Events(events => events.DataBound("collapseGroupRows"))

46.)

47....

48.

49.

50.<script type="text/javascript">

51. function collapseGroupRows() {

52. var grid = $("#CostGrid").data("kendoGrid");

53. grid.collapseGroup(grid.tbody.find(">tr.k-grouping-row"));

54. $('tr[class*="k-master-row"]').hide();

55. };

56.</script>

Here's my problem: the Sort does not work for the Month column on line 31 (it does work for the SupplierName column). I suspect this has to do with the fact that the Month is hidden or that is is grouped by.

Second issue: I can't figure out how to display the header of column SupplierName left-aligned (lines 12-13); the data is properly aligned but not the header text, is HeaderHtmlAttributes not working proplerly?.

Bonus: to collapse the grid (to the month's totals level) I use a small script: is this the proper way to do this? Is there not an easier built-in method?

Thanks!

Grid