Questions on UI for ASP.NET MVC Forum

1 answer

405 views

How Do I Bind TreeView To Stored Procedure Through Entity Model Framework

Hello, I have a stored procedure which has the both the parent Key/Id and Text/Name fields along with the child Key/Id and Text/Name fields. For example here are rows from sample table

Parent_Key_Id Parent_Text_Name Child_Key_Id Child_Text_Name

================================================================

1 Red 1 A

1 Red 2 B

1 Red 3 C

2 Green 4 D

2 Green 5 E

and I would like the tree view to look like the following if all nodes were expanded:

Red

A

B

C

Green

D

E

I've been trying to follow the demos in:

https://docs.telerik.com/aspnet-mvc/helpers/navigation/treeview/how-to/expand-node-async

https://demos.telerik.com/aspnet-mvc/treeview/remote-data-binding

and the ExpandSelectedItemAsync solution available on your git repository, but I have not seen a good example of what I'm trying to do. I cannot bind to the tables directly because the two tables in the stored procedure are several joins away in entity model and I only want these two items. I want the child items to load only when the parent is expanded. Can someone please provide a complete and detailed example of how to accomplish this?

TreeView

answered on 18 Oct 2019

7 answers

395 views

Grid with SignalR binding and server operations

Hi.

I have a grid bound to SignalR. To be able to use server side operations I use the Kendo.DynamicLinq lib. Fitlering works fine. Aggregates don't.

Problem is: My aggregates field is always null.

My data source request class:

using Kendo.DynamicLinq;

using System.Collections.Generic;

namespace idee5.Dispatcher.Models {

public class CalendarEventGridDataSourceRequest : DataSourceRequest {

public IEnumerable<int> Workplaces { get; set; }

// these are missing in the Kendo Dlinq class

// taken from http://www.telerik.com/forums/problems-with-grid-using-signalr-and-serverfiltering-sorting-and-paging#l1juxVjyvkye5eSO6Z9TrA

public int PageSize { get; set; }

public IEnumerable<Aggregator> Aggregates { get; set; }

}

I took the field names from this post and it's attached soltuion.

The hub method to tetrieve the data:

01.public async Task<DataSourceResult> OperationEvents(CalendarEventGridDataSourceRequest request) {

02. // workaround for ArgumentNullException in ToDataSourceResult

03. if (request.Filter != null && request.Filter.Filters.Count() == 0 && request.Filter.Field == null) request.Filter = null;

04.

05. // SignalR has no session, so get the preferences from the preference service

06. string userId = Context.User.Identity.GetUserId();

07. PreferenceProfile activeProfile = await Task.Run(() => _userSettingService.ReadActiveProfile(userId));

08. IQueryable<CalendarEvent> result = await _schedulerService.OperationEventsAsync(activeProfile);

09.

10. IEnumerable<int> workplaces = request.Workplaces ?? new List<int>();

11.

DataSourceResult retVal = result.Where(ce => ce.Operation.AllowedWorkplaces.Count(awp => workplaces.Contains(awp.WorkplaceId ?? 0)) > 0)

12. .ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter, request.Aggregates);

13. // Late view model creation.

14.

// Kendo.DynamicLinq adds the filters at the end which hits the database for view model creation before filters get applied

15. retVal.Data = retVal.Data.OfType<CalendarEvent>().Select((ce) => _mapper.Map<CalendarEventViewModel>(ce)).ToList();

16. return retVal;

17.}

What is needed to have a signalr bound grid with server filtering, sorting and grouping/aggregation?

Kind regards

Bernd

Grid

answered on 18 Oct 2019

1 answer

987 views

Grid Columns Command Edit().Template How to pass data item

Hello,

I'm trying to add a custom edit button with dataitem information to grid because I need to check each row property value "Permission" to show the button or not.

I built this code (each comment // Line # identifies one test):

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

#if(data.Permission >= 3) {#

<a class="k-button k-grid-edit">Edit</a>

#}#

</script>

<script type="text/javascript">

var actionButtonsTemplate = kendo.template($('#grid-button-edit-template').html());

</script>

@(Html.Kendo().Grid<MyModel>()

.Name("GridName")

.Columns(columns =>

{

columns.Command(c =>

{

// Line #1

c.Edit().TemplateId("grid-button-edit-template");

// Line #2

c.Edit().Template("#=actionButtonsTemplate(data)#");

// Line #3

c.Edit().Template("grid-button-edit-template");

});

// Line #4

columns.Template("#=actionButtonsTemplate(data)#");

})

...

)

I have a couple of issues:

In Line #4 everything is Ok but

- When I set edition InLine the buttons [Save] & [Cancel] don't appear

- On edition PopUp I can't set [Save] & [Cancel] text values (Like I do with c.Edit().UpdateText("My Text Update"))

Lines #1, #2, #3 don't work, I can't pass the dataitem information to the template.

Which one is the best approach? How I can solve the issues?

Regards,

Ivan

Grid

answered on 18 Oct 2019

3 answers

84 views

No results if too many items

I have a MultiColumnComboBox that works as expected unless the search returns more than a certain number of items. I'm not sure what the limit is, if I get 1500 results, it displays fine, but 5000 results and it is as if nothing matched and I get no items in the combo.

Is this a configurable setting, and is there a way to throw up a message saying something like "too many results, refine your search"?

MultiColumnComboBox

answered on 17 Oct 2019

1 answer

203 views

Gantt - Cant see SampleEntities, GanttTaskService .

First of all, I'm sorry for my bad English.
The company I worked with asked me to create a Telerik mvc gantt demo.

It can be one of 2 gantt samples.

https://demos.telerik.com/aspnet-ajax/gantt/examples/overview/defaultcs.aspx

https://demos.telerik.com/aspnet-mvc/gantt

I downloaded the Telerik Demo and couldn't see these examples. I wanted to add, but I could not add error.

Can you help me ?

Thanks.

Gantt

answered on 16 Oct 2019

3 answers

112 views

Show tags without delete option

I have a multi-select widget showing check-boxes, on a page, controlling a grid filter. The requirement is to allow multiple selections before the filter is applied. I've done this by applying the filter on the close event, and setting autoclose to false.

This works, but I would like to display all the selected items, but not any to be deleted, except by opening the control up, and unchecking the boxes.

How can I show multiple tags, but remove the delete icon from them? I've tried a tag template, but the icon still shows.

Thanks

MultiSelect

answered on 15 Oct 2019

2 answers

70 views

Customserverbinding Groupable Statistics Problem

Grid Custom Server Binding Data

Group statistics have no data ，ClientGroupHeaderTemplate() do not work；

GroupHeaderTemplate(g=>g.Count)，g.Count is Null

Custom Server Binding the way How to implement group statistics？

Examples Code：

@model System.Collections.IEnumerable
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.Order>()
.Name("Grid")
.EnableCustomBinding(true)
.BindTo(Model)
.Columns(columns => {
columns.Bound(o => o.OrderID).Groupable(false);
columns.Bound(o => o.ShipCity).GroupHeaderTemplate(g=>g.Count);
columns.Bound(o => o.ShipCountry).ClientGroupHeaderTemplate("ShipCountry: #= value # (Count: #= count#)");
columns.Bound(o => o.ShipName);
})
.Pageable()
.Sortable()
.Filterable()
.Scrollable()
.Groupable()
.DataSource(dataSource =>dataSource
.Server()
.Total((int)ViewData["total"])
.Aggregates(aggregates =>
{
aggregates.Add(p => p.ShipCountry).Count();
}
)
)
)

Grid

answered on 15 Oct 2019

1 answer

119 views

Clickable but not selectable

Hi, I would like for the listview items to be clickable but not selectable. By that I mean that a user can click on one, and the OnChange event to occur. However, I do not want the item to take on the "selected" styles. I would like the styles to remain the same as an unselected item. How might I accomplish this?

Thanks!

ListView

answered on 15 Oct 2019

10 answers

627 views

Grid popup edit template with dropdownlist with no FK

Hi Guys

I have a grid with popup edit template with a dropdownlist that has to be populated based on a column value from the grid which is not the FK one.

My problem is that the model is empty at the time of populating the dropdown. Could you please help me how to achieve this?

here is the edit template:

@using PartnerLink.Models

@model AssignmentDocTypesExt

@{

Layout = "~/Views/Shared/_EmptyLayout.cshtml";

ViewBag.Title = "Customer Document - "+Model.documentDescription;

var currentUserId = ((TBL_USER)(ViewBag.LoggedUser)).USER_ID;

bool isAdmin = ((TBL_USER)(ViewBag.LoggedUser)).LEAD_PROVIDER_ID == null;

EntitiesModel entities = new EntitiesModel();

var DocumentStatusList = entities.TBL_DOCUMENT_TYPE_Status

.Where(d => !d.OUT_OF_USE && d.DOCUMENT_TYPE_ID == Model.DOCUMENT_TYPE_ID)

.Select(d => new

{

d.DOCUMENT_TYPE_STATUS_ID,

d.DOCUMENT_TYPE_STATUS_DESCRIPTION

}

).ToList();

}

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

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

<div class="grid-popup">

@Html.LabelFor(m=>m.DOCUMENT_TYPE_STATUS_ID,"Type Status")

@Html.Kendo().DropDownListFor(m => m.DOCUMENT_TYPE_STATUS_ID).Name("DOCUMENT_TYPE_STATUS_ID").BindTo(DocumentStatusList).DataValueField("DOCUMENT_TYPE_STATUS_ID").DataTextField("DOCUMENT_TYPE_STATUS_DESCRIPTION")

<br />

@Html.Kendo().CheckBoxFor(m => m.COMPLETE_FLAG).Name("COMPLETE_FLAG").Label("Complete")

</div>

<br />

<div class="grid-popup">

@(Html.Kendo().Upload()

.Name("files")

.Messages(m => m.Select("Select File"))

.Async(a => a

.Save("ClientDocUpload", "Home")

.AutoUpload(true)

)

.Files(files =>

{

var fs = new List<CreditCheckFileToParse>();

foreach (var f in fs)

{

files.Add().Name(f.Name).Extension(f.Extension).Size(f.Size);

}

})

.Events(c => c

.Success(@<text>

function() {

$(".k-grid-update").trigger('click');

}

</text>)

.Error(@<text>

function() {

alert("File Upload Failed");

}

</text>)

.Upload(@<text>

function(e) {

e.data = { id: $("#ASSIGNMENT_DOCUMENT_TYPE_ID").val() };

}

</text>)

)

</div>

<script>

function onSuccessfilesClientDocs(e)

{

$(".k-grid-update").trigger('click');

}

function onErrorfilesClientDocs(e) {

alert("Failed to upload file");

}

</script>

here is the main grid:

@using PartnerLink.Models

@using Telerik.OpenAccess.SPI

@model Tuple<TBL_ASSIGNMENT, IQueryable<TBL_ASSIGNMENT_EXPENDITURE_VALUE>, IQueryable<TBL_ASSIGNMENT_INCOME_VALUE>, IQueryable<TBL_ASSIGNMENT_VEHICLE>>

<div style="height:500px">

@(Html.Kendo().Grid<AssignmentDocTypesExt>()

.Name("gridCaseDocuments")

.Columns(columns =>

{

columns.Bound(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID).Hidden(true);

columns.Bound(p => p.ASSIGNMENT_ID).Hidden(true);

columns.Bound(p => p.DOCUMENT_TYPE_ID).Hidden(true);

columns.Bound(p => p.WHICH_APPLICANT).Hidden(true);

columns.Bound(p => p.DOCUMENT_TYPE_STATUS_ID).Hidden(true);

columns.Bound(p => p.CREDITOR_ID).Hidden(true);

columns.Bound(p => p.numOfUploadedFiles).Hidden(true);

columns.Bound(p => p.documentDescription).Title("Document").Width(350);

columns.Bound(p => p.whichApplicant).Title("Applicant").Width(100);

columns.Bound(p => p.documentTypeStatusDescription).Title("Type Status").Width(200);

columns.Bound(p => p.COMPLETE_FLAG).Title("Complete").ClientTemplate("<input type='checkbox' #= COMPLETE_FLAG ? checked='checked' :'' # disabled />").Width(90);

columns.Bound(p => p.autoCompleteOnUpload).Title("Auto Complete").ClientTemplate("<input type='checkbox' #= autoCompleteOnUpload ? checked='checked' :'' # disabled />").Hidden(true);

columns.Command(command => { command.Edit().Text("Upload"); }).Width(230);

})

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ClientDocumentUpload").Window(w => w.Events(e => e.Close("onCloseClientDocumentUpload"))))

.Sortable()

.Scrollable()

.ClientDetailTemplateId("gridCaseDocumentsDetails")

.Pageable(pager => pager.Refresh(true))

.Resizable(resize => resize.Columns(true))

.HtmlAttributes(new { style = "height:500px;" })

.Events(clientEvents => clientEvents.DataBound("onRowDataBoundgridCaseDocuments"))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

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

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

.Read(read => read.Action("CaseDocuments_Read", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))

.Update(update => update.Action("CaseDocuments_Update", "Home"))

)

</div>

<script id="gridCaseDocumentsDetails" type="text/kendo-tmpl">

@(Html.Kendo().Grid<ClientDocumentsExt>()

.Name("gridCaseDocuments_#=ASSIGNMENT_DOCUMENT_TYPE_ID#")

.Columns(columns =>

{

columns.Bound(m=>m.ASSIGNMENT_DOCUMENT_ID).Hidden(true);

columns.Bound(m => m.FILE_NAME).Title("File Name");

columns.Bound(m => m.uploadedBy).Title("Uploaded By").Width(210);

columns.Bound(m => m.DATE_CREATED).Title("Upload Date").Format("{0:dd/MM/yyyy}").Width(110);

columns.Command(c => c.Custom("Download").Click("onClickDownloadClientDoc")).Width(110);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

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

.Read(read => read.Action("gridCaseDocumentsDetails_Read", "Home", new { id = "#=ASSIGNMENT_DOCUMENT_TYPE_ID#" }))

)

.Pageable(pager => pager.Refresh(true))

.Sortable()

.Scrollable()

.ToClientTemplate()

)

</script>

<script type="text/javascript">

function error_handlerCaseDocuments(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

$("#gridCaseDocuments").find(".k-grid-content").height(421);

function onClickDownloadClientDoc(e)

{

alert(e.ASSIGNMENT_DOCUMENT_ID);

}

function onRowDataBoundgridCaseDocuments(e) {

var grid = $("#gridCaseDocuments").data("kendoGrid");

var gridData = grid.dataSource.view();

for (var i = 0; i < gridData.length; i++) {

var currentUid = gridData[i].uid;

if (gridData[i].COMPLETE_FLAG) {

var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");

$(currenRow).css("background-color", "rgb(164,198,57)");

} else if (gridData[i].numOfUploadedFiles > 0)

{

var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");

$(currenRow).css("background-color", "rgb(255,191,0)");

}

function onCloseClientDocumentUpload()

{

alert("onCloseClientDocumentUpload");

}

</script>

Grid

answered on 11 Oct 2019

2 answers

903 views

MVC Readonly property

The readonly property from MVC only appears to be available on the Switch control. I have reviewed the TextBox flavors, Combobox, dropdownlist, and MultiSelect, I required to control the readonly property from Javascript.

I was looking for the product feedback/suggestion area, as I think this should be posted there.

FYI

General Discussions

answered on 11 Oct 2019