Questions on UI for ASP.NET MVC Forum

2 answers

163 views

When i deleted all rows after scroll, grid continue to show deleted data.

Hello,

When I deleted multiple rows before not scroll, row is deleting and grid is refreshing. But If firstly i scroll and new rows come in grid, after this when i deleted all rows, data is deleting on db but grid continue to show all data so grid is not refreshing.

If you help me, i'm glad.

Grid

answered on 30 Mar 2022

1 answer

890 views

Captcha Image not reloaded on Reset

I'm using Captcha for MVC.

I got everything working on ASP.Net 6, except for the Reset.

The Reset-Endpoint is called properly and gives back sucess with the CaptchaModel (captchaUrl, captchaId).

But the Url is not set in the src-Tag of the Captcha-Image, so the Endpoint for getting the rendered Captcha-Image is not called, instead the src-tag is just emptied and the field becomes grey.

When I set the Image-Url I got in the xhr-Request into the src-Tag manually it works as expected.

Audio and Validation working as expected.

XHR:

View Code:

  <p>Captcha:</p>
      @(Html.Kendo().Captcha()
                    .Name("captcha")
                    .CaptchaImage((string)ViewData["Captcha"])
                    .CaptchaId((string)ViewData["CaptchaID"])
                    .DataCaptchaField("Captcha") 
                    .DataCaptchaIdField("CaptchaID") 
                    .Handler(handler => handler.Action("Reset", "Captcha"))
                    .AudioHandlerFunction("audioHandler")
                    .ValidationHandler(handler => handler.Action("Validate", "Captcha"))
                    .ValidateOnBlur(true)
                    .ResetButton(true)
                    .AudioButton(true)
       )

<script>
  $(document).on("kendoReady",
  function() {
        $("#mailform").kendoValidator();
   });

  function audioHandler(args) {
         args.success("@Url.Action("Audio", "Captcha")?captchaId=" + args.data.CaptchaID);
  }
</script>

Controller:

  public class CaptchaController : Controller
    {
        public ActionResult Image(string captchaId)
        {
            CaptchaImage captcha = (CaptchaImage)HttpContext.Session.Get<CaptchaImage>("captcha" + captchaId);
            var image = CaptchaHelper.RenderCaptcha(captcha);
            byte[] bmpBytes;

            using (MemoryStream ms = new MemoryStream())
            {
                image.Save(ms, ImageFormat.Png);
                bmpBytes = ms.ToArray();
            }

            return File(bmpBytes, "image/png");
        }

        [HttpGet]
        public ActionResult Reset()
        {
            CaptchaImage newCaptcha = CaptchaHelper.GetNewCaptcha();

            HttpContext.Session.Set("captcha" + newCaptcha.UniqueId,  newCaptcha);

            return Json(new CaptchaModel { Captcha = Url.Action("image", "captcha", new { captchaID = newCaptcha.UniqueId }), CaptchaID = newCaptcha.UniqueId });
        }

        public ActionResult Audio(string captchaId)
        {
            CaptchaImage captcha = (CaptchaImage)HttpContext.Session.Get<CaptchaImage>("captcha" + captchaId);

            byte[] bmpBytes;

            using (MemoryStream audio = CaptchaHelper.SpeakText(captcha))
            {
                bmpBytes = audio.ToArray();
            }

            return File(bmpBytes, "audio/wav");
        }

        [HttpGet]
        public ActionResult Validate(CaptchaModel model)
        {
            CaptchaImage captchaImage = (CaptchaImage) HttpContext.Session.Get<CaptchaImage>("captcha" + model.CaptchaID);
            return Json(CaptchaHelper.Validate(captchaImage, model.Captcha.ToUpperInvariant()));
        }
    }

Captcha

answered on 30 Mar 2022

1 answer

572 views

Kendo Grid Data store to session

@(Html.Kendo().Grid<TelerikMvcApp1.Models.EmpDependentViewModel>()
.Name("Dependentgrid")
.Columns(columns =>
{
columns.Bound(c => c.serialNo).Visible(false);
columns.ForeignKey(c => c.RelationCode, (System.Collections.IEnumerable)ViewData["relations"], "RelationCode", "Relation").Title("Dependent").Width(60);
columns.Bound(c => c.FirstName).Width(50);
columns.Bound(c => c.MiddleName).Width(50);
columns.Bound(c => c.LastName).Width(50);
columns.Bound(c => c.DateOfBirth).ClientTemplate("#= (DateOfBirth == null)? '' : kendo.toString(kendo.parseDate(DateOfBirth, 'yyyy-MM-dd'), 'MM/dd/yy') #").Width(60);//("#= kendo.toString(DateOfBirth, \"MM/dd/yyyy\") #").Width(60);
columns.Command(command => {command.Custom("Edit").Click("AddEvent"); command.Destroy(); }).Width(60);
//columns.Command(command => command.Custom("select").Text("Select").Click("AddEvent")).Width(60);

})
.ToolBar(toolbar =>
{
toolbar.Create();

})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Scrollable()

.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("EmpDependent_Mst_Read", "Grid", new { id = Model.EmpCode }))
.Create(create => create.Action("EmpDependent_Mst_Create", "Grid", new { id = Model.EmpCode }))
.Update(update => update.Action("EmpDependent_Mst_Update", "Grid"))
.Destroy(destroy => destroy.Action("EmpDependent_Mst_Destroy", "Grid"))
.Model(model => model.Id(p => p.EmpCode))
)
)

Script

function AddEvent() {

var grid = $("#Dependentgrid").data("kendoGrid");

var dataRows = grid.items();

Session["DepenetGrid"] = dataRows;
}

But my session is Empty

Controller

public ActionResult EmpDependent_Mst_Read([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<EmpDependentViewModel> empDependents, int id)
        {

            IQueryable<EmpDependent_Mst> empdependent_mst = db.EmpDependent_Mst;
            DataSourceResult result = null;
            if (Session["DepenetGrid"] == null)
            {
                result = empdependent_mst.Where(x => x.EmpCode == id).ToDataSourceResult(request, c => new EmpDependent_Mst
            {
                EmpCode = c.EmpCode,
                serialNo = c.serialNo,
                RelationCode = c.RelationCode,
                Lineage = c.Lineage,
                FirstName = c.FirstName,
                MiddleName = c.MiddleName,
                LastName = c.LastName,
                DateOfBirth = c.DateOfBirth,

            });
            }
            else
            {
                result = (DataSourceResult)Session["DepenetGrid"];
            }
            return Json(result);
        }

Grid

answered on 30 Mar 2022

0 answers

160 views

EditorTemplate (Scheduler) does not work with ViewData

Hi everyone,

I'm in the process of developing an ASP.NET MVC application that should provide the ability to record the time worked by an employee with a chart.
I use the Telerik UI Scheduler for this. The integration and use in general works perfectly, but the EditorTemplate gives me problems. (see code)
As you can see, I'm trying to open data from a database in a DropDown using "ViewData" within the EditorTemplate. In the index function (ActionResult) in the controller I have declared the "ViewData", which gets the data from the database via a service.

Now the problem: If I want to use the "ViewData", the EditorTemplate can no longer be built. (See error in browser console -> pic in attachement)
If I use this ViewData in a PartialView it works without problems.
However, if I comment out this part in the controller (from "var projects..." to "...ToList();") and leave the EditorTemplate the same, everything works again and I can open the EditorTemplate via double-click on the scheduler. But I still can't get the data.

What do I have to do so that I can use the data from the "ViewData" in the EditorTemplate?
I hope someone can help me.

Controller: (TimeTrackingController.cs)

public async Task<ActionResult> Index() //TODO: ActionResult
        {
            // ignore this below ----------------------------------------------
            var overview = new ActivityOverviewModel();

            overview.PaList = new List<PA>
            {
                new PA
                {
                    Id = 1,
                    Number = 201885445,
                    PaName = "Inbetriebnahme",
                    OrderNumber = 201745965,
                    OrderName = "Ein sehr schwieriger Auftrag",
                    ProjectNumber = 2019788458,
                    ProjectName = "Laser für Gießerei programmieren",
                    CompanyName = "Constellium Rolled Products",
                    PlannedHours = 70,
                    CurrentHours = 80,
                    PaLeft = false,
                    TechnicallyReady = true,
                    Favorite = false
                },
                new PA
                {
                    Id = 1,
                    Number = 201888874,
                    PaName = "Lösungsfindung",
                    OrderNumber = 2197811144,
                    OrderName = "Ein sehr schwieriger zweiter Auftrag",
                    ProjectNumber = 2019788458,
                    ProjectName = "Laser für Eingang programmieren",
                    CompanyName = "S&K Anlagentechnik",
                    PlannedHours = 70,
                    CurrentHours = 45,
                    PaLeft = false,
                    TechnicallyReady = false,
                    Favorite = false
                }
            };
            // ignore this above ----------------------------------------------

            var projects = await _projectService.GetProjectsForTimelineCreateAsync();

            ViewData["ActiveProjects"] = projects.Select(p => new TimelineCreateProjectModel
            {
                ProjectId = p.ProjectId,
                ProjectInfo = $"{p.ProjectNumber} - {p.ProjectName}"
            }).OrderByDescending(p => p.ProjectInfo).ToList();

            return View(overview);
        }

Index.cshtml:

<div id="right">
        @(Html.Kendo().Scheduler<ActivityModel>()
                    .Name("ActivityScheduler")
                    .Editable(e => e.TemplateName("EditActivity"))
                    //.StartTime(new DateTime(2022, 01, 1, 5, 00, 00)) // scheduler starts at 5 am
                    .DataSource(d => d
                    .Read(r => r.Action("ActivityCalendarRead", "TimeTracking", new { area = "Sktcrm" }))
                    .ServerOperation(true))
                    .Views(v =>
                    {
                        v.DayView();
                        v.WeekView(view => view.Selected(true));
                        v.MonthView();
                    })
                    .Events(ev =>
                    {
                        ev.Edit("tripChanged");
                        ev.Add("tripChanged");
                        ev.DataBound("checkHolidays");
                        ev.DataBinding("navigate");
                    })
                    .Editable(e => e.Window(w => w.Title("Aktivität bearbeiten")))
        )

    </div>

EditorTemplate: (EditActivity.cshtml)

<div>
            @(Html.Kendo().DropDownList()
                .Name("project")
                /*.BindTo(new List<string>()
                {
                    "Test ",
                    "Projekt 123",
                    "Leer",
                    "Test 2"
                })*/
                .ValuePrimitive(true)
                .OptionLabel("Projekt wählen...")
                .DataValueField("ProjectId")
                .DataTextField("ProjectInfo")
                .BindTo((IEnumerable) ViewData["ActiveProjects"]) // TODO: doesnt work!!!
                .Filter(FilterType.Contains)
                .HtmlAttributes(new {@class = "kendoSelectMain"}))
        </div>

Thanks in advance
Lars

DropDownList

Editor

Scheduler

asked on 28 Mar 2022

1 answer

1.0K+ views

Grouped grid with checkbox - select all by group and get selected

Hi all,

I've struggled a couple of days with this - pretty much every example I've found just doesn't work for me or is for React/Angular etc.

I have a grid that is grouped and has a checkbox on one of them (actually it isn't grouped by default)

@(Html.Kendo().Grid<MyProject.Models.Schedule.StoredProcResults.EventSchedule>()
    .Name("schedule")
    .Columns(columns =>
    {
        columns.Select().Width(50);
        columns.Bound(s => s.Store);
        columns.Bound(s => s.State);
        columns.Bound(p => p.Region).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.District).Filterable(ftb => ftb.Multi(true));
        //columns.Bound(p => p.VehicleTypeName).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.SupplierNumber).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.OrderGroup).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.SupplierName).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.OrderSupplier).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.DeliverySupplier).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.OrdersWithPattern).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.DeliversWithPattern).Filterable(ftb => ftb.Multi(true)).ClientGroupHeaderColumnTemplate(
            " <input type='checkbox' class='checkbox select-group'></input> Delivery Pattern"
            );
    })
    .Sortable()
    .PersistSelection()
    .Scrollable(s => s.Height("465px"))
    .Groupable()
    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Multiple)
        )
    .Filterable()
    .HtmlAttributes(new { style = "height:600px;" })
    .Resizable(r => r.Columns(true))
    .DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("GetEventSchedule", "Schedule"))
    .Group(groups => groups.Add(p => p.VehicleTypeName))
    )
)

When the checkbox on DeliveryPattern is checked, I'd like all items grouped under it, to be checked. When it's unchecked, uncheck all in the group.

Also, if someone can give me the syntax for grouping two fields by default, that'd be helpful

Finally, I'd like to add a button that goes to the next part of my page, and that would tell me every selected checkbox in the grid.

Can someone help me with this please?

Grid

answered on 28 Mar 2022

1 answer

120 views

Gantt MVC Issues

How can I disable the users ability to "delete" a task? I still want them to be able to edit times/and properties but I simply don't want them to be able to delete items.

Gantt

answered on 25 Mar 2022

0 answers

1.3K+ views

How to resolve Absence of Anti-csrf Token alert in Kendo.all.min.js ?

While Security testing of application through OWASP Zap tool, Medium risk level issue as 'Absence of Anti-csrf Token' in kendo.all.min.js is popping up

Even I tried to upgrade kendo.all.min.js from 2021 to 2022 latest version

are there any ways to resolve it ?

Security

asked on 24 Mar 2022

1 answer

742 views

Is the UI for ASP>NET version 2022.1.301 Compatible with Bootstrap v5.1

I created a new Telerik Application Project for ASP.NET MVC. I choose one of the Bootstrap Themes. It appears to have installed Bootstrap v4.1.3.

If I upgrade to Bootstrap 5.1 will I have issues with the GridView, the Menu Extension and other HTML Extensions?

Grid

Menu

answered on 23 Mar 2022

3 answers

2.3K+ views

Design time error in cshtml: Cannot convert lambda expression to type 'string' because it is not a delegate type

I am getting no intellisense and design time errors when using the Bound method to declare columns. When I run the site it works fine, but isn't the whole point of using the lambda instead of magic strings so I can get accurate design time errors?

In the following code, I get design time errors for each of the lambdas in the columns.Bound declarations. Am I doing something wrong?

@(Html.Kendo().Grid<KBMaxLive.Domain.KBUser>()
    .Name("grid")
    .Columns(columns => {
        columns.Bound(u => u.Email).ClientTemplate("<a>#: Email #</a>");
        columns.Bound(u => u.IDUserRole);
        columns.Bound(u => u.FirstName);
        columns.Bound(u => u.LastName);
        columns.Bound(u => u.IsOnLine);
    })
    .Pageable(paging => paging.Enabled(true).PageSizes(new int[]{5, 10, 20, 50}))
    .Sortable()
    .Filterable()
    .Groupable()
    .Selectable(select => select.Type(GridSelectionType.Row).Mode(GridSelectionMode.Multiple))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Users_Read", "Users"))
        .PageSize(20))
    
  )

Grid

answered on 23 Mar 2022

1 answer

614 views

Dropdown grouping

Hi,

I'm grouping a dropdown and I'm a little puzzled by the display.

My groups are either "Permanent" or "Temporary"

Temporary shows up quite neatly in corner, Permanent appears as an option that can't be selected and is confusing my users. Can it show the same for both?

        @(Html.Kendo().DropDownList()
            .Name("addevent-type-dropdown")
            .OptionLabel("Select event type...")
            .DataTextField("EventTypeName")
            .DataValueField("EventTypeId")
            .DataSource(source => source
              .Custom()
              .Group(g => g.Add("ChangeType", typeof(string)))
              .Transport(transport => transport
                .Read(read =>
                {
                    read.Action("GetEventTypesDropDown", "Schedule");
                })))
            .HtmlAttributes(new
            {
                style = "width: 600px",
                data_toggle = "tooltip",
                title = "Select event type"
            })
            .Events(e => e.Change("eventTypeChange"))
        )

Thanks

DropDownList

answered on 21 Mar 2022