Telerik Forums
UI for ASP.NET MVC Forum
1 answer
37 views

HI,

we're using the Upload control like this:

Client:

@(Html.Kendo().Upload()
        .Name("images")
        .Async(a => a
            .Save("SaveImages", "Box")
            .Batch(false)
            .AutoUpload(true)
        )
        .HtmlAttributes(new { accept = "image/*" })
        .Events(e => {
            e.Upload("upload");
            e.Remove("remove");
        })
        .DropZone(".dropZoneElement")
        .ShowFileList(false)
        .Validation(v => v.AllowedExtensions(new string[] { ".jpg", ".jpeg", ".png", ".bmp", ".gif" }))
    )
// https://docs.telerik.com/kendo-ui/knowledge-base/upload-mvc-send-additional-data
        function upload(e) {
            e.data = {
                id: @Model.ID
            };
        }

        function remove(e) {
            e.data = {
                id: @Model.ID
            };
        }

Server:


public ActionResult SaveImages(IEnumerable<HttpPostedFileBase> images, int id)
        {
            var ids = new Dictionary<string, int>();

            if(id > 0)
            {
                foreach (var image in images)
                {
                    ...
                }
            }
            
            return Json(ids);
        }

A customer of ours now has the problem, that when uploading multiple images the images-Parameter on server-side is null. Uploading single images is working. The problem is only occuring on tablets.

We currently cannot reproduce this behaviour. Is there anything we must know here which can lead to this behaviour?

Ivan Danchev
Telerik team
 answered on 11 Jan 2023
1 answer
24 views

I have had to admit defeat after much googling and trial and error I have been unable to recreat what I want.

I have a view model that can be simplified as follows;

    public class HeadsOfClaim
    {
        public HeadsOfClaim()
        {

        }

        public int? ClaimId { get; set; }
        public int? ClaimDetailId { get; set; }
        public string ClaimType { get; set; }
        public string Description { get; set; }
        public bool Rejected { get; set; }
    }

A controller which returns the json

    public ActionResult ReturnHeads([DataSourceRequest]DataSourceRequest request, int? id)
    {
        Claim c = db.Claims.Find(id);
        IEnumerable<HeadsOfClaim> details = ViewModels.HeadsOfClaim.GetList(c);
        return Json(details.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

and a view that includes the following

    @(Html.Kendo().Grid<ClaimRegister.ViewModels.HeadsOfClaim>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ClaimType).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
            columns.Bound(p => p.Description).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(225);
            columns.Template(@<text></text>).HtmlAttributes(new { @class = "templateCell", id = "#=id#" }).ClientTemplate(
                Html.Kendo().DropDownButton()
                    .Name("menu_TEST_#=id#")
                    .Text("Action")
                    .Size(ComponentSize.Large)
                    .Items(its =>
                    {
                        its.Add().Text("Reverse Rejection").Hidden("#=Rejected#" == "true").HtmlAttributes(new { data_id = "#=id#" }).Click("ConfirmUnReject");
                        its.Add().Text("--Set").Hidden("#=Rejected#" != "true").Enabled(false);
                        its.Add().Text("Reserve").Hidden("#=Rejected#" != "true").HtmlAttributes(new { data_title = "Set Reserve", data_url = Url.Action("Individual", "Reserve", new { type = type, id = "#=id#" }) }).Click("LaunchModal");
                        its.Add().Text("Settlement").Hidden("#=Rejected#" != "true").HtmlAttributes(new { data_title = "Set Settlement", data_url = Url.Action("Individual", "Settlement", new { type = type, id = "#=id#" }) }).Click("LaunchModal");
                        its.Add().Text("--View").Enabled(false);
                        its.Add().Text("Allocation").HtmlAttributes(new { data_title = "Review Allocation", data_url = Url.Action("Review", "Allocation", new { id = "#=id#" }) }).Click("LaunchModal");
                    })
                    .ToClientTemplate().ToHtmlString()
            );
        })
        .Pageable()
        .Sortable()
        .Groupable()
        .Events(ev => ev.DataBound("initMenu"))
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(m => {
                m.Id(d => d.ClaimDetailId);
                m.Field(d => d.Rejected);
            })
            .Group(groups => groups.Add(p => p.ClaimType))
            .Read(read => read.Action("ReturnHeads", "ClaimDetails", new { id = id }))
        )
    )

...

<script>
    function initMenu(e) {
        $(".templateCell").each(function () {
            eval($(this).children("script").last().html());
        });
    }
</script>

My problem is setting the visibility of the dropdown options.  Effectively dependent on whether the claim is Rejected (true or false) I want different options to be available to the user. 

I had a look at the template script before initMenu runs but the evaluation is already made by that stage so it is unclear how it is doing the checking.

Irrelevant of whether rejected is true or false I get "Reverse Rejection", "--View" and "Allocation" as the only visible option.

Any help or insights gratefully received.

Ivan Danchev
Telerik team
 answered on 06 Jan 2023
0 answers
20 views
How to do sorting and filtering of child nodes in .net mvc treeview using telerik?
 @(Html.Kendo().TreeView()
            .Name("treeview")
            .ExpandAll(true)
            .DataSpriteCssClassField("sprite")
            .BindTo((IEnumerable<FolderViewVM>)Model.FolderList, (NavigationBindingFactory<TreeViewItem> mappings) =>
            {
                mappings.For<FolderViewVM>(binding => binding.ItemDataBound((item, doc) =>
                {
                    item.Text = doc.Name;
                    item.Id = doc.Id.ToString();
                })
                .Children(doc => doc.Children));

            })
Robin
Top achievements
Rank 1
 updated question on 04 Jan 2023
0 answers
13 views

Hello,

I want to implement endless scroll for both master and detail grid. Is that possible? I tried to use detail grid as below but nothing worked.

 

@(Html.Kendo().Grid<AspNetCoreGrid.Models.OrderViewModel>() .Name("grid") .Scrollable(sc => sc.Endless(true))
.Scrollable(s => s.Height("100px"))

)

Nevra
Top achievements
Rank 1
 asked on 03 Jan 2023
1 answer
28 views

Hi All,

I'm using Telerik UI for ASP.NET MVC R1 2021 licenced version and when customers doing some security test looks like some of Telerik instance codes can create Sql Injection attack possibility. Is it possible ? Is Telerik protect for Sql injection attacks?

One of usage example given below


        public ActionResult GridTransactionBinding([DataSourceRequest]DataSourceRequest request)
        {
            if (Session["Username"] == null) { return View("404"); }
            if (GetUserFleetId() != 0)
            {
                Load = GetLoadAmount();
            }

            return Json(Load.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

 

Thanks

 

Georgi
Telerik team
 answered on 02 Jan 2023
1 answer
19 views
Hye.. I cant use ToDatasourceResult, because its take too long. But if i use normal datacontext, its just take a second to show the data. Please assist me. thank you
Eyup
Telerik team
 answered on 02 Jan 2023
0 answers
23 views

Hi Team, 

I want to display the ORG chart in the Asp.net MVC application but it is not displayed. It shows only an empty page. No error is shown in the console. I have attached the screenshot below.       

My Layout references are as : 

<link rel="stylesheet" href="/Content/kendo/2022.3.913/kendo.common.min.css" />
    <link rel="stylesheet" href="/Content/kendo/2022.3.913/kendo.default.min.css" />
    <link rel="stylesheet" href="/Content/kendo/2022.3.913/kendo.default.mobile.min.css" />
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/jquery.min.js"></script>
    <script src="~/Scripts/kendo/2022.3.913/kendo.all.min.js"></script>
    <script src="~/Scripts/kendo/2022.3.913/kendo.aspnetmvc.min.js" type="text/javascript"></script>
    <script src="~/Scripts/kendo/2022.3.913/kendo.dataviz.min.js"></script>
    <script src="~/Scripts/kendo/2022.3.913/kendo.orgchart.min.js"></script>

Razer page code as below:- 

@using Kendo.Mvc.UI;

             @(Html.Kendo().OrgChart<fcPortoloManager.Models.Portolo.OrgChartViewModel>()
    .Name("orgchart")
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("Read", "OrganizationStructure"))
        .Model(m => {
            m.Id(f => f.ID);
            m.ParentId(f => f.ParentID);
            m.Name(f => f.Name);
            m.Title(f => f.Title);           
        })

And controller code is as below :

  public JsonResult Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(new
            {
                Data = OrgChartData
            }, JsonRequestBehavior.AllowGet);
        }
        public static OrgChartEmployeeViewModel One(Func<OrgChartEmployeeViewModel, bool> predicate)
        {
            return OrgChartData.FirstOrDefault(predicate);
        }
        private static IList<OrgChartEmployeeViewModel> OrgChartData
        {
            get
            {
                IList<OrgChartEmployeeViewModel> source = System.Web.HttpContext.Current.Session["OrgChartEmployees"] as IList<OrgChartEmployeeViewModel>;

                if (source == null)
                {
                    System.Web.HttpContext.Current.Session["OrgChartEmployees"] = source = new List<OrgChartEmployeeViewModel>
                    {
                    new OrgChartEmployeeViewModel() { ID = 1, Name = "Gevin Bell", Title = "CEO", Expanded = true, Avatar = "../content/web/treelist/people/1.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 2, Name = "Clevey Thrustfield", Title = "COO", Expanded = true, ParentID = 1, Avatar = "../content/web/treelist/people/2.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 3, Name = "Carol Baker", Title = "CFO", Expanded = false, ParentID = 1, Avatar = "../content/web/treelist/people/3.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 4, Name = "Kendra Howell", Title = "CMO", Expanded = false, ParentID = 1, Avatar = "../content/web/treelist/people/4.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 5, Name = "Sean Rusell", Title = "Financial Manager", Expanded = true, ParentID = 3, Avatar = "../content/web/treelist/people/5.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 6, Name = "Steven North", Title = "Senior Manager", Expanded = false, ParentID = 3, Avatar = "../content/web/treelist/people/6.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 7, Name = "Michelle Hudson", Title = "Operations Manager", Expanded = true, ParentID = 2, Avatar = "../content/web/treelist/people/7.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 8, Name = "Andrew Berry", Title = "Team Lead", ParentID = 5, Avatar = "../content/web/treelist/people/8.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 9, Name = "Jake Miller", Title = "Junior Accountant", ParentID = 5, Avatar = "../content/web/treelist/people/9.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 10, Name = "Austin Piper", Title = "Accountant", ParentID = 5, Avatar = "../content/web/treelist/people/10.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 11, Name = "Dilyana Newman", Title = "Accountant", ParentID = 5, Avatar = "../content/web/treelist/people/11.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 12, Name = "Eva Andrews", Title = "Team Lead", ParentID = 6, Avatar = "../content/web/treelist/people/12.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 13, Name = "Kaya Nilsen", Title = "Financial Specialist", ParentID = 6, Avatar = "../content/web/treelist/people/13.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 14, Name = "Elena Austin", Title = "Team Lead", ParentID = 4, Avatar = "../content/web/treelist/people/14.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 15, Name = "Lora Samuels", Title = "Lawyer", ParentID = 4, Avatar = "../content/web/treelist/people/15.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 16, Name = "Lillian Carr", Title = "Operator", ParentID = 7, Avatar = "../content/web/treelist/people/17.jpg" },
                    new OrgChartEmployeeViewModel() { ID = 17, Name = "David Henderson", Title = "Team Lead", ParentID = 7, Avatar = "../content/web/treelist/people/16.jpg" },
                };
                }
                return source;
            }
        }

The model code is as below : 

 public class OrgChartEmployeeViewModel {
        public int ID { get; set; }
        public string Name { get; set; }

        public string Title { get; set; }

        public bool Expanded { get; set; }

        public string Avatar { get; set; }

        public int ParentID { get; set; }
    }

 

 

 

 

 

 
Navneet
Top achievements
Rank 1
 asked on 30 Dec 2022
1 answer
24 views

HI Telerik Team,

We have an application in which we are using KendoMVC UI Components, previously we had used 2016.1.226 now we need to upgrade the Kendo version to 2020.3118

We tried to upgrade the version, but there is inconsistency in the UI. Please find below image for reference

This image is of 2016 Kendo Build

and

 

This image is of 2020 Build 

 

As per our requirement we need same CSS which we had seen in 2016 version for version 2020 as well, Please let us know any file we need to add.

Karina
Telerik team
 answered on 30 Dec 2022
0 answers
23 views

I currently have the following setup and it works fine. However, I need to make my controller endpoint POST and be able to pass the data that will be loaded in the PDF from the client. The examples I have found with fromFile point to a GET endpoint that takes simple parameters like Id but I need to be able to pass the actual content to be loaded in the returned PDF. Hoping someone knows a way if that is at all possible.

JavaScript


        function previewPdf(){
            //I need to pass this doc object to the endpoint
            //var doc = {
            //    case: { caseNumber: 'A12345' },
            //    title: 'Test Doc',
            //    body: $('#Content').data("kendoEditor").value() //getting content from a kendo editor the user is filling out
            //};

            // Create a viewer if you do not have one already.
            var pdfViewer = $("#pdf-viewer").data("kendoPDFViewer");
            if(!pdfViewer){
                pdfViewer = $("#pdf-viewer").kendoPDFViewer({
                    pdfjsProcessing: {
                        file: ""
                    },
                    width: 900,
                    height: window.innerHeight - 150
                }).data("kendoPDFViewer");
            }
            var pdfHandlerUrl = '@Url.Action("GetCourtDocumentPdfBytes", "CourtDocuments")';

                 // I was hoping to make an AJAX call like this and then somehow set the file to the PDF viewer but no luck.
                  //$.ajax({
                  //    type: "POST",
                  //    url: pdfHandlerUrl,
                  //    data: JSON.stringify(doc),
                  //    contentType: "application/json",
                  //    success: function(response) {
                  //      // Use the response (which should be a byte array of the PDF) to update the PDF viewer
                  //      pdfViewer.fromFile(response); // this doesn't work so clearly not setting the right type here.
                  //    }
                  //});

            // Build the desired URL to point to your handler that will return the PDF.
                  
            pdfViewer.fromFile(pdfHandlerUrl); //this is working fine just for a GET endpoint

            $("#wndPdfPreview").kendoWindow({
                modal: true,
                width: 1000,
                height: window.innerHeight - 100
            });
            $("#wndPdfPreview").data("kendoWindow").center().open();           
        }

 

My Controller endpoint.


//this approach is working.

public async Task<FileStreamResult> GetCourtDocumentPdfBytes()
        {
            CourtDocument doc = new CourtDocument { Body = "the Body", Title = "the title", Case = new Case { CaseNumber = "2018123CA01" } };
            string html = await this.RenderViewToString("_JudicialOrder", doc, true);
            var bytes = await _pdfService.CreateFromHtml(html, doc.Case.CaseNumber);

            Stream stream = new MemoryStream(bytes);
            return new FileStreamResult(stream, "application/pdf");
            //return File(bytes, "application/pdf", "test.pdf");
        }

//This is more of what I would need.
public async Task<IActionResult> GetCourtDocumentPdfBytes([FromBody] CourtDocument doc)
        {
            string html = await this.RenderViewToString("_JudicialOrder", doc, true);
            var bytes = await _pdfService.CreateFromHtml(html, doc.Case.CaseNumber);

            Stream stream = new MemoryStream(bytes);
            //return new FileStreamResult(stream, "application/pdf");
            return File(bytes, "application/pdf", "test.pdf"); // not sure what to return here to load the pdfViewer from it in the client.
        }

Michel
Top achievements
Rank 1
 asked on 28 Dec 2022
1 answer
26 views

I have a grid which needs to have some conditional formatting on certain cells.  I have achieved this via the model, and a client template, which does work.

The style is passed as a field to the client template.
actl3.Bound(o => o.QualifiedNight_Actual).Title("Registered Nurse/Nursing Associate").HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center;overflow: visible !important;white-space: normal !important;" }).ClientTemplate("<div class=#=QualifiedNightColour#>#=QualifiedNight_ActualText#</div>");

The style is

.stWarning {
    background-color: red;
    width: 100%;
    
}

However, there is still padding around the div which remains a different colour. How can I make the entire cell have the desired background colour? I did try applying negative margins to the style, but this only seemed to work for the left side of the cell.

As just using the client template works well apart from this, I'm really not keen on having to add more JavaScript code for this (as there are nine fields in the grid that need this applying).

Thanks

Eyup
Telerik team
 answered on 27 Dec 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Janki
Top achievements
Rank 3
Iron
Iron
Iron
Deasun
Top achievements
Rank 3
Iron
Iron
Iron
Daniel
Top achievements
Rank 1
Iron
Alex
Top achievements
Rank 1
Iron
Iron
Sterling
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Janki
Top achievements
Rank 3
Iron
Iron
Iron
Deasun
Top achievements
Rank 3
Iron
Iron
Iron
Daniel
Top achievements
Rank 1
Iron
Alex
Top achievements
Rank 1
Iron
Iron
Sterling
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?