Questions on UI for ASP.NET MVC Forum

1 answer

148 views

So I'm pretty new to using this component, so I'm not very familiar with it yet.

Here's what I'm trying to do:

I have a scheduler that I'm pre-populating with a lot of tasks. I don't want the user to be able to add, delete, or update anything. However, on selecting or clicking (or double clicking, whatever works best) I want to be able to update some other value in the model that was passed into the view.

For example: When user clicks on a task at 12:00 PM I don't want to show any pop ups or anything, but I want to set Model.appontmentTime equal to the tasks start time (i.e. 12:00 PM).

Also, as a side issue, for some reason when I attach a task to an owner as listed in the resources, the task is not showing in the right color. Am I doing something wrong there?

So Far I have:

01.@(Html.Kendo().Scheduler<Humana.RetailSales.CGX.Site.TaskViewModel>()

02. .Name("timeSlots")

03. .Views(views => { views.WeekView(); })

04. .Height(300)

05. .Date(Model.appointmentCalendarRenderStartDate)

06. .Height(400)

07. .AllDaySlot(false)

08. .MajorTick((int)Model.timeSlotInterval.TotalMinutes)

09. .MinorTickCount(1)

10. .Min(Model.appointmentCalendarRenderStartDate)

11. .Max(Model.appointmentCalendarRenderFinishDate)

12. .Resources(resource =>

13. {

14. resource.Add(m=> m.OwnerID)

15. .Title("Owner")

16. .DataTextField("Text")

17. .DataValueField("Value")

18. .DataColorField("Color")

19. .BindTo(new[] {

20. new { Text = "Many", Value = 1, color = "#003300"},

21. new { Text = "Few", Value = 2, color = "#CC3300"}

22. });

23. })

24. .DataSource(d => d

25. .Model(m => {

26. m.Id(f => f.TaskID);

27. m.Field(f => f.Title).DefaultValue("No title");

28. m.Field(f => f.OwnerID).DefaultValue(1);

29. m.Field(f => f.Title).DefaultValue("No title");

30. m.RecurrenceId(f => f.RecurrenceID);

31. })

32.

33. )

Scheduler

answered on 17 Apr 2014

3 answers

341 views

Passing data to the controller on refresh

I am trying to pass data to the controller using MVC wrappers. But data not being send, controller is executing but data is not passed. am I doing things correctly?
Thanks

var chart = $("#SalesChart").data("kendoChart");

chart.refresh({

data: { "FromDate": $("#FromDate").data("kendoDatePicker").value(), "ToDate": $("#ToDate").data("kendoDatePicker").value() }

});

@code

Dim SalesChart As Kendo.Mvc.UI.Chart(Of BO.Models.Statistics.SalesTimeSpan) = _

Html.Kendo.Chart(Of BO.Models.Statistics.SalesTimeSpan).

Name("SalesChart").Title("Units sold").Series(Sub(series)

series.Line(Function(model) model.Value, categoryExpression:=Function(model) model.Period).

Aggregate(ChartSeriesAggregate.Avg)

End Sub).

CategoryAxis(Function(axis) axis.Date().BaseUnit(ChartAxisBaseUnit.Weeks)).

DataSource(Function(ds) ds.Read(Function(read) read.Action("getsalesbydate", "statistics", New With {.area = String.Empty})))

SalesChart.Render()

End Code

Chart

answered on 17 Apr 2014

2 answers

558 views

Datasource.Read("Action", "Controller").Data("AdditionalParams") is not working after Update to Kendo UI for ASP.NET MVC Q3 2013

This bug is fixed with the internal build: kendoui.aspnetmvc.internal.2013.3.1321.commercial !

Hi kendo support team,

i have updated my Kendo Version yesterday to the new "Kendo UI for ASP.NET MVC Q3 2013" Release.

Now my Scheduler works with additional parameters they will calculate on runtime.
The user click some btns and the Scheduler refresh the data by call JavaScript method read()

like this:

01.var initialMitarbeiterId =5;

02.var filterKategorieArray = new Array();

03.

04.function SchedulerAdditionalData() {

05. return { mitarbeiterId: initialMitarbeiterId, filterKategorien: filterKategorieArray.toString() };

06.}

07.

08.function SchedulerReadData() {

09. var scheduler = $("#ErfassungScheduler").data("kendoScheduler");

10. scheduler.dataSource.read();

11.}

the Scheduler code in razor Logik Looks like this:

01.@(Html.Kendo().Scheduler<Sachverhalt>()

02. .Name("ErfassungScheduler")

03. .Date(DateTime.Now)

04. .Views(views =>

05. {

06. views.DayView(oDayView => oDayView.DateHeaderTemplate("#=kendo.toString(date, 'ddd dd. MM.')#").Selected(false));

07. views.WeekView(oWeekView => oWeekView.DateHeaderTemplate("#=kendo.toString(date, 'ddd dd. MM.')#").Selected(false));

08. views.MonthView(oMonthView => oMonthView.Selected(true));

09. views.AgendaView(oAgendaView => oAgendaView.Selected(false));

10.

11. })

12. .Selectable(true)

13. .Timezone(timezoneString)

14. .DataSource(oDs => oDs.Model(m =>

15. {

16. m.Id(f => f.Id);

17. m.Field(f => f.IsAllDay);

18. m.Field(f => f.Title).DefaultValue("Neuer Termin");

19. m.Field(f => f.SachverhaltKategorieId);

20. m.Field(f => f.SachverhaltTypId);

21. })

22. .Read( r => r.Action("SchedulerRead", "Erfassung").Data("SchedulerAdditionalData"))

23. .Destroy("SchedulerDestroy", "Erfassung")

24. )

25. .Events(e => e.Edit("scheduler_edit").Add("scheduler_add").Navigate("scheduler_navigate"))

26. .Resources(resource =>

27. resource.Add(m => m.SachverhaltKategorieId)

28. .Title("Kategorie")

29. .DataTextField("Text")

30. .DataValueField("Value")

31. .DataColorField("Color")

32. .BindTo(colorResourceList)

33. )

34. .ShowWorkHours(true)

35. )

The Controller Methode

1.[HttpPost]

2.public JsonResult SchedulerRead([DataSourceRequest] DataSourceRequest oRequest, long mitarbeiterId, string filterKategorien)

3.{

4. var selectedMitarbeiterId = mitarbeiterId;

5. return Json(this.sachverhaltBL.LoadSachverhalte(selectedMitarbeiterId, filterKategorien).ToDataSourceResult(oRequest));

6.}

This line .Read( r => r.Action("SchedulerRead", "Erfassung").Data("SchedulerAdditionalData")) works fine with the previous Version. The JavaScript function "SchedulerAdditionalData" is called before post to Controller, but the Controller throws a http Status 500 because mitarbeiterId is null. In the previus Version it works correct, Did Kendo have Changed something in this Version. The release notes don't talk about this Problem.

If i change the JavaScript file "kendo.aspnetmvc.min.js" to the privious Version only, this Scenario works fine! I think there is a new bug in the js libraray.

Best regards

Gerd Kontze

Scheduler

answered on 17 Apr 2014

1 answer

441 views

Use a Kendo Grid in field template

Hi,

I'm trying to use a Kendo Grid inside a field template to handle the edit of a list of objects define as a property of another object using the UIHintAttribute.
The problem that I have is when you click the edit on the grid the values are not set to the editor controls they are all empty.

I have attached the relevant files from my test project and would appreciate any help.

Thanks,

Grid

answered on 17 Apr 2014

2 answers

181 views

Error when editing grid incell

Hello,

I created a grid using the example provided here, here and here.

When I click on any cell to edit it, the following error is triggered. Any help?

Uncaught TypeError: undefined is not a function kendo.all.min.js:9

O kendo.all.min.js:9

D kendo.all.min.js:9

e.extend.kendoFocusable kendo.all.min.js:10

Sizzle.selectors.filter.PSEUDO jquery-1.7.1.js:4605

Sizzle.filter jquery-1.7.1.js:4127

Sizzle jquery-1.7.1.js:3955

Sizzle jquery-1.7.1.js:5083

jQuery.fn.extend.find jquery-1.7.1.js:5339

u.extend.refresh kendo.all.min.js:20

u.extend.init kendo.all.min.js:20

(anonymous function) kendo.all.min.js:10

jQuery.extend.each jquery-1.7.1.js:658

jQuery.fn.jQuery.each jquery-1.7.1.js:271

e.fn.(anonymous function) kendo.all.min.js:10

j.extend.editCell kendo.all.min.js:22

(anonymous function) kendo.all.min.js:22

jQuery.event.dispatch jquery-1.7.1.js:3256

elemData.handle.eventHandle jquery-1.7.1.js:2875

The grid has the following code:

@(Html.Kendo().Grid<Kendo2.Models.Product>()

.Name("grid")

.Columns(c =>

{

c.Bound(b => b.Id).Hidden();

c.Bound(b => b.Name);

c.Bound(b => b.Company);

}

)

.Editable(e => e.Mode(GridEditMode.InCell))

.Sortable()

.Pageable(p => p

.Refresh(true)

.PageSizes(new int[] {2, 10})

.ButtonCount(5)

)

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(m => m.Id))

.Read(read => read.Action("List", "Home"))

)

Grid

answered on 17 Apr 2014

5 answers

671 views

Kendo grid columns should be like input fields in the ADD Mode

We are using Kendo UI grid to import data from one grid to another grid, For that purpose we need to input some data to the kendo grid in the ADD Mode, Unfortunately Kendo grid input only available in the edit mode,I'm using ClientTemplate to input the data,but that is not support exactly,because kendo feature overridden....Please give me a solution to input data...

@(Html.Kendo().Grid<Portal.Presentation.Web.BoundedContext.TNA.Template.MVC.Areas.Razor.Models.TaskPoupModel>()
.Name("importtaskgrid")
.AutoBind(true)
.HtmlAttributes(new {style = "border: 0;"})
.Columns(c =>
{
c.Bound(x => x.TaskId).Hidden();
c.ForeignKey(p => p.TaskGroupId, (System.Collections.IEnumerable) ViewData["TaskGroups"], "Key", "Value").Title("TASK GROUP").Sortable(true);
c.Bound(x => x.TaskName).Title("TASK NAME").Sortable(true);
c.Bound(x => x.LeadTime).Title("LEAD TIME").Sortable(false).
ClientTemplate("<input type='text' name='importtaskgrid[#= ImportPopupHandler.index(data)#].LeadTime' value='#= LeadTime #' validateFor='number'/>");

c.ForeignKey(p => p.UserId, (System.Collections.IEnumerable) ViewData["Users"], "Key", "Value").Title("TASK OWNER").Sortable(true);
c.Bound(x => x.IsImport).ClientTemplate("<input type='checkbox' #= IsImport ? checked='checked' : '' # ></input>").Title("PICK TO IMPORT").Width(100).Sortable(false);
})
.Sortable()
.Editable(x => x.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax().ServerOperation(true)
.Sort(sort => sort.Add(p => p.TaskName).Descending())
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.TaskId);
model.Field(p => p.TaskGroupId).Editable(false);
model.Field(p => p.TaskName).Editable(false);
model.Field(p => p.LeadTime).DefaultValue(0);
model.Field(p => p.UserId).DefaultValue(0);
})
.Read(read => read.Action("OnPopupTaskRead", "Tna").Data("ImportPopupHandler.getAdditionalData").Type(HttpVerbs.Get)
))
.Scrollable()
)

Grid

answered on 17 Apr 2014

2 answers

237 views

ClientTemplate Grid will not display data

@(Html.Kendo().Grid<McGladrey.DOTT.DataAccess.EngagementStatusDataItem>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.ClientName).Width("9%").Title("Client Name");

columns.Bound(c => c.ClientNumber).Width("7%");

columns.Bound(c => c.TaxYear).Width("7%");

columns.Bound(c => c.EngType).Width("7%").Title("Eng Type");

columns.Bound(c => c.MasterClient).Width("7%");

columns.Bound(c => c.Assembler).Width("7%");

columns.Bound(c => c.Status).Width("7%");

columns.Bound(c => c.Amended).Width("9%");

columns.Bound(c => c.ReturnTypes).Width("10%");

columns.Bound(c => c.EIMessage).Width(175).Title("Comments");

columns.Bound(c => c.ToDoUsers).Width("9%").Title("To Do");

columns.Bound(c => c.eUpdated).Width("10%").Title("Last Updated").ClientTemplate("#= eUpdated ? kendo.toString(kendo.parseDate(eUpdated), 'MM/dd/yyyy') : '' #");

columns.Bound(c => c.IsInEngagement).Width("10%");

})

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

.ClientDetailTemplateId("template")

.Scrollable()

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Events(events => events

.DataBound("dataBound")

.DetailExpand("expand"))

)

</div>

<script id="template" type="text/x-kendo-template">

@(Html.Kendo().Grid<McGladrey.DOTT.DataModel.WorkSiteDOTT.IManWorkspaceSerializeable>()

.Name("grid_#=eFolderID#")

.Columns(columns =>

{

columns.Bound(ws => ws.Name).Width(110);

columns.Bound(ws => ws.Owner).Width(110);

columns.Bound(ws => ws.CreationDate).ClientTemplate("\\#= CreationDate ? kendo.toString(kendo.parseDate(CreationDate), 'MM/dd/yyyy') : '' \\#");

columns.Bound(ws => ws.Description).Width(200);

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read

.Action("WorksiteRequest", "Admin", new { clientNumber = "#=ClientNumber#", taxYear = "#=TaxYear#", amended = "#=Amended#", engType = "#=EngType#" })

)

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

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

.ToClientTemplate()

)

</script>

<script type="text/javascript">

function dataBound() {

this.expandRow(this.tbody.find("tr.k-master-row").first());

}

function dataBinding()

{

alert("here");

}

function expand(e) {

alert("in expand");

}

$("#ok").bind("click", function (e) {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "/Admin/EngagmentRequest",

dataType: "json",

data: {

ClientNumber: $('[name=clientNumber]').val(),

ClientName: $('[name=clientName]').val(),

TaxYear: $('[name=taxYear]').val()

}

});

dataSource.pageSize(5);

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

grid.setDataSource(dataSource);

});

</script>

The issue with the above code is the Child Grid ("grid_#=eFolderID#") does not display any data.

The model is correct. This was proven by removing the columns and letting the grid determine them and all columns displayed correctly.
Data is coming back. This was proven via Fiddler. The following request returns data: /Admin/WorksiteRequest?clientNumber=4010574&taxYear=2013&amended=N&engType=Income%20Tax%20Compliance clientNumber=4010574&taxYear=2013&amended=N&engType=Income%20Tax%20Compliance
{"CreationDate":"\/Date(1382465699000)\/","Description":"...","FolderID":983371,"ID":"!nrtdms:0:!session:XXXXX:!database:XXX:!page:983371:","LastUser":"XXXX XXXX","Name":"XXXXXXXXX","Owner":"XXXXXX","Path":"XXXXXXXXX","WorkspaceID":XXXXXXX}

The above code will also hit any events I tag on to it. The child grid will hit DataBound and DataBinding events

Everything is there it just will not display the data.

Thoughts?

Thanks,
Martin

Grid

answered on 17 Apr 2014

1 answer

73 views

Is possible to have 14 days view

I would like to use it to schedule the staffs's shift for 14 days. Is this possible have 14 days as the day view in one page?

Scheduler

answered on 16 Apr 2014

2 answers

1.3K+ views

Increase the width of editor controls in grid popup

Hello,

I am using Kendo UI for ASP.NET MVC and I am very new to it. I am trying to increase the width of the editor controls in the grid popup editor. Even though I could increase the width of the popup window using

.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("CustomEdit").Window(w => w.Title("Edit").Name("customedit").Width(1000)))

the controls inside the window are not widened with it.

Can anyone please advise me how it can be done?

Thanks

Shameer

Grid

answered on 15 Apr 2014

5 answers

1.2K+ views

Client template (hyper link) on Foreign Key column

Hi,

I want to apply hyperlink on foreign key column.
I am having a products foreign key column in my grid. During add/edit popup mode user can select the product from dropdown list. Once user adds the data I am displaying product name in my grid.

Now I want to display the product name as a link and clicking on it, user should navigate to product details page.

Thanks,
Nirav

Grid

answered on 15 Apr 2014