Questions on UI for ASP.NET Core Forum

1 answer

268 views

Passing id of detail row to sub popup.

Ok So I have made some modifications based on teleriks suggestion but now the grid is not readling the lines

[AcceptVerbs("Get")]

public ActionResult ActivityLines_Read([DataSourceRequest]DataSourceRequest request ,int? activityID)

{

int? _activityId = activityID;

var result = GetAllActivityLines(activityID);

var dsResult = result.ToDataSourceResult(request);

return Json(dsResult);

}

The goal I need to achieve is to pass the header id into the lines and then on my view details button pass the id to the popup so that it is their for saving saving from the main window is not the modal i want to follow which was a suggestion in support ticket.

<div class="form-group row">

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

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

().Name("activityLines")

.AutoBind(false)

.Events(e => e.Edit("onEdit"))

.Columns(columns =>

{

columns.Bound(p => p.Description).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"))

.Update(update => update.Action("ActivityLines_Update", "Activity").Type(HttpVerbs.Post)))

)

</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>

@(Html.Kendo().Window().Name("Details")

.Title("Activity Details")

.Visible(false)

.Modal(true)

.Draggable(true)

.Width(400)

)

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

<form method="post" action="@Url.Action("ActivityLines_Update", "Activity")">

<div id="details-container">

ActivitiyHeadId

<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-md-10">

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

</div>

<div class="form-group row">

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

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

</div>

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

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

</div>

<input type="submit" class="btn btn-file px-4" value="Save Work Item" />

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

</form>

</script>

My Entire activity controller.

public class ActivityController : Controller

{

public int ActivityLineId { get; set; }

private readonly IActivityHeaderRepository _activityRepo;

public ActivityController(IActivityHeaderRepository activityRepo)

{

_activityRepo = activityRepo;

}

[AcceptVerbs("Post")]

public bool SaveWorkItem(ActivityLines activityLines)

{

return _activityRepo.UpdateActivityLines(activityLines);

}

[AcceptVerbs("Post")]

public ActionResult EditingPopup_Update([DataSourceRequest] DataSourceRequest request, ActivityHeader activity)

{

if (activity != null)

{

UpdateActivity(activity);

}

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

}

[AcceptVerbs("Post")]

public ActionResult ActivityLines_Update([DataSourceRequest] DataSourceRequest request, ActivityLines activityLines,int? activityID)

{

if (activityLines != null)

{

_activityRepo.UpdateActivityLines(activityLines);

}

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

}

[AcceptVerbs("Get")]

public ActionResult ActivityLines_Read([DataSourceRequest]DataSourceRequest request ,int? activityID)

{

int? _activityId = activityID;

var result = GetAllActivityLines(activityID);

var dsResult = result.ToDataSourceResult(request);

return Json(dsResult);

}

public ActionResult Activity_Read([DataSourceRequest]DataSourceRequest request)

{

var result = GetAllActivityHeader();

var dsResult = result.ToDataSourceResult(request);

return Json(dsResult);

}

public List<ActivityEditViewModal> GetAllActivityHeader()

{

return _activityRepo.GetAllActivites();

}

public List<ActivityLines> GetAllActivityLines(int? activityID)

{

return _activityRepo.GetActivityLines(activityID);

}

public bool UpdateActivityLines(ActivityLines activityLine)

{

return _activityRepo.UpdateActivityLines(activityLine);

}

public bool UpdateActivity(ActivityHeader activityHeader)

{

return _activityRepo.UpdateActivityHeader(activityHeader);

}

public ActionResult Index()

{

List<StaffMembers> _staffmembers = new List<StaffMembers>();

_staffmembers = _activityRepo.GetAllStaffMembers();

_staffmembers.Insert(0, new StaffMembers { DepartmentId = 0, StaffID = 0, FirstName = "Select" });

ViewBag.ListOfStaff = _staffmembers;

var _projectTypes = _activityRepo.GetStandardLookups(Constants.ProjectTypesLookupGroup);

ViewBag.ProjectTypes = _projectTypes;

var _projectStatusTypes = _activityRepo.GetStandardLookups(Constants.ProjectStatusLookupGroup);

ViewBag.ProjectStatusTypes = _projectStatusTypes;

SetupRadioButtons();

var acitivityList = GetAllActivityHeader();

return View(acitivityList);

}

public void SetupRadioButtons()

{

List<SelectListItem> items = new List<SelectListItem>();

Dictionary<string, string> dictionary = new Dictionary<string, string>();

dictionary.Add("Sop", "1");

dictionary.Add("Remote", "2");

dictionary.Add("OnSite", "3");

foreach (KeyValuePair<string, string> pair in dictionary)

{

items.Add(new SelectListItem() { Text = pair.Key, Value = pair.Value, Selected = false });

}

ViewBag.Location = new SelectList(items, "Value", "Text");

}

My Model of detail and lines

public class ActivityHeader

{

public int ActivityHeaderId { get; set; } //(int, null)

public DateTime? ActivityDate { get; set; } //(date, null)

public string Name { get; set; } //(nvarchar(350), null)

public DateTime? ActivityEndDate { get; set; } //(datetime, null)

public string ProblemDescription { get; set; }

public string Description { get; set; } //(nvarchar(max), null)

public int? ActivityLinesId { get; set; } //(int, null)

public int? HoursLeftOnProject { get; set; } //(time(7), null)

public int? Status { get; set; } //(nchar(10), null)

public DateTime? CreatedDate { get; set; } //(date, null)

public string CreatedBy { get; set; } //(nvarchar(50), null)

public bool? isActive { get; set; } //(bit, null)

public bool? isDeleted { get; set; } //(bit, null)

public bool? isArchived { get; set; } //(bit, null)

public int? SOP { get; set; } //(nvarchar(50), null)

public int? OnSite { get; set; }

public int? Remote { get; set; }

public int? DepartmentId { get; set; } //(int, null)

public string EmployeeName { get; set; } //(nvarchar(301), null)

[ForeignKey("StaffId")]

public int? StaffId { get; set; }

public virtual StaffMembers StaffMembers { get; set; }

public ICollection<ActivityLines> ActivityLines { get; set; }

}

As you see above activity lines is a ICollection of activity header All i want to be able to do is a simple crud on the lines within the popup.

public class ActivityLines

{

[Key]

public int ActivityLineId { get; set; } //(int, not null)

public int? ActivityHeaderId { get; set; } //(int, null)

public string Description { get; set; } //(nvarchar(max), null)

public string Notes { get; set; } //(nvarchar(max), null)

public DateTime? StartTime { get; set; } //(time(7), null)

public DateTime? EndTime { get; set; }

public DateTime? StartDate { get; set; }

public DateTime? EndDate { get; set; } //(time(7), null)

public int? StaffMemeber { get; set; } //(int, null)

public bool? isActive { get; set; } //(bit, null)

public bool? isDeleted { get; set; } //(bit, null)

public string CreatedBy { get; set; } //(nvarchar(50), null)

public DateTime? CreatedDate { get; set; } //(date, null)

public int? Status { get; set; } //(int, null)

}

Grid

answered on 13 Mar 2019

1 answer

115 views

Bootstrap Styled Dialog for Delete actions

Hi I managed to get most of my crud experience working but i cant believe that in 2019 we still have the boring javascript confirmation dialog for delete is their any way of making this look better at all.

Grid

answered on 13 Mar 2019

1 answer

459 views

Data-bind to Grid selected row.

I have grid and several textarea in a page. I want to bind the textarea “value” attribute to the gird's selected row(a column). when the gird change the selected row, the textarea value change. and change the text of textarea, the grid content change.

how can i get it.

I am trying to bind in grid change event, but when I change the textarea value, the selected row disappeared.

Grid

answered on 13 Mar 2019

8 answers

390 views

Kendo Keyboard Shortcut for "Update" button

Hi, not sure if anyone would know this, but when I hit "Add new Record" and I fill out the new record I'd like to hit CTRL+ENTER and it "insert" that record. Anyone have any idea how to do this? I looked on google but couldn't quite figure it out.

Grid

answered on 13 Mar 2019

10 answers

1.1K+ views

Editor template pass the id

How does one pass the id to the template so one can use it basically i want 0 for adding a record then obv the id value for eidting a record how does one acheive this when using a custom command editor for template.

Grid

answered on 12 Mar 2019

1 answer

122 views

Empty week

Hello. I am new at using Calendar for ASP.NET Core.
in my project every month has 6 weeks. And the last week in every month is empty. How can I delete this week?

Calendar

answered on 12 Mar 2019

5 answers

360 views

Datepicker taghelper

Im trying to do this as a taghelper

@(Html.Kendo().DatePickerFor(m => m.Pressefoto).Deferred())

With this

<kendo-datepicker name="Pressefoto" asp-for="Pressefoto" deferred="true" />

asp-for does not work, no value from model

and I need to specify name or I get a runtime error

Date/Time Pickers

answered on 12 Mar 2019

5 answers

209 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.9K+ 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

140 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