Questions on UI for ASP.NET MVC Forum

1 answer

774 views

I have a form with quite a few yes/no radio button groups, split up into sections with divs (bootstrap cards). Each radiobutton is horizontally aligned, and has a label in the form of a span before it.

 <p>
                <span class="lbllabel1">Front page documentation complete?:</span>


                @(Html.Kendo().RadioGroupFor(m=>m.FrontPageComplete)
        .Name("FrontPageComplete")
        .Layout(RadioGroupLayout.Horizontal)
            .Items(i =>
            {
                i.Add().Label("No").Value("No");
                i.Add().Label("Yes").Value("Yes");


            })

        )

            </p>

The lbllabel1 class is defined as:-

.lbllabel1 {
    float: left;
    font-size: small;
    font-weight: normal;
    width: 28.0em;
    text-align: right;
    clear: left;
    margin-right: 5px;
    padding-top: 5px;
}

In most cases the labels vertically align well, but the first entry in each div is misaligned (picture attached). How can I ensure proper alignment to teh radiogroup?

Thanks

RadioGroup

answered on 01 Apr 2022

1 answer

375 views

Uncaught ReferenceError when i deploy webapp in IIS

Hi, we're testing new upgrade versión from 2016 to 2022.

When i run debug in VS everything works fine, all component are loaded and works fine.

When i publish project in VS and deploy in our developtment IIS components like Grid and Treelist doesnt display.

I get this errors :

Uncaught ReferenceError: InitFilterTreeList is not defined
Uncaught ReferenceError: Grid_DataSourceErrorHandler is not defined

It seems that all js files are included in bundles, and in the right order :

bundles.BundleScript("~/bundles/vendorscripts", new string[]
                {
                            "~/Scripts/Vendor/Kendo/2022.1.119/jquery.min.js",
                            "~/Scripts/modernizr-*",
                            "~/Scripts/bootstrap.js",
                            "~/Scripts/autosize.min.js",
                            "~/Scripts/respond.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.all.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/jszip.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.core.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.data.odata.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.data.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.userevents.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.draganddrop.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.sortable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.binder.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.fx.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.view.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.button.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.color.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.popup.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.slider.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.colorpicker.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.list.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.combobox.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.calendar.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.datepicker.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.timepicker.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.datetimepicker.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.dropdownlist.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.selectable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.listview.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.upload.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.filebrowser.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.imagebrowser.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.resizable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.drawing.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.pdf.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.window.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.editor.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.numerictextbox.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.validator.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.editable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.filtermenu.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.menu.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.columnmenu.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.groupable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.autocomplete.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.filtercell.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.pager.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.reorderable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.scroller.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.view.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.loader.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.pane.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.popover.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.shim.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.actionsheet.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.ooxml.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.excel.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.progressbar.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.columnsorter.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.grid.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.maskedtextbox.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.virtuallist.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.multiselect.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.notification.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.tabstrip.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.toolbar.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.tooltip.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.treeview.draganddrop.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.dom.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.treelist.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.treeview.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.aspnetmvc.min.js"
                });

We're testing migration to new version with a trial licence, does it have any limitation about it?

if not Why does it display a message like that in IIS but not in VS?

Thanks in advance

General Discussions

Grid

TreeList

answered on 01 Apr 2022

2 answers

203 views

Persist sate, value and data of dropdown in Kendo Grid MVC

I have a dropdown by which I select the category of my data in a Kendo grid in my MVC app.

@(Html.Kendo().DropDownList()
    .Name("kind")
    .HtmlAttributes(new { style = "width:18%" })
    .OptionLabel("Select Category")
    .DataTextField("Cat_Title")
    .DataValueField("Cat_ID")
    .Events(e => e.Change("onChange"))
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("Overview_Get_Categories", "Announcements");
        });
    })
)

I need to save my selected value so if the user return back can load his search. I have the following code for my grid



<div class="box-col">
<a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base" id="save">Save State</a>
<a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base"  id="load">Load State</a>

</div>

and in js

<script>

$(document).ready( function () {
    var grid = $("#grid").data("kendoGrid");

    $("#save").click(function (e) {
        e.preventDefault();
        localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
    });

    $("#load").click(function (e) {
        e.preventDefault();
        var options = localStorage["kendo-grid-options"];
        if (options) {
            grid.setOptions(JSON.parse(options));
        }
    });
});

How can I save the value from the dropdown? and then reload it? any idea? Thank you!

DropDownList

Grid

answered on 01 Apr 2022

0 answers

145 views

Need help adding client side validation to a form

Question was deleted

Grid

updated question on 30 Mar 2022

2 answers

200 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

971 views

[Solved] 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

636 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

209 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.1K+ 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

186 views

[Solved] 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