Telerik Forums
UI for ASP.NET Core Forum
1 answer
4 views

excute me, when i use kendo grid detailtemplate feature, i have some trouble. how can i fix it?

my source:

<div class="panel-collapse collapse show" id="collapse1" aria-expanded="true">
        @(
Html.Kendo().Grid(Model.UserRoleList.Value)
    .Name("gridRoles")
    .Scrollable()
    .Columns(columns =>
    {
        columns.Bound(c => c.RoleName).Width(130);
    })
    .Height(250)
    .DataSource(d => d.Custom()
                    .Type("aspnetmvc-ajax")
                    .Transport(t => t.Read(r => r.Url($"{_config.Value.AuthSettings?.ApplicationName ?? ""}/SystemManagement/UserPermission/View?handler=Paged&userId={Model.UserInfo.UserId}")))
                    .Batch(true)
                    .Schema(s => s.Model(
                        m => {
                            m.Id(p => p.RoleCode);
                        }
                    ).Data("Data"))
    )
    .ClientDetailTemplateId("templateGrp")
    .Deferred()
)

        <script id="templateGrp" type="text/x-kendo-template">
            <div>RoleCode: 123</div>
        </script>

        <script nonce="@_config.Value.AppSettings.CspNonce">
            @Html.Kendo().DeferredScripts(false);
        </script>

 

 

and feedback error:

Error: Invalid template:'
            <div>RoleCode: 123<//div>
        ' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n            <div>RoleCode: 123<//div>\n        ';}return $kendoOutput;'
Anton Mironov
Telerik team
 answered on 15 Jan 2024
1 answer
15 views

Hello,

I am trying to build a grid that has a combobox in it that should be filled from an Ajax request. But based on the demo on the page, I am not being able to determine where the combobox is filled.

I appreciate any help on the matter.

Regards,

Alexandre

Stoyan
Telerik team
 answered on 11 Jan 2024
2 answers
11 views

Hi,

Looks like there is some kind of issue when trying to use the .NET Core wrapper for NumericTextBoxFor while using the culture pt-BR.

The values in the text field gets incorrect if the value has a decimal.

For example a double 1234.56 becomes 123,456.00 but the expected result is 1.234,56



This happens when the kendo.culture().numberFormat[","]  is a "." (dot).

Here is an example of the error:
https://netcorerepl.telerik.com/weavadPV01xSQZX716

I can also reproduce the error with Kendo UI jQuery, If the html input tag has an intital value, then it becomes like the example above.
https://dojo.telerik.com/@douglas.nordfeldt@nefab.com/ejEhecIV/2
https://dojo.telerik.com/@douglas.nordfeldt@nefab.com/ogiVoMAZ/5


Managed in my examples to do a work around until this has been fixed.

Douglas
Top achievements
Rank 1
Iron
 answered on 10 Jan 2024
1 answer
17 views

I have a column chart that has a default font of Arial. Is it possible to change this to the Inter font in one place or does the font have to be set for each individual label (e.g. chart title, axis title, axis label, legend, tooltip, etc.)?

Thanks,

Tim

Alexander
Telerik team
 answered on 09 Jan 2024
1 answer
21 views

My solution layout follows this:

  • Data - EF entities and DB Context
  • Services - Service objects that interact with the database (references the Data project directly)
  • Web - Front end (controllers and views) that use the Services project to push/pull data and reflect it back to the user

I recently discovered the ExpressionBuilder to handle grid filtering and convert it to LINQ to use in my Service objects to (efficiently) query the database (pushes the filter down to the DB query) so only a limited number of records are returned (thus, loaded into memory) instead of loading all records and then filtering them in memory.

My question, is there a similar object for Sorting functionality?  So it can convert my Grid Sort (from the DataSourceRequest object) into a LINQ OrderBy expression and apply it against my entity type so it can be passed into the DB query?  Or am I stuck writing my own?

Mihaela
Telerik team
 answered on 03 Jan 2024
1 answer
17 views

I'm trying to enable rapid entry using mostly just the keyboard using a DateTimePicker field.  The behavior is seeking to minimize the number of keystrokes to enter a date and time "close" to today. With a full date and time, they would need to type 14 keystrokes minimum based on the formats below.

The users would like to do this:

  1. Alt-down to open date picker on today (1 keystroke)
  2. Use arrow keys to find the right date (1-4 keystrokes avg)
  3. Hit enter to close the date picker -- (this is where the problem starts) (1 keystroke)
  4. Type in 4 numbers to represent time. (4 keystrokes)
  5. Hit enter - done (would go to the next field ideally - could hit tab as alternative)

Generally 9 keystrokes (sometimes less) instead of 14 every time.

The code below is what I've been trying to get to work.  It can run in the REPL playground - and I'm happy to use any of the events to achieve the desired behavior.  I haven't been able to get the above set of keystrokes to work with any combination of code / etc that I've tried so far.

Any chance you could help?  I think the "time" characters need to be highlighted and the time picker needs to be closed for the "4 number keys and tab/enter" to be accepted as time entry.  If the time picker is open and the user types 1345 (for example) and then tab or enter it just goes back to 00:00.

Any help / guidance is appreciated.  I had this working with an older version of kendo using the logic below (thanks for your help on that too!) but the new version of ASP.NET Core controls is giving me some trouble achieving it.

Thanks in advance. (i've tried other things than just the below - couldn't get anything to work the way I wanted)

@using Kendo.Mvc.UI

    @(Html.Kendo().DateTimePicker()
            .Name("DateTimeSampled")
            .Format("MM/dd/yyyy HH:mm")
            .ParseFormats(new[] { "MM/dd/yyyy HH mm", "MM/dd/yyyy HH:mm", "MM/dd/yyyy HHmm"})
            .TimeFormat("HH:mm")
            .Events(e =>
            {
                  e.Change("change").Open("open").Close("close");
            })
    )

<script>
    function open(e) {
        console.log("Open :: " + e.view + "-view");
    }

    function close(e) {
        console.log("Close :: " + e.view + "-view");
    }

    function change(e) {
        console.log("Change :: " + kendo.toString(this.value(), 'g'));
        if (e.view == "date") {
           //var picker = e.sender.data("kendoDateTimePicker");
           var picker = $("#DateTimeSampled").data("kendoDateTimePicker");
           console.log(picker);
           //picker.close();
           //e.sender.close();
           var info = kendo.caret(e.sender.element);
           kendo.caret(e.sender.element, info[0] - 5, info[1]); 
        }
    }
</script>

Mihaela
Telerik team
 answered on 03 Jan 2024
2 answers
16 views

I created a custom download with DateRangePicker checked. I have a page with this code:

@(Html.Kendo().DateRangePicker()
    .Name("startEnd")
    .Messages(m => m.StartLabel("Start").EndLabel("End"))
)

When the page loads there is a JavaScript error in the console:

Uncaught TypeError: e._startInput.kendoDateInput is not a function

I created another custom download with DateInput and DateRangePicker checked.

When the page loads there is a different JavaScript error in the console:

Uncaught TypeError: o is not a constructor

I thought the custom download page handled the dependencies. Are there other DateRangePicker dependencies that I need to check?

Thanks

Tim
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 01 Jan 2024
2 answers
73 views

I am in the Process of updating to the latest Kendo version in our Asp core project.
Our previous version was 2023.1.117. I wanted to update to 2023.2.829. 
Previosly all grid Command buttons where just the default grey in the bootstrap 4 theme.
Now the edit buttons have the primary style.
Since our product allows the user to change some colors the blue doesnt fit all the time.
Is there a way to change the primary styling at runtime?`
Maybe globally, because some other smaller compoents have the primary too but those blue accents where not that intrusive.

John
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 29 Dec 2023
0 answers
101 views

Hi,

I fail to figure out a problem

I have a Kendo Grid, that has a ClientDetailTemplate that creates a Tab Strip for each row, in each Tab Strip Item there is a Child Grid
Now I added a new Tab Strip Item with a new Child Grid, but everytime I edit a Row, it sends an Insert Action to the Controller instead of an Edit Action

If I debug the base controller, the model that is send to the Insert Action in the controller is valid

With all other Grids (in the other Tab Strip Items) it seems to work just fine (Edit leads to Update Action)
If I remove the Action for Insert/Create in the Child Grid it does not send any Action to the Controller

Is there a bug in my code? I just can't find out why it behaves like this.
I tried to search for it in the forum, but was not able to find something.

The Code is:
(Most columns removed)
(The grid that calls Insert instead of Update action is the first in the script tag, the second grid in the script component is for reference, where it works as expected)

@(Html.Kendo().Grid<CCPartnerTabDialogDto>()
    .Name("Grid_CCPartnerTabDialog")

    .Columns(columns =>
    {
        columns.Bound(c => c.FILIALID).Title("Fields").Width(200);
    })
    .DataSource(datasource => datasource
        .Ajax()
        .Read(read => read.Action("Read", "CCPartnerTabDialog"))

        .Filter(f => f.Add(val => val.RCDSTS).IsEqualTo(" "))

        .PageSize(30))
    .Filterable(filter => filter.Mode(GridFilterMode.Row))
    .Scrollable()
    .Height("750")
    .Sortable()
    .Reorderable(r => r.Columns(true))
    .Pageable()
    .Resizable(rs => rs.Columns(true))
    .ClientDetailTemplateId("Grid_CCPartnerTabDialog_HierarchyRowTemplate")
    .Events(events =>
    {
        events.DataBound("dataBound");
        events.DetailInit("CCPartnerTabDialogInit");
    }))

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

    @(Html.Kendo().TabStrip()
        .Name("TabStrip_CCPartnerTabDialog_Hierarchy_#=PID#")
        .Collapsible(true)
        .Items(tabs =>
        {
            tabs.Add().Text("Partner").Content(@<text>
                @(Html.Kendo().Grid<CCPartnerDto>()
                    .Name("Grid_CCPartner_Hierarchy_#=PID#")
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.PID).Title("PID");
                        columns.Bound(c => c.ERPNME).Title("ERP");

                        columns.Command(command => { command.Edit(); });
                    })
                    .Width("600")
                    .DataSource(datasource => datasource
                        .Ajax()
                        .Model(model =>
                        {
                            model.Id(p => p.PID);
                            model.Field(p => p.ERPNME);
                            model.Field(p => p.SUBSFLAG);
                            model.Field(p => p.PROVFLAG);
                        })
                        .Read(read => read.Action("Read", "CCPartner", new { values = new string[] { "#=PID#" } }))

                        .Create(create => create.Action("Insert", "CCPartner"))
                        .Update(upd => upd.Action("Update", "CCPartner"))
                        .Destroy(del => del.Action("Delete", "CCPartner"))
                    )
                    .ToClientTemplate())
                </text>);

            tabs.Add().Text("Alias").Content(@<text>
                @(Html.Kendo().Grid<CCPartnerAliasDto>()
                .Name("Grid_CCPartnerAlias_Hierarchy_#=PID#")
                .Columns(columns =>
                {
                            columns.Bound(c => c.PID).Title("PartnerId").Width(200).Locked(true).Editable("notEditable");

                            columns.Command(command => { command.Edit(); command.Destroy(); });
                        })
                .ToolBar(toolbar => { toolbar.Create(); })
                .DataSource(datasource => datasource
                    .Ajax()

                    .Model(model =>
                    {
                        model.Id(p => p.PID);
                    })

                    .Read(read => read.Action("Read", "CCPartnerAlias", new { values = new string[] { "#=PID#" } }))

                    .Create(create => create.Action("Insert", "CCPartnerAlias"))
                    .Update(upd => upd.Action("Update", "CCPartnerAlias"))
                    .Destroy(del => del.Action("Delete", "CCPartnerAlias"))

                    .Filter(f => f.Add(val => val.RCDSTS).IsEqualTo(" "))

                    .PageSize(30))
                .Pageable()
                .Selectable()
                .Sortable()
                .Resizable(rs => rs.Columns(true))
                .ToClientTemplate())
                </text>);
        })
        .ToClientTemplate())


The Controller Base Class:
(where all three shown grid-controllers are derived from)

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Mvc;
using WEB.BIM.DataLayer.Interface;
using WEB.BIM.DataLayer.Model.Application;
using WEB.BIM.DataLayer.Service;

namespace WEB.BIM.Controllers.Base
{
    public class ItemBaseController<TService, TModel> : BaseController<TService>
        where TService : IItemBaseService<TModel>
    {
        public ItemBaseController(ILogger logger, TService dataservice) : base(logger, dataservice)
        { }

        public async Task<ActionResult> Read([DataSourceRequest] DataSourceRequest request, params string[] values)
        {
            var result = await service.GetAsync(values);

            return Json(result.ToDataSourceResult(request));
        }
        public async Task<ActionResult> Insert([DataSourceRequest] DataSourceRequest request, TModel model)
        {
            if (model != null && ModelState.IsValid)
            {
                await service.InsertAsync(model, UserName());
            }

            return Json(new[] { model }.ToDataSourceResult(request));
        }
        public async Task<ActionResult> Update([DataSourceRequest] DataSourceRequest request, TModel model)
        {
            if(model != null && ModelState.IsValid)
            {
                await service.UpdateAsync(model, UserName());
            }

            return Json(new[] { model }.ToDataSourceResult(request));
        }
        public async Task<ActionResult> Delete([DataSourceRequest] DataSourceRequest request, TModel model)
        {
            if (model != null && ModelState.IsValid)
            {
                await service.DeleteAsync(model, UserName());
            }

            return Json(new[] { model }.ToDataSourceResult(request));
        }

    }
}

Any help appreciated

 

EDIT:

Huh, I just revisited my code and found the problem

1. The problem happens in hierarchical sub grids, because if i initialize the grids I set the DefaultValue of the id field to my parent id via js event like

    

// get detailGrids_subSelect

$.each(detailGrids_subSelect, function (index, value) { var tmp = value.getKendoGrid(); tmp.setOptions({ dataSource: { schema: { model: { fields: { PID: { defaultValue: e.data.PID } } } } } }) })

2. In another Grid where the id field is string i can just set it like this in datasource.model:

.Model(model =>
{
  model.Id(p => p.ALIASQLF);
  model.Id(p => p.ALIASVAL);
  model.Field(f => f.ALIASQLF).DefaultValue("#=ALIASQLF#");
})

Sadly the id field is a decimal and so i can not use the second approach, because it only allows string

Funny, that it works in the second part just fine, but in the first it recognizes, that the default value is equal to the id and then fires an insert instead of an update, if I exclude the grid in the first approach the update works as expected

But I will just remove the defaultValue in the first approach and do a custom create function where i set the parent id in the function or something like this

 

 

 

Felix
Top achievements
Rank 1
Iron
 updated question on 28 Dec 2023
1 answer
19 views

Hi, I have this Grid which uses Custom Binding for manual skip and take on the server.

After successful Read of data, my problem now is the Search and Filtering feature is now working.

 

 

@(Html.Kendo().Grid<MyWebApp.Web.Models.ViewModel>()
        .Name("grid")
        .EnableCustomBinding(true)
        .Columns(columns =>
        {
            columns.Bound(p => p.Sorting).Width(100).Filterable(false);
            columns.Bound(p => p.Code).Width(200).Filterable(true);
            columns.Bound(p => p.Description).Filterable(true);
        })
        .ToolBar(toolbar =>
        {
            toolbar.Search();
        })
        .Filterable()
        .Pageable()
        .Sortable()
        .Scrollable(scr => scr.Height(550))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(p => p.Id))
            .Read("gridDataSource", "Home")
        )
)
Alexander
Telerik team
 answered on 26 Dec 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?