Questions on UI for ASP.NET MVC Forum

1 answer

191 views

Kendo Grid, batch mode, determine when server side save is complete

Hello all! We have a KendoGrid on our MVC view, and it works great - the only question is when a user clicks the Save Changes button, how does the UI know when that action is complete if it is an AJAX request? In our case the grid is bound to server generated data, with Add and Save buttons in the tool bar. When a user enters invalid data into the grid as determined by the data annotations on the model, it works and shows the errors. We have no way of knowing if a successful save occurred though from what i've seen. Any ideas?

Thanks in advance!

Grid

answered on 12 Nov 2013

2 answers

125 views

Why am I getting a number of symbols showing up in my tooltip

Hi,

I am looking to implement the kendo ui tooltip for MVC. With the way I have it implemented now, I am getting a whole bunch of random symbols showing up in my tooltip.

I've attached a screen shot of what I am seeing and attached the relevant portions of code I am using. I am hoping to fill my ServiceTypeToolTip div with significantly more content and there will be about 20 of these such sections on the page.

*I am using Kendo 2013.1.319

Any help would be appreciated.

Thanks!

@(Html.Kendo().Tooltip()
.For("#ServiceTypeImg")
.ShowOn(TooltipShowOnEvent.Click)
.AutoHide(false)
.Animation(true)
.ContentTemplateId("ServiceTypeToolTip")
.Position(TooltipPosition.Right)
.Width(120)
)

<div id ="ServiceTypeToolTip">
<p>this is one line</p>
<p>this is line 2</p>
<p>this is a very very very very ver yver yveryv eryvery veyrvey rye long line</p>
</div>

<img src="~/Images/question-mark-icon-tiny-small.png" id="ServiceTypeImg" />

ToolTip

answered on 11 Nov 2013

1 answer

100 views

Grid First row not displayed the same way

Page code :

01.<h2>Groups</h2>

02.<br />

03.

04.<fieldset>

05. <table style="border: none; width:97%">

06. <tr>

07. <td style="text-align:left">

08. <input type="button" id="btnNewGroup" value="Create New Group" onclick="window.location = 'CreateGroup';" style="width:150px" />

09. </td>

10. </tr>

11. </table>

12.</fieldset>

13.

14.<%= Html.Kendo().Grid(Model).Name("grid").HtmlAttributes(new { style = "width: 90%" })

15. .DataSource(data => data

16. .Server()

17. .Model(model => model.Id(g => g.GroupID))

18. .Destroy(delete => delete.Action("DeleteGroup", "Group"))

19. )

20. .Columns(columns =>

21. {

22. columns.Bound(o => o.Name).Width(400);

23. columns.Bound(o => o.IsActive).Width(100);

24. columns.Bound(o => o.ContactCount).Width(100);

25. columns.Command(com =>

26. {

27.

com.Custom("EditGroup").Text("Edit").Action("UpdateGroup", "Group").SendDataKeys(true).HtmlAttributes(new { style="width:80px" });

28. com.Destroy().Text("Delete").HtmlAttributes(new { style = "width:80px" });

29. });

30. })

31. .Sortable()

32. .Editable(editing => editing.DisplayDeleteConfirmation(true))

33. .Scrollable()

34.%>

My first row shows the 2 buttons separeted by a carriage return, but other rows are displayed with the buttons next to each other.

All my Kendo grids are displayed like that. Does anyone has got an idea why ?
Thanks.

The result of the page can be shown in the attached file.

EDIT : This happens with ALL web browsers tested : IE10, Chrome, Mozille Firefox 22.0.

Grid

answered on 11 Nov 2013

1 answer

63 views

Possible to get the date of last occurance of an event?

<script>

var event = new kendo.data.SchedulerEvent({

id: 1,

start: new Date("2013/9/2 12:00"),

end: new Date("2013/9/2 12:30"),

title: "Lunch",

recurrenceRule: "FREQ=MONTHLY;COUNT=2;BYMONTHDAY=15"

});

</script>

How can I determine the last date of this recurring event?

-Martin

Scheduler

answered on 08 Nov 2013

1 answer

268 views

Simple read.Action MVC json not working

Not sure why there is no data being pulled into the chart.
I used fiddler to test the Json call and verified that the data is there
However, when running these code through the debugger, the break point never stop at the DrillDownChart_Read ActionResult.

Controller:
[HttpGet]
public ActionResult DrillDownChart_Read()
{
List<IDrillDownChart> myResultList = new List<IDrillDownChart>();
List<int> myIntList = new List<int>();
myIntList.Add(1);
myIntList.Add(2);
myResultList.Add(new DrillDownChartCategoryWithData("x", 20, 25, 1, "webvstf", "Engineering Systems", myIntList));
myResultList.Add(new DrillDownChartCategoryWithData("y", 30, 25, 1, "webvstf", "Engineering Systems", myIntList));

return Json(myResultList, JsonRequestBehavior.AllowGet);
}

View:
@(Html.Kendo().Chart<IDrillDownChart>()
.Name("chart")
.Title("Drill Down Chart")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.DataSource(dataSource => dataSource
.Read(read => read.Action("DrillDownChart_Read", "ProjectReports"))
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Bar().Stack(true)
)
.Series(series => {
series.Bar(d => d.PercentComplete)
.Name("Percent Complete")
.Color("#A7A7A7");
})
.CategoryAxis(axis => axis
.Categories(model => model.DisplayTitle)
)

)

Chart

answered on 08 Nov 2013

7 answers

325 views

Problem with kendo dropdownlist

Hi: I have the following problem with my Kendo dropdownlist:
   In the model I pass to my view I have a list of Users, that I want to link to a dropdownlist called UsuariosDrpDwn
and show it in a certain column("Usuario") of every row of my grid ( marked bold).

I program the dropdownlist and it populates allright with the users, but when I link it to one of my grid's columns("Usuario"), the problem is it's values spread along the rows of the grid. Let's say my users are John, Martha, Grant, Michael. What happens is, John appears in the column "Usuario" of the first row, Martha in the column Usuario of the second row, Grant in the column Usuario of the third row, and Michael in the fourth.

These is the code for the dropdownlist:

@(Html.Kendo().DropDownListFor(d=>d)
.Name("UsuariosDrpDwn").HtmlAttributes(new { @style = "font-size:12px" })
.DataTextField("NombreUsuario")
.DataValueField("IdUsuario")
.BindTo(Model)
)
And this the code for my grid, I mark bold the column that is bounded to the dropdownlist:
  @(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns=>
{
columns.Bound(d => d.BorradoLogico).Title("Borrado logico");
columns.Bound(d => d.FTick).Title("Ftick");
columns.Bound(d => d.NombreUsuario).Title("Usuario").EditorTemplateName("UsersDrpDwn");
@columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
})
I attach my view.

DropDownList

answered on 08 Nov 2013

1 answer

303 views

Grid Create and Remove not refreshing

I have a hierarchical grid where the child grid elements can be updated but the parent cannot but a calculated value needs to be updated via javascript from the refreshed child. When I edit the child grid elements all is well. If I create a new row the calculated value is updated correctly but the grid doesn't refresh and show the new row. Manually refreshing the grid makes the row appear.

Grid:

@(Html.Kendo().Grid<TimeAndAttendance.Models.DaysActivityViewModel>()

.Name("grid_#=SelectedAssociateID#") // make sure the Name is unuque

.Columns(columns =>

{

columns.Bound(ta => ta.BeginPeriod).Title("Alloc Period")

.Format("{0:MM-dd-yyyy}");

columns.Bound(ta => ta.OperatingUnit).Title("Operating Unit")

.ClientTemplate("\\#: OperatingUnit.Description \\#")

.EditorTemplateName("OperatingUnitEditor")

.Visible(Model.TAColumns.OperatingUnitVisible);

columns.Bound(ta => ta.Position).Title("Position")

.ClientTemplate("\\#: Position.Description \\#")

.EditorTemplateName("PositionEditor")

.Visible(Model.TAColumns.PositionVisible);

columns.Bound(ta => ta.Department).Title("Department")

.ClientTemplate("\\#: Department.Description \\#")

.EditorTemplateName("DepartmentEditor")

.Visible(Model.TAColumns.DepartmentVisible);

columns.Bound(ta => ta.Shift).Title("Shift")

.ClientTemplate("\\#: Shift.Description \\#")

.EditorTemplateName("ShiftEditor")

.Visible(Model.TAColumns.ShiftVisible);

columns.Bound(ta => ta.Paycode).Title("Paycode")

.ClientTemplate("\\#: Paycode.Description \\#")

.EditorTemplateName("PaycodeEditor")

.Visible(Model.TAColumns.PaycodeVisible);

columns.Bound(ta => ta.Tier).Title("Tier")

.ClientTemplate("\\#: Tier.Description \\#")

.EditorTemplateName("TierEditor")

.Visible(Model.TAColumns.TierVisible);

columns.Bound(ta => ta.Level).Title("Level")

.ClientTemplate("\\#: Level.Description \\#")

.EditorTemplateName("LevelEditor")

.Visible(Model.TAColumns.LevelVisible);

columns.Bound(ta => ta.Wage).Title("Wage")

.ClientTemplate("\\#: Wage.Description \\# <input type='button' style='float:right;color:Red' onclick='override(this, \\#:ID\\#);' value='Override'/>")

.Visible(Model.TAColumns.WageVisible);

columns.Bound(ta => ta.Hours).Format("{0:n2}").EditorTemplateName("Number");

columns.Bound(ta => ta.Notes);

columns.Bound(ta => ta.Status).ClientTemplate("\\#: Status.Description \\#");

columns.Command(command => { command.Edit().Text(""); command.Destroy().Text(""); }).Visible(Model.TAColumns.ShowEditDelete);

columns.Command(command =>

{

command.Custom("reject").Text("Reject").Click("rejectPrompt");

command.Edit().Text("");

})

.Visible(Model.TAColumns.ShowWageReject);

})

.DataSource(dataSource =>

dataSource.Ajax()

.Read(read => read.Action("TimeAllocations", "TeamTimeEntry", new { assocID = "#=SelectedAssociateID#" }).Data("getReadParameters"))

.Update(update => update.Action("Edit", "TeamTimeEntry", new { assocID = "#=SelectedAssociateID#" }))

.Destroy(destroy => destroy.Action("Delete", "TeamTimeEntry", new { assocID = "#=SelectedAssociateID#" }))

.Create(create => create.Action("Create", "TeamTimeEntry", new { assocID = "#=SelectedAssociateID#" }).Data("getReadParameters"))

.Model(model =>

{

model.Id(ia => ia.ID);

model.Field(field => field.BeginPeriod).Editable(false);

model.Field(field => field.Status).DefaultValue(Model.Statuses.FirstOrDefault()).Editable(false);

model.Field(field => field.OperatingUnit).DefaultValue(Model.OperatingUnits.FirstOrDefault()).Editable(Model.TAColumns.OperatingUnitVisible);

model.Field(field => field.Shift).DefaultValue(Model.Shifts.FirstOrDefault()).Editable(Model.TAColumns.ShiftVisible);

model.Field(field => field.Department).DefaultValue(Model.Departments.FirstOrDefault()).Editable(Model.TAColumns.DepartmentVisible);

model.Field(field => field.Paycode).DefaultValue(Model.Paycodes.FirstOrDefault()).Editable(Model.TAColumns.PaycodeVisible);

model.Field(field => field.Position).DefaultValue(Model.Positions.FirstOrDefault()).Editable(Model.TAColumns.PositionVisible);

model.Field(field => field.Tier).DefaultValue(Model.Tiers.FirstOrDefault()).Editable(Model.TAColumns.TierVisible);

model.Field(field => field.Level).DefaultValue(Model.Levels.FirstOrDefault()).Editable(Model.TAColumns.LevelVisible);

model.Field(field => field.Wage).DefaultValue(Model.Wages.FirstOrDefault()).Editable(false);

})

)

.ToolBar(toolbar =>

toolbar.Create().Text("New Time Allocation")

)

.Events(events =>

events.Save("save")

.Remove("remove")

.DataBound("childDataBound"))

.ToClientTemplate())

JavaScript:

function updateVarianceDisplay(e) {

var grid = $('#TimeAllocations').data('kendoGrid');

var row = $(e.sender.element[0]).parent().parent().parent().parent().prev();

var dataItem = grid.dataItem(row);

if (dataItem != null) {

var childGrid = $('#grid_' + dataItem.SelectedAssociateID).data('kendoGrid');

var totalHoursAssigned = 0;

var variance = 0;

$(childGrid._data).each(function (index, value) {

totalHoursAssigned += value.Hours;

});

dataItem.set("TotalHoursAssigned", totalHoursAssigned);

variance = dataItem.PeriodHoursWorked - totalHoursAssigned;

var varianceMessageHTML = printVariance(variance);

var varianceHTML = colorCodeUnassigned(variance);

$('[id^="fntUnassigned:' + dataItem.SelectedAssociateID + '"]').html(varianceHTML);

$('[id^="fntVariance:' + dataItem.SelectedAssociateID + '"]').html(varianceMessageHTML);

dataItem.set("UnassignedHours", variance);

}

function save(e) {

updateVarianceDisplay(e);

}

function remove(e) {

updateVarianceDisplay(e);

}

Controller:

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "None")]

[AcceptVerbs(HttpVerbs.Post)]

public JsonResult Create([DataSourceRequest]DataSourceRequest request, int assocID, DaysActivityViewModel viewModel, string SelectedFacilityID, string begingPeriod)

{

TimeAllocation ta = new TimeAllocation()

{

ModifiedBy = HttpContext.User.Identity.Name,

AssociateID = assocID,

Created = DateTime.Now,

DepartmentID = (short?)viewModel.Department.ID,

FacilityAccountID = (short?)viewModel.OperatingUnit.ID,

ShiftID = viewModel.Shift.ID,

PositionID = (short)viewModel.Position.ID,

Hours = (decimal)viewModel.Hours,

PayCodeID = (short)viewModel.Paycode.ID,

Period = viewModel.BeginPeriod, //RGM 09-05-13 Does the TimeAllocation

StatusID = 1

};

db.TimeAllocations.AddObject(ta);

db.SaveChanges();

viewModel.FacilityAccount = db.FacilityAccounts.Where(f => f.ID == ta.FacilityAccountID).FirstOrDefault().OperatingUnit;

if (!string.IsNullOrEmpty(viewModel.Notes))

{

Note n = new Note() { Note1 = viewModel.Notes, CreatedBy = User.Identity.Name, Created = DateTime.Now };

db.Notes.AddObject(n);

db.SaveChanges();

TimeAllocationNote tan = new TimeAllocationNote()

{

NoteID = n.ID,

//NoteTypeID = db.NoteTypes.Where(nt => nt.Description == "Time Allocation Note").Single().ID,

TimeAllocationID = ta.ID

};

db.TimeAllocationNotes.AddObject(tan);

db.SaveChanges();

}

viewModel.ID = ta.ID;

return this.Json(new[] { viewModel }.ToDataSourceResult(request));

}

Also, the remove function does the opposite. The row is removed but the data in the JavaScript still contains the old row so the calculation is off. The grid and JavaScript for this are above, the controlled code is below.

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "None")]

[AcceptVerbs(HttpVerbs.Post)]

public JsonResult Delete([DataSourceRequest]DataSourceRequest request, int assocID, DaysActivityViewModel viewModel)

{

if (db.TimeAllocations.Where(ta => ta.ID == viewModel.ID).FirstOrDefault().TimeAllocationNotes.FirstOrDefault() != null)

{

long noteID = db.TimeAllocations.Where(ta => ta.ID == viewModel.ID).FirstOrDefault().TimeAllocationNotes.FirstOrDefault().NoteID;

long tanID = db.TimeAllocations.Where(ta => ta.ID == viewModel.ID).FirstOrDefault().TimeAllocationNotes.FirstOrDefault().ID;

db.Notes.DeleteObject(db.Notes.Where(n => n.ID == noteID).FirstOrDefault());

db.TimeAllocationNotes.DeleteObject(db.TimeAllocationNotes.Where(tan => tan.ID == tanID).FirstOrDefault());

}

db.TimeAllocations.DeleteObject(db.TimeAllocations.FirstOrDefault(t => t.ID == viewModel.ID));

db.SaveChanges();

viewModel = new DaysActivityViewModel();

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

}

Thanks for any pointers as to what I am doing wrong.

Grid

answered on 07 Nov 2013

3 answers

2.2K+ views

Change height of kendoDropDownList widget

I am trying to find a property of the DropDownList that will set the actual height of the widget itself. I found the height property that appears to set the height of the dropdown portion of the control but I want to adjust how tall the widget itself is. Is this something that can be set?

DropDownList

answered on 07 Nov 2013

4 answers

127 views

Calendar Navigation Depth

I am using Kendo UI Complete v2012.3.1315 and I am trying to allow the user to only navigate to a depth of a month. So I have set the navigation depth to month. I've also set the start config property to month. My understanding is my setting these config settings to a month will prevent the user from clicking the month name and getting a year, decade, and century view. Is this understanding correct? If so, is there another setting that must be set?

Thank you.

Calendar

answered on 07 Nov 2013

1 answer

200 views

Call Scheduler events from EventTemplate

I'm using an EventTemplate to display in the agenda view. I'd like to add a button in the template that will open the Edit window. I've searched through the forums, but have not been able to find an example. Can you provide an example showing how to do this?

Thanks,
-Pete

Scheduler

answered on 07 Nov 2013