I'm using the .NET Core HTMLHelper to instantiate an instance of the tile layout, the problem I'm running into is that the tile widths just shrink instead of reacting like a flex where the cards will stack as the layout gets narrower. Is there a way to do this either via javascript or CSS?

Code:

I would like to resize the height and width of all of the containers so that at certain breakpoints the Layout changes it's grid setting. Currently it seems that the grid CSS is all being placed inline, so you can't overwrite that with a media query in the CSS. I've also tried using a jQuery function on window resize to set the options of the tile layout, but the layout doesn't change and some of the content within the containers disappears.

Window resize code:

Thanks in advance,

Nick

Razor FileManager RootPath

How do I set the RootPath in the Core FileManager to use an Uploads folder that already exists?  Is this done in the cshtl page of the cshtml.cs page?  

Hi

.... bla bla bla

.EventTemplate(

        "<div class='eventItem' style='margin-left: 10px;'>" +

        "<label class='mt-checkbox mt-checkbox-outline'>" +
        "#= kendo.toString(start, 'HH:mm') # - #= kendo.toString(end, 'HH:mm') #"+
        "        <input  type='checkbox' onchange='onCheckboxChange(#=Id#,#=kendo.toString(uid)#)'  #=data.cancelled ? checked='checked' : ''#  class='input-small'> #= title # Seç" +
        "        <span></span>" +
        " </label>"+

 "</div>"
)
.DataSource(d => d
           .ServerOperation(true)
           .Read(m => m.Action("Takvimler_Read", "Kullanici", new { area = "Yonetim" }).Data("GetSchedulerData"))
))

.... bla bla bla

view in code inspector

<input type="checkbox" onchange="onCheckboxChange(1916,05d45395-b80b-4eb1-9700-80c1d7592f0c)" class="input-small">

function

    function onCheckboxChange(Id, Uid) {
        console.log("CheckboxChange Id", Id)
        console.log("CheckboxChange Uid", Uid)
    }

error

When the checkbox is clicked, an error occurs while passing the Uid value to the function with the parameter.

Uncaught SyntaxError: Invalid or unexpected token

Hi,

I thought I should let you know that the issue with Fire Fox and the Editor, where it is unable to get focus if not shown on the page initially is still present in Firefox 68.4.1esr. This is an asp.net core 3.1 app using UI for asp.net Core v2019.3.1023

The js refresh fix  as described here https://www.telerik.com/forums/editor-issues-with-firefox-17 fix still works.

For me, I have the Editor embedded in a Tab page and I am triggering the refresh within the onShow client event.

I'm not sure if there is anything you can do to address this as it seems to be a Firefox issue. I did find a bugzilla reference mentioned in a post somewhere but that points to a very old closed bug: https://bugzilla.mozilla.org/show_bug.cgi?id=254144

Thanks

Chris

Hi

I am using .net core Razor pages and want to add an image browser to an email editor.

The page has an anti-forgery token and other elements on the page use ajax to pass this to the page behind to process data.

Initially when I was trying to call the image browser in a similar way I was getting 400 errors. I then added the attribute [IgnoreAntiforgeryToken(Order = 1001)] to the code behind and was able to hit the code. This is the razor code I am using in order to generate the editor.

 @(Html.Kendo().Editor()
       .Name("email-editor")
       .HtmlAttributes(new { style = "width: 100%; height: 420px" })
       .Tools(tools => tools
                  .Clear()
                  .Bold().Italic().Underline()
                  .JustifyLeft().JustifyCenter().JustifyRight()
                  .InsertUnorderedList().InsertOrderedList()
                  .Outdent()
                  .Indent()
                  .CreateLink().Unlink()
                  .InsertImage())
                  .ImageBrowser(imageBrowser => imageBrowser
                  .Image("~/Content/UserFiles/Images/{0}")
                  .Transport(t =>
                  {
                      t.Read(r => r.Url("./EmailOverview?handler=ReadImage"));
                  })

))

This is the most basic method in the code behind so I can call it.
public async Task<JsonResult> OnPostReadImage()
 {
            return new JsonResult(true);
}

Is there some syntax I can use to pass in an anti-forgery token with the call. Or can I pass in some additionally parameters with jquery?

Many thanks

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).

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

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();

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

Controller 

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

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

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);
        }
    });