Telerik Forums
UI for ASP.NET Core Forum
2 answers
2.1K+ views

I have the following grid set.  Is there a way I can override the template or something else that will disable the checkbox based on a boolean from the data object?

    <kendo-grid selectable="multiple" height="600" auto-bind="false">
        <columns>
            <column selectable="true" width="30" locked="true" />
...
        </columns>
</kendo-grid>
Mike
Top achievements
Rank 1
Iron
 answered on 19 Dec 2019
2 answers
96 views

I have a model with SourceId, LanguageId, OriginalLanguageId, which are bound to some dropdownlists, using :

01.@(Html.Kendo().DropDownListFor(m => m.SourceId)
02.    .DataTextField("Name")
03.    .DataValueField("Id")
04.    .ValuePrimitive(true)       <------ Here be dragons?
05.    .Animation(false).AutoBind(false)
06.    .HtmlAttributes(new
07.    {
08.        @class = "form-control",
09.        data_bind = "value: regulation.SourceId"
10.    })
11.    .OptionLabel("Please select a source")
12.    .Filter(FilterType.Contains)
13.    .DataSource("sourcesDataSource")
14.)
15. 
16.@(Html.Kendo().DropDownListFor(m => m.LanguageId)
17.    .DataTextField("Name")
18.    .DataValueField("Id")
19.    .Animation(false).AutoBind(false)
20.    .HtmlAttributes(new
21.    {
22.        @class = "form-control",
23.        data_bind="value: regulation.LanguageId"
24.    })
25.    .OptionLabel("Please select the official language")
26.    .Filter(FilterType.Contains)
27.    .DataSource("languagesDataSource")
28.)
01.@(Html.Kendo().DropDownListFor(m => m.OriginalLanguageId)
02.    .DataTextField("Name")
03.    .DataValueField("Id")
04.    .Animation(false).AutoBind(false)
05.    .HtmlAttributes(new
06.    {
07.        @class = "form-control",
08.        data_bind="value: regulation.OriginalLanguageId"
09.    })
10.    .OptionLabel("Please select the original language")
11.    .Filter(FilterType.Contains)
12.    .DataSource("languagesDataSource")
13.)

 

All 3 fields are int, non nullable, yet only LanguageId and OriginalLanguageId are bound and displayed/selected in their dropdowns.

The data structures for Language and Source have only {Id: int, Name: string}.

SourceId is bound, but is not displayed/selected, unless I set ValuePrimitive(true).

I see that it is bound because when I click the dropdown, the value is selected in the list.

So I would like to understand why do I have to set ValuePrimitive(true) only for a field.

 

Thank you.

 

 

 

 

Veselin Tsvetanov
Telerik team
 answered on 19 Dec 2019
2 answers
235 views

I have a model bound via MVVM with a collection of related entities:

01.@(Html.Kendo().MultiSelectFor(m => m.AmendedRegulations)
02.    .DataTextField("Title")
03.    .DataValueField("Id")
04.    .Animation(false).AutoBind(false)
05.    .HtmlAttributes(new
06.    {
07.        @class = "form-control",
08.        data_bind = "value: regulation.AmendedRegulations"
09.    })
10.    .Filter(FilterType.Contains)
11.    .AutoClose(false)
12.    .DataSource("amendedRegulationsDataSource")
13.)

 

The data structure retrieved by amendedRegulationsDataSource and AmendedRegulation have {Id : int, Title: string}.

01.let amendedRegulationsDataSource = new kendo.data.DataSource({
02.    serverFiltering: false,
03.    transport: {
04.        read: {
05.            url: "@ViewData["ApiUrl"]/regulations/regulations-for-dropdowns",
06.            dataType: "json",
07.            type: "GET",
08.            data: function() {
09. 
10.                return { datasetId : viewModel.regulation.DatasetId }
11.            }
12.        }, 
13.    }
14.});

 

01.$(function () {
02.  
03.    languagesDataSource.read();
04.  
05.    viewModel.regulationDataSource.fetch(function() {
06.  
07.        viewModel.set("regulation", this.data()[0]);
08.        kendo.bind($("#edit-regulation"), viewModel);
09.  
10.        // amendedRegulationsDataSource.read();
11.    });
12.});

 

When kendo.bind executes, the data in AmendedRegulations is bound, is displayed in the multi select, however, when I click the multi select, to maybe change the selection, the selected items disappear, which causes confusion to the user.

Now, is there a setting that I need to make/activate in order to preserve the selected items in the multi select?

 

Thank you.

 

Martin
Telerik team
 answered on 19 Dec 2019
1 answer
410 views

Hi,

 

I am trying to create a grid like this

.Read(read => read.Action(nameof(RcaDatastructureController.Editing_ReadRcas), "RcaDatastructure", new { key = Model.Product.ProductKey })))*@
    @(Html.Kendo().Grid<DashboardRcaRecord>()
        .Name("grid")
                .ToolBar(toolbar =>
                     {
                         toolbar.Create();
                         toolbar.Search();
                     })
                .Columns(columns =>
                {
 
                    columns.Bound(p => p.JiraLink).Title("RCA link")
                        .ClientTemplate($"<a href=\"#: data.JiraLink#\" target=\"_blank\">#: data.Summary #</a>")
                        .Width(100);
                    columns.Bound(p => p.PCA).Width(200);
                    columns.Bound(p => p.QbStatus).Width(100);
                    columns.Bound(p => p.DataStructureLink).Width(100);
                    columns.Bound(p => p.FixStatus).Width(100);
                    columns.Bound(p => p.NumberOfCRsToResolve).Title("No of Change Requests")
                        .ClientHeaderTemplate("No of<br/>Customer<br/>Defects").Width(50);
                    columns.Bound(p => p.NumberOfE2EsToResolve).Title("No of End-to-ends")
                        .ClientHeaderTemplate("No of<br/>End-to-ends").Width(50);
                    columns.Bound(p => p.NumberOfMTsToResolve).Title("No of Monitor Tasks")
                        .ClientHeaderTemplate("No of<br/>Monitor<br/>Tasks").Width(50);
                    columns.Bound(p => p.NumberOfSaasIncsToResolve).Title("No of Saas Incidents")
                        .ClientHeaderTemplate("No of<br/>Saas<br/>Incidents").Width(50);
                    columns.Bound(p => p.NumberOfDefectsToResolve).Title("No of Defects")
                        .ClientHeaderTemplate("No of<br/>Defects").Width(50);
                    columns.Bound(p => p.NumberOfCustomerDefectsToResolve).Title("No of Customer Defects")
                        .ClientHeaderTemplate("No of<br/>Customer<br/>Defects").Width(50);
                    columns.Bound(p => p.NumberOfSpecsToResolve).Title("No of Specs").ClientHeaderTemplate("No of<br/>Specs").Width(50);
                    columns.Command(command => { command.Custom("Edit").Click("editRca"); }).Width(70);
                })
                .Editable(e=>e.Mode(GridEditMode.InLine))
        .Sortable(sortable => { sortable.SortMode(GridSortMode.MultipleColumn); })
        .Filterable()
        .Pageable(pgbl => pgbl.Refresh(true).PageSizes(true))
        .DataSource(dataSource => dataSource.Ajax()
        .Model(model =>
        {
            model.Id(p => p.JiraKey);
        })
        .Read(read => read.Action(nameof(RcaDatastructureController.Editing_ReadRcas), "RcaDatastructure", new { key = Model.Product.ProductKey })))
    )
<script type="text/javascript">
    function editRca(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
 
        window.location.href = "@Url.Action(nameof(RcaDatastructureController.RcaDetails), "RcaDatastructure", new { key=Model.Product.ProductKey})&rcaKey="+dataItem.JiraKey;
    }
    $(function () {
        var addButton = $('a.k-button.k-button-icontext.k-grid-add');
        addButton.unbind('click');
        addButton.click(function () {
            window.location.href = "@Url.Action(nameof(RcaDatastructureController.RcaDetails), "RcaDatastructure", new { key=Model.Product.ProductKey})";
        });
    });
</script>

But it fails at runtime with the exception

nvalidOperationException: Synchronous operations are disallowed. Call WriteAsync or set AllowSynchronousIO to true instead.
Microsoft.AspNetCore.Server.IIS.Core.HttpResponseStream.Write(byte[] buffer, int offset, int count)
Microsoft.AspNetCore.Server.IIS.Core.WrappingStream.Write(byte[] buffer, int offset, int count)
Microsoft.AspNetCore.WebUtilities.HttpResponseStreamWriter.FlushInternal(bool flushEncoder)
Microsoft.AspNetCore.WebUtilities.HttpResponseStreamWriter.Dispose(bool disposing)
System.IO.TextWriter.Dispose()
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode)
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ActionContext actionContext, IView view, ViewDataDictionary viewData, ITempDataDictionary tempData, string contentType, Nullable<int> statusCode)
Microsoft.AspNetCore.Mvc.ViewFeatures.ViewResultExecutor.ExecuteAsync(ActionContext context, ViewResult result)
Microsoft.AspNetCore.Mvc.ViewResult.ExecuteResultAsync(ActionContext context)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeResultAsync>g__Logged|21_0(ResourceInvoker invoker, IActionResult result)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|29_0<TFilter, TFilterAsync>(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext<TFilter, TFilterAsync>(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|24_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

 

However if I comment lines

toolbar.Create();

and

.Editable(e=>e.Mode(GridEditMode.InLine))

makeing grid readonly everything seems to work fine. Any idea why this is happening ?

Tsvetomir
Telerik team
 answered on 19 Dec 2019
4 answers
721 views

Hello,

I need that every time the users clicks the the "add record" button in the child grid. a new row will be added no matter if the previous row is saved. I have a parent and a child grid, and the "save all" action happens with a button in the parent grid, also for the child grid. If i call the addRow() method, it works only for the first click on the button, but not for more. It looks like the row has to be saved first.

Tsvetomir
Telerik team
 answered on 18 Dec 2019
4 answers
581 views

This is not working as soon as I put single quote or double quote with some html code into the Title and HeaderTemplate ==> not working in .Net Core

Error CS1061 'GridColumnGroupBuilder<????>' does not contain a definition for 'ClientHeaderTemplate' and no accessible extension method 'ClientHeaderTemplate' accepting a first argument of type 'GridColumnGroupBuilder

How can this be resolve kendo and Core 2019.3.917

Javascript equivalent failure

title: "<em class='text-danger text-big bg-danger'>Contact Info</em> &nbsp; - &nbsp; <strong class=text-info>Photo</strong>",

 

Code
<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/multicolumnheaders">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
    

</head>
<body>
        <div id="example">
            <div id="grid"></div>
<style>
  .text-danger{
    color:red;
    padding:5px 15px 5px 15px;
  }
  
  .text-info{
    color:orange;
  }
  .bg-danger{
    background-color:#000000;
  }
  
  .text-big{
    font-size:4rem;;
  }
  </style>
            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                            },
                            pageSize: 20
                        },
                        height: 550,
                        groupable: true,
                        sortable: true,
                        resizable: true,
                        reorderable: true,
                        pageable: true,
                        columnMenu: true,
                        columns: [{
                            field: "CompanyName",
                            title: "Company Name",
                            width: 420
                        },
                        {
                            title: "<em class='text-danger text-big bg-danger'>Contact Info</em> &nbsp; - &nbsp; <strong class=text-info>Photo</strong>",
                            columns: [{
                                field: "ContactTitle",
                                title: "Contact Title",
                                width: 200
                            },{
                                field: "ContactName",
                                title: "Contact Name",
                                width: 200
                            },{
                                title: "Location",
                                columns: [ {
                                    field: "Country",
                                    width: 200
                                },{
                                    field: "City",
                                    width: 200
                                }]
                            },{
                                field: "Phone",
                                title: "Phone"
                            }]
                        }]
                    });
                });
            </script>
        </div>


</body>
</html>

Tsvetomir
Telerik team
 answered on 18 Dec 2019
1 answer
449 views

Hello,

I have a .net core 2.0 project where there are multiple Kendo UI components like Kendo Grid, Kendo Pager, Kendo Progress Bar etc being used.

I can see that, some times, there are cookies with names such as OptanonAlertBoxClosed, OptanonConsent, __gads, _biz_flagsA, _biz_nA etc being created under the telerik.com domain with the deployment of the website within this project.

Is there an in-built way with Kendo UI where the creation and the use of these cookies can be controlled?

Thanks.

 

Using the following

Kendo UI, Version 2017.2.621+SP1
Visual Studio 2019, Version 16.3.8
.net Core 2.0
Browser being used: Chrome, Version 78.0.3904.87 (Official Build) (64-bit)
OS: Windows 10

Veselin Tsvetanov
Telerik team
 answered on 17 Dec 2019
5 answers
599 views

The last example on this page breaks if you attempt to open it after a filtering and removing the filter.

the filter object is undefined

https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/events/filtering

After fixing this issue I get an unresponsive combobox the first time after the combobox is cleared and it loses focus.

I would like the combobox to only filter when at least 3 letters are entered, and open each time the user clicks regardless of if there is any data.

The combobox:

<kendo-combobox for="PersonId"
                                    filter="Kendo.Mvc.UI.FilterType.Contains"
                                    clear-button="true"
                                    placeholder="Search Name of Person"
                                    enforce-min-length="true"
                                    datatextfield="Name"
                                    datavaluefield="PrimaryId"
                                    min-length="3"
                                    suggest="true"
                                    class="w-100"
                                    on-filtering="CancelEmptyFilter"
                                    auto-bind="false">
                        <datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax" server-paging="true" server-filtering="true" on-request-end="DataSourceError" page-size="100">
                            <transport>
                             </transport>
                        </datasource>
                    </kendo-combobox>

The JS function:

function CancelEmptyFilter(e) {
        console.log(e);
        if (!e.filter || !e.filter.value) {       
            e.preventDefault();
            return;
        }      
    }

Video Below

Petar
Telerik team
 answered on 17 Dec 2019
2 answers
169 views

I cannot find any examples / documentation on how to format the column filtering input for Core ASP.net.

For example I have a column which is called ID. It is filterable but I want it formatted so that :
1 - It does not have the spinner

2 - After entering a value it does not reformat it from Integer to Decimal with a thousands separator. For example 1234 become 1,234.00 The current code I have is:

@(Html.Kendo().Grid<CIPHRChecks.Models.Order>()
            .Name("Grid")
            .HtmlAttributes(new { @class = "ChecksGrid" })
            .Columns(columns =>
            {
                columns.Bound(o => o.Id).Title("ID").Format("{0}").Width(200).Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
                columns.Bound(o => o.OrderDate).Title("Order Date").Format("{0:dd/MM/yyyy}").Width(80);
                columns.Bound(o => o.Source.Name).Title("Source").Width(80).Filterable(ftb => ftb.Multi(true).Search(true));

                columns.Bound(o => o.OrderStatus.Description).Title("Status").Width(200);
                columns.Bound(o => o.Service.Name).Title("Service").Width(200);
                columns.Bound(o => o.SourcePersonReference).Title("Reference").Width(120).Filterable(f => f.Multi(false).Cell(cell => cell.ShowOperators(false)));
                columns.Bound(o => o.SourcePersonDescriptor).Title("Descriptor").Width(200).Filterable(f => f.Multi(false).Cell(cell => cell.ShowOperators(false)));
            })
                .Pageable(p =>
            {
                p.PageSizes(new[] { 15, 25, 50 });
            })

            .Sortable(sortable => sortable
            .SortMode(GridSortMode.MultipleColumn))
            .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
            .Scrollable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Read", "Home")
            )
                .PageSize(15)
            )
)

Simon
Top achievements
Rank 1
 answered on 17 Dec 2019
2 answers
1.5K+ views

Hello,

 

I have a grid and I'm disabled  the row that has the approved  FALSE, but when I check Select All it checks also the disabled row.

 

(Html.Kendo().Grid<WhereAbouts.ViewModels.LoginUserViewModel>
                                    ().
                                    Name("Team")
                                    .Columns
                                    (columns =>
                                    {
                                        columns.Select().Width(50);
                                        //columns.Bound(c=>c.InsertDate);
                                        columns.Bound(c => c.BadgeNumber).ClientFooterTemplate("<button onclick='getCheckedRows()'  class='k-button k-button-icontext k-grid'>Approve</button>");
                                        columns.Bound(c => c.FullName);
                                        columns.Bound(c => c.NumberOfHours).Filterable(false);
                                        columns.Bound(c => c.Approved).Filterable(false).Title("Status");
                                        columns.Bound(c => c.ApprovalManagerId).Hidden(true);
                                        columns.Bound(c => c.Id).Title(" ").ClientTemplate("<a role='button' class='k-button k-button-icontext k-grid' href='" + Url.Action("Overtime", "Overtimes") + "?=#=" + @ViewBag.PeriodIdForGrid + "#&loginId=#=Id" + "#" + "&DropDownPeriodWeek=#=" + @ViewBag.PeriodWeekIdForGrid + "#" + "'>View</a>").Filterable(false);
                                        columns.Bound(c => c.Id).Title(" ").ClientTemplate(
                                        "# if (NumberOfHours > 0) { #" +
                                        "<a role='button' class='k-button k-button-icontext k-grid' href='" + Url.Action("Export_Teams_Overtime", "Overtimes") + "/#=Id#?DropDownPeriod=#=" + @ViewBag.PeriodIdForGrid + "#" + "'>Export</a>" +
                                        "# } else { #" +
                                        "<a role='button' disabled class='k-button k-button-icontext k-grid' href='" + Url.Action("Export_Teams_Overtime", "Overtimes") + "/#=Id#?DropDownPeriod=#=" + @ViewBag.PeriodIdForGrid + "#" + "'>Export</a>" +
                                        "# } #").Filterable(false);
                                        columns.Bound(c => c.Id).Title(" ").ClientTemplate("# if (Approved == true ) { #" +
                                        "<a role='button' class='k-button k-button-icontext k-grid' href='" + Url.Action("ApproveTeamOvertime", "Overtimes") + "/#=" + @ViewBag.PeriodIdForGrid + "#?loginId=#=Id" + "#" + "' disabled>Approve</a>" +
                                        "# } else if(ApprovalManagerId ==" + @ViewBag.LoginUserId + "){ #" +
                                        "<a role='button' class='k-button k-button-icontext k-grid' href='" + Url.Action("ApproveTeamOvertime", "Overtimes") + "/#=" + @ViewBag.PeriodIdForGrid + "#?loginId=#=Id" + "#" + "'disabled>Approve</a>" +
                                        "# } else{ #" +
                                        "<a role='button' class='k-button k-button-icontext k-grid' href='" + Url.Action("ApproveTeamOvertime", "Overtimes") + "/#=" + @ViewBag.PeriodIdForGrid + "#?loginId=#=Id" + "#" + "'>Approve</a>" +
                                        "# } #").Filterable(false);
                                    })

                                        .HtmlAttributes(new { style = "height: auto;width:auto" })
                                        .Scrollable()
                                        .Pageable(pageable =>
                                        {
                                            pageable.Refresh(true);
                                            pageable.PageSizes(true);
                                        })
                                        .HtmlAttributes(new { style = "height: auto;width: auto" })
                                        .Scrollable()
                                        .Events(e=>e.DataBound("test"))
                                        .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Model(model =>
                                        {
                                            model.Id(c => c.Id);
                                        })
                                        .Read(read => read.Action("Read_Team_Test", "OverTimes", new { periodId = @ViewBag.PeriodIdForGrid, periodWeekId = @ViewBag.PeriodWeekIdForGrid, tab = 1 }))
                                        )

 

This is the JS

 

    function test(e) {
        var grid = this;
        this.tbody.find('tr').each(function () {
            var dataItem = grid.dataItem(this);
            if (dataItem.Approved === false) {
                $(this).addClass('disable-cells');

            }
        })
    }

 

I would like to select all rows except the disabled one.

 

Is it posible?

Also, might help if I can disable the Select All from header.

 

Thank you!

Simona
Top achievements
Rank 1
 answered on 16 Dec 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?