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

Hi,

I have a grid, where the column is rendered via ClientRowTemplate, and on that template, I have 3 buttons, that should open 3 different pop-ups (similar to popUp Edit).

.Editable(editable => editable<br>            .Mode(GridEditMode.PopUp)<br>            .Window(w =><br>            {<br>                w.HtmlAttributes(new { @class = "csa-edit"});<br>                w.HtmlAttributes(new { style = "height: 200px;" });<br>                w.Height(200);<br>                w.Width(500);<br>                w.Title("Customer Validation");<br>                w.Events(v =><br>                    v.Open("OnEditStart")<br>                        .Activate(@<text>function () { console.log("EditWindow.Activate") }</text>));<br>                }))

 

I've tried this, but it's not what I exactly need, because I need to have customized templates for each button. 

Can you point me some article or demo ?

Any help would be highly appreciated. 

Best regards,

Manuel

Nikolay
Telerik team
 answered on 12 Mar 2021
1 answer
139 views

Hi,

 

I have a grid with nested property 'OrderName'. Not all rows have the OrderName but this is no problem.  Everything works perfect till I want to delete row and this row does not have the OrderName (there is no reference to a Order table/object).

I get the error:

Cannot set property 'OrderId' of null

    at Object.eval [as Order.OrderId] (eval at setter (kendo.all.js:2138), <anonymous>:3:16)

Schema definition:

<schema>
<model id="Id">
<fields>
                            <field name="CreateDate" type="date"></field>
                       
                            <field name="UserName" from="CustomerUser.Name"></field>
                            <field name="AnswerDate" type="date"></field>
                       
                            <field name="OrderName" from="Order.OrderId" default-value="String.Empty"></field>

<field name="Direction" type="number"></field>
<field name="CustomerName" from="Customer.Name" default-value="String.Empty"></field>
</fields>
</model>
</schema>

 

Column definition:

<column field="OrderName" width="150" title="@SharedLocalizer["grid_column_order"].Value" template="@($"# if(OrderId !== null) {{#  <a class='underline' href='{Url.Action("Detail", "Orders")}/#= OrderId #'>#= OrderName #</a>#}}#")"></column>

 

Delete function:

grid.dataSource.remove(dataItem); 
grid.dataSource.sync();

 

Georgi Denchev
Telerik team
 answered on 12 Mar 2021
4 answers
1.8K+ views

Hi,

 

I'm trying to use an Upload component on a .Net Core 2.2 Razor Pages project, I have a form to edit a record, where I would like to add a file as a an attachment.

I've been trying 2 difference methods to achieve this.

 

Method 1 - To a Controller

I've been able to get the below to upload a file to a controller, where I can convert to a byte array to eventually try and save to a database.

Component

@(Html.Kendo().Upload()
    .Name("files")
    .Async(a => a
        .Save("SaveAsync", "Upload")
        .Remove("Remove", "Upload")
    )
    .Validation(validation => validation.AllowedExtensions(new string[] { ".gif", ".jpg", ".png" }))
)

 

Controller 

public async Task<ActionResult> SaveAsync(IEnumerable<IFormFile> files)
       {
           if (files != null)
           {
               foreach (var file in files)
               {
                   if (file.Length > 0)
                   {
                       using (var ms = new MemoryStream())
                       {
                           await file.CopyToAsync(ms);
                           var fileBytes = ms.ToArray();
                           string s = Convert.ToBase64String(fileBytes);
                       }
                   }
               }
           }
           return Content("");
       }

 

Problem:  I don't know how pass the records ID when the files are passed to the controller, so I can save the Byte Array to the correct record. How do I include a parameter?

 

Method 2 - Via Code Behind (Ideal)

The ideal method as this is a razor pages app, is to pass the files to a handler on the code behind, so I have the Record ID available, I've moved the SaveAsync Task to the Razor page code behind, but I can't get it to trigger when the file is uploaded.

So far, I've tried the below to call the OnPostSaveAsync Handler

@(Html.Kendo().Upload()
            .Name("files")
            .Async(a => a
                .SaveUrl("/Case/Edit?handler=SaveAsync")
                .Remove("Remove", "Upload")
            )
            .Validation(validation => validation.AllowedExtensions(new string[] { ".gif", ".jpg", ".png" }))
        )

 

public async Task<ActionResult> OnPostSaveAsync(IEnumerable<IFormFile> files)
       {
           if (files != null)
           {
               foreach (var file in files)
               {
                   if (file.Length > 0)
                   {
                       using (var ms = new MemoryStream())
                       {
                           await file.CopyToAsync(ms);
                           var fileBytes = ms.ToArray();
                           string s = Convert.ToBase64String(fileBytes);
                       }
                   }
               }
           }
           return Content("");
       }

 

Problem:  It doesn't trigger the handler.. Can you see what I'm missing/done wrong? If passing the razor code behind isn't possible, how would I pass a parameter of the record ID to the controller, using the MVC method?

 

Thanks in advance for any help on this, we've only recently purchased DevCraft and I'm hoping it's something simple! 

 

Mark

 

Dimitar
Telerik team
 answered on 12 Mar 2021
5 answers
195 views

I need an example on how to pull a file from Azure to view in this control and to limit the functionality in the ImageEditor to not allow upload and download.  I use your PDF Viewer so based on that example, this is what I have:

Controller:

        [HttpGet]
        public async Task<FileStreamResult> DownloadFileFromBlobStorage(int id)

        {

        ...

                                    if (currentContainer.Container != null)
                                    {
                                        BlobContainerClient blobContainerClient =
                                            currentContainer.Container.Name.GetContainer();

                                        if (await blobContainerClient.ExistsAsync())
                                        {
                                            if (await blobContainerClient.BlobExists(currentContainer.Path))
                                            {
                                                Stream stream =
                                                    await blobContainerClient.GetStream(
                                                        currentContainer.Path);
                                                stream.Position = 0;

                                                return File(stream, contentType);
                                            }
                                            else
                                            {
                                                throw new Exception("File not found in Azure container for this record");
                                            }
                                        }
                                        else
                                        {
                                            throw new Exception(
                                                $"Unable to capture Azure container: {currentContainer.Container.Name}");
                                        }
                                    }

        }

 

View:

pdfViewer works... I need help with the imageEditor:

    @if (Model.Item.Extension.ToLower() == Glossary.PdfExtension)
    {
        <div>
            @(Html.Kendo().PDFViewer()
                .Name("pdfviewer2")
                .PdfjsProcessing(pdf => pdf.File(""))
                .Toolbar(toolbar =>
                {
                    toolbar.Items(items =>
                    {
                        items.Add().Name("pager");
                        items.Add().Name("spacer");
                        items.Add().Name("zoom");
                        items.Add().Name("toggleSelection");
                        items.Add().Name("spacer");
                        items.Add().Name("search");
                        items.Add().Name("download");
                        items.Add().Name("print");
                    });
                })
                )
        </div>
    }
    else if (Model.Item.Extension.ToLower() == Glossary.PngExtension)
    {
        <div>
            @(Html.Kendo().ImageEditor()
                .Name("imageEditor")
                .Height(900)

... how to load image from FileStreamResult
                )
        </div>
    }

View Script:

    $(document).ready(function() {
        var pdfViewer = $("#pdfviewer2").data("kendoPDFViewer");

        // pdfViewer is not rendered unless the file extension is PDF
        if (pdfViewer != null) {
            var handlerUrlPdf = "/Pdfs/DownloadFileFromBlobStorage/" + @Model.Item.Id + "/" + @Glossary.Pdf;
            pdfViewer.fromFile(handlerUrlPdf);
        }

        var imageViewer = $("#imageEditor").data("kendoImageEditor");

        if (imageViewer != null) {
            var handlerUrlPng = "/Pdfs/DownloadFileFromBlobStorage/" + @Model.Item.Id + "/" + @Glossary.Image;
            imageViewer.fromFile(handlerUrlPng);
        }
    });

Ianko
Telerik team
 answered on 11 Mar 2021
7 answers
1.1K+ views

Hello,

I want to create a html helper for grid in asp.net core application using code from this example Define a custom Html.Kendo extension helper.

But HtmlHelper class not found. What am I doing wrong?

Leo
Top achievements
Rank 1
 answered on 10 Mar 2021
5 answers
578 views

Is it possible to create multilevel Pie / Donut Chart with the chart component?

I have included an example of what I mean. The point is that the outer ring shows sub categories of categories in the inner ring.

Kind Regards

Erwin

Tsvetomir
Telerik team
 answered on 10 Mar 2021
7 answers
824 views

Hi,

I am trying to apply filter to a grid from server-side. Below is the implementation. 

public static AjaxDataSourceBuilder<T> Configure<T>(this AjaxDataSourceBuilder<T> source, UserGridPreferenceVM userPreferences) where T : class
{
    if (userPreferences.Filter?.Filters != null && userPreferences.Filter.Filters.Length > 0)
    {
        List<FilterDescriptor> filters = new List<FilterDescriptor>();
  
        foreach (FilterElement filter in userPreferences.Filter.Filters)
        {
            filters.Add(new FilterDescriptor(filter.Field, GetFilterOperator(filter.Operator), filter.Value));
        }
  
        source.Filter(s =>
        {
            s.AddRange(filters);
        });
    }
  
    return source;
}

 

I have 2 questions.
1. When the grid loads the filter condition is set but value of the filter is not set.
2. How we can apply Logic operator "And"/"Or" to the filter wrt above code snippet?

 

Thanks in advance.

Nikolay
Telerik team
 answered on 10 Mar 2021
1 answer
1.0K+ views
I need to pull pdf's from a different site, additionally the site requires authentication.  It looks like the PDF.js library supports xhr withcredentials, how do I specify this when using the Kendo wrapper?
@(Html.Kendo().PDFViewer()
        .Name("pdfviewer")
        .PdfjsProcessing(pdf => pdf
            .File(Url.Content("https://localhost:44335/test.pdf")) 
        )
    )
Aleksandar
Telerik team
 answered on 04 Mar 2021
5 answers
398 views

Hi, i have a chart see attached image.

1. How can i hide the "Total" label from the Legend and the corresponding column?

2. Sorting doesn't seem to work

Here's 

@(Html.Kendo().Chart<UpdateLine>()
    .Name("chart")
    .Title("API Calls")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Top)
    )
    .SeriesDefaults(defaults => defaults
        .Column()
        .Visual("chartVisual")
    )
    .Series(series =>
    {
        series.Column(model => model.Count).Name("#= group.value #").CategoryField("Date");
 
        series.Line(model => model.Total, x => x.Date)
            .Color(Colours.Orange)
            .VisibleInLegend(false)
            .Axis("Total");
    })
    .SeriesColors(Colours.Blue, Colours.Orange, Colours.Grey, Colours.Yellow, Colours.LightBlue, Colours.Green)
    .ValueAxis(axis => axis.Numeric()
        .Labels(l => l.Format("{0:N0}"))
    )
    .CategoryAxis(axis => axis
        .Date()
        .Name("DateAxis")
        //.Min(1)
        .Labels(labels => labels.Format("dd MMM"))
    )
    .ValueAxis(axis => axis
        .Numeric()
        .Name("Total")
        .Title("Total Calls")
        .Color(Colours.Orange)
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0:N}")
        .Template("#= series.name #: #= kendo.format('{0:N0}', value) #")
    )
    .Events(events => events.
        DataBound("onDataBound")
    )
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("Chart", "Updates"))
        .Group(group => group.Add(model => model.Zone))
        .Sort(sort => sort.Add(model => model.Date).Descending())
    ))
Nikolay
Telerik team
 answered on 04 Mar 2021
2 answers
109 views

I need to create custom editor for employee leave requests. I know how to create custom template but I am not sure how to change that title in title bar. I want it to be name of the employee since it is not event but rather leave request in my case. 

 

Igor Stefanovic
Top achievements
Rank 1
 answered on 03 Mar 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
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?