Questions on UI for ASP.NET Core Forum

5 answers

195 views

Help with autocomplete for incell editing

I am attempting to use the autocomplete for incell editing. I have been searching and followed several examples but I can't get my code to work. When I select the cell, the current value deletes and the "working" spinner shows but no suggestions are listed.

Below is the code for the Grid, AutoComplete, and Controller function.

Index

@(Html.Kendo().Grid<Timecard.Models.TimecardViewModel>()

.Name("timecard")

.ToolBar(toolbar => toolbar.Create().Text("ADD").HtmlAttributes(new { title = "Add employee" }))

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

.Columns(columns =>

{

columns.Bound(p => p.EmployeeName).Width(170).EditorTemplateName("_InCellAutoCompleteEditor");

columns.Bound(p => p.MonST).Filterable(false).Sortable(false).Format("{0:n1}").Title("Mon ST");

columns.Bound(p => p.MonOT).Filterable(false).Sortable(false);

columns.Bound(p => p.MonDT).Filterable(false).Sortable(false);

columns.Bound(p => p.TueST).Filterable(false).Sortable(false);

columns.Bound(p => p.TueOT).Filterable(false).Sortable(false);

columns.Bound(p => p.TueDT).Filterable(false).Sortable(false);

columns.Bound(p => p.WedST).Filterable(false).Sortable(false);

columns.Bound(p => p.WedOT).Filterable(false).Sortable(false);

columns.Bound(p => p.WedDT).Filterable(false).Sortable(false);

columns.Bound(p => p.ThuST).Filterable(false).Sortable(false);

columns.Bound(p => p.ThuOT).Filterable(false).Sortable(false);

columns.Bound(p => p.ThuDT).Filterable(false).Sortable(false);

columns.Bound(p => p.FriST).Filterable(false).Sortable(false);

columns.Bound(p => p.FriOT).Filterable(false).Sortable(false);

columns.Bound(p => p.FriDT).Filterable(false).Sortable(false);

columns.Command(command =>

{

command.Edit().UpdateText("Save");

command.Destroy().HtmlAttributes(new { title = "Delete highlighted employee" });

}).Title("Options").Width(150);

})

.Sortable()

.Scrollable()

.Filterable()

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single)

.Type(GridSelectionType.Cell)

)

.HtmlAttributes(new { style = "height:650px;width:1580px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(100)

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

.Read(read => read.Action("Employee_Read", "Timecard"))

.Create(create => create.Action("Employee_Create", "Employee"))

.Destroy(destroy => destroy.Action("Employee_Delete", "Employee"))

)

_InCellAutoCompleteEditor

@(Html.Kendo().AutoComplete()

.Name("EmployeeName")

.Filter("startswith")

.DataTextField("employeeName")

.ValuePrimitive(true)

.Placeholder("Select...")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("Employee_Read", "Timecard");

})

.ServerFiltering(false);

})

)

TimecardController

public ActionResult Employee_Read([DataSourceRequest]DataSourceRequest request)

{

DataTable dt = new DataTable();

using (SqlConnection conn = new SqlConnection("Server={IPAddress};DataBase={DB};Integrated Security=SSPI"))

{

using (SqlCommand cmd = new SqlCommand())

{

cmd.CommandText = "uspEmployeeGet";

cmd.CommandType = System.Data.CommandType.StoredProcedure;

cmd.Connection = conn;

conn.Open();

dt.Load(cmd.ExecuteReader());

}

var dsResult = dt.ToDataSourceResult(request);

return Json(dsResult);

}

Grid

answered on 11 Mar 2019

4 answers

1.7K+ views

Disable fields in Popup edit conditionally based on Model field

Hi,

We have many models that we have set up Grids for and are using custom templates for the Popup editor. We wish to disable all of the fields in the Popup editor based on a boolean Model property, but were quick to find that the Razor Model object is not available in the custom template. We need to check this boolean property on a record by record basis (some records will be allowed for editing and some will not). I have taken a look at some of the solutions here and it seems that one approach is to create an on edit handler that manually disables all of the fields on the editor on an edit action. However this creates a serious overhead because it would mean we have to create this function for every grid. We have many different grids and they all have varying fields.

I was wondering if it is somehow possible to get access to this Model boolean property in the custom template and disable the fields as appropriate. Please note that we need to still be able to see the fields and their respective values and not hide/show the fields.

Grid

answered on 11 Mar 2019

1 answer

128 views

Command in first Column

In my ASP.NET Core 2.2 MVC project have the following TreeList control. This works. However, I prefer that the "Details" command go in the first column. However, when I do that... the hierarchy no longer works. It lists the items in the datasource but it doesn't indent anything. So 2 questions:

How do I put the Details command in the first column and keep the hierarchy working?
How do I change how far the hierarchy indents each child node? To me, what I have right now is too close.

Thanks in advance for your help,

Joel

<div class="container">

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

<h2>@Model.Title</h2>

<h3>@Model.Subtitle</h3>

<h4>@Model.Message</h4>

<hr />

</div>

<div class="col-sm-4 section">

@(Html.Kendo().PanelBar()

.Name("panelbar-customer")

.Items(panelbar =>

{

panelbar.Add().Text(@Model.Subtitle)

.ImageUrl(Url.Content("~/images/32/Customer.png"))

.Action("ToCustomer", "Groups", new { id = @Model.GetValue(Glossary.Keys.Group.Id) });

}))

</div>

<div>

<h4>@ViewBag.Subtitle</h4>

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

<div class='group-icon'

style='background-image: url(@Url.Content("~/images/32/Group.png"));'></div>

<div class='group-name'>#: Name #</div>

</script>

@(Html.Kendo().TreeList<Group>()

.Name("treelist")

.Columns(columns =>

{

columns.Add().Field(e => e.Name).Width(220).TemplateId("icon-template");

columns.Add().Field(e => e.RootPath);

columns.Add().Command(c => { c.Custom().Text("Details").Name("detailButton").Click("toDetails"); }).Width(120);

columns.Add().Command(c => { c.Custom().Text("Create").Name("createButton").Click("toCreate"); }).Width(120);

})

.DataSource(dataSource => dataSource

.ServerOperation(false)

.Read(read => read.Action("IndexJson", "Groups"))

.Model(m =>

{

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

m.ParentId(f => f.ParentId);

m.Expanded(true);

m.Field(f => f.Name);

}

)

.Events(events =>

{

events.Error("onError");

})

))

<script>

var groupId = Number(@(ViewBag.GroupId));

function readParams() {

return { id: groupId };

}

function toDetails(e) {

e.preventDefault();

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

if (dataItem != null) {

window.location.href = '@Url.Action("Details", "Groups")/' + dataItem.Id;

}

function toCreate(e) {

e.preventDefault();

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

if (dataItem != null) {

window.location.href = '@Url.Action("Create", "Groups")/?parentId=' + dataItem.Id;

}

function onError(e) {

alert(e.toString());

}

</script>

<style>

.group-icon {

display: inline-block;

width: 40px;

height: 40px;

border-radius: 50%;

background-size: 40px 44px;

background-position: center center;

vertical-align: middle;

line-height: 41px;

box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);

}

.group-name {

display: inline-block;

vertical-align: middle;

line-height: 41px;

padding-left: 10px;

}

</style>

</div>

TreeList

answered on 08 Mar 2019

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

100 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

97 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

667 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.6K+ 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

81 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