Questions on UI for ASP.NET MVC Forum

2 answers

109 views

Hi

I'm having trouble getting the DataBinding to work on the ScrollView control here is my code:

Razor view

      @(Html.Kendo().ScrollView()
         .Name("svMessages")
         //Afficher la pagination si plus d'un message.
         .EnablePager(Model.NbMessages > 1)
         .DataSource(d => d.Read(r => r.Action("AfficherMessagesAccueil", "Account"))))

Controller

   [AllowAnonymous]
   [HttpGet]
   public ActionResult AfficherMessagesAccueil([DataSourceRequest] DataSourceRequest request)
   {
      var messages = new List<MessageAccueil>();
      return Json(messages.ToDataSourceResult(request));
   }

I got this error message

Request URL:
http://~/Account/AfficherMessagesAccueil
Request Method:
POST
Status Code:
404 Not Found
Remote Address:
[::1]:80
Referrer Policy:
strict-origin-when-cross-origin

After I saw that Datasource send POST request ???

I changed my controler method to

   [AllowAnonymous]
   [HttpPost]
   public ActionResult AfficherMessagesAccueil([DataSourceRequest] DataSourceRequest request)
   {
      var messages = new List<MessageAccueil>();
      return Json(messages.ToDataSourceResult(request));
   }

And I got same error!

What I doing wrong ?

ScrollView

answered on 21 Mar 2023

1 answer

173 views

Getting unable to cast the object of filecontectresult to string in kendo captcha

Hi,

I am trying to implement Kendo Captcha. I tried to implement same way as in this article.

ASP.NET MVC Captcha Component Validation - Telerik UI for ASP.NET MVC

But I am getting below error. what am I doing wrong?

My code is like this

@(Html.Kendo().Captcha()
                            .Name("Captcha")
                            .CaptchaImage((string)ViewData["Captcha"])
                            .CaptchaId((string)ViewData["CaptchaID"])
                            .DataCaptchaField("Captcha") // The field containing the Captcha from the server-side should be called Captcha.
                            .DataCaptchaIdField("CaptchaID") // The field containing the Captcha's ID from the server-side should be called CaptchaID.
                            .Handler(handler => handler.Action("Reset", "IUA"))
                            .ValidationHandler(handler => handler.Action("Validate", "IUA"))
                            .ValidateOnBlur(true)
                        )

namespace Portal.Controllers
{
    public class IuaController : Controller
    {
        // GET: Iua
        public ActionResult Index ( string pin )
        {
            var model = portalServices.getExistingData();


            if (string.IsNullOrEmpty(model.CaptchaID))
            {
                GenerateNewCaptcha();
            }
            else
            {
                CaptchaImage captchaImage = (CaptchaImage)Session["captcha" + model.CaptchaID];

                if (captchaImage != null && CaptchaHelper.Validate(captchaImage, model.Captcha.ToUpperInvariant()))
                {
                    ModelState.Clear();
                    GenerateNewCaptcha();
                }
            }

            //return View();

            return View(model);
        }

        private void GenerateNewCaptcha()
        {
            CaptchaImage captchaImage = CaptchaHelper.GetNewCaptcha();

            Session["captcha" + captchaImage.UniqueId] = captchaImage;

            ViewData["Captcha"] = GetCatchaImage(captchaImage.UniqueId);//Url.Action("image", "IUA", new { captchaId = captchaImage.UniqueId });
            ViewData["CaptchaID"] = captchaImage.UniqueId;
        }

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

            Session["captcha" + newCaptcha.UniqueId] = newCaptcha;

            return Json(new
            {
                captcha = GetCatchaImage(newCaptcha.UniqueId),//Url.Action("image", "IUA", new { captchaId = newCaptcha.UniqueId }),
                captchaId = newCaptcha.UniqueId
            }, JsonRequestBehavior.AllowGet);
        }

        public ActionResult Image(string captchaId)
        {
            CaptchaImage captcha = (CaptchaImage)Session["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");
        }

        public ActionResult GetCatchaImage(string captchaId)
        {
            CaptchaImage captcha = (CaptchaImage)Session["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");
        }

        public ActionResult Audio(string captchaId)
        {
            CaptchaImage captcha = (CaptchaImage)Session["captcha" + captchaId];
            byte[] bmpBytes;

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

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

        public ActionResult Validate(string captchaId, string captcha)
        {
            CaptchaImage captchaImage = (CaptchaImage)Session["captcha" + captchaId];

            return Json(CaptchaHelper.Validate(captchaImage, captcha.ToUpperInvariant()), JsonRequestBehavior.AllowGet);
        }
    }
}

Model class

    public class IuaModel
    {
        [Key]
        public string Pin { get; set; }

        [Display(Name = "Ticket #")]
        public long Id { get; set; }

        [Required]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Display(Name = "Middle Initial")]
        public string MiddleInitial { get; set; }

        [Required]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }

        [Display(Name = "Facility Name")]
        public string FacilityName { get; set; }

        private string _captchaValue;

        public string Captcha
        {
            get
            {
                return string.IsNullOrEmpty(_captchaValue) ? "" : _captchaValue;
            }
            set
            {
                _captchaValue = value;
            }
        }

        public string CaptchaID { get; set; }
    }

Captcha

answered on 20 Mar 2023

2 answers

4.2K+ views

Error after upgrading to 2023.1.314

I used the upgrade wizard to download the latest version and I'm getting this error message on pages that have the components:

Could not load file or assembly 'Telerik.SvgIcons, Version=1.0.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8' or one of its dependencies. The system cannot find the file specified.

Grid

Spreadsheet

updated question on 16 Mar 2023

0 answers

123 views

Error in kendo grid Incell edit for numeric input text box.

Value column has an inline validation of max and min. On entering the correct values also I am getting this error.

I am using this JS code for custom input control. Please suggest me some approach to resolve this error.

if (e.model.UnitTypeCode === "UNIT_LOOKUP_FLOAT") {

var dataItem = $("#DesignMaterialSystemAttribute").data("kendoGrid").dataSource.get(e.model.DesignMaterialSystemAttributeId);
console.log(dataItem)

var min = parseFloat(dataItem.MinAcceptableText);
var max = parseFloat(dataItem.MaxAcceptableText);
var input = $("<input data-val='true' autocomplete='off' onblur='Value_validate()' onclick='setTwoNumberDecimal(this)' min = '" + min + "' max='" + max + "' type='number' step='0.01' data-validate='false' name='AttributeValue' id='AttributeFloatId' data-bind='value: AttributeValue' style='width: 70% ; outline:none' />");

var grid = $("#DesignMaterialSystemAttribute").data("kendoGrid");
var AttributeNumberValue = null;
var data = grid.dataSource.data();
var gridRowTr = grid.dataItem($(e.container).closest("tr"));
var currentRowIndex = data.indexOf(gridRowTr);
$(document).on('input', '#AttributeFloatId', function () {
AttributeNumberValue = $("#AttributeFloatId").val();
data[currentRowIndex].set("AttributeValue", AttributeNumberValue);
data[currentRowIndex].set("AttributeText", AttributeNumberValue);
})

Grid

Stepper

ToolTip

asked on 16 Mar 2023

1 answer

203 views

Bind ViewModel to Grid Row ViewModel based on textbox search

Hello,

I am trying to understand the best way to update a submodel that is part of the composition of a grid's row model.

I tried to outline an example below. If I have a PersonViewModel that is part of a CompanyViewModel.

I want to be able to update the PersonViewModel's Name, Id and Email by querying using their email.

public class PersonViewModel
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
}

public class CompanyViewModel 
{
        public string CompanyId { get; set; }
	public string CompanyName { get; set; }
        public PersonViewModel Owner { get; set; }
}

public IActionResult GetPersonByEmail([DataSourceRequest] DataSourceRequest request, string email)
{
	PersonViewModel person = _userService.GetUserInfoByEmail(email);
	return Json(person.ToDataSourceResult(request));
}

@(Html.Kendo().Grid<CompanyViewModel>()
	.Name("companyGrid")
	.Columns(columns =>
	{
		columns.Command(command => { command.Edit();}).Locked(true);
		columns.Bound(c => c.CompanyId );
		columns.Bound(p => p.CompanyName );
		columns.Bound(c => c.Owner.Name);
		columns.Bound(c => c.Owner.Email).EditorTemplateName("PersonEditor");
	})
	.Scrollable(s => s.Height("auto"))
	.DataSource(dataSource => dataSource
		.Ajax()
		.Read(read => read.Action("CompanyRead", "Company"))
		.Model(model =>
		{
			model.Id(p => p.CompanyId);
			model.Field(p => p.Owner).DefaultValue(new PersonViewModel() { Name = "", UserId = "", Id = "" });
		})
	)
)

PersonEditor Template would look something like this?

@model PersonViewModel
@(Html.TextBoxFor(model => model))
@(Html.Kendo().Button()
    .Name("PersonLookupButton")
    .Content("Search")
    .Events(ev => ev.Click("personLookupOnClick"))
)

I could get the dataItem from the grid and set the Id, Name, and Email values via jQuery, but that feels like it is working against the point of using composition in my viewmodel. Is there a way to get the PersonViewModel that is returned by GetPersonByEmail() and bind that directly to the row instead?

Thank you!

Grid

answered on 07 Mar 2023

1 answer

241 views

Exporting Kendo grid to PDF with header - application soft locks on export

Hello

I currently have an kendo grid with PDF export functionality, I am trying to add in the facilities to add a line header text to the exported PDF and have tried using both a grid header text box and a javascript alert on button click, however when I try to do this either the application tries to export indefinitely, or the header text is not included. Can anyone suggest where I may be going wrong with this?

View code:

@(Html.Kendo().Grid<Planner.Models.GetTaskList_Result1>()
                                                                                .Name("grid")
                                                                                .Columns(columns =>
                                                                                {
                                                                                    columns.Bound(p => p.DateCreated).Title("Date Created").Format("{0:dd/MM/yy}").Width(120);
                                                                                    columns.Bound(p => p.TaskNo).Title("TaskNo").Width(90);
                                                                                    columns.Bound(p => p.TaskDescription).Title("Task").Width(200);
                                                                                    columns.Bound(p => p.PriorityText).Title("Priority").Width(90);
                                                                                    columns.Bound(p => p.AreaText).Title("Area").Width(140);
                                                                                    columns.Bound(p => p.QS1).Title("Quality Statement").Width(150);
                                                                                    columns.Bound(p => p.KA1).Title("KLOE Area 1").Width(150);
                                                                                    columns.Bound(p => p.KC1).Title("KLOE Characteristic 1").Width(200);
                                                                                    columns.Bound(p => p.KA2).Title("KLOE Area 2").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KC2).Title("KLOE Characteristic 2").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KA3).Title("KLOE Area 3").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KC3).Title("KLOE Characteristic 3").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KA4).Title("KLOE Area 4").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KC4).Title("KLOE Characteristic 4").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KA5).Title("KLOE Area 5").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.KC5).Title("KLOE Characteristic 5").Width(150).Hidden(true);
                                                                                    columns.Bound(p => p.LeadAssigned).Title("Lead Assigned").Width(120);
                                                                                    columns.Bound(p => p.SupportAssigned).Title("Support Assigned").Width(150);
                                                                                    columns.Bound(p => p.DateDue).Title("Date Due").Format("{0:dd/MM/yyyy}").Width(120);
                                                                                    columns.Bound(p => p.StatusText).Title("Status").Width(120);
                                                                                })
                                                                                .Resizable(resize => resize.Columns(true))
                                                                                .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
                                                                                .Events(events =>
                                                                                {
                                                                                    events.Change("onChange");
                                                                                    events.PdfExport("GetHeaderText");
                                                                                })
                                                                                .Sortable()
                                                                                .ToolBar(toolBar =>
                                                                                {

                                                                                toolBar.Template(
                                                                                        @<Text>
                                                                                        <b class="FloatRight SearchTopMarginExtra">Search by Task Description/Staff: </b>
                                                                                        <input type="search" id="searchbox" class="SearchRight SearchTopMargin" />
                                                                                        <b class="FloatRight">Date From:</b>
                                                                                        <input type="date" id="DateFrom" />
                                                                                        <b class="FloatRight">Date To:</b>
                                                                                        <input type="date" id="DateTo" />
                                                                                        <button id="clearFiltersButton" class="k-button">Clear Filters</button>
                                                                                         ||
                                                                                        <a class="k-button k-button-icontext k-grid-pdf" href="\#"><span class="k-icon k-i-pdf"></span>Export to PDF</a>
                                                                                        <b class="float-right">Title on PDF:</b>
                                                                                        <input type="text" id="PDFTitle" />
                                                                                        </Text>);
                                                                                })
                                                                                .Pdf(pdf => pdf
                                                                                        .AllPages()
                                                                                        .AvoidLinks()
                                                                                        .PaperSize("A4")
                                                                                        .Scale(0.45)
                                                                                        .Landscape()
                                                                                        .Margin("2cm", "1cm", "1cm", "1cm")
                                                                                        .TemplateId("page-template")
                                                                                        .FileName("Active tasks " + DateTime.Today.ToString("d") + ".pdf")
                                                                                        .ProxyURL(Url.Action("Pdf_Export_Save", "Grid"))
                                                                                    )
                                                                                                .Scrollable(scrollable => scrollable.Enabled(true).Height("600px"))
                                                                                                .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                                                                                                .DataSource(datasource => datasource
                                                                                                .Ajax()
                                                                                                .Filter(filters =>
                                                                                                {
                                                                                                    filters.Add(f => f.Completed).IsEqualTo(false);
                                                                                                })
                                                                                                .Sort(sort => sort.Add("DateDue").Ascending())
                                                                                                .Model(model => model.Id(p => p.TaskNo))
                                                                                                .Read(read => read.Action("Tasks_Read", "TaskList"))
                                                                                                )

                                                                                                .Pageable(pageable => pageable
                                                                                                .Enabled(false))
                                                                                                .Events(e => e.DataBound("onDataBound"))



    )

Relevant javascript and template:

    
<script type="text/javascript">    

    $(document).ready(function () {
        $("#PDFTitle").keyup(function SetViewData() {
            var val = $("#PDFTitle").val();
           
            var text = document.getElementById('customHeaderText');
            text.val() = val.val();
        })
    });
</script>



<script type="x/kendo-template" id="page-template">
    <div class="page-template">
        <div class="header">
            #: customHeader #

            @Html.Label("", new { id = "customHeaderText" })
        </div>
        <div class="footer">
            <div style="float: right">Page #: pageNum # of #: totalPages #</div>
        </div>
    </div>
</script>

<script type="text/javascript">
    function GetHeaderText(e) {
        var customHeader = prompt('Please enter a title for the PDF');
    }

</script>

Grid

View

answered on 07 Mar 2023

1 answer

563 views

Using datasource to sort grid

Greetings,

Im having trouble getting my grid to order the way i want. I thought that you could use .DataSource to setup sorting but nothing im seeing come up fits my situation. I want to sort my "haslinked" individuals to the bottom of the grid. Thanks!

Edit: i just realized my kendo grid is model vs server side. Thats what i dont get a .sort after datasource. Any idea how to sort a grid with this new finding? I believe it essentially means im trying to organize a grid with dynamic content.

@(Html.Kendo().Grid(Model)
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(model => model.UserName).Title("UserName");
          columns.Bound(model => model.RoleList).Title("Role(s)");
          columns.Bound(model => model.HasLinkedDistilleries).Title("HasLink");
          columns.Bound(b => b.Id).Template(@<text>@Html.ActionLink("Delete", "Delete", "Account", new { id = item.Id }, null)</text>).Title("");
          columns.Bound(b => b.Id).Template(@<text>@Html.ActionLink("Edit", "Edit", "Account", new { id = item.Id }, null)</text>).Title("");
          columns.Bound(b => b.Id).Template(@<text>@Html.ActionLink("Permissions", "Index", "UserPermissions", new { id = item.Id }, null)</text>).Title("").HtmlAttributes(new {@class="" });
      })
       .ToolBar(tools =>
            {
            tools.Template(@<text>@ToolbarTemplate()</text>);
       })
      .Sortable() // Enable sorting
      .DataSource()d => d......Heres where im having trouble.)
      .Filterable()
      .Scrollable()

Grid

answered on 07 Mar 2023

1 answer

357 views

Kendo UI MVC 2023.1.117 Tabstrip still producing old state class k-state-active

Hi there,

I recently updated our Kendo files inside our MVC application to version 2023.1.117. And I found an issue on Kendo Tabstrip: that when we setup the default index using .SelectedIndex(0), the tabstrip would setup k-state-active class into the targeted tab instead of the newer k-active class. The same thing happen if we set the .selected(True) at the tabitems.

This is causing problem with the styling and tab content display because of when we start navigating to another tab via clicking, the code won't clear up the k-state-active class. Thus there'll be always 2 active state. Is this a bug from the latest version or is there something that I missed?

Strangely enough, when I checked the MVC demo page of tabstrip, the code won't produce k-state-active class at all. I assume your demo is using the latest version of your code. Why the difference? Cheers.

TabStrip

answered on 06 Mar 2023

1 answer

391 views

Set Different In-Line Button Text for Update vs. Create

I have a Grid with the 'Add New Record' functionality implemented with the basic `.Toolbar(t => t.Create())`.

I have my grid set to be `.Editable(e => e.Mode(GridEditMode.Inline))`, along with this: `.Columns(c => { c => c.Command(x => x.Edit().Visible("editVisible"); })`

Whether I click the Toolbar 'Create' button or I click the 'Edit' button on an already existing record, the inline buttons say 'Update' and 'Cancel' , but I'd like the 'Update' button to say 'Create' when it is a new record.

I'm wondering what might be the best way to accomplish the above?

Grid

answered on 06 Mar 2023

0 answers

83 views

Dynamic creation of kendoComboBox

We are currently trying to upgrade from 2019.3.917 to 2023.1.117

Some code that worked fine in the old version is failing in the new with error in kendo.combobox.js line 1221

Error message
Uncaught TypeError: Cannot read properties of undefined (reading 'renderButton')

Line 1221

values: kendo.cssProperties.roundedValues.concat([['full', 'full']])

the debugger is highlighting the second 'full'.

Our code is quite complex but commenting most of it out I get the same thing so a simplified version:

Our html page has this input

Then our javascript to create the combobox is

var $combo = $("#departments);

objKendoCB = $combo.kendoComboBox();

The second line results in the error. (the actual code sets lots of properties but I removed them one by one to end up with an empty method call).

Any ideas welcome!

ComboBox

asked on 06 Mar 2023