Questions on UI for ASP.NET MVC Forum

3 answers

235 views

Paging/Scrolling not working as expected with AJAX binding

I have a hierarchal grid that's mostly doing what I want, however, paging and scrolling are not working as expected. I'm using AJAX binding. It doesn't seem to matter what I set pageSize to in the DataSource section; the presentation doesn't change much, only the number of page buttons for example. In my current scenario I have 12 rows in the 2nd level grid, and a pageSize of 6. Scrolling is turned on. The grid allows me to scroll through all 12 rows, but what I expected was that I could use the page buttons to advance. I tried turning scrolling off and it kept right on scrolling the entries. This is very curious, and not at all what I expected. The following shows my grid markup (RAZOR format):

@(Html.Kendo().Grid(Model)

.Name("BatchGrid")

.Pageable()

.Sortable()

.Scrollable()

.HtmlAttributes(new { style = "height:525px; width:1200px" })

.Columns(columns =>

{

columns.Bound(b => b.BatchID)

.Width("300px")

.Title("Batch ID")

.Visible(false);

columns.Bound(b => b.ShortBatchID)

.Width("100px")

.Title("Batch ID");

columns.Bound(b => b.HasErrorTransaction)

.Width("50px")

.Title("Err").Visible(false);

columns.Command(c => c.Custom("Post Batch")

.Click("onClickPostBatch")

.HtmlAttributes(new { style = "width:100px;" }));

columns.Bound(b => b.Created_Emp_Name)

.Width("200px")

.Title("Created Employee");

columns.Bound(b => b.Transmitted_DateTime)

.Width("175px")

.Format("{0:MM/dd/yyyy hh:mm tt}")

.Title("Transmitted");

columns.Bound(b => b.Completed_DateTime)

.Width("175px")

.Format("{0:MM/dd/yyyy hh:mm tt}")

.Title("Completed");

columns.Command(c => c.Custom("Delete Batch")

.Click("onClickDeleteBatch")

.HtmlAttributes(new { style = "width:100px;" }));

}

)

.DataSource(dataSource => dataSource

.Ajax()

.Sort(sort => sort.Add("HasErrorTransaction").Ascending()) // <-- initial sort

.PageSize(12)

.Read(read => read.Action("FetchBatchCollection", "Home").Data("addlData"))

.ServerOperation(false)

)

.Events(events => events.DataBound("onBatchGridDataBound")

.DetailExpand("onBatchGridExpand"))

.ClientDetailTemplateId("transactions")

)

<!-- Nested grid for transaction object, member of BatchHeader.TranCollection

There can be many ITransaction objects per BatchHeader -->

<script id="transactions" type="text/kendo-tmpl">

@(Html.Kendo().Grid<ROAMTranReview.ROAMHostSvc.TransactionBase>()

.Name("TranGrid_#=BatchID#") // makes the sub-grid name unique so that it will be displayed on each child row.

.HtmlAttributes(new { style = "height:535px; width:1400px" })

.Columns(columns =>

{

columns.Bound(b => b.BatchID)

.Visible(false);

columns.Bound(b => b.TransactionType)

.Visible(false);

columns.Bound(b => b.ID)

.Width("300px")

.Title("Transaction ID")

.Visible(false);

columns.Bound(b => b.ShortTranID)

.Width("100px")

.Title("Tran ID");

columns.Command(c => c.Custom("View Transaction")

.Click("onClickViewTransaction")

.HtmlAttributes(new { style = "width:100px;" }));

columns.Bound(b => b.TranTypeDisplayText)

.Width("100px")

.Title("Type");

columns.Bound(b => b.ItemID)

.Width("100px")

.Title("Item ID");

columns.Bound(b => b.ItemDescription)

.Width("300px")

.Title("Item Description");

columns.Bound(b => b.Quantity)

.Width("50px")

.Title("Qty");

columns.Bound(b => b.WorkOrderTask)

.Width("100px")

.Title("Workorder");

columns.Bound(b => b.EmployeeName)

.Width("200px")

.Title("Employee");

columns.Command(c => c.Custom("Delete Transaction")

.Click("onClickDeleteTransaction")

.HtmlAttributes(new { style = "width:155px;" }));

columns.Bound(b => b.PostingFlagDisplayText)

.Width("150px")

.Title("Posting Flag");

})

.Scrollable()

.Pageable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(6)

.Read(read => read.Action("FetchTransactionCollection", "Home", new { batchID = "#=BatchID#" }))

)

.Events(events => events.DataBound("onTranGridDataBound")

.DetailExpand("onTranGridExpand"))

.ToClientTemplate()

)

</script>

Grid

answered on 22 Aug 2014

22 answers

1.1K+ views

[Solved] Solution Upgrade no longer detects selected project

I recently updated all my Telerik controls (using the control panel) and now projects that were previously created with the Kendo UI Visual Studio extension will not permit me to upgrade. The error I get is "No Projects Selected" and then instructions to go back and select at least one project. The Kendo upgrade item in the right click menu does not show up at all, so this errors is coming from running the command from the Telerik tool bar. All of the extensions are updated to most current via the control panel and via a check for extension updates in Visual Studio. Creating a new C# Kendo UI MVC Application works fine and the project is manageable by the extension

Installer and VS Extensions

answered on 22 Aug 2014

2 answers

107 views

[Solved] Possible bug with Online Basic Usage Scheduler

http://demos.telerik.com/aspnet-mvc/scheduler/index

Select Month
Double click "HR seminar preparation" on Wednesday June 5th.
Repeat = Daily
End = On 6/12/2013

Delete the current occurrence for "HR seminar preparation" on June 09
Edit the current occurrence for "HR seminar preparation" on June 10 End Date to 6/11/2013 12:00 PM (this meeting is a two day event now)
Edit the current occurrence for "HR seminar preparation" on June 11 End Date to 6/12/2013 12:00 PM (this meeting is a two day event now)
Edit the current occurrence for "HR seminar preparation" on June 10 Owner from Alex to Charlie

Note that the current occurrence for "HR seminar preparation" on June 10 disappears.
I switched to Week and Day view too and its not there either..

Scheduler

answered on 21 Aug 2014

3 answers

50 views

How to set weekStartDay for ScatterLine chart?

for ScatterLine chart, if the baseUnit is "weeks", how could I set the seekStartDay to Monday? I try
xAxis:{
baseUnit:"weeks",
min: new Date('2014-01-25'),
weekStartDay:1
},

But it did not work for ScatterLine chart. The start day is always Sunday.

Chart

answered on 21 Aug 2014

3 answers

361 views

Examples for vb.net

I was wondering whether Telerik intended to produce VB.net examples as they did with the AJAX ASP.NET tools?

Translating controller code is easy with the Telerik Code Translator, but the translator doesn't understand Razor markup and therefore translation can be a bit hit-or-miss and is time consuming.

It would be good to know if there is no intention to do this in the future.

Many thanks
Richard

General Discussions

answered on 21 Aug 2014

1 answer

135 views

Populating Gantt via Services

Having learnt that Gantt doesn't (yet) support passing models to views I am attempting to engineer a datasource/service driven Gantt chart.

View is:

<div class="gantt-wrapper">

@(Html.Kendo().Gantt(Of IMS_2.Models.Task, IMS_2.Models.Dependency)().Name("gantt") _

.Columns(Sub(columns)

columns.Bound(Function(c) c.ID).Title("ID").Width(50)

columns.Bound("title").Editable(True).Sortable(True)

columns.Bound("start").Title("Start Time").Format("{0:MM/dd/yyyy}").Width(100).Editable(True).Sortable(True)

columns.Bound("end").Title("End Time").Format("{0:MM/dd/yyyy}").Width(100).Editable(True).Sortable(True)

End Sub) _

.Views(sub(views)

views.DayView()

views.WeekView(Function(weekView) weekView.Selected(True))

views.MonthView()

End Sub) _

.DataSource(Function(d) d.Read(Function(read) read.Action("ReadTasks", "Gantt")).Model(Sub(m)

m.Id(Function(f) f.ID)

m.ParentId(Function(f) f.ParentID)

m.OrderId(Function(f) f.OrderID)

m.Field(Function(f) f.Expanded)

End Sub)))

</div>

The following is rendered but no gantt chart is displayed:

<div class="gantt-wrapper">

<div data-role="gantt" id="gantt"></div><script>

jQuery(function(){jQuery("#gantt").kendoGantt({"columns":[{"title":"ID","width":50,"sortable":true,"field":"ID"},{"title":"Project Name","editable":true,"sortable":true,"field":"title"},{"title":"Start Time","format":"{0:MM/dd/yyyy}","width":100,"editable":true,"sortable":true,"field":"start"},{"title":"End Time","format":"{0:MM/dd/yyyy}","width":100,"editable":true,"sortable":true,"field":"end"}],"views":[{"type":"day"},{"selected":true,"type":"week"},{"type":"month"}],"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Gantt/ReadTasks"},"prefix":""},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"ID","fields":{"ID":{"type":"number"},"title":{"from":"Title","type":"string"},"start":{"from":"Start","type":"date"},"end":{"from":"End","type":"date"},"parentId":{"from":"ParentID","type":"number"},"orderId":{"from":"OrderID","type":"number"},"percentComplete":{"from":"PercentComplete","type":"number"},"expanded":{"from":"Expanded","type":"boolean"},"summary":{"from":"Summary","type":"boolean"}}}}},"dependencies":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":""},"prefix":""},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"DependencyID":{"type":"number"},"PredecessorId":{"type":"number"},"SuccessorId":{"type":"number"},"Type":{"type":"number"}}}}}});});

</script>

</div>

The controller datasource service is not being called (no breakpoints are hit). Any help gratefully received!
Thanks

Gantt

answered on 21 Aug 2014

1 answer

218 views

MVC Fileupload with dropdown value

My scenario is simple. A user selects a course from the dropdown and uses the fileupload to select 1 or more files. The user hits submit and the file is saved in a file directory along with file data saved in the database.

My dropdown:

@Html.LabelFor(m => m.selectedCourseID)
@Html.DropDownListFor(m => m.selectedCourseID, Model._courses)

If I use just a regular <input id="FilePath" title="upload a image" type="file" name="file" />, everything saves correctly. But, I'd rather use the Kendo Upload. If I add this:

<div class="demo-section">
@(Html.Kendo().Upload()
.Name("Images")
)
</div>

I get the following runtime error:

The ViewData item that has the key 'selectedCourseID' is of type 'System.Int32' but must be of type 'IEnumerable<SelectListItem>'.

My viewmodel:

[Display(Name = "Select a course...")]
public int selectedCourseID { get; set; }

public IEnumerable<SelectListItem> _courses { get; set; }

Is this enough information or should I send you information? Thanks in advance.

Upload

answered on 21 Aug 2014

5 answers

205 views

Image Overlay with ondemand hierarchial data

Hello,

I have a treeview where the root nodes are loaded at first and evertime a node is clicked the children nodes are loaded. for each node the Image is also loaded dynamically. For some nodes we Show just one Image and for some nodes we load and Image which has to be overlapped with another Image with relative Position set to bottom right. Can we achieve this ? if i use treeviewmodel imageURL i can only provide one Image. Can i overlap 2 Images and Show them in treeview

Thanks

Anamika

TreeView

answered on 21 Aug 2014

7 answers

1.3K+ views

Grid Inline editing return key to auto update

I have a grid with incell editing, I need to be able to double-click the line to enter edit mode then have return key press save changes and exit edit mode. I have the edit working by clicking edit then update but return key press automatically cancels the change, I expected that to automatically save. Can anyone help, this seems like a simple request that someone else must have figured out a workaround.

Grid

answered on 21 Aug 2014

0 answers

85 views

Looking for experienced developer Scheduler

Hi,

I'm looking for an experienced developer able to master the Telerik Scheduler component (MVC).

Please contact me for all the information

Thank you
IndM1

Scheduler

asked on 20 Aug 2014