Questions on UI for ASP.NET MVC Forum

1 answer

251 views

Is there a solution for assigning a unique ID to a table strip item? Currently I can see an example where you can reference the TabStip item name with the following however I need to assign a unique ID because the item name of my tabs can vary. The ordinal position can vary also.

$(e.item).find("> .k-link").text()

TabStrip

answered on 12 Jan 2023

1 answer

178 views

Upload async mode - sequential upload of images?

Hi,

one of our customers currently has difficulties uploading multiple images asynchronous. Single images seem to be ok.

We're already using the option Batch(false), so images arrive one at a time at the server.

The uploads seem to occur simultaneously, though. Is there an option to also upload these sequentially, or do we need to use the synchronous mode in this case?

Upload

answered on 12 Jan 2023

1 answer

366 views

Upload - IEnumerable<HttpPostedFileBase> images null on tablets for multiple images

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?

Upload

answered on 11 Jan 2023

1 answer

196 views

Setting variable based on model value on row level dropdown list

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.

DropDownList

Grid

answered on 06 Jan 2023

0 answers

184 views

How to do sorting in treeview

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

})

Sortable

TreeView

updated question on 04 Jan 2023

0 answers

143 views

Using Endless Scroll with Hierarchical Data Grid

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

Grid

Scroller

asked on 03 Jan 2023

1 answer

593 views

Is Telerik protect for Sql injection attacks?

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

General Discussions

Grid

answered on 02 Jan 2023

1 answer

349 views

I have more than 400,000 data, ToDatasourceResult take to long.

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

Grid

answered on 02 Jan 2023

0 answers

216 views

Problem with render the org chart on browser

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

Chart

OrgChart

asked on 30 Dec 2022

1 answer

118 views

Not able to get a CSS for validation message in kendo 2020 version

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