Telerik Forums
UI for ASP.NET MVC Forum
or
Ask question
All Questions
Unanswered
Answered
8,833 questions
0 answers
233 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
864 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
80 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
90 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
81 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
3 answers
848 views
Add ColumnMenu To Custom Toolbar On Telerik MVC Grid

I have a Telerik MVC Grid in a Razor view. I have added the ColumnMenu option which gives the user the ability to show/hide columns in the grid. By default it places this in the context menu of the header of the columns. I want to change this so that it is available in the ToolBar header as a custom control.

     @(Html.Kendo().Grid<StockReport>()
               .Name("grid")
               .Columns(columns =>
                  columns.Bound(p => p.SohQty).Title("Quantity");
                 columns.Bound(p => p.StockName).Title("Item Name");

                  ...

                  .ToolBar(tools => tools.Excel())
                  .ToolBar(tools => tools.Custom()
                      .Text("Customise")

                      .WhatToPutHere?????
                      )

                .ColumnMenu() //I want to reuse this but in the custom toolbar

I think it sits better in the toolbar header since it is about all the columns whereas the rest of the items in the context header of a column relate to just that column (filtering, sorting).
The only thing I don't know is what I can put on the custom toolbar in order to make use of the existing ColumnMenu control

Grid
Abraham
Top achievements
Rank 1
Iron
 answered on 07 Feb 2024
0 answers
265 views
An item with the same key has already been added Error Thrown

I generate an html report by replacing the keys in the html file with dynamic values. When converting to a pdf file using Telerik this error is thrown. I have checked several times and I do not have any duplicated keys. The error is thrown when trying to import the html report.

 

  JpegImageConverterBase customJpegImageConverter = new CustomJpegImageConverter();
  FixedExtensibilityManager.JpegImageConverter = customJpegImageConverter;

  HtmlFormatProvider htmlProvider = new HtmlFormatProvider();
  PdfFormatProvider fixedProvider = new PdfFormatProvider();
  //using flow provider to treat  html content
  Telerik.Windows.Documents.Flow.FormatProviders.Pdf.PdfFormatProvider flowProvider = new Telerik.Windows.Documents.Flow.FormatProviders.Pdf.PdfFormatProvider();

 
  var itemDetailsDoc = htmlProvider.Import(htmlReport);
Application
n/a
Top achievements
Rank 1
 asked on 07 Feb 2024
0 answers
86 views
ClientDetailTemplateId using grid in the grid using checkbox checkbox when checked data should be true in js file but always going to false

Hi Team,

 

I am facing issue in ClientDetailTemplateId Grid when using checkbox, data coming from database is true checkbox selected but if we checkbox checked or uncheck then checkbox values not sending proper values in jquery bellow sending code for grid.

  @(
      Html.Kendo().Grid<PNWorklistSupplierGridViewModel>()
                          .Name("pnwlGrid_#=Id#") // template expression, to be evaluated in the master context
                              .Columns(columns =>
                               {
                                   columns.Command(command =>
                                    {
                                        command.Custom("editPn1").Text(" ").IconClass("k-icon k-i-pencil").Click("OpenSupplierEditWindowPN");
                                    }).Width(40).HtmlAttributes(new { @style = "text-align: center;" });

                                        columns.Bound(e => e.Check).Title("test").Width(150)
                                   .ClientTemplate("<input type='checkbox' \\#=Check? checked='checked' : '' \\# />")
                                   .HeaderHtmlAttributes(new { @class = "headerText" }).Sortable(false).Filterable(false).HtmlAttributes(new { @style = "text-align: center;" }); 

If Check checkbox checked then js file getting Check values false

please check and let me know any thing else required.

 

Thank you!

Grid
Ramesh
Top achievements
Rank 1
 asked on 07 Feb 2024
1 answer
118 views
scheduler UI in not getting populated

I am new to the kendo UI, i have followed the demo for scheduler in ASP.NET MVC and added all the code but I am stuck here.
I have added the nuget and controller and model but I am stuck at ui side, it not showing scheduler.

Console errors

below is my code.

Index.cshtml :

@using Kendo.Mvc.UI
<div id="team-schedule">
    <div id="people">
        <input checked type="checkbox" id="alex" aria-label="Alex" value="1">
        <input checked type="checkbox" id="bob" aria-label="Bob" value="2">
        <input type="checkbox" id="charlie" aria-label="Charlie" value="3">
    </div>
</div>
@(Html.Kendo().Scheduler<Anics.FrontEnd.Models.Scheduler.TaskViewModel>()
    .Name("scheduler")
    .Date(new DateTime(2022, 6, 13))
    .StartTime(new DateTime(2022, 6, 13, 7, 00, 00))
    .Height(600)
    .Views(views =>
    {
        views.DayView();
        views.WorkWeekView(workWeekView => workWeekView.Selected(true));
        views.WeekView();
        views.MonthView();
        views.YearView();
        views.AgendaView();
        views.TimelineView();
    })
    .Timezone("Etc/UTC")
    .Resources(resource =>
    {
        resource.Add(m => m.OwnerID)
            .Title("Owner")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] {
                new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
                new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
                new { Text = "Charlie", Value = 3, Color = "#56ca85" }
            });
    })
    .DataSource(d => d
        .Model(m => {
            m.Id(f => f.TaskID);
            m.Field(f => f.Title).DefaultValue("No title");
            m.Field(f => f.OwnerID).DefaultValue(1);
            m.RecurrenceId(f => f.RecurrenceID);
        })
        .Read("Basic_Usage_Read", "Scheduler")
        .Create("Basic_Usage_Create", "Scheduler")
        .Destroy("Basic_Usage_Destroy", "Scheduler")
        .Update("Basic_Usage_Update", "Scheduler")
        .Filter(filters =>
        {
            filters.Add(model => model.OwnerID).IsEqualTo(1).Or().IsEqualTo(2);
        })
    )
)

@*<script type="text/javascript">
$(document).ready( function () {
        $("#people :checkbox").change(function (e) {
            var checked = $.map($("#people :checked"), function (checkbox) {
                return parseInt($(checkbox).val());
            });

            var filter = {
                logic: "or",
                filters: $.map(checked, function (value) {
                    return {
                        operator: "eq",
                        field: "OwnerID",
                        value: value
                    };
                })
            };

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

            scheduler.dataSource.filter(filter);
        });
    })
</script>*@

<style>

#team-schedule {
    background: url('@Url.Content("~/Content/web/scheduler/")team-schedule.png') transparent no-repeat;
    height: 115px;
    position: relative;
}

#people {
    background: url('@Url.Content("~/Content/web/scheduler/")scheduler-people.png') no-repeat;
    width: 345px;
    height: 115px;
    position: absolute;
    right: 0;
}
#alex {
    position: absolute;
    left: 4px;
    top: 81px;
}
#bob {
    position: absolute;
    left: 119px;
    top: 81px;
}
#charlie {
    position: absolute;
    left: 234px;
    top: 81px;
}
</style>

 _Layout.cshtml

@using Axtrum.Framework.Helpers
@using Microsoft.Web.Mvc
@using Anics.FrontEnd.Controllers
@using Anics.FrontEnd.Helpers

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewBag.Title</title>    
    @{
        var token = (System.Web.HttpContext.Current.Session["loginToken"] == null) ? "" : System.Web.HttpContext.Current.Session["loginToken"] + ""; //
    }
    <!-- BEGIN META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="your,keywords">
    <meta name="description" content="Orion Freight Management Cloud Portal">
    <!-- END META -->
    <!-- BEGIN STYLESHEETS -->
    <link href='https://fonts.googleapis.com/css?family=Roboto:300italic,400italic,300,400,500,700,900' rel='stylesheet' type='text/css' />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/materialadmin.css" />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/font-awesome.min.css" />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/material-design-iconic-font.min.css" />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/libs/bootstrap-datepicker/datepicker3.css" />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/libs/multi-select/multi-select.css?1424887857" />
    <link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/libs/dropzone/dropzone.css" />
    <link href="~/assets-vendor/js/libs/intl-tel-input/build/css/intlTelInput.css" rel="stylesheet" />
    <script src="~/Scripts/canvasjs.min.js"></script>
    <!-- END STYLESHEETS -->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/assets-vendor/js/libs/utils/html5shiv.js?1403934957"></script>
    <script type="text/javascript" src="/assets-vendor/js/libs/utils/respond.min.js?1403934956"></script>
    <![endif]-->
    @*<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">*@
    @*<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">*@
    <link href="~/assets/css/flatpickr.min.css" rel="stylesheet" />
    <link href="~/assets/js/plugins/jquery.combogrid-1.6.3/resources/css/smoothness/jquery.ui.combogrid.css" rel="stylesheet" />
        <link href="~/assets/js/plugins/jquery.combogrid-1.6.3/resources/css/smoothness/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
    <link href="~/assets/js/plugins/lobibox-master/dist/css/Lobibox.min.css" rel="stylesheet" />

    <link type="text/css" rel="stylesheet" href="/assets/css/app.css" />

    <link href="https://kendo.cdn.telerik.com/themes/7.2.0/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.aspnetmvc.min.js"></script>

    @* Add the bootstrap.min.js script: *@
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>

    <script src="~/images/js/cachedetect.js"></script>
    <script>

            var offset=  @SessionHelper.TimeZone;

    </script>
    <script src="https://maps.alk.com/api/1.2/ALKMaps.js?key=c2327b98fa0fa244aab3ee1c51ea772e" type="text/javascript"></script>
    @Styles.Render("~/bundles/all-css")
    @RenderSection("head", required: false)
    <style>

        .floatingBtn {
            width: 40px;
            height: 40px;
            z-index: 100;
            font-size: 8px;
            line-height: 8px;
            text-align: center;
            color: white;
            text-decoration: none;
            position: fixed;
            right: 30px;
            bottom: 30px;
            background: #0aa89e;
            padding: 9px 0px;
            display: flex;
            align-items: center;
            flex-direction: column;
            border-radius: 50%;
            transition: 0.2s ease-in-out;
            box-shadow: 0 0 10px rgb(0 0 0 / 25%);
            );
        }

            .floatingBtn:hover {
                background: #066660;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.30);
            }

            .floatingBtn img {
                width: 25px;
                height: 25px;
                object-fit: contain;
                display: block;
                margin: 0 0 -5px;
            }
    </style>
</head>
<body class="header-fixed menubar-hoverable menubar-pin" id="@SessionHelper.OrgName" ng-app="axtrumApp" ng-controller="GlobalController as gm">

    <!-- menubar-first menubar-visible  -->
    @*<iframe src="@ConfigKeys.IframeURL/autologin.aspx?token=@token" frameborder="0" style="display:none"></iframe>*@

    <iframe ng-src="@ConfigKeys.IframeURL/autologin.aspx?token=@token" frameborder="0" style="display:none"></iframe>

    @{
        if (System.Web.HttpContext.Current.Session["loginToken"] == null)
        {
            if (System.Web.HttpContext.Current.Request.CurrentExecutionFilePath != "/OutsideCarrier/Index")
            {
                Response.Redirect("~/Account/Login");
            }

        }
        else
        {
            System.Web.HttpContext.Current.Session["loginToken"] = System.Web.HttpContext.Current.Session["loginToken"].ToString().Replace("~~1~~", "");
        }
    }
    <!-- BEGIN HEADER-->
    @if (System.Web.HttpContext.Current.Session["loginToken"] != null && HttpContext.Current.Request.RequestContext.RouteData.Values["action"].ToString() != "Unauthorised")
    {
        Html.RenderAction("Menu", "Account");
    }
    @if (System.Web.HttpContext.Current.Session["loginToken"] != null && HttpContext.Current.Request.RequestContext.RouteData.Values["action"].ToString() == "Unauthorised")
    {
        @Html.Partial("_TopNavBar")
    }

    @*@Html.Partial("~/Views/Shared/_AddContactForm.cshtml",new Anics.FrontEnd.Models.Contacts.ContactPrimaryInfoModel())*@

    @*@Html.Partial("_TopNavBar")*@
    <!-- END HEADER-->
    <!-- BEGIN BASE-->
    <div id="base">
        <!-- BEGIN OFFCANVAS LEFT -->
        <div class="offcanvas"></div><!--end .offcanvas-->
        <!-- END OFFCANVAS LEFT -->
        <!-- BEGIN CONTENT-->
        <div id="content">
            <section class="has-actions style-default-bright">
                <div class="section-header height-auto">
                    <div class="row">
                        <div class="col-sm-6">
                            <ol class="breadcrumb">
                                <li><a href="javascript:void(0)" ng-click="gm.getDefaultUrlValue()">Home</a></li>
                                @RenderSection("breadcrumb", required: false)
                            </ol>
                        </div>
                        <div class="col-sm-6" id="PageTopActionBar">
                            @RenderSection("actionbartop", required: false)
                        </div>
                    </div>
                </div>

                <div class="section-body hidden" id="appBody">
                    <div class="margin-bottom-lg">
                        @*<center>
                                <div data-loading style="display: block;position: absolute;width: 100%;line-height: 50;z-index: 99999999;"></div>
                            </center>*@
                        @*<div loading-indicator style="display: block;position: absolute;width: 100%;line-height: 50;z-index: 99999999;"><span>Please wait...<img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" /></span></div>*@
                        @RenderBody()

                    </div>
                    <div id="PageActionBar" class=" style-primary">
                        @RenderSection("actionbarbottom", required: false)
                    </div>
                </div>
                <div class="section-action style-primary hidden" id="pageActionBar">

                </div>
                <div id="EnlargedImageModal" class="modal draggable fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header style-primary">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                <header class="text-lg">Image Rotation</header>
                            </div>
                            <form novalidate name="vm.formSaveRotatImageModal">
                                @Html.Partial("_ContactAlertsAreaInForm", "vm.formSaveRotatImageModal")


                                <div class="modal-body">

                                    <div class="container-fluid bd-example-row">
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="row">
                                                    <div id="imageViewContainer">
                                                        <img id="BOLImage" ng-src="{{gm.enLargefileUrl}}" class='img-responsive' style="margin: 12% auto;transition: .2s ease-in-out" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">

                                    <button class="btn btn-default" id="rotateImage" style="margin:0 37%" ng-click="gm.rotateImage();">
                                        <i class="fa fa-rotate-right" aria-hidden="true"></i>
                                    </button>
                                    <button ng-show="gm.isFromPro == true" type="submit" class="btn btn-primary btn-sm" ng-click="gm.saveRatetedImage(gm.imageName)"><i class="fa fa-save"></i> save</button>

                                    <a class="btn btn-default" data-dismiss="modal">Close</a>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
                <div id="globleConfirmationModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="deleteModal" data-backdrop="static">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header style-primary">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                <header class="text-lg">Confirmation</header>
                            </div>
                            <div class="modal-body">
                                <h4>{{gm.confirmationMessage}}</h4>
                            </div>
                            <div class="modal-footer">
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div><!--end #content-->
        <!-- END CONTENT -->
        <!-- BEGIN MENUBAR-->
        @Html.Partial("_LeftNavBar")
        <!--end #menubar-->
        <!-- END MENUBAR -->
        <!-- BEGIN OFFCANVAS RIGHT -->
        @Html.Partial("_OffCanvasRight")
        <!--end .offcanvas-->
        <!-- END OFFCANVAS RIGHT -->
        <a id="floatingBtnBot" class="floatingBtn">
            <img src="~/assets/images/arrow-ic.svg" style="margin-left:8px;margin-top:-2px" />
        </a>
        <a class="floatingBtn" id="floatingBtnTop" style="display:none">
            <img src="~/assets/images/up-arrow-ic.svg" style="margin-left:8px;margin-top:-2px" />
        </a>
    </div><!--end #base-->
    @Html.Partial("_FooterLayout")


    <!-- END BASE -->
    <!-- BEGIN JAVASCRIPT -->











    @Scripts.Render("~/bundles/app-js")
    <script src="~/assets-vendor/js/ng-tags-input.min.js"></script>
    <script>
        // include kendo.timezones.js
        var version = kendo.version;

        $('<script/>', {
            type: 'text/javascript',
            src: 'https://kendo.cdn.telerik.com/' + version + '/js/kendo.timezones.min.js'
        }).appendTo('head');
    </script>
    <script type="text/javascript">

        function onError(e) {
            this.cancelChanges();

            var errorMessage = "";
            if (e.errors) {
                for (var error in e.errors) {
                    errorMessage += e.errors[error].errors[0] + " ";
                }
            }

            alert(errorMessage);
        }

        $(document).ready(function () {
            $("#people :checkbox").change(function (e) {
                var checked = $.map($("#people :checked"), function (checkbox) {
                    return parseInt($(checkbox).val());
                });

                var filter = {
                    logic: "or",
                    filters: $.map(checked, function (value) {
                        return {
                            operator: "eq",
                            field: "OwnerID",
                            value: value
                        };
                    })
                };

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

                scheduler.dataSource.filter(filter);
            });
        })
    </script>
    @RenderSection("scripts", required: false)
    <script>

            var getContactUrl = '@(Html.BuildUrlFromExpression<ScheduleRideController>(c => c.GetContactDetail(0)))';
            var getMasterData = '@(Html.BuildUrlFromExpression<CommonController>(c => c.GetMasterDataForCreateContactPopup(null)))';
            var getSelectedColumnUrl = '@(Html.BuildUrlFromExpression<CommonController>(c => c.GetSelectedColumn(0)))';
            var saveSelectedColumnUrl = '@(Html.BuildUrlFromExpression<CommonController>(c => c.SaveSelectedColumn(0,"")))';
            window.app.constant('globalConfig', {
                getContactUrl: getContactUrl,
                getMasterData: getMasterData,
                getSelectedColumnUrl: getSelectedColumnUrl,
                saveSelectedColumnUrl: saveSelectedColumnUrl
            });
            @Html.Angular().MasterDataForModel("")
            $(window).on('scroll', function () {
                $('.cg-autocomplete').hide();
            });
            $('.modal-body').on('scroll', function () {
                $('.cg-autocomplete').hide();
            });
            $('.close').on('click',function(){
                $('.cg-autocomplete').hide();
            });

            $("#floatingBtnBot").on('click',function(){

                $('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
                $("#floatingBtnBot").css("display","none");
                $("#floatingBtnTop").css("display","block");
            });
            $("#floatingBtnTop").on('click',function(){
                $('html,body').animate({scrollTop: 0},"fast");
                $("#floatingBtnTop").css("display","none");
                $("#floatingBtnBot").css("display","block");

            });
            $("#floatingBtnTop").click();
            window.onscroll = function(ev) {
                if ((window.innerHeight + window.pageYOffset) >= document.body.scrollHeight) {
                    $("#floatingBtnBot").css("display","none");
                    $("#floatingBtnTop").css("display","block");
                }

                if(Math.round(window.pageYOffset) <= 1){
                    $("#floatingBtnTop").css("display","none");
                    $("#floatingBtnBot").css("display","block");
                }



            };
    </script>
    @*
         <script src="/assets/js/lib/jquery-2.1.4.min.js"></script>
            <script src="/assets-vendor/js/libs/bootstrap/bootstrap.min.js"></script>
        <script src="/assets/js/app.jQuery.js"></script>
        @*<script src="/assets-vendor/js/uploader.js"></script>
        <!--begin angular controllers js-->
        <script src="/assets/js/controllers/ContactController.js"></script>
        <script src="~/assets/js/controllers/ContactGroupController.js"></script>
        <script src="/assets/js/controllers/ScheduleController.js"></script>
        <script src="~/assets/js/controllers/UserController.js"></script>
        <script src="~/assets/js/controllers/roleController.js"></script>
        <script src="/assets/js/controllers/contentCtrl.js"></script>
        <script src="~/assets/js/controllers/HubController.js"></script>
        <script src="~/assets/js/controllers/AssetsController.js"></script>
        <!--end angular controllers-->

        <script src="~/assets/js/directives/customPagination.js"></script>
        <script src="/assets/js/directives/pagination.js"></script>
        <script src="/assets/js/services/ContentData.js"></script>
        <script src="/assets/js/utility/ArrayExtensions.js"></script>
        <script src="/assets/js/utility/FormGroupValidationDirective.js"></script>
        <script src="/assets/js/utility/InputValidationIconsDirective.js"></script>
        <script src="/assets/js/utility/MvcGridDirective.js"></script>
        <script src="/assets/js/utility/ParseDateFilter.js"></script>

        <!--begin plug-in js-->
        <script src="/assets-vendor/js/libs/jquery-ui/jquery-ui.min.js"></script>
        <script src="/assets-vendor/js/libs/spin.js/spin.min.js"></script>
        <script src="/assets-vendor/js/libs/autosize/jquery.autosize.min.js"></script>
        <script src="/assets-vendor/js/libs/moment/moment.min.js"></script>
        <script src="/assets-vendor/js/libs/nanoscroller/jquery.nanoscroller.min.js"></script>
        <script src="/assets-vendor/js/libs/skycons/skycons.js"></script>
        <script src="/assets-vendor/js/libs/select2/select2.min.js"></script>
        <script src="/assets-vendor/js/libs/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
        <script src="/assets-vendor/js/libs/multi-select/jquery.multi-select.js"></script>
        <script src="/assets-vendor/js/libs/inputmask/jquery.inputmask.bundle.min.js"></script>
        <script src="/assets-vendor/js/libs/bootstrap-datepicker/bootstrap-datepicker.js"></script>
        <script src="/assets-vendor/js/libs/dropzone/dropzone.js"></script>
        <script src="/assets-vendor/js/libs/intl-tel-input/build/js/intlTelInput.js"></script>
        <script src="/assets-vendor/js/libs/intl-tel-input/build/js/intlTelInput.min.js"></script>
        <!--end plug-in js-->
        <script src="/assets-vendor/js/core/source/App.js"></script>
        <script src="/assets-vendor/js/core/source/AppNavigation.js"></script>
        <script src="/assets-vendor/js/core/source/AppOffcanvas.js"></script>
        <script src="/assets-vendor/js/core/source/AppCard.js"></script>
        <script src="/assets-vendor/js/core/source/AppForm.js"></script>
        <script src="/assets-vendor/js/core/source/AppNavSearch.js"></script>
        <script src="/assets-vendor/js/core/source/AppVendor.js"></script>
        <script src="~/assets/js/directives/ngEnter.js"></script>
        <!-- Calendar -->
        <script src="/assets-vendor/js/libs/fullcalendar/fullcalendar.min.js"></script>
        <!-- /Calendar -->
        <!----User Controller-->
        <!---/-User Controller-->
        <script src="/assets-vendor/js/core/demo/Demo.js"></script>
        <script src="/assets-vendor/js/core/demo/DemoUISkycons.js"></script>
        <script src="~/Scripts/dragdrop.js"></script>*@
    <!-- END JAVASCRIPT -->
    @*<script src="https://unpkg.com/flatpickr"></script>*@
    <script src="~/assets/js/flatpickr.min.js"></script>
</body>
</html>
Scheduler
Anton Mironov
Telerik team
 answered on 07 Feb 2024
2 answers
5.6K+ views
Using Tooltip in an MVC UI Grid

 

I would like to display data in a popup window or tooltip when users hover over or click on a cell in the Telerik grid. I tried using the Telerik tooltip, however the tooltip doesn't display at all. I also tried the jquery and bootstrap tooltips, but they do not work as well. When I use the tooltips for an element outside of the grid, they work fine. Does anyone have a razor example for using the Telerik tooltip in a grid?  Also, are there other ways to approach this? Essentially, I want to display a small popup window with a table of additional information related to one specific cell in each row of the table.

ToolTip
Patrick | Technical Support Engineer, Senior
Telerik team
 updated answer on 05 Feb 2024
Narrow your results
Done
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
Date/Time Pickers
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
Gauge
ModalView
ResponsivePanel
TextArea
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
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
17 18
19
20 21
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how