Questions on UI for ASP.NET MVC Forum

0 answers

227 views

RadHtmlChart TooltipsAppearance ClientTemplate does not display data on binding to a value from database.

Hi,
Facing an issue while binding tooltip to database item, below is the code for reference -

<Series>
<telerik:ColumnSeries Name="Power" Stacked="true" DataFieldY="TotalPower" AxisName="Power">
<Appearance>
<FillStyle BackgroundColor="#36b8f4"></FillStyle>
</Appearance>
<LabelsAppearance Position="Center" Visible="false">
</LabelsAppearance>
<TooltipsAppearance ClientTemplate="#= dataItem.TotalPower#">
</TooltipsAppearance>

<%--
<TooltipsAppearance ClientTemplate="#= kendo(\'{0:dd MMM yy}\', dataItem.Date)#<br/>Power: #= kendo.format(\'{0:N2}\',dataItem.TotalPower)# kW">
</TooltipsAppearance>
--%>
<%--
<TooltipsAppearance ClientTemplate="#=dataItem.Date#<br/>Power: #=dataItem.TotalPower# kW">
</TooltipsAppearance>--%>

</telerik:ColumnSeries>
</Series>

When i use ClientTemplate in TooltipsAppearance to bind tooltip to TotalPower value (this value comes from dataset), it shows "undefined" on mouse over, and instead of ClientTemplate if dataformatstring is used then it display the value
(<TooltipsAppearance DataFormatString="{0}"></TooltipsAppearance>).

My requirement is that, i want to display both Date and TotalPower values in tooltip. Also, tried using kendo after googling this issue, but still without any success.

Please help as I'm stuck into this.

ToolTip

asked on 12 Nov 2013

6 answers

662 views

Remove file from filelist

How to remove file from Kendo Upload MVC file-list which is hidden by default? Previously in Telerik Upload I have used the code below but it do not works anymore.

this.removeFile = function (fileName) {
fileName = fileName.split("'")[0];
$('span.k-filename[title="' + fileName + '"]').parent().remove();
};

Upload

answered on 12 Nov 2013

1 answer

200 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

135 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

110 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

66 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

276 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

337 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

319 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