Questions on UI for ASP.NET Core Forum

1 answer

743 views

ASP.net Gridview RadioButton and CheckBox

I have GridView two column, 1 column is RadioButton and other is Checkbox,
I want based on RadioButton click in the same row checkbox should be checked or unchecked, in the following code if click radio button then all checkbox in the columns is checked.

Grid

answered on 27 Feb 2020

1 answer

124 views

Combobox Server Filtering

I'm doing Server Filtering on a combobox on selecting a school. School may have thousands of row. I have it working fine but when I go back into Edit mode I was to display the Template to the selected saved record. I have what should be displayed as well as the ID in the ViewModel. I tried Value and I tried do it in javascript but can't find a way.

@(Html.Kendo().ComboBox()
.Name("SchoolId")
.Placeholder("Select School")
.DataTextField("schoolName")
.DataValueField("schoolId")
.HtmlAttributes(new { @class = "form-control" })
.Filter(FilterType.Contains)
.AutoBind(false)
.MinLength(3)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetSchools", "User");
read.Type(HttpVerbs.Get);
})
.ServerFiltering(true);
})
.Template("#: data.schoolName # (#: data.schoolCity #, #: data.schoolState #)")
)

ComboBox

answered on 27 Feb 2020

4 answers

227 views

Unable to add comma in Kendo UI Grid Pagination values

Hello Every one,

I am using Kendo ui grid in .net core. I have facing one issue in this grid to add comma in paging value. Please review my attached file and let know what is the better solution for adding comma in paging value? Please help me and share code

thanks

General Discussions

answered on 27 Feb 2020

10 answers

642 views

Data from SignalR hub not visible in Grid

Hi!

I have a problem with SignalR and the Grid.

I have a hub like this:

01.public class ACTaskHub : Hub

02.{

03. private IMemoryCache taskCache;

04.

05. public ACTaskHub(IMemoryCache cache)

06. {

07. taskCache = cache;

08. }

09.

10. public override Task OnConnectedAsync()

11. {

12. //Groups.AddToGroupAsync(Context.ConnectionId, GetGroupName());

13. return base.OnConnectedAsync();

14. }

15.

16. public override Task OnDisconnectedAsync(Exception exception)

17. {

18. //Groups.RemoveFromGroupAsync(Context.ConnectionId, GetGroupName());

19. return base.OnDisconnectedAsync(exception);

20. }

21.

22. public IEnumerable<TaskViewModel> Read()

23. {

24. var tasks = taskCache.Get("tasks") as IEnumerable<TaskViewModel>;

25.

26. if (tasks == null)

27. {

28. var products = AppData.TaskList.Select(t => new TaskViewModel

29. {

30. ID = t.ID,

31. Name = t.Name,

32. LastRunTime = t.LastRunTime,

33. Duration = t.Duration,

34. Schedule = t.Schedule,

35. Status = t.Status.ToString(),

36. Result = t.LastResult,

37. Exception = t.Exception?.Message,

38. CreatedAt = DateTime.Now.AddMilliseconds(1)

39. });

40.

41. tasks = products.ToList();

42. taskCache.Set("tasks", tasks, TimeSpan.FromMinutes(30));

43. }

44.

45. return tasks;

46. }

47.

48. public TaskViewModel Create(TaskViewModel task)

49. {

50. //task.ID = Guid.NewGuid();

51. //product.CreatedAt = DateTime.Now;

52. //product.Category = product.Category ?? new CategorySignalR() { CategoryID = 1 };

53.

54. //Clients.OthersInGroup(GetGroupName()).SendAsync("create", task);

55. Clients.Others.SendAsync("create", task);

56.

57. return task;

58. }

59.

60. public void Update(TaskViewModel task)

61. {

62. //Clients.OthersInGroup(GetGroupName()).SendAsync("update", task);

63. Clients.Others.SendAsync("update", task);

64. }

65.

66. public void Destroy(TaskViewModel task)

67. {

68. //Clients.OthersInGroup(GetGroupName()).SendAsync("destroy", task);

69. Clients.Others.SendAsync("destroy", task);

70. }

71.

72. //public string GetGroupName()

73. //{

74. // return GetRemoteIpAddress();

75. //}

76.

77. //public string GetRemoteIpAddress()

78. //{

79. // return Context.GetHttpContext()?.Connection.RemoteIpAddress.ToString();

80. //}

81.}

And i use Kendo Grid with SignalR datasource to show the hub data like this:

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

.Name("TaskList")

.Columns(columns =>

{

columns.Bound(t => t.Name).Width(140);

columns.Bound(t => t.LastRunTime).Format("{0:yyyy-MM-dd hh:mm:ss}").Width(150);

columns.Bound(t => t.Duration).HtmlAttributes(new { style = "text-align:right" }).Width(130);

columns.Bound(t => t.Schedule).Width(100);

columns.Bound(t => t.Status).Width(80);

columns.Bound(t => t.Result).Filterable(false).Width(250);

columns.Bound(t => t.Exception).Filterable(false).Width(150);

})

.Sortable()

.Scrollable()

.Filterable()

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

.HtmlAttributes(new { style = "maxheight:530px;" })

.DataSource(dataSource => dataSource

.SignalR()

.AutoSync(true)

.Events(events => events.Push("onPush"))

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

.Sort(s => s.Add("CreatedAt").Descending())

.Transport(tr => tr

.Promise("hubStart")

.Hub("hub")

.Client(c => c

.Read("read")

.Create("create")

.Destroy("destroy")

.Update("update"))

.Server(s => s

.Read("read")

.Create("create")

.Destroy("destroy")

.Update("update")))

.Schema(schema => schema

.Model(model =>

{

model.Id("ID");

model.Field("ID", typeof(string)).Editable(false);

model.Field("CreatedAt", typeof(DateTime)).Editable(false);

model.Field("Name", typeof(string)).Editable(false);

model.Field("LastRunTime", typeof(DateTime)).Editable(false);

model.Field("Duration", typeof(TimeSpan)).Editable(false);

model.Field("Schedule", typeof(string)).Editable(false);

model.Field("Status", typeof(string)).Editable(false);

model.Field("Result", typeof(string)).Editable(false);

model.Field("Exception", typeof(string)).Editable(false);

})

)

The hub is connected and the data are loaded, but not visible in the grid. I can see the like of my task in the grid because of mouse hovering but the fields are empty. (see screenshot1.png)

The secound problem i have is, that when the data is updated from server the client want to invoke "create" method. Why is the client doing this?

I get this error message: (see screenshot2.png)

And why is the ASP.NET Core Grid SignalR demo not working: https://demos.telerik.com/aspnet-core/grid/signalr

Grid

answered on 27 Feb 2020

4 answers

726 views

Using data annotations when dynamic specifying data model

I'm trying to populate a grid dynamically as I have a number of different report data models that need to be displayed in the grid depending on user selection.

Each data model inherits from a common interface, and I'm passing an `IEnumerable` of that interface through to the view.

Generally this works, and the data is displayed, however, the `DisplayAttribute` of the source model is ignored.

If I supply an `IEnumerable` of the model itself, this works, however, as the view needs to support dynamically specified models, I cannot do this.

I have tried the `LoadSettings` method shown in the grid demo, however, I get an error because the `Member` property specified cannot be found on the interface.

How can I dynamically specify the model to use and have the grid honour the data annotations of the model?

Grid

answered on 26 Feb 2020

3 answers

107 views

Difficulty finding documentation

I'm trying to find detailed documentation on (for example) grid options, and I cannot seem to find what I'm after.

Take for example details on configuring filtering.

I'm aware of the demos (https://demos.telerik.com/aspnet-core/grid/filter-row) that show examples of *some* uses of *some* of the options, but don't describe in detail what parameters can be passed to the methods, etc.

There's a documentation link (https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/overview) right down the bottom of the page that seems to lead to more detailed documentation, however, if I want to get more details on filtering, I click on "filtering" and end up on a page that redirects me back to the demos (https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/filtering).

If I click the inconspicuous "Server-Side API" link (https://docs.telerik.com/aspnet-core/api/grid) in the "Related Articles" section, I feel like I'm getting a bit closer, however, I want to see what options can be passed to `Filterable(System.Action<Kendo.Mvc.UI.Fluent.GridFilterableSettingsBuilder>)`

No doco there, just an example. So I click on the non-obvious link "Kendo.Mvc.UI.Fluent.GridFilterableSettingsBuilder" (https://docs.telerik.com/aspnet-core/api/Kendo.Mvc.UI.Fluent/GridFilterableSettingsBuilder) which I wouldn't have known was a link unless I happened to hover over it, which takes me to a basically blank page, that just says "Defines the fluent interface for configuring Filterable."

Am I missing something?

General Discussions

answered on 26 Feb 2020

6 answers

328 views

A href on grid not working.

Hi,

I needed to make link click work on my grid that will show my custom modal. Tried code below but I cant seem to make it work. Any ideas on making this work?

Thanks in advance.

columns.Bound(column => column.Email).Filterable(ftb => ftb.Multi(true).Search(true)).ClientTemplate("#= userDetails(data) #")

</script>

Grid

answered on 26 Feb 2020

2 answers

1.3K+ views

Template for columns.Command?

Is there a template for columns.Command(command => command.Custom(template).Click("showDetails")).Width(45);

I want to show button with Icon instead of text.

Thanks

Grid

answered on 26 Feb 2020

1 answer

132 views

Filter Time Column

I have separated a timestamp in my model so that I can get a good filtering experience in the grid. However, the filtering mechanism for the Time column remains the calendar. How do I set this to filter using a time picker? Also, as defined I expected there to be no filter for the Time column. But, there is one. How do I turn off the filter of this column if it shows even with no definition?

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

.Name("grid")

.Columns(columns =>

{

columns.Command(command => command

.Custom("Detail")

.Click("goDetail"))

.Width(Glossary.Portal.ButtonWidth);

columns.Bound(p => p.Device.Name).Title("Device")

.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")

.ShowOperators(false)

.SuggestionOperator(FilterType.Contains)));

columns.Bound(p => p.Date).Title("Date").Format("{0:MM/dd/yyyy}")

.Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")

.ShowOperators(false)));

columns.Bound(p => p.Time).Title("Time").Format("{0:hh:dd:mm tt}");

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

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

.Selectable()

.Navigatable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

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

.Data("getData"))))

<script>

function getData() {

return @Html.Raw(Model.GetIndexData());

}

function goDetail(e) {

e.preventDefault();

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

var url = '@Url.Action("Details", "Sessions")?id=' + dataItem.Id + '@Model.GetUrlParameters()';

// Replace & with & as the above encoding step changes & to &.

window.location.href = url.replace(/&/g, "&");

}

function error_handler(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);

}

</script>

Grid

answered on 26 Feb 2020

3 answers

576 views

Search ToolBar Only Showing Search Button

@(Html.Kendo().Grid(Model)

.Name("GridOrders")

.Columns(columns =>

{

columns.Bound(p => p.Barcode).ClientTemplate("<a href=

'https://fisherbioservicesdev.platformforscience.com/sprint2demo/corelims?cmd=get-barcode&headerBarcode=#=Barcode#&headerEntityType=0'

target=_blank>#=Barcode#</a>"); ;

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

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

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

columns.Bound(p => p.FBS_KITREQUEST_DATEREQUESTED).ClientTemplate("#= FBS_KITREQUEST_DATEREQUESTED? kendo.toString(kendo.parseDate(FBS_KITREQUEST_DATEREQUESTED, 'yyyy-MM-ddTHH:mm:ssZ'), 'MM/dd/yyyy'): '' #");

columns.Command(command => command.Custom("Details").Click("detailsRedirect")).Width(150);

})

.ToolBar(t => t.Search())

.Pageable()

.Navigatable()

.Sortable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.PageSize(20)

.ServerOperation(false)