Questions on UI for ASP.NET Core Forum

1 answer

214 views

Can an editor template be used for the grid delete confirmation?

I have looked for different forums and knowledge base posts relating to grid delete actions but can't find anything quite like I'm trying to accomplish. I would like to use a template for the confirmation popup when the destroy button is clicked on a grid row. I don't want the confirmation alert, instead I would like to have an editor template.

My grid setup:

columns.Command(m => { 
                m.Edit(); 
                m.Custom("Assign").Click("AssignInventory").IconClass("k-i-document-manager").Visible("AssignVisible");
                m.Destroy().Text("Destroy").Visible("AssignVisible"); // Only visible if the inventory is assignable, has quantity on hand
            });
        })
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("InventoryTemplate").DisplayDeleteConfirmation(false)) // Do not show confirmation alert

Here is the template I'm trying to use in a popup window once the destroy button is clicked.

<script type="text/x-kendo-template" id="DestroyInventoryTemplate">

    # if(data.BulkItems) { #
        <style>
            .k-edit-form-container {
                max-height: 600px;
            }

            .k-edit-form-container .k-edit-buttons {
                margin: 0;
                padding: 8px 0px;
            }
        </style>
        <input type="hidden" id="Id" name="Id" value="#:data.Id#" />
        <input type="hidden" id="Name" name="Name" value="#:data.Name#" />
        <input type="hidden" id="Description" name="Description" value="#:data.Description#" />
        <input type="hidden" id="inventoryTypeId" name="inventoryTypeId" value="#:data.InventoryTypeId#" />
        <input type="hidden" id="QuantityTotal" name="QuantityTotal" value="#:data.QuantityTotal#" />
        <input type="hidden" id="QuantityOnHand" name="QuantityOnHand" value="#:data.QuantityOnHand#" />
        <input type="hidden" id="Brand" name="Brand" value="#:data.Brand#" />
        <input type="hidden" id="SerialNumber" name="SerialNumber" value="#:data.SerialNumber#" />
        <input type="hidden" id="ModelNumber" name="ModelNumber" value="#:data.ModelNumber#" />
        <input type="hidden" id="Size" name="Size" value="#:data.Size#" />
        <input type="hidden" id="Color" name="Color" value="#:data.Color#" />
        <input type="hidden" id="RetirementDate" name="RetirementDate" value="#:data.RetirementDate#" />
        <input type="hidden" id="Destroyed" name="Destroyed" value="#:data.Destroyed#" />
        <input type="hidden" id="CreatedBy" name="CreatedBy" value="#:data.CreatedBy#" />
        <input type="hidden" id="CreatedDate" name="CreatedDate" value="#:data.CreatedDate#" />
        <input type="hidden" id="Active" name="Active" value="#:data.Active#" />
        <input type="hidden" id="InventoryTypeName" name="InventoryTypeName" value="#:data.InventoryTypeName#" />
        <input type="hidden" id="RequiredSerialNumber" name="RequiredSerialNumber" value="#:data.RequiredSerialNumber#" />
        <input type="hidden" id="RequiredModelNumber" name="RequiredModelNumber" value="#:data.RequiredModelNumber#" />
        <input type="hidden" id="RequiredBrand" name="RequiredBrand" value="#:data.RequiredBrand#" />
        <input type="hidden" id="RequiredSize" name="RequiredSize" value="#:data.RequiredSize#" />
        <input type="hidden" id="RequiredColor" name="RequiredColor" value="#:data.RequiredColor#" />
        <input type="hidden" id="PermissionPersonnel" name="PermissionPersonnel" value="#:data.PermissionPersonnel#" />
        <input type="hidden" id="PermissionLocation" name="PermissionLocation" value="#:data.PermissionLocation#" />
        <input type="hidden" id="PermissionInventory" name="PermissionInventory" value="#:data.PermissionInventory#" />

        <div class="k-edit-label">
            <label>Quantity To Destroy</label>
        </div>
        <div class="k-edit-field">
            <span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-invalid" style="">
                <input id="QuantityToAdd" class="k-input-inner" type="number" min="1" max="#:QuantityOnHand#" name="QuantityToAdd" value="1" required="required" validationMessage="Quantity to destroy is required">
            </span>
            <div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error k-hidden" data-for="QuantityToAdd" id="QuantityToAdd_validationMessage" data-valmsg-for="QuantityToAdd">
                <span class="k-tooltip-icon k-icon k-i-warning"></span>
                <span class="k-tooltip-content">The Quantity to destroy field is required.</span>
                <span class="k-callout k-callout-n"></span>
            </div>
        </div>
    #} else {#
        <span class="text-center">Are you sure you want to destroy this inventory?</span>
    #}#

    <div class="k-edit-buttons k-actions-end">
        <button type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary">
            <span class="k-icon k-i-check k-button-icon"></span>
            <span class="k-button-text">Destroy</span>
        </button>
    </div>
</script>

Grid

answered on 09 Feb 2023

1 answer

781 views

How to use unminified scripts with 2023.1

I import the Kendo UI scripts from a local folder (no CDN) and use the unminified version in my development environment so that I can step with the Chrome JavaScript debugger into Kendo code. My setup in my layout page is similar to this:

<environment include="Development">
    <script src="@Url.Content("~/kendo/js/nonmin/kendo.all.js")" type="text/javascript" asp-append-version="false"></script>
    <script src="@Url.Content("~/kendo/js/nonmin/kendo.aspnetmvc.js")" type="text/javascript" asp-append-version="false"></script>
    <script src="@Url.Content("~/kendo/js/kendo.timezones.min.js")" type="text/javascript" asp-append-version="false"></script>
</environment>
<environment exclude="Development">
    <!-- imports the minified version here -->
</environment>

I would copy the unminified versions of kendo.all.js and kendo.aspnetmvc.js from the source package download to the nonmin folder under my app.

Now with the change to modules, that does not work. Since kendo.all.js just imports other scripts, I copied all the .js files from the source distribution to the nonmin folder. Then I got errors for each script "Uncaught SyntaxError: Cannot use import statement outside a module" so I changed the type on the script tags from "text/javascript" to "module". But now every instance of kendo.syncReady within the page yields the error "Uncaught ReferenceError: kendo is not defined"

General Discussions

answered on 07 Feb 2023

2 answers

2.4K+ views

dotnet restore fails when fetching from telerik servers

Hi,

We have a system with Github Actions where we build our project whilst adding the telerik nuget repository.

And then it fails with a 500 error, it works sometimes, but not always.

    steps:
    - name: Checkout ${{ github.GITHUB_REF }}
      uses: actions/checkout@v2

    - name: Setup .NET Core
       uses: actions/setup-dotnet@v1
       with:
        dotnet-version: "5.0.x"
        
    - name: Setup Node.js environment
       uses: actions/setup-node@v2.1.2

    - name: Register Nuget Packages
       env: # Or as an environment variable
        telerik_username: ${{ secrets.telerik_username }}
        telerik_password: ${{ secrets.telerik_password }}
       run: dotnet nuget add source https://nuget.telerik.com/nuget --name telerik.com --username "$telerik_username" --store-password-in-clear-text --password "$telerik_password"

    - name: Install dependencies
       run: dotnet restore Project

2021-05-25T09:07:14.2001354Z   Retrying 'FindPackagesByIdAsyncCore' for source 'https://nuget.telerik.com/nuget/FindPackagesById()?id='Telerik.UI.for.AspNet.Core'&semVerLevel=2.0.0'.
2021-05-25T09:07:14.2008435Z   Response status code does not indicate success: 500 (Internal Server Error).
2021-05-25T09:07:14.2014387Z   Retrying 'FindPackagesByIdAsyncCore' for source 'https://nuget.telerik.com/nuget/FindPackagesById()?id='Telerik.UI.for.AspNet.Core'&semVerLevel=2.0.0'.
2021-05-25T09:07:14.2036427Z   Response status code does not indicate success: 500 (Internal Server Error).
2021-05-25T09:07:14.2081008Z /home/runner/.dotnet/sdk/5.0.203/NuGet.targets(131,5): error : Failed to retrieve information about 'Telerik.UI.for.AspNet.Core' from remote source 'https://nuget.telerik.com/nuget/FindPackagesById()?id='Telerik.UI.for.AspNet.Core'&semVerLevel=2.0.0'. [/home/runner/work/(project...)]

General Discussions

Installer and VS Extensions

answered on 07 Feb 2023

1 answer

530 views

Wizard ValidationSummary use with Partial View content

Good afternoon,

I am using the wizard component with a partial view on step 1, and a form on step 2.

 @(Html.Kendo().Wizard()
        .Name("uploadWizard")
        .Events(events => {
            events.Select("onFormSelect");
            events.FormValidateFailed("onFormValidateFailed");
        })
        .ValidateForms(v => v.ValidateOnPrevious(false))
        .LoadOnDemand(true)
        .ReloadOnSelect(false)
        .Steps(s => {
            s.Add()
                .Title("Choose Route")
                .ContentId("chooseRoute")
                .Buttons(b =>
                {
                    b.Next();
                });
            s.Add<TransactionViewModel>()
                .Title("File Details")
                .Form(form =>
                {
                    form.FormData(Model);
                    form.Items(items =>
                    {
                        items.Add()
                            .Field(f => f.FileVersion)
                            .Label(label => label.Text("Version of file (if applicable) e.g. 1.00:")
                            .Optional(true))
                            .InputHtmlAttributes(new { @maxlength = "50" });
                        items.Add()
                            .Field(f => f.FileDescription)
                            .Label(label => label.Text("Description of file use/content:"))
                            .Editor(e => e.TextArea()
                            .MaxLength(256)
                            .Rows(2)
                        );
                        items.Add()
                            .Field(f => f.BusinessReason)
                            .Label(label => label.Text("Business reason for the transfer:"))
                            .Editor(e => e.TextArea()
                            .MaxLength(256)
                            .Rows(2)
                        );
                        items.Add().Field(f => f.SourceUri).Label(label => label.Text("Source URI (if from an identifiable source):").Optional(true));
                    });
                })
                .Buttons(b =>
                {
                    b.Previous();
                    b.Next();
                });
            s.Add().Title("Upload File").Content("Upload file");
        })
    )

The partial view content contains a Kendo dropdownlist and a Kendo grid. I need the user to have selected a value from the dropdownlist and the grid before the step 1 wizard button allows the navigation to step 2.

I have added required text inputs to the partial view to capture the required value of the dropdownlist and id of the selected row in the grid. I'm going to hide the inputs but I want the "this field is required" error messages to appear in a validation summary, as they do on the step 2 form.

I've tried adding @Html.ValidationSummary() to the partial view but the error messages still appear next to the text inputs (which are due to be hidden). The partial view isn't based on a model.

The wizard's select event checks if the two inputs are valid and prevents the user from moving on:

               // Get the current step's container element
                var container = e.sender.currentStep.element;
                // Instantiate a validator for the container element
                $(container).kendoValidator();
                // Get the validator's reference
                var validator = $(container).kendoValidator().data("kendoValidator");
                // Validate a given input elements
                if (!validator.validateInput($("#SourceEnvironmentId")) || !validator.validateInput($("#RouteId"))) {
                    // Prevent the wizard's navigation
                    e.preventDefault();
                }

How do I get the validation error messages for the hidden inputs to appear in the validation summary on step 1?

Kind regards,

Richard

Wizard

answered on 06 Feb 2023

1 answer

92 views

Tab on only Enable Cells.

Navigation imporvemtns to speedsheet.

Is it possible to only move between "open cells for input. " With fx. using tab or enter.

When you are input finance data. It would be nice, that with a tab, it only moves between open cell. Is this possible.

reg. jakob

link to speecsheet navigation

Spreadsheet

answered on 03 Feb 2023

1 answer

298 views

how to use itemTemplate to customize filter menu?

I have a column configured as below:

.Filterable(f => f.Multi(true)
            .CheckAll(true)
            .ItemTemplate("itemTemplate")
            .Search(true)
            .DataSource(ds => ds.Read(r => r.Action("Items_Distinct", "Admin")))

Items_Distinct method is returning a collection (List) of strings.

itemTemplate function is as below:

function itemTemplate(e) {
        if (e.field == "all") {
            //handle the check-all checkbox template
            return "<div><label><strong><input type='checkbox' />#= all#</strong></label></div>";
        } else {
            //handle the other checkboxes
            return "<span><label><input type='checkbox' name='" + e.field + "' value='#=Label#'/>&nbsp;<span>#= Label #</span></label></span><br/>"
        }
    }

When I run the application and open the filter menu, I get below error:

Uncaught ReferenceError: Label is not defined
    at eval (eval at compile (kendo.all.js:309417:87), <anonymous>:3:148)
    at Object.render (kendo.all.js:309417:87)
    at init.createCheckBoxes (kendo.all.js:309417:87)
    at init.refresh (kendo.all.js:309417:87)
    at init.checkChangeHandler (kendo.all.js:309417:87)
    at init.trigger (kendo.all.js:309417:87)
    at init._process (kendo.all.js:309417:87)
    at init.success (kendo.all.js:309417:87)
    at success (kendo.all.js:309417:87)
    at t.success (kendo.all.js:309417:87)

Can someone please point my mistake? I used one of the dojo's as template to develop my itemTemplate function and apparently I did not understand where "Label" is defined. What am I missing?

Thanks.

Grid

answered on 02 Feb 2023

1 answer

817 views

How to override default filter operator?

Hello,

I am using the GridFilterMode.Menu option for my grid. I have a column which values are comma-delimited strings and I want to be able to search on this column using "contains" operator as opposed to the default "equals" operator. Does anyone know how I can achieve this? Can you point me to documentation?

Here is my grid column configuration:

columns.Bound(c => c.EntityList).Title("Items")
            .Filterable(f => f.Multi(true)
            .CheckAll(true)
            .ItemTemplate("itemTemplate")
            .Search(true)
            .DataSource(ds => ds.Read(r => r.Action("Entity_Distinct", "Admin")))
            )

Do I need to write custom javascript function to override the filter operator? I am trying to avoid making customizations to the out of the box control if possible.

I came across below Telerik article, however, I am not sure how to implement this for several columns with multi checkboxes enabled. I am running into issues with filter state active style and also how to manage "clear" filter functionality when several filters are active for these columns with multi checkboxes enabled..

https://docs.telerik.com/kendo-ui/knowledge-base/grid-how-to-change-multi-checkbox-filter-to-contains

UPDATE: I ended up writing custom functions for filter and filtermenuopen events:

    .Events(e => e.Filter("onCategoryFilter")
    .FilterMenuOpen("onFilterMenuOpen")

function onFilterMenuOpen(e) {
        if (e.sender.dataSource.filter()) {
            {
                e.sender.dataSource.filter().filters.forEach(function (f) {
                    ///TODO check for f.filters; if it is not null then loop through filters collection and process each individual
                    //filter which contains field, operator value
                    if(f.filters)
                    {
                        f.filters.forEach(function (g) {
                            if (g.field == "Items" || g.field == "Subitems") {
                                // this checks the corresponding checkbox in filter options menu
                                if (e.field == g.field) {
                                    var checkbox = e.container.find("input[value='" + g.value + "']");
                                    if (!checkbox[0].checked) {
                                        e.container.find("input[value='" + g.value + "']").click()
                                    }
                                }
                            }
                        })
                    }
                    else if (f.field == "Items" || f.field == "Subitems") 
                    {
                            // this checks the corresponding checkbox in filter options menu
                            if(e.field == f.field)
                            {
                                var checkbox = e.container.find("input[value='" + f.value + "']");                    
                                if (!checkbox[0].checked) {                        
                                    e.container.find("input[value='" + f.value + "']").click()
                                }
                            }
                    }
                 })
            }
    }

function onCategoryFilter(e) {
        if ((e.field == "Items" && e.filter) || (e.field == "Subitems" && e.filter)) {
            e.filter.filters.forEach(function (f) {
                f.operator = "contains";
                console.log('using contains operator');
            });

            // Provide default logic operators ("Or") REVISIT Do I need this?
            /*
            dataSource.filter(
            {
                logic: "or",
                filters: filterCategories
            });
            */

            // Update User Interface by using Kendo classes.
            $("th[data-field='" + e.field + "'] a").first().addClass("k-active");
            $("th[data-field='" + e.field + "'] a").first().removeClass("k-border-down");

            // this checks the corresponding checkbox in filter options menu
            e.filter.filters.forEach(function (item, i) {
                $("input[name='" + e.field + "'][value='" + e.filter.filters[i].value + "']").prop("checked", true);
            });
        }
        else if (e.field == "Items" || e.field == "Subitems") {
            var grid = $("#grid").data("kendoGrid");
            var dataSource = grid.dataSource;
            if (dataSource.filter() != null) {
                filters = dataSource.filter().filters;
                if (filters.length > 0) {                    
                    removeFilter(filters, e.field, dataSource);
                    $("th[data-field='" + e.field + "'] a").first().addClass("k-border-down");
                    $("th[data-field='" + e.field + "'] a").first().removeClass("k-active");
                }

                dataSource.filter(filters);
                e.preventDefault();
            }
        }
    }

Is there any out of the box functionality that can be configured instead of writing custom code as it introduces inadvertent glitches and also I don't like the way I had to implement onFilterMenuOpen function where I had to have conditional logic to check whether or not the "f.filters" collection was null which is introducing code duplication. Any suggestions?

Thank you!

Grid

answered on 01 Feb 2023

1 answer

1.2K+ views

httpclient unauthorized error 401

My application is redirected from https:\\application.domain.com to http:\\servername.domain.net

I'm using windows authentication with [authorize] control in webAPI.

Whether I call my webAPI to populate a datasource it works:

.DataSource(source => source
.Custom()
.Transport(transport =>
{
transport.Read(new
{
url = $"{WebApiUrl}",
xhrFields = new { withCredentials = true },
DataType = "json",
Data = "forgeryToken"
});
})

Instead if I use the HTTPCLIENT class it seems that the request loses the credentials and it returns an unauthorize error 401

services.AddHttpClient<Class>()
.ConfigurePrimaryHttpMessageHandler(handler =>
new HttpClientHandler()
{
AutomaticDecompression = System.Net.DecompressionMethods.GZip,
UseDefaultCredentials = true,
});

Whether I don't use the redirection and I call directly http:\\servername.domain.net it works.

How can I use HTTPCLIENT class to mantain the credential?

I know it's not related to telerik, but I don't understand why with telerik it works and I hope that someone can help me.

Thank you

Grid

Security

answered on 01 Feb 2023

1 answer

182 views

Passing a parameter inside an if else in the grid

Does anyone know how to format the Id I want to pass in the if else statement. Or is there a way to do it in the columns command that might be easier. Thank you.

@(Html.Kendo().Grid(Model)
                .Name("Grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Id).Hidden(true);
                    columns.Bound(p => p.JobStartDateTime).Visible(false);
                    columns.Bound(p => p.JobInfo).Title("Job");
                    columns.Bound(p => p.JobTimes).Title("Times");
                    columns.Bound(p => p.JobPayDisplay).Title("Pay");
                    columns.Bound(p => p.JobFirstCome).ClientTemplate
("#if (JobFirstCome == true)
{ <input type='button' class='k-button k-success-colored' onclick='SignUps(***Id***)' value='Sign Up'/> } 
else{ <input type='button' class='k-button k-info-colored' onclick='Request(****Id***)' value='Request'/>} #");
                    
                    columns.Command(cmd => cmd.Custom("Details").Click("Details"));
                    columns.Command(cmd => cmd.Custom("Sign Up").Click("SignUp").HtmlAttributes(new { @class = "k-success-colored" }));
                })
                .Events(e => e.DataBound("databound"))
                .Pageable()
                .Scrollable(scr => scr.Height(430))
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            //.PageSize(20)
                            .ServerOperation(false)

                        )
                )

Grid

answered on 01 Feb 2023

1 answer

245 views

Telerik ASP.Net Core KendoEditor - fullscreen mode

I am using APS.Net Core Kendo Editor for a rich editor experience which works well.

I wish to enter fullscreen mode and have followed the guidance here ->

https://docs.telerik.com/kendo-ui/knowledge-base/show-editor-in-full-screen

Running locally in Visual Studio this works perfectly.

However, when i deploy the web app to Azure I fall fowl of Permissions Policy whereby I am required to allow "fullscreen" on

any IFRAMES i.e.

<iframe allow="fullscreen"></iframe>

As the IFRAME is being created by Telerik using @(Html.Kendo().Editor()), how do I add 'allow="fullscreen"' to the IFRAME tag?

Editor

answered on 31 Jan 2023