Questions on UI for ASP.NET Core Forum

1 answer

853 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.3K+ 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

187 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

260 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

1 answer

329 views

Grid with file upload

Model:

 public string TemplateId { get; set; } 
 public byte[] Template { get; set; }
 public string? Filter { get; set; }
 public DateTime ValidFrom { get; set; }

I have Implemented a Grid with a popup editor.

The Template field is used to store the file as Blob in the DB.

In the add row there should be a File upload and in the edit also need a file upload.

I have created a custom template for add row, but the file is not post back to controller.

How can we send the file and the form data in the request to controller?

Grid

Upload

answered on 31 Jan 2023

1 answer

324 views

Drag drop from both a TreeView and a ListBox to another ListBox?

I have

@(Html.Kendo().TreeView()
.Name("treeviewAvail")

...and...

@(Html.Kendo().ListBox()
.Name("listboxAvail")

How can I 'have both of those so that I can drag/drop from either into another list box? (It's not needed to go the other way.)

@(Html.Kendo().ListBox()
.Name("listboxSelected")

I've seen this topic, but it does not handle what I need for TreeView too

https://www.telerik.com/forums/listbox-drag-and-drop-1557506

ListBox

TreeView

answered on 31 Jan 2023

0 answers

124 views

Cascading ComboBox for load form

The page has two cascades ComboBox .
With a blank page, everything works fine.
But when data is transferred to the page (for editing), then the second ComboBox does not display and is blocked.
It turns out after loading the data in the first ! does not fit into filterCategory.
How to fix this nuance?

@model ServiceViewModel
@using Kendo.Mvc.UI

.....
<div class="row">
            <div class="col">
                @(Html.Kendo().ComboBox()
                    .Name("CategoriesServiceDrop")
                    .Value(Model.CategoriesService)
                    .AutoBind(true)
                    .HtmlAttributes(new { style = "width:100%;"})
                    .Placeholder("Выбор категории...")
                    .DataTextField("Category")
                    .DataValueField("IdCategory")
                    .Filter(FilterType.Contains)
                    .DataSource(source => source.Read(read => read.Action("CategoryServis_Read", "ServiceSubmit")))
                )
            </div>
            <div class="col">
                @(Html.Kendo().ComboBox()
                    .Name("CategoryPodServicesDrop")
                    .HtmlAttributes(new { style = "width:100%;"})
                    .Placeholder("Выбор детальной категории...")
                    .DataTextField("CategoryPod")
                    .Value(Model.CategoryPodServices)
                   // .DataValueField("Id")
                    .Filter("contains")
                    .DataSource(source => source.Read(read => read.Action("CategoryPodServis_Read", "ServiceSubmit").Data("filterCategory")).ServerFiltering(true))
                    .AutoBind(false)
                    .Enable(false)
                    .CascadeFrom("CategoriesServiceDrop")
                )
            </div>
        </div>
.....

ComboBox

asked on 27 Jan 2023

1 answer

270 views

Upload files inside a grid does not send files to controller

Hello,

I am using upload as an editor template inside grid. But the actual file selected is not being passed to the controller. The controller save method always shows 0 files. Am I missing something here?

Please find the code snippets below.

Grid:

@(Html.Kendo().Grid<DocumentViewEditModel>
().Name("Documents").Columns(c =>
{
c.Command(command => { command.Edit(); command.Destroy(); }).Width(220).Visible(@readOnlyForm);
c.Bound(d => d.DocumentId).Hidden(true);
c.Bound(d => d.ProjectId).Hidden(true);
c.Bound(d => d.ScagdocumentId).Title("SCAG Document").Width(140);
c.ForeignKey(d => d.DocumentCategoryId, (SelectList)ViewData["DocumentCategoryList"]).Title("Document Status *").Width(150);
c.ForeignKey(d => d.NoticeTypeId, (SelectList)ViewData["NoticeTypeList"]).Title("Notice Type *").Width(220);
c.ForeignKey(d => d.EirtypeId, (SelectList)ViewData["DocumentTypeList"]).Title("Document Type *").Width(250);
c.Bound(d => d.DocumentDescription).Title("Project Description *").Width(350).HtmlAttributes(new { style = "white-space: pre-line;" });
c.Bound(d => d.LogDate).Title("Date Received *").Format("{0: MM/dd/yyyy}").Width(170);
c.Bound(d => d.DueDate).Title("Due Date for Comment").Format("{0: MM/dd/yyyy}").Width(180);
c.Bound(d => d.DateModified).Title("Date Modified").Format("{0: MM/dd/yyyy}").Width(120);
c.Bound(d => d.ModifiedBy).Title("Modified By").Width(130);
c.Bound(d => d.DocumentUploadEditor).EditorTemplateName("DocumentUploadEditor").Title("Upload").ClientTemplate("#:Filename#").Width(150);
c.Command(command => command.Custom("View").Click("navigateToOpen")).Width(190);
})
.DataSource(d => d
.Ajax()
.Events(events => events.Error("error_handler"))
.Read(r => r.Action("GetDocuments", "Projects").Data("getAdditionalData"))
.Update(u => u.Action("UpdateDocuments", "Projects"))
.Destroy(x => x.Action("DeleteDocuments", "Projects"))
.Create(c => c.Action("CreateDocuments", "Projects").Data("getAdditionalData"))
.PageSize(10)
.Model(m =>
{
m.Id(d => d.DocumentId);
m.Field("DocumentCategoryId", typeof(int));
m.Field("NoticeTypeId", typeof(int));
m.Field("EirtypeId", typeof(int));
m.Field(d => d.DocumentDescription);
m.Field(d => d.LogDate);
m.Field(d => d.DueDate);
m.Field("ScagdocumentId", typeof(string)).Editable(false);
m.Field(d => d.ModifiedBy).Editable(false);
m.Field(d => d.DateModified).Editable(false);
m.Field("ProjectId", typeof(int));
})
)
.Pageable()
.Sortable()
.Scrollable(s => s.Virtual(GridVirtualizationMode.Columns).Height("auto"))
.HtmlAttributes(new { style = "width:1420px" })
.Editable(e => e.Mode(GridEditMode.InLine))
.ToolBar(toolbar => { if (@readOnlyForm) { toolbar.Create(); } })
)

Editor Template:

@(Html.Kendo().Upload()
.Name("DocumentUploadEditor")
.Async(a => a
.Save("UploadNoticeObjects", "Projects")
.AutoUpload(true)
)

.Events(e => e.Upload("onNoticeUpload")
.Success("onSuccess"))

)

Controller:

public async Task<IActionResult> UploadNoticeObjects(IEnumerable<IFormFile> DocumentUploadEditor, string noticeDocID, string projectNum, string projectTitle, string projectType, string documentType, string noticeType)
{

if (DocumentUploadEditor != null)
{
foreach (var file in DocumentUploadEditor)
{
var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);

// Some browsers send file names with full path. Only interested in the file name.
var fileName = Path.GetFileName(fileContent.FileName.ToString().Trim('"'));

using (var memoryStream = new MemoryStream())
{
await file.CopyToAsync(memoryStream);
await _uploadFilesManager.UploadNoticeToSharePoint(fileName, memoryStream, NoticesMetadata,"", "").ConfigureAwait(false);
}
}
}

// Return an ok to signify success.
return Ok();
}

Grid

Upload

answered on 27 Jan 2023

6 answers

523 views

ServerPaging With Razor

I am trying to do ServerPaging with this example from telerik: https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/grid/razor-pages-custom-datasource-date-editing/RazorPageGridTest/Pages/Customer

I have modified OnPostReadRecords by adding [DataSourceRequest] DataSourceRequest request

public JsonResult OnPostReadRecords([DataSourceRequest] DataSourceRequest request)

And I have added .ServerPaging(true) to the grid definition.

The resulting value of request is default and the page number is always '1'.

I am new to the telerik controls, so it's really like casting spells for me.

Grid

answered on 24 Jan 2023

1 answer

97 views

How do I change the UpdateText and CancelText for the column-command tag using TagHelper?

Hello,

When using HtmlHelper I can do something like this if I want to change the UpdateText and CancelText to blank:

columns.Command(command => {
    command.Edit()
    .Text(" ")
    .UpdateText(" ")
    .CancelText(" ")
    .HtmlAttributes(new { title = "Edit" });

    command.Custom("Destroy")
    .Click("showDeleteConfirmation")
    .IconClass("k-icon k-i-trash")
    .Text(" ")
    .HtmlAttributes(new { title = "Delete" });
}).Width(75);

How do I accomplish the same thing with TagHelper? I tried checking to see if there's a canceltext or updatetext attribute but there is none.

<column width="75" title="Commands">
    <commands>
        <column-command text=" " name="edit" title="Edit" ></column-command>                      
        <column-command text=" " name="cancel" title="Cancel" ></column-command>
    </commands>
</column>

Thank you.

Grid

answered on 24 Jan 2023