Telerik Forums
UI for ASP.NET Core Forum
4 answers
273 views
I want to use the calendar to display multiple dates that have an event occurrence but I do not want the user to be able to select any dates.  Is there a way to make the calendar read only or disabled?
Mihaela
Telerik team
 answered on 16 Apr 2021
7 answers
643 views

Hi there,

I'm having an issue getting the grid with client detail template to work.

<div class="row mt-3 mb-2">
    <div class="form-group col-md-12 ">
        @(Html.Kendo().Grid(Model)
            .Name("ConditionAssessmentGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.ConditionAssessmentYear);
                columns.Bound(p => p.ConditionAssessmentId).Title("Actions").Width(100)
                    .ClientTemplate("<div class='btn-group grid-commands' role='group'>" +
                        "<a href='/Sites/ConditionAssessment/ConditionAssessment/Summary/#=ConditionAssessmentId#' class='btn btn-primary btn-sm mr-2'><i class='fas fa-eye'></i> View</a>");
            })
            .Sortable()
            .ClientDetailTemplateId("conditionassessmentemplate")
            .NoRecords(n => n.Template("<span class='mt-3 mb-3 col-md-12 text-left'>No data exists</span>"))
            .Pageable(p => p.Enabled(false))
            .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
            )
        )
 
        @Html.AntiForgeryToken()
 
        <script id="conditionassessmentemplate" type="text/kendo-tmpl">
 
            @(Html.Kendo().Grid<ProtectedSites.ViewModel.ConditionAssessment.ConditionAssessmentGridViewModel>()
                 .Name("grid_#=ConditionAssessmentId#")
                 .Columns(columns =>
                 {
                     columns.Bound(p => p.FeatureInstance.FeatureName).Title("Feature");
                     columns.Bound(p => p.DateCreated).Title("Date created").Format("{0:dd/MM/yyyy}");
                     columns.Bound(p => p.CreatedUser).Title("Created by");
                     columns.Bound(p => p.LatestMonitoringDate).Format("{0:dd/MM/yyyy}").Title("Latest monitoring date");
                     columns.Bound(p => p.LatestMonitoringLevelOneResult).Title("Condition assessment 1");
                     columns.Bound(p => p.LatestMonitoringLevelTwoResult).Title("Condition assessment 2");
                 })
                 .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(5)
                    .Read(read => read.Action("GetFeatureInstances", "ConditionAssessment", new { siteid = ViewContext.RouteData.Values["SiteId"], conditionAssessmentId = "#=ConditionAssessmentId#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate()
            )
        </script>
 
    </div>
</div>

 

My Parent grid model and child grid model both have a property named ConditionAssessmentId. However, when expanding the detail template, the read action always fails with the following error:

Uncaught ReferenceError: conditionassessmentid is not defined
    at Object.eval [as tmpl0] (eval at compile (kendo.all.js:234), <anonymous>:3:1645)
    at Object.eval (eval at compile (kendo.all.js:234), <anonymous>:3:185)
    at proxy (jquery.js:10771)
    at init._toggleDetails (kendo.all.js:69238)
    at HTMLAnchorElement.<anonymous> (kendo.all.js:69226)
    at HTMLTableElement.dispatch (jquery.js:5429)
    at HTMLTableElement.elemData.handle (jquery.js:5233)

 

I do note that it does correctly resolve the same binding expression in the Name property of the child grid, just not for the Read event.

Am I doing something obvious wrong here? I've referred to your DetailTemplate example and can't see anything I am doing differently.

Thanks,

Paul

Georgi Denchev
Telerik team
 answered on 15 Apr 2021
2 answers
433 views

When using clasic ASP.NET Core approach user can define custom editor template like this:

f.Add(p=>p.CategoryID).Label("Category").DefaultValue(1).EditorTemplateHandler("categoryDropDownEditor");
function categoryDropDownEditor(container, options) {
        $('<input data-bind="value: value" name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataTextField: "CategoryName",
                dataValueField: "CategoryID",
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                    }
                }
            });
    }

 

Is this possible to achieve using Tag helpers and is there any way to pass the parameter/s to the categoryDropDownEditor function?

Dubravko
Top achievements
Rank 1
 answered on 13 Apr 2021
3 answers
343 views

Hello,

I have multiple grids inside Panelbar, for some reason filter popup window doesn't show up in the usual place (below filter icon) but right in the middle or in extreme cases even at the top of the window.

Thanks.

Tsvetomir
Telerik team
 answered on 13 Apr 2021
1 answer
116 views

Dear,

I want to Add dynamic & cascade dropdown in filter control in .NET CORE but current it allows only one dropdown in Filter Field. 

Below is the screen shot attached "Payout Rule - 6.png" what actually I want to achieve. Is there any way to customize this control in .NET CORE so kindly share. 

Tsvetomir
Telerik team
 answered on 13 Apr 2021
5 answers
1.6K+ views

Hello,

 

I've done some searching  and can't find an example of this, so I'm asking here...

I have a grid that I'm using as part of a process to build a parent with child objects.  Think Order (as the parent) and Products (as the children).  Each parent has one or more children.

 

I create the parent object, and then 'Add' children to it, one at a time.  This part works great.

I would like to be able to upload a file as part of the process or creating a child.  I only need to upload one file at a time, and only when I create the child.  

I'm using Asp.Net core 2.0, with Telerik UI version 2017.3.1206.

 

I don't have a small project to demonstrate this; I could build one if I needed to, but it would take a bit.  I'm  just hoping for some pointers to documentation, or examples.  

 

Thanks!

Phil

Eyup
Telerik team
 answered on 12 Apr 2021
6 answers
141 views

What is the proper location to post issues with the on demand courses?
Looking at the Telerik UI for ASP.NET Core course, comments are rarely responded to.

I'm trying to work through it but encountered an issue and can't really proceed with the course.  Made a comment but I'm not sure anyone is really looking at them.

Based on dates displayed in the examples, the course was recorded in 2019 so I'm sure a number of changes have taken place since then.

 

Thanks,

Ivan Danchev
Telerik team
 answered on 09 Apr 2021
1 answer
115 views
I am trying to setup a simple grid with 4 fields and endless scrolling connected to a local data source(model) but it is not working
is there any demo or example that I can follow?
Martin
Telerik team
 answered on 08 Apr 2021
6 answers
836 views

Here is the scenario:  I have a grid that is set to GridEditMode.InCell and Batch=true.  I can make changes to up to 15 records in the grid, click save and the data posts back to the controller without issue.  However, if I update greater than 15 records and click save, the postback to the controller works but the data is null.  

I hope that this isn't a product limitation and I've verified that data being posted back is less than the limit of Json serializer.   

A few caveats to my issue:  

1. We have purchased the licensed version, but have not gone through internal channels to actually access the licensed version so I am still using the trial version.  Is it possible that the trial version has a limitation like this?

2. The grid is a nested hierarchical grid and the data being updated is nested 3 deep.

3. While the grid doesn't display all the data, each record being posted back contains a nested json object (see example of data below).  Because of configurable business requirements, the structure cannot be flat.

Any help would be appreciated. Specifically, knowing the save/update method in kendo code that is being called for batch saves with InCell mode.

Here is my grid (higher level nesting is omitted for simplicity):

<script id="agents" type="text/kendo-tmpl">
@(Html.Kendo().Grid<TLCAgentSchedulerShared.Models.AgentDailyScheduleModel>
    ()
    .Name("agent_#=Id#")
    .Columns(columns =>
    {
        //columns.Command(command => { command.Destroy().Text(" "); }).Width(50);
        columns.Command(command => { command.Destroy().Template("<button type='button' onclick='removeAgent(this, setCoEId())' class='btn btn-danger btn-xs'><span class='glyphicon glyphicon-remove' title='Delete'>X</span></button>").Text(" "); }).Width(50);
        columns.Bound(b => b.FullName).Width(100).Title("Agent");
        columns.Bound(b => b.Supervisor).Width(100).Title("Supervisor");
        columns.Bound(b => b.TimeSlot).Width(50).Title("Schedule");
        columns.Bound(b => b.AgentAssignments[0].IsAssigned).Width(70).Title("6:30AM - 8:30AM").EditorTemplateName("Boolean")
        .ClientTemplate(@"<input type='checkbox' \\#: AgentAssignments[0].IsAssigned ? checked='checked' : '' \\# />");
        columns.Bound(b => b.AgentAssignments[1].IsAssigned).Width(70).Title("8:30AM - 3:00PM").EditorTemplateName("Boolean")
        .ClientTemplate(@"<input type='checkbox' \\#: AgentAssignments[1].IsAssigned ? checked='checked' : '' \\# />");
        columns.Bound(b => b.AgentAssignments[2].IsAssigned).Width(70).Title("3:00PM - 5:00PM").EditorTemplateName("Boolean")
        .ClientTemplate(@"<input type='checkbox' \\#: AgentAssignments[2].IsAssigned ? checked='checked' : '' \\# />");
        columns.Bound(b => b.AgentAssignments[3].IsAssigned).Width(70).Title("5:00PM - 7:30PM").EditorTemplateName("Boolean")
        .ClientTemplate(@"<input type='checkbox' \\#: AgentAssignments[3].IsAssigned ? checked='checked' : '' \\# />");
 
        columns.Bound(b => b.AgentAssignments[0].Comments).Title("Comments").Width(195);
 
    })
    .DataSource(dataSource => dataSource
    .Ajax()
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.UserProfileId))
    .Batch(true)
    .Read(read => read.Action("GetDefaultAgentsByPod", "Grid").Data("setDayOfWeek(#=Id#)"))
    .Update(update => update.Action("UpdateDefaultAgentsInPod", "Grid")).Events(events => events.Change("change_handler"))
    //.Destroy(destroy => destroy.Action("RemoveDefaultAgentsInPod", "Grid").Data("setCoEId()")).Events(events => events.Change("change_handler"))
    )
    //.Pageable()
    .HtmlAttributes(new { @class = "agentGrid" })
    .ToolBar(toolbar =>
    {
        toolbar.Save();
        toolbar.Custom().Text("Assign a New Agent").HtmlAttributes(new { onclick = "assignAgent(#=Id#)" });
 
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
 
    .Sortable()
    .ToClientTemplate()
    )
</script>

 

Here is my controller that works fine when less than 15 records have been updated (some security logic has been omitted to avoid potential confidentiality issues), but the key is that both the request object and the agents object are fully populated when less than 15 records:

[HttpPost]
        public async Task<ActionResult> UpdateDefaultAgentsInPod([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<AgentDailyScheduleModel> agents)
        {
//Convert incoming to json
                        string jsonData = JsonConvert.SerializeObject(agents);
            using (var client = new HttpClient())
            {
                using (var response = await client.PostAsync(String.Format("{0}agent/UpdateDefaultAssignmentsByPod/", _baseApiUrl),
                    new StringContent(jsonData, Encoding.UTF8, "application/json")))
                {
                    string apiResponse = await response.Content.ReadAsStringAsync();
                    var result = JsonConvert.DeserializeObject<ApiResponse<List<AgentDailyScheduleModel>>>(apiResponse);
                    if (result.IsValid)
                    {
                        agentList = result.ResponseData;
                    }
                    else
                    {
                        return BadRequest(String.Format("There was an error proccessing your request. Message: {0}", result.ResponseMessage));
                    }
                }
            }
            var dsResult = agentList.ToDataSourceResult(request);
            return Json(dsResult);
}

 

Here is what 1 record of data looks like:

[{
    "UserProfileId": 150,
    "NtLogin": "xxxx",
    "FullName": "xxxx",
    "Supervisor": null,
    "TimeSlot": "7:30-19:00",
    "AgentAssignments": [{
            "PodId": 2,
            "PodName": "PODFREpat",
            "DailyAssignmentId": 9070,
            "AgentDefaultScheduleId": 12699,
            "BlockId": 1,
            "IsScheduled": true,
            "IsAssigned": true,
            "IsDefault": true,
            "Date": null,
            "IsBlockFullyScheduled": false,
            "Comments": null,
            "CreatedBy": null,
            "UpdatedBy": null,
            "CreatedOn": "0001-01-01T00:00:00",
            "UpdatedOn": "0001-01-01T00:00:00"
        },
        {
            "PodId": 2,
            "PodName": "PODFRE-pat",
            "DailyAssignmentId": 9071,
            "AgentDefaultScheduleId": 12724,
            "BlockId": 2,
            "IsScheduled": true,
            "IsAssigned": true,
            "IsDefault": true,
            "Date": null,
            "IsBlockFullyScheduled": true,
            "Comments": null,
            "CreatedBy": null,
            "UpdatedBy": null,
            "CreatedOn": "0001-01-01T00:00:00",
            "UpdatedOn": "0001-01-01T00:00:00"
        }, {
            "PodId": 2,
            "PodName": "POD FRE-pat",
            "DailyAssignmentId": 9072,
            "AgentDefaultScheduleId": 12723,
            "BlockId": 3,
            "IsScheduled": true,
            "IsAssigned": true,
            "IsDefault": true,
            "Date": null,
            "IsBlockFullyScheduled": true,
            "Comments": null,
            "CreatedBy": null,
            "UpdatedBy": null,
            "CreatedOn": "0001-01-01T00:00:00",
            "UpdatedOn": "0001-01-01T00:00:00"
        }, {
            "PodId": 2,
            "PodName": "POD FRE-pat",
            "DailyAssignmentId": 9050,
            "AgentDefaultScheduleId": 12722,
            "BlockId": 4,
            "IsScheduled": true,
            "IsAssigned": true,
            "IsDefault": true,
            "Date": null,
            "IsBlockFullyScheduled": false,
            "Comments": null,
            "CreatedBy": null,
            "UpdatedBy": null,
            "CreatedOn": "0001-01-01T00:00:00",
            "UpdatedOn": "0001-01-01T00:00:00"
        }
    ]
}]

 

Tsvetomir
Telerik team
 answered on 08 Apr 2021
4 answers
3.1K+ views

Going through and testing the Kendo grid functionality. I created a new Telerik project using the menu and grid template.

.NET Core 3.1

Telerik.UI.for.AspNetCore (2021.1.224)

VS 2019

I can get my test data to load on the grid no problem, however when ever I enter text in the search box, it gives an "Input string was not in a correct format" exception on the server side. I've noticed, that if a defined column is bound to a string typed property, the search filter works fine. But if I have a int (or DateTime for that matter) typed property, that's when I get the exception. For example, in my object I have an ApplicationId property. If I exclude it in the .Columns definition of the grid, everything works fine, however if I include it, that's when the ToDataSourceResultAsync() method seems to choke, and I get the exception. Probably something dumb, but I can't seem to find what I could be doing wrong.

Class:

public partial class Application
{
    public Application()
    {
        AppItems = new HashSet<AppItem>();
        AppVersions = new HashSet<AppVersion>();
    }
 
    [Display(Name = "Application ID")]
    public int ApplicationId { get; set; }
 
    [Display(Name = "Application Name")]
    [Required]
    public string AppName { get; set; }
     
    [Display(Name = "Description")]
    public string Description { get; set; }
     
    [Display(Name = "Added On")]
    public DateTime? AddedOn { get; set; }
     
    [Display(Name = "Added By")]
    public string AddedBy { get; set; }
     
    [Display(Name = "Updated On")]
    public DateTime? UpdatedOn { get; set; }
 
    [Display(Name = "Updated By")]
    public string UpdatedBy { get; set; }
    public virtual ICollection<AppItem> AppItems { get; set; }
    public virtual ICollection<AppVersion> AppVersions { get; set; }
}

Controller Method:

public async Task<IActionResult> GetApplications([DataSourceRequest]DataSourceRequest request)
{
    try
    {
        var apps = await _repo.GetApplicationsAsync();
        var result = await apps.ToDataSourceResultAsync(request);
        return Json(result);
    }
    catch (Exception e)
    {
        return Json("");
    }
}

Designer:

<div class="row">
    <div class="col-12">
        @(Html.Kendo().Grid<Application>()
            .Name("grdApplications")
            .Columns(columns =>
            {
                columns.Bound(p => p.ApplicationId).Title("ID");
                columns.Bound(p => p.AppName);
                columns.Bound(p => p.Description);
                //columns.Bound(p => p.AddedOn).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.AddedBy);
                //columns.Bound(p => p.UpdatedOn).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.UpdatedBy);
                columns.Command(command => { command.Edit().Text("Details"); command.Destroy(); }).Width(230);
            })
            .ToolBar(toolbar => { toolbar.Create().Text("Add New Application"); toolbar.Pdf(); toolbar.Excel(); toolbar.Search(); })
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .Reorderable(reorderable => reorderable.Columns(true))
            .Pageable()
            .Sortable()
            .ColumnMenu()
            .Filterable()
            .Pageable(pageable => pageable.PageSizes(new int[] { 10, 25, 50, 100 }))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("GetApplications", "Applications"))
                .Create(create => create.Action("CreateApplication", "Applications"))
                .Update(update => update.Action("UpdateApplication", "Applications"))
                .Destroy(destroy => destroy.Action("DeleteApplication", "Applications"))
                .PageSize(10)
                .Model(model => {
                    model.Id(p => p.ApplicationId);
                    model.Field(p => p.ApplicationId).Editable(false);
                    model.Field(p => p.AddedOn).Editable(false);
                    model.Field(p => p.AddedBy).Editable(false);
                    model.Field(p => p.UpdatedOn).Editable(false);
                    model.Field(p => p.UpdatedBy).Editable(false);
                })
            )
        )
    </div>
</div>
Georgi Denchev
Telerik team
 answered on 06 Apr 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?