Questions on UI for ASP.NET MVC Forum

1 answer

406 views

I needed to remove the clear button from a form.

So used the buttontemplate functionality ... unfortunately the styling for the button does not match the theme.

what class should I use to have the button match the overall theme. i used the class names that seemed right to me.

@(Html.Kendo().Form<BomMasterViewModel>()

        .Name("KitInfoForm")
        .HtmlAttributes(new { action = @Url.Action("ValidateBomMaster", "BOMEdit"), method = "POST" })
        .FormData(Model)
        .FocusFirst(true)
        .ButtonsTemplate("<div class=\"k-form-buttons\">" + 
                            "<button class=\"k-button k-primary k-form-submit\" type=\"submit\">Submit</button>"+
                         "</div>")

Form

answered on 04 Apr 2022

2 answers

453 views

Site.css Not Found after upgrade

Upgraded to the latest versions and now getting a 404 error trying to load Content/Site.css

I don't have a content/site.css and did not have that file before the upgrade. I can't find any refererence or where that file is supposed to come from.

I can't find any reference in my project or on telerik site or google search for that matter.

Please advise.

Installer and VS Extensions

answered on 01 Apr 2022

0 answers

130 views

Compare dateTo with dateTime.Now and display an image

Hello!

I have a grid in which I need to display if my record is active or not. I have an expiration date (dateTo field) which I need to compare it with dateTime now. If the dateTo is earlier than today then an image is not be displayed. Lets say "active image" if not then to display the "no active image".

Is that possible?

thank you!

 @(Html.Kendo().Grid<ElkeSite.Models.Records>()
.Name("grid")
.Columns(columns =>
 {

columns.Bound(c => c.ID).Hidden();
columns.Bound(c => c.Title);
columns.Bound(c => c.DateTo).Filterable();
columns.Bound(?); 
})
.HtmlAttributes(new { style = "height: 600px;" })
.Scrollable()
.Sortable()
.Filterable()
.Groupable()
 .Sortable()
.Pageable(pageable => pageable
.Refresh(true)
PageSizes(true)
.ButtonCount(5)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "Records"))
 .PageSize(10)).NoRecords(x => x.Template("<div class='empty-grid'></div>"))
.ToolBar(toolbar =>
{
 //toolbar.Excel();
//toolbar.Pdf();
})
)

Grid

updated question on 01 Apr 2022

1 answer

681 views

RadioGroup label alignment

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

320 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

156 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

112 views

Need help adding client side validation to a form

Question was deleted

Grid

updated question on 30 Mar 2022

2 answers

168 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

909 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

587 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