Telerik Forums
UI for ASP.NET MVC Forum
or
Ask question
All Questions
Unanswered
Answered
8,800 questions
1 answer
60 views
Can we force user to only be able to select whole weeks?
Is it possible to make it so if a user clicks a day it selects the whole week, like clicking the week number does? Then is it also possible to capture multiple selected weeks (not necessarily concurrent weeks or in the same month), even if all the dates in those selected weeks are the output that would be fine
Calendar
Ivan Danchev
Telerik team
 answered on 28 Feb 2024
0 answers
72 views
How do you emulate a user typing input into a combo box?

My page has a combo box. As the user selects an ID from the dropdown list, the page populates with information corresponding to the entry. It is an AJAX bound combo box. I am trying to make the combo box get auto populated with an ID from my query string on initialization. 

I've tried setting the .Value field of the combo box. This works to automatically select the correct ID and populate the rest of the page, but only when the ID exists in the data source. My AJAX call returns data based on the partial/full ID passed in, and a list of a few most recent ID's if no input ID is specified. 

I believe this will work if the ID exists in the data source prior to setting the value field of the combo box. But for that to happen, the combo box must use the ID from the url to fetch the data source, similar to what happens when a user manually types that ID into the combo box. However, I am struggling to figure out how to pass in a specific ID when the combo box is responsible for making the AJAX call. 

I would appreciate any advice or other suggestions to getting the intended behavior.

ComboBox
Eugenia
Top achievements
Rank 1
 asked on 27 Feb 2024
1 answer
77 views
Input controls growing and shrinking when loading data

Controls loading icon stretching fields

As you can see fields grow and shrink due the the loading icon right of the dynamic controls being larger than the control I believe

Is this a bug or something I can do to resolve

https://i.imgur.com/puFkDGl.gif

DropDownList
Eyup
Telerik team
 answered on 26 Feb 2024
0 answers
110 views
Calendar month view is not showing data when current month is not selected.

I use the following code to show the calendar:

<div class="section">
    <script id="event-template" type="text/x-kendo-template">
        <div class="item-template" title="#: title #">
            <div class="title">#: title #</div>
        </div>
    </script>
    <div class="daily-container">
        @(Html.Kendo().Scheduler<WaterFlowReadingModel>()
    .Name("Daily")
	.Events(e =>
	{
		e.Navigate("scheduler_navigate");
		e.DataBound("scheduler_databound");

	})
    .Date((DateTime)ViewBag.Month)
    .StartTime((DateTime)ViewBag.Month)
	.EventTemplateId("event-template")
    .Views(v =>
    {
        v.MonthView();
    })
	.DataSource(d =>
		d.Model(m =>
		{
            m.Id(f => f.Id);
            m.RecurrenceId(f => f.RecurrenceRule);
			m.Field(f => f.Title).DefaultValue("No title");
		}).ServerOperation(true)
		.Read(read => read.Action("GetMetricDaily", "Metric",
			new { type = 1, start = ViewBag.Month.AddMonths(-1), end = ViewBag.Month.AddMonths(1) }))
    ))
    </div>
</div>

Javascript:

    function scheduler_navigate(e) {
        var start = kendo.format('{0:d}', this.view().startDate());
        var end = kendo.format('{0:d}', this.view().endDate());

        $.ajax({
            url: "@(Url.Action("GetMetricDaily", "Metric"))",
            data: {
                start: start,
                end: end,
            }, success: function () {

                var scheduler = $("#Daily").data("kendoScheduler");

                scheduler.refresh();
            }
        });
    }

    function scheduler_databound(e) {
        var today = e.date;
        var scheduler = $("#Daily").data("kendoScheduler");
        var newDate = scheduler.date();
        console.log(newDate, today);
		$.ajax({
			url: "@(Url.Action("GetStatistics", "Metric"))",
			dataType: "json",
			data: {
				month: kendo.format('{0:d}', newDate),
            }, success: function (data) {
				//console.log(data);
				date = new Date(data.ReportingPeriod.match(/\d+/)[0] * 1);
                $("#TotalMonthlyDischargeVolume").val(data.TotalMonthlyDischargeVolume);
                $("#NumberOfDaysOfDischargeToSewer").val(data.NumberOfDaysOfDischargeToSewer);
				$("#MaximumDailyFlow").val(data.MaximumDailyFlow);
                $("#ReportingPeriod").val(kendo.toString(date, "Y"));
            }
        });
    };

The problem is that when I select a different month, no data at all is shown unless I select the current month again, which then shows current data.

Controller code:


        public ActionResult GetMetricDaily([DataSourceRequest] DataSourceRequest request, DateTime start, DateTime end)
        {
            using (var db = new DatabaseContext())
            {
                // Water flows
                var lastMonth = db.WaterFlows
                    .Where(w => w.TimeStamp > start && w.TimeStamp < end && w.TotalizerReading >= 1)
                    .Select(x => new WaterFlowReadingModel()
                    {
                        Title = x.TotalizerReading.ToString(),
                        Start = x.TimeStamp,
                        End = x.TimeStamp,
                        Id = x.Id,
                    }).ToList();
                
                // pH Readings
                var result = db.pHReadings.Where(w => w.TimeStamp > start && w.TimeStamp < end)
                    .GroupBy(o => EntityFunctions.TruncateTime(o.TimeStamp))
                    .Select(g => new
                    {
                        Date = g.Key,
                        Min = g.Min(o => o.pHValue),
                        Max = g.Max(o => o.pHValue),
                        Avg = g.Average(o => o.pHValue)
                    })
                    .ToList();
                
                var output = new List<WaterFlowReadingModel>();
                foreach (var item in result)
                {
                    var title = $"PH - Min: {item.Min:F} / Max: {item.Max:F} / Avg: {item.Avg:F}";
                    output.Add( new WaterFlowReadingModel()
                    {
                        Title = title,
                        Start = item.Date ?? DateTime.Today,
                        End = item.Date ?? DateTime.Today,
                        Id = 0
                    });
                }

                lastMonth.AddRange(output);
                return Json(lastMonth.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            }
        }



Scheduler
Jason
Top achievements
Rank 1
Veteran
 asked on 26 Feb 2024
0 answers
164 views
Kendo MVC UI File Manager Templates

Any sample templates available for Kendo MVC UI File Manager that replicate Windows file explorer including appropriate icons for folders and files?

I  can see how to create and reference the templates, but could use the time savings if someone has already done this. 

The only sample in the demos is for the preview panel. How about the tree view, list view and grid view within the file manager? 

FileManager
Allen
Top achievements
Rank 1
 asked on 23 Feb 2024
0 answers
183 views
ASP.NET MVC Wizard AJAX Partial Views and how to save the model.

After a long day, I finally got all the validation working as I intend it.  The question I now have is how do I pass the model back and forth between each step?   My basic setup is I have Business.cshtml that has my Wizard on it.  For each step of the wizard I then  retrieve the correct PartialView and render to the step.  What I am unsure of how to do is how do you pass the model back and forth.  I made the assumption using '@Url.Action("_BusinessFinancial", "Onboard",Model)' in the javascript would work but I am just not 100% how to save the model between each step and reuse it.

 

Here is my Business.cshtml

 


@using Kendo.Mvc.UI
@model Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel

@{
    ViewBag.Title = "Business Onboarding";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    .wide {
        width: 95%;
    }

    .field-validation-error {
        color: red;
    }
</style>


<!-- Wizard -->
@(Html.Kendo().Wizard()
        .Name("wizard")
        .Events(ev => ev.Select("onSelect"))
        .Events(ev => ev.Done("onDone"))
        .LoadOnDemand(true)
        .HtmlAttributes(new { @novalidate = "" })
        .ReloadOnSelect(false)
        .Steps(s =>
        {
            s.Add<Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel>()
            .Title("Business Profile")
            .ContentUrl(Url.Action("_BusinessProfile", "Onboard", Model))
            .Buttons(b =>
            {
                b.Next().Text("Next");
            });

            s.Add<Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel>()
            .Title("Business Financial")
            .ContentUrl(Url.Action("_BusinessFinancial", "Onboard", Model))
            .Buttons(b =>
            {
                b.Previous().Text("Back");
                b.Next().Text("Next");
            });
            s.Add<Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel>()
            .Title("Business Address")
            .ContentUrl(Url.Action("_BusinessAddress", "Onboard", Model))
            .Buttons(b =>
            {
                b.Previous().Text("Back");
                b.Done().Text("Submit");
            });
        })
    )

<script type="text/javascript">
    var dataPartial1;
    var dataPartial2;
    var currentStep;

    function onSelect(e) {
        var form, contentUrl;
        if (e.step.options.index < currentStep) {
        }
        else {
            if (e.step.options.index == 1) {
                form = $('#frmPartialBusinessProfile');
                dataPartial1 = form.serialize();
                contentUrl = '@Url.Action("_BusinessFinancial", "Onboard",Model)';
            }
            else if (e.step.options.index == 2) {
                form = $('#frmPartial2');
                dataLesions = form.serialize();
                contentUrl = '@Url.Action("_BusinessAddress", "Onboard",Model)';
            }
            if (!form.valid()) {
                e.preventDefault();
            }
            else {
                e.step.options.contentUrl = contentUrl;
            }
        }
        currentStep = e.step.options.index;
    }

    function onNextStep(e) {
        if (e.step.options.index == 2) {
            openDoc();
        }
    }

    function onDone(e) {

        var form = $('#frmMain');

        if (form.valid()) {
            form.submit();
        }

    }

    var onAddMainSuccess = function (result) {

        if (result.error) {
            alert(result.error);
        }
    };

</script>

 

Here is my Onboard controller


using Kendo.Mvc.UI;
using Reverberate.Services;
using Kendo.Mvc.Extensions;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Reverberate.Model;

namespace CallCenterWebsiteHelper.Controllers
{
    public class OnboardController : Controller
    {
        // GET: Campaign
        private List<SelectListItem> StatesSelectList()
        {
            var slStates = new List<SelectListItem>();
            var states = new Reverberate.BLL.General.StaticDataSet.Geographic().States();
            for (int i = 0; i < states.Count; i++)
                slStates.Add(new SelectListItem() { Text = states[i], Value = states[i] });
            return slStates;
        }
        private List<SelectListItem> BusinessTypesSelectList()
        {
            var sl = new List<SelectListItem>();
            var list = new Reverberate.BLL.General.StaticDataSet.BusinessInformation().BusinessTypeList();
            for (int i = 0; i < list.Count; i++)
                sl.Add(new SelectListItem() { Text = list[i], Value = list[i] });
            return sl;
        }

        public ActionResult Business()
        {
            ViewBag.States = StatesSelectList();
            ViewBag.BusinessTypeList = BusinessTypesSelectList();
            var model = new Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel();
            model.BusinessProfileModel = new Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessProfileModel();
            model.BusinessFinancialModel = new Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessFinancialModel();
            return View("Business",model);
        }
        public ActionResult _BusinessProfile(Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel viewModel)
        {
            ViewBag.States = StatesSelectList();
            ViewBag.BusinessTypeList = BusinessTypesSelectList();
            return PartialView("_BusinessProfile",viewModel);
        }
        public ActionResult _BusinessFinancial(Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel viewModel)
        {
            ViewBag.States = StatesSelectList();
            ViewBag.BusinessTypeList = BusinessTypesSelectList();
            return PartialView("_BusinessFinancial", viewModel);
        }
        public ActionResult _BusinessAddress(Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel viewModel)
        {
            ViewBag.States = StatesSelectList();
            ViewBag.BusinessTypeList = BusinessTypesSelectList();
            return PartialView("_BusinessAddress", viewModel);
        }
        /*
        public ActionResult BusinessProfile()
        {

            return PartialView("_BusinessProfile");
        }*/
    }
}


 

here is my two partial views

_busiessprofile


@using Kendo.Mvc.UI
@model Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel
@using (Html.BeginForm(null, null, FormMethod.Post, new { @id = "frmPartialBusinessProfile", @name = "frmPartialBusinessProfile" }))
{
    <div style="width: 45%; float: left; border: 1px solid black" id="BusinessInfoEntry">
        <h3>Business Profile</h3>
        <fieldset>
            <legend></legend>
            <ol>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.BusinessName)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.BusinessName, new { maxlength = 200, @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.BusinessName)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.FederalTaxId)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.FederalTaxId, new { maxlength = 20 })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.FederalTaxId)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.BusinessStartDate)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.BusinessStartDate, new { @type = "date", @class = "form-control datepicker", @Value = Model == null || Model.BusinessProfileModel.BusinessStartDate == null ? null : Model.BusinessProfileModel.BusinessStartDate.ToString("yyyy-MM-dd") })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.BusinessStartDate)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.Industry)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.Industry, new { maxlength = 200, @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.Industry)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.Sector)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.Sector, new { maxlength = 200, @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.Sector)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.StateOfFormation)
                    <br />
                    @Html.DropDownListFor(m => m.BusinessProfileModel.StateOfFormation, new SelectList(ViewBag.States, "Value", "Text"), "Select State", htmlAttributes: new { @class = "form-control", id = "StateOfFormationList" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.StateOfFormation)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.EmployeeCount)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.EmployeeCount, new { @type = "number", @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.EmployeeCount)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.BusinessStructure)
                    <br />
                    @Html.DropDownListFor(m => m.BusinessProfileModel.BusinessStructure, new SelectList(ViewBag.BusinessTypeList, "Value", "Text"), "Select Business Structure", htmlAttributes: new { @class = "form-control", id = "BusinessStructureList" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.BusinessStructure)
                </li>
            </ol>
        </fieldset>
    </div>
}


 

_BusinessFinancial.cshtml


@using Kendo.Mvc.UI
@model Reverberate.BLL.Model.Form.Application.BusinessOnboarding.BusinessOnboardingModel

<h2>Business Financial</h2>
<div style="width: 90%; border: 1px solid silver" id="BusinessInfoEntry">
    <fieldset>
        <legend></legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.BusinessFinancialModel.CreditCardProcessor)
                @Html.TextBoxFor(m => m.BusinessFinancialModel.CreditCardProcessor, new { maxlength = 200, @class = "wide" })
                @Html.ValidationMessageFor(m => m.BusinessFinancialModel.CreditCardProcessor)
            </li>
            <li>
                @Html.LabelFor(m => m.BusinessFinancialModel.CreditCardMonthlyVolume)
                @Html.TextBoxFor(m => m.BusinessFinancialModel.CreditCardMonthlyVolume, new { maxlength = 20 })
                @Html.ValidationMessageFor(m => m.BusinessFinancialModel.CreditCardMonthlyVolume)
            </li>
            <li>
                @Html.LabelFor(m => m.BusinessFinancialModel.GrossMonthlySales)
                @Html.TextBoxFor(m => m.BusinessFinancialModel.GrossMonthlySales, new { @type = "date", @class = "form-control datepicker", @Value = Model == null || Model.BusinessProfileModel.BusinessStartDate == null ? null : Model.BusinessProfileModel.BusinessStartDate.ToString("yyyy-MM-dd") })
                @Html.ValidationMessageFor(m => m.BusinessFinancialModel.GrossMonthlySales)
            </li>
            <li>
                @Html.LabelFor(m => m.BusinessFinancialModel.AnnualRevenue)
                @Html.TextBoxFor(m => m.BusinessFinancialModel.AnnualRevenue, new { maxlength = 200, @class = "wide" })
                @Html.ValidationMessageFor(m => m.BusinessFinancialModel.AnnualRevenue)
            </li>
        </ol>
    </fieldset>
    <br />
</div>

 

 

 

here are the  three models


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Reverberate.BLL.Model.Form.Application.BusinessOnboarding
{
    public class BusinessOnboardingModel
    {
        public BusinessProfileModel BusinessProfileModel { get; set; }

        public BusinessFinancialModel BusinessFinancialModel { get; set; }

    }
}




using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Reverberate.BLL.Model.Form.Application.BusinessOnboarding
{
    public class BusinessProfileModel
    {
        public BusinessProfileModel() { }

        [Required(ErrorMessage = "The business name is required.")]
        [DisplayName("*Business Name")]
        [StringLength(250)]
        public string BusinessName { get; set; }

        [DisplayName("*Federal Tax Id / SSN")]
        [StringLength(15, ErrorMessage = "Please enter a valid federal tax id or SSN")]
        [Required(ErrorMessage = "Please enter the federal tax id or SSN")]
        public string FederalTaxId { get; set; }

       

        [DisplayName("*Business Start Date")]
        [Required(ErrorMessage = "Please enter the business start date")]
        public DateTime BusinessStartDate { get; set; }

        [Required(ErrorMessage = "The industry is required.")]
        [DisplayName("*Industry")]
        [StringLength(500)]
        public string Industry { get; set; }

        [Required(ErrorMessage = "The sector is required.")]
        [DisplayName("*Sector")]
        [StringLength(500)]
        public string Sector { get; set; }


        [DisplayName("*State of Formation")]
        [Validation.InputValidation.ValidState(ErrorMessage = "This does not appear to be a valid US State.")]
        [Required(ErrorMessage = "The State of Formation is required.")]

        public string StateOfFormation { get; set; }
        

        [DisplayName("*No of Employees")]
        [Validation.InputValidation.ValidState(ErrorMessage = "Number of Employees.")]
        [Required(ErrorMessage = "Please Supply the number of employees.")]
        public int EmployeeCount { get; set; }


        [Validation.InputValidation.ValidBusinessType(ErrorMessage = "Please enter a valid business structure")]
        [Required(ErrorMessage = "The business structure required.")]
        [DisplayName("*Business Structure")]
        public string BusinessStructure { get; set; }
    }
}




using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Reverberate.BLL.Model.Form.Application.BusinessOnboarding
{
    public class BusinessProfileModel
    {
        public BusinessProfileModel() { }

        [Required(ErrorMessage = "The business name is required.")]
        [DisplayName("*Business Name")]
        [StringLength(250)]
        public string BusinessName { get; set; }

        [DisplayName("*Federal Tax Id / SSN")]
        [StringLength(15, ErrorMessage = "Please enter a valid federal tax id or SSN")]
        [Required(ErrorMessage = "Please enter the federal tax id or SSN")]
        public string FederalTaxId { get; set; }

       

        [DisplayName("*Business Start Date")]
        [Required(ErrorMessage = "Please enter the business start date")]
        public DateTime BusinessStartDate { get; set; }

        [Required(ErrorMessage = "The industry is required.")]
        [DisplayName("*Industry")]
        [StringLength(500)]
        public string Industry { get; set; }

        [Required(ErrorMessage = "The sector is required.")]
        [DisplayName("*Sector")]
        [StringLength(500)]
        public string Sector { get; set; }


        [DisplayName("*State of Formation")]
        [Validation.InputValidation.ValidState(ErrorMessage = "This does not appear to be a valid US State.")]
        [Required(ErrorMessage = "The State of Formation is required.")]

        public string StateOfFormation { get; set; }
        

        [DisplayName("*No of Employees")]
        [Validation.InputValidation.ValidState(ErrorMessage = "Number of Employees.")]
        [Required(ErrorMessage = "Please Supply the number of employees.")]
        public int EmployeeCount { get; set; }


        [Validation.InputValidation.ValidBusinessType(ErrorMessage = "Please enter a valid business structure")]
        [Required(ErrorMessage = "The business structure required.")]
        [DisplayName("*Business Structure")]
        public string BusinessStructure { get; set; }
    }
}

 


using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Reverberate.BLL.Model.Form.Application.BusinessOnboarding
{
    public class BusinessFinancialModel
    {
        public BusinessFinancialModel() { }

        [DisplayName("Credit Card Processor")]
        [StringLength(250)]
        public string CreditCardProcessor { get; set; }

        [DisplayName("Credit Card Monthly Volume")]
        public decimal CreditCardMonthlyVolume { get; set; }

        [DisplayName("Gross Monthly Sales")]
        public decimal GrossMonthlySales { get; set; }

        [DisplayName("AnnualRevenue")]
        public decimal AnnualRevenue { get; set; }


    }
}

 

As recommend in my other question here: I have created a sample project.   In this project there is an Index.cshtml which has my original structure.  With regards to the index.cshtml there are two things, one - I am not sure why validation doesn't occur on the original page load, I have to reload the page to force page validation and also on the done command there isn't any validation occuring.

 


I created ind.cshtml when I trying the recomemnded solution for the question here: https://www.telerik.com/forums/using-wizard---how-do-you-validate-a-form-when-step-includes-partial-view#5789804 and I am getting `

Severity Code Description Project File Line Suppression State
Error CS1660 Cannot convert lambda expression to type 'string' because it is not a delegate type 6_Views_Home_Index2.cshtml M:\Code\Development\WizardPartialExample\WizardPartialExample\WizardPartialExample\Views\Home\Index2.cshtml 19 Active`

 

 

Form
Wizard
Joshua
Top achievements
Rank 1
 updated question on 22 Feb 2024
1 answer
719 views
Using Wizard - how do you validate a form when step includes partial view.

I'm pretty much at the point I give up.  All I want to do is use the Wizard to load partial views for each step, and all I want to do is prevent the next step if the form can't be validated.  I've tried nearly everything for 3 days and I can't seem to find an answer.  I've tried jquery..validate and it just goes no where.

 

I just have a real simple setup, Business.cshtml which contains the wizard


@using Kendo.Mvc.UI
@model Reverberate.BLL.Model.Form.Application.BusinessOnboardingModel

@{
    ViewBag.Title = "Business Onboarding";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    .wide {
        width: 95%;
    }

    .field-validation-error {
        color: red;
    }
</style>



    <!-- Wizard -->
    @(Html.Kendo().Wizard()
        .Name("wizard")
        .Events(ev => ev.Select("onSelect"))
        .Events(ev => ev.Done("onDone"))
        .LoadOnDemand(true)
        .ReloadOnSelect(false)
        .Steps(s =>
        {
            s.Add<Reverberate.BLL.Model.Form.Application.BusinessOnboardingModel>()
            .Title("Business Profile")
            .ContentUrl(Url.Action("_BusinessProfile", "Onboard"))
            .Buttons(b =>
            {
                b.Next().Text("Next");
            });

            s.Add<Reverberate.BLL.Model.Form.Application.BusinessOnboardingModel>()
            .Title("Business Financial")
            .ContentUrl(Url.Action("_BusinessFinancial", "Onboard", Model))
            .Buttons(b =>
            {
                b.Previous().Text("Back");
                b.Next().Text("Next");
            });
            s.Add<Reverberate.BLL.Model.Form.Application.BusinessOnboardingModel>()
            .Title("Business Address")
            .ContentUrl(Url.Action("_BusinessAddress", "Onboard", Model))
            .Buttons(b =>
            {
                b.Previous().Text("Back");
                b.Done().Text("Submit");
            });
        })
    )

<script type="text/javascript">
    var dataPartial1;
    var dataPartial2;
    var currentStep;

    function onSelect(e) {

       
        var form, contentUrl;

        if (e.step.options.index < currentStep) {
            e.preventDefault();
        }
        else {

            if (e.step.options.index == 1) {
                form = $('#frmPartialBusinessProfilefrmPartialBusinessProfile');
                dataPartial1 = form.serialize();
                contentUrl = '@Url.Action("_BusinessFinancial", "Onboard",Model)';
            }
            else if (e.step.options.index == 2) {
                form = $('#frmPartial2');
                dataLesions = form.serialize();
                contentUrl = '@Url.Action("_BusinessAddress", "Onboard",Model)';
            }
            if (!form.valid()) {
                alert('not valid');
                e.preventDefault();
            }
            else {
                alert('valid');
                e.step.options.contentUrl = contentUrl;
            }
            alert('done');
        }


        currentStep = e.step.options.index;
    }

    function onNextStep(e) {
        if (e.step.options.index == 2) {
            openDoc();
        }
    }

    function onDone(e) {

        var form = $('#frmMain');

        if (form.valid()) {
            form.submit();
        }

    }

    var onAddMainSuccess = function (result) {

        if (result.error) {
            alert(result.error);
        }
    };


</script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>

 

and a partial view called _BusinessProfile


@using Kendo.Mvc.UI
@model Reverberate.BLL.Model.Form.Application.BusinessOnboardingModel

<form id="frmPartialBusinessProfile" name="frmPartialBusinessProfile">
    <div style="width: 45%; float: left; border: 1px solid black" id="BusinessInfoEntry">
        <h3>Business Profile</h3>
        <fieldset>
            <legend></legend>
            <ol>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.BusinessName)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.BusinessName, new { maxlength = 200, @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.BusinessName)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.FederalTaxId)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.FederalTaxId, new { maxlength = 20 })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.FederalTaxId)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.BusinessStartDate)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.BusinessStartDate, new { @type = "date", @class = "form-control datepicker", @Value = Model == null || Model.BusinessProfileModel.BusinessStartDate == null ? null : Model.BusinessProfileModel.BusinessStartDate.ToString("yyyy-MM-dd") })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.BusinessStartDate)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.Industry)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.Industry, new { maxlength = 200, @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.Industry)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.Sector)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.Sector, new { maxlength = 200, @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.Sector)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.StateOfFormation)
                    <br />
                    @Html.DropDownListFor(m => m.BusinessProfileModel.StateOfFormation, new SelectList(ViewBag.States, "Value", "Text"), "Select State", htmlAttributes: new { @class = "form-control", id = "StateOfFormationList" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.StateOfFormation)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.EmployeeCount)
                    <br />
                    @Html.TextBoxFor(m => m.BusinessProfileModel.EmployeeCount, new { @type = "number", @class = "wide" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.EmployeeCount)
                </li>
                <li>
                    @Html.LabelFor(m => m.BusinessProfileModel.BusinessStructure)
                    <br />
                    @Html.DropDownListFor(m => m.BusinessProfileModel.BusinessStructure, new SelectList(ViewBag.BusinessTypeList, "Value", "Text"), "Select Business Type", htmlAttributes: new { @class = "form-control", id = "StateOfFormationList" })
                    @Html.ValidationMessageFor(m => m.BusinessProfileModel.BusinessStructure)
                </li>
            </ol>
        </fieldset>
    </div>
</form>

 

{

    public class BusinessOnboardingModel
    {
        public BusinessProfileModel BusinessProfileModel { get; set; }

        public BusinessFinancialModel BusinessFinancialModel { get; set; }
    }
}

 

and here is the BusinessProfileModel

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Reverberate.BLL.Model.Form.Application.BusinessOnboarding
{
    public class BusinessProfileModel
    {
        public BusinessProfileModel() { }

        [Required(ErrorMessage = "The business name is required.")]
        [DisplayName("*Business Name")]
        [StringLength(250)]
        public string BusinessName { get; set; }

        [DisplayName("*Federal Tax Id / SSN")]
        [StringLength(15, ErrorMessage = "Please enter a valid federal tax id or SSN")]
        [Required(ErrorMessage = "Please enter the federal tax id or SSN")]
        public string FederalTaxId { get; set; }

       

        [DisplayName("*Business Start Date")]
        [Required(ErrorMessage = "Please enter the business start date")]
        public DateTime BusinessStartDate { get; set; }

        [Required(ErrorMessage = "The industry is required.")]
        [DisplayName("*Industry")]
        [StringLength(500)]
        public string Industry { get; set; }

        [Required(ErrorMessage = "The sector is required.")]
        [DisplayName("*Sector")]
        [StringLength(500)]
        public string Sector { get; set; }


        [DisplayName("*State of Formation")]
        [Validation.InputValidation.ValidState(ErrorMessage = "This does not appear to be a valid US State.")]
        [Required(ErrorMessage = "The State of Formation is required.")]

        public string StateOfFormation { get; set; }
        

        [DisplayName("*No of Employees")]
        [Validation.InputValidation.ValidState(ErrorMessage = "Number of Employees.")]
        [Required(ErrorMessage = "Please Supply the number of employees.")]
        public int EmployeeCount { get; set; }


        [Validation.InputValidation.ValidBusinessType(ErrorMessage = "Please enter a valid business structure")]
        [Required(ErrorMessage = "The business structure required.")]
        [DisplayName("*Business Structure")]
        public string BusinessStructure { get; set; }
    }
}

Wizard
Anton Mironov
Telerik team
 answered on 22 Feb 2024
1 answer
71 views
Grid Draggable Handle Position

Using

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.2/fluent/fluent-main.css" />

With a Kendo Grid, the handle is oddly positioned, how can I fix this

Grid
Ivan Danchev
Telerik team
 answered on 13 Feb 2024
1 answer
78 views
How to use localization for DatePicker control
While Telerik UI for jQuery has this option, I couldn't find any examples of how to use it for MVC:

$("#test").kendoDatePicker({
  dateInput: true,
  messages: {
    dateInput: {
      month: "__",
      year: "____",
      day: "__",
    },
  },
});

@(Html.Kendo().DatePicker()

.Name("ProcedureDateEnd")

.DateInput()

///// how to use messages here?

)
Date/Time Pickers
DateInput
Localization
Alexander
Telerik team
 answered on 12 Feb 2024
1 answer
72 views
TreeList RowTemplateId method not recognized

Is this because I have an older version of Kendo? When were row templates added?

TreeList
Anton Mironov
Telerik team
 answered on 12 Feb 2024
Narrow your results
Done
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
Date/Time Pickers
Upload
ComboBox
MultiSelect
Window
ListView
TabStrip
Installer and VS Extensions
Menu
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
View
MaskedTextBox
PDFViewer
Calendar
TextBox
Toolbar
DropDownTree
MultiColumnComboBox
Dialog
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Wizard
Accessibility
Security
Styling
Chat
MediaPlayer
TileLayout
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
DateInput
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
Template
Badge
Gauge
ModalView
ResponsivePanel
TextArea
GridLayout
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
DropDownButton
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
AIPrompt
PropertyGrid
Sankey
OTPInput
ChartWizard
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
13 14
15
16 17
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how