Questions on UI for ASP.NET Core Forum

3 answers

1.9K+ views

How to set a default value for NumericTextBoxFor HtmlHelper

Hello,

I've been searching all over the Internet for an answer to this question, but to no avail. How do I set a default value for a NumberTextBoxFor HtmlHelper? I've seen examples where it's done by something similar to this: .HtmlAttributes(new { @Value = "9"}). However, this doesn't for for me. Any help is appreciated. Thanks.

Shawn A.

NumericTextBox

answered on 07 Mar 2019

1 answer

102 views

Calendar/Date Pickers component is unaffected by the theme accent color.

When changing the accent color of a theme the color of the date picker does not change.

https://demos.telerik.com/kendo-ui/themebuilder/

How does one change the color of the Date Picker?

I've tried setting the colors manually through css with the attached code but some lines stay red.

.k-calendar .k-header{

background-color: #448dcb !important;

}

.k-state-focused {

border-color: #448dcb !important;

}

.k-state-active {

background-color: #448dcb !important;

border-color: #448dcb !important;

}

.k-calendar .k-input .k-picker-wrap .k-state-focused {

border-color: #448dcb !important;

}

Date/Time Pickers

answered on 06 Mar 2019

2 answers

101 views

Page Nevigation on Top and Bottom

Hi

I found some old sample code of placing page navigation on the top of the grid, but none work correctly when i have a ClientFooterTemplate in the grid.

It show the footer template instead of the pager.

Can anyone help?

        var grid = $('#grid').data('kendoGrid');
        var wrapper = $('<div class="k-pager-wrap k-grid-pager pagerTop"/>').insertBefore(grid.element.children("table"));
        grid.pagerTop = new kendo.ui.Pager(wrapper, $.extend({}, grid.options.pageable, { dataSource: grid.dataSource }));
        grid.element.height("").find(".pagerTop").css("border-width", "0 0 1px 0");

Grid

answered on 06 Mar 2019

2 answers

677 views

TreeView Doesn't Display the Images for the Nodes

Hi,

I've just started using Telerik UI for .NET Core.

I'm just trying to build a simple tree and add images to each node. For some reason it's not displaying the images.

Any help would be greatly appreciated.

I'm hardcoding the names of the nodes and the images, so all the action is in the .cshtml file.

Here's my code. If you just look at the first node I'm trying to add(Inbox), you'll see all of the ways I tried to add an image to the node.
I have all but one way commented out. The rest of the code is just trying to the same things for additional nodes.

@page
@model Bakery.Pages.ConversionManagerModel
@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ConversionManager</title>

<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-nova.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.nova.min.css" />

<script src="~/lib/jquery/dist/jquery.js"></script>

@* Place Kendo UI scripts after jQuery *@
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script
</head>
<body>
<div>
@(Html.Kendo().TreeView()
.Name("treeview-images")
.Items(treeview =>
{
treeview.Add().Text("Inbox")
//.ImageUrl(Url.Content("~/Shared/Images/db78.png"))
//.ImageUrl(Url.Content("./Shared/Images/db78.png"))
//.ImageUrl(Url.Content("C:/tmp/db78.png"))
//.ImageUrl(Url.Content("C:/tmp/db78.png"))
.ImageUrl("~/Shared/Images/db78.png")
.Expanded(true)
.Items(inbox =>
{
inbox.Add().Text("Read Mail")
.ImageUrl(@"c:\tmp\db78.png");
});

treeview.Add().Text("Drafts")
.ImageUrl(Url.Content(@"c:\tmp\db78.png"));

treeview.Add().Text("Search Folders")
.ImageUrl(Url.Content(@"c:\tmp\db78.png"))
.Expanded(true)
.Items(inbox =>
{
inbox.Add().Text("Categorized Mail")
//.ImageUrl(Url.Content(@"c:\tmp\db78.png"));
.ImageUrl(Url.Content(@"C:\tmp\db78.png"));

inbox.Add().Text("Large Mail")
.ImageUrl(Url.Content(@"c:\tmp\db78.png"));

inbox.Add().Text("Unread Mail")
.ImageUrl(Url.Content(@"c:\tmp\db78.png"));
});

treeview.Add().Text("Settings")
.ImageUrl(Url.Content(@"c:\tmp\db78.png"));
})
)
</div>
</body>
</html>

Thanks.

TreeView

answered on 05 Mar 2019

5 answers

1.2K+ views

Color picker and Kendo Grid.

How to put kendo color picker inside kendo grid cell. And how to change cell color after selection of color from color picker.?

Grid

answered on 05 Mar 2019

1 answer

1.7K+ views

Using HtmlAttributes to add a class to a Window object

I am trying to add a CSS class to a window object that is created when the popup is initialized for editing in a grid component but the class isn't being added to the window. Am I missing something here?

01.@(Html.Kendo().Grid<NotificationSystem.Web.Models.CategoryViewModel>()

02. .Name("categories")

03. .Columns(columns =>

04. {

05. columns.Command(command =>

06. {

07. command.Destroy().TemplateId("categories_delete");

08. }).Width(80);

09. columns.Bound(c => c.Name);

10. columns.Bound(c => c.Description);

11. columns.Bound(c => c.CreatedBy);

12. columns.Bound(c => c.Created);

13. columns.Command(command =>

14. {

15. command.Edit().TemplateId("categories_update");

16. }).Width(80);

17. })

18. .Scrollable()

19. .Sortable()

20. .Pageable(pageable => pageable

21. .Refresh(true)

22. .PageSizes(true)

23. .ButtonCount(5))

24. .NoRecords(true)

25. .Editable(editable =>

26. {

27. editable.Mode(GridEditMode.PopUp);

28. editable.TemplateName("CategoryEditor");

29. editable.Window(window =>

30. {

31. window.HtmlAttributes(new

32. {

33. @class = "k-window-lg"

34. });

35. });

36. })

37. .DataSource(dataSource => dataSource

38. .Ajax()

39. .PageSize(20)

40. .ServerOperation(false)

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

42. .Create(create => create.Action("Create", "Categories"))

43. .Read(read => read.Action("Read", "Categories"))

44. .Update(update => update.Action("Update", "Categories"))

45. .Destroy(destroy => destroy.Action("Delete", "Categories"))

46. )

47. .Deferred()

48. )

Grid

answered on 05 Mar 2019

1 answer

83 views

Grid Calendar and Timepicker theme is wrong inside calendar.

Hello,

I'have a grid and the Calendar and TimePicker looks verry old, like it doens't have a bootstrap theme.

Can you please help me ? It's urgent we have to finish the project asap.

Here is the code:

@(Html.Kendo().Grid<OverTimeKendo.Models.OverTime>
().Name("OverTime")
.Selectable()
.Columns
(columns =>
{
columns.Bound(c => c.Id).Hidden(true);
columns.Bound(c => c.RecordDate);
columns.Bound(c => c.TimeFrom);
columns.Bound(c => c.TimeTo);
columns.Bound(c => c.NumberOfHours);
columns.Bound(c => c.OvertimeReason);
columns.Command(command => { command.Edit(); }).Width(100);
columns.Command(command => { command.Destroy(); }).Width(100);

})
.ToolBar(toolbar =>
{
toolbar.Create();

})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable(pageable =>
{
pageable.Refresh(true);
pageable.PageSizes(true);
})
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);

})

.Read(read => read.Action("Read_Overtime", "OverTimes"))
.Create(create => create.Action("Add_Overtime", "OverTimes"))
.Update(update => update.Action("Update_Overtime", "OverTimes"))
.Destroy(destroy => destroy.Action("Destroy_Overtime", "OverTimes"))

)
)

Grid

answered on 05 Mar 2019

5 answers

118 views

Custom Command refusing to work in editorfortemplate

I am trying to use a custom command but its not working it refuses to work in a editorfortemplate of the main grid but it should work without issues. But it brakes the popup and does not load can someone help as to why please.

Basically I am wanting three fields in the inline popup name, start time,end time and duration from my activity lines model.

@model FuelActivityTrackerDal.ViewModels.ActivityEditViewModal

<style>

numberCircle {

border-radius: 50%;

behavior: url(PIE.htc);

/* remove if you don't care about IE8 */

width: 36px;

height: 36px;

padding: 8px;

background: #fff;

border: 2px solid #666;

color: #666;

text-align: center;

font: 60px Arial, sans-serif;

}

</style>

<div class="container py-5">

<div class="row">

<div class="col-md-10 mx-auto">

<form>

<div class="form-group row">

<div class="col-sm-9">

<label for="inputFirstname">Activty Name</label>

<input type="text" class="form-control" id="inputFirstname" placeholder="Activity name">

</div>

<div class="form-group row">

<div class="col-sm-3">

<label for="inputLastname" class="form-control">Activity Start Date</label>

@Html.Kendo().DateTimePickerFor(model => model.ActivityDate)

</div>

<div class="col-sm-3">

<label for="inputLastname" class="form-control">Activity End Date</label>

@Html.Kendo().DateTimePickerFor(model => model.ActivityEndDate)

</div>

<div class="form-group row">

<div class="col-sm-3">

<label for="inputLastname" class="form-control">Location</label>

@foreach (var item in (SelectList)ViewBag.Location)

{

@Html.RadioButtonFor(model => model.OnSite, item.Value, false)

<label class="control-label">@item.Text</label>

}

</div>

<div class="form-group row">

<div class="col-md-10">

<label for="inputLastname" class="form-control">Description</label>

@Html.TextAreaFor(model => model.Description, new { @class = "whatever-class", @cols = 115, @rows = 10 })

</div>

<div class="form-group row">

<div class="col-sm-6">

<label for="inputCity">Status </label>

<select asp-for="Status"

class="form-control"

asp-items="@(new SelectList(@ViewBag.ProjectStatusTypes,"LookupCode", "LookupDescription"))"></select>

</div>

<div class="col-sm-3">

<label for="inputState">ActivityType </label>

<select asp-for="ActivityType"

class="form-control"

asp-items="@(new SelectList(@ViewBag.ProjectTypes,"LookupCode", "LookupDescription"))"></select>

</div>

<div class="form-group row">

<div class="col-sm-6">

<label for="inputCity">Staff </label>

<select asp-for="StaffID"

class="form-control"

asp-items="@(new SelectList(@ViewBag.ListOfStaff,"StaffID", "FirstName"))"></select>

</div>

<div class="col-sm-3">

<label for="inputState">Hours Left On Project </label>

<label for="inputState"><div class="badge" style="font-size:18px;">26</div> </label>

<label for="projecthours">If Porject hours fall below ten Contact Charlie.</label>

</div>

<div class="form-group row">

@(Html.Kendo().Grid<FuelActivityTrackerDal.Models.ActivityLines>().Name("activityLines")

.Columns(columns =>

{

columns.Bound(p => p.Description).Filterable(false);

columns.Bound(p => p.StaffMemeber).Filterable(false);

columns.Bound(p => p.StartTime).Filterable(false);

columns.Bound(p => p.EndTime).Filterable(false);

columns.Bound(p => p.Status);

columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));

})

.DataSource(dataSource => dataSource

.Ajax()

.Events(events => events.Error("error_handler"))

.Model(model => model.Id(p => p.ActivityLineId))

.Read(read => read.Action("ActivityLines_Read", "Activity"))

))

</div>

<div class="form-group row">

<div class="col-sm-6">

</div>

<button type="button" class="btn btn-primary px-4 float-right">Add Work Item</button>

<button type="button" class="btn btn-primary px-4 float-right">Put Case & Client On Hold</button>

<button type="button" class="btn btn-primary px-4">Cancel</button>

</form>

</div>

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

<div id="details-container">

<h2>#= FirstName # #= LastName #</h2>

<em>#= Title #</em>

<dl>

<dt>City: #= City #</dt>

<dt>Address: #= Address #</dt>

</dl>

</div>

</script>

<script type="text/javascript">

var detailsTemplate = kendo.template($("#template").html());

function showDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

var wnd = $("#Details").data("kendoWindow");

wnd.content(detailsTemplate(dataItem));

wnd.center().open();

}

</script>

@*<div class="k-edit-form-container">

<h3>Activity</h3>

<br />

@Html.HiddenFor(model => model.Name)

<div class="k-edit-label">

@Html.LabelFor(model => model.Name)

</div>

<div class="k-edit-label">

@Html.LabelFor(model => model.Description)

</div>

<div class="k-edit-field">

</div>

<div class="k-edit-label">

@Html.LabelFor(model => model.HoursLeftOnProject)

</div>

<div class="k-edit-field">

@Html.Kendo().IntegerTextBoxFor(model => model.HoursLeftOnProject)

</div>

<div class="k-edit-label">

@Html.LabelFor(model => model.ActivityDate)

</div>

<div class="k-edit-field">

@Html.Kendo().DateTimePickerFor(model => model.ActivityDate)

</div>*@

</div>

Grid

answered on 04 Mar 2019

2 answers

765 views

ComboBoxFor value is not selected from Grid in Edit mode

Hello,

I have a Grid with the editable mode set to "PopUp" and I've provided a template file for it. In my template file I'm using a Kendo ComboBox to allow the user to select from a list of US States, and in edit mode I would expect it to set the value to the selected record's StateId. Unfortunately, when the edit popup appears the State is not selected in the ComboBox that matches the value in the grid's selected record. However, as soon as I click on the ComboBox's down arrow the value gets populated. I'm not sure what I'm doing wrong. Am I missing a step somewhere? Any help is appreciated. Thanks.

Here's the code for my grid:

@(Html.Kendo().Grid<PARRE.Models.Project>

()

.Name("Projects")

.Columns(columns =>

{

columns.Bound(c => c.ProjectName).Width(200);

columns.Bound(c => c.ProjectDescription);

columns.Bound(c => c.Address).Width(200);

columns.Bound(c => c.City).Width(160);

columns.ForeignKey(f => f.StateId, (System.Collections.IEnumerable)ViewData["StatesList"], "StateId", "StateAbbr").Width(100);

columns.Bound(c => c.ZipCode).Width(120);

columns.Bound(c => c.ContactName).Width(160);

columns.Bound(c => c.PhoneNumber).Width(135);

columns.Bound(c => c.Email).Width(160);

columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(170);

})

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

.Scrollable()

.Groupable()

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Filterable()

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_ProjectCreate").Window(x => x.Title("Add/Edit Project").Width(700)))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Events(events => {

events.Error("error_handler");

})

.Model(model =>{

model.Id(p => p.ProjectID);

model.Field(p => p.ProjectID).Editable(false);

})

.ServerOperation(false)

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

.Update(update => update.Action("Update", "Projects"))

.Create(create => create.Action("Create", "Projects"))

.Destroy(destroy => destroy.Action("Delete", "Projects"))

)

Here's the code for the ComboBox

@(Html.Kendo().ComboBoxFor(model => model.StateId)

.AutoBind(false)

.BindTo((System.Collections.IEnumerable)ViewData["StatesList"])

.DataTextField("StateAbbr")

.DataValueField("StateId")

.Filter(FilterType.Contains)

.HtmlAttributes(new { style = "width: 70px; background-color: white;" })

.Placeholder("...")

.ClearButton(false))

Here's the code in the Controller to get the list of states:

public IActionResult Index()

{

PopulateStates();

return View();

}

private void PopulateStates()

{

IQueryable<USStates> usStates = _context.USStates.Select(s => new USStates

{

StateId = s.StateId,

StateAbbr = s.StateAbbr

}).OrderBy(o => o.StateId);

ViewData["StatesList"] = usStates.ToList();

}

Regards,

Shawn A.

ComboBox

answered on 04 Mar 2019

4 answers

3.0K+ views

How to change a PopUp window's Title (GridEditMode.PopUp)

Hello,

I'm very new to developing in ASP.NET Core and Telerik's Keno UI. I'm trying to find documentation on how I can change the title of a grid popup window when I click on the "Add New Record" button on top of the Grid. Currently, the word "Edit" is displayed even though the operation is for "insert". How do I go about changing the title of a popup add/edit window for a Grid?

Here's my code:

@(Html.Kendo().Grid<MyApp.Models.Project>

()

.Name("Projects")

.Columns(columns =>

{

columns.Bound(c => c.ProjectName).Width(100);

columns.Bound(c => c.ProjectDescription).Width(100);

columns.Bound(c => c.Address);

columns.Bound(c => c.City).Width(100);

columns.Bound(c => c.State).Width(100);

columns.Bound(c => c.ZipCode).Width(50);