This is my code.

@using apexanalytix.app
@using apexanalytix.app.HtmlHelperExtensions
@using FirstStrike.VendorPortal.SharedDataContracts.VendorProfile
@using Kendo.Mvc.UI
@using Portal.BusinessObjects.Common;
@inject VendorProfileHelper vendorProfileHelper
@inject SysSettingHelper sysSettingHelper

@{
    var currentCulture = System.Globalization.CultureInfo.CurrentCulture.ToString();
}
<script>
    $(function () {

        kendo.culture("en-US");
    });
</script>
<style>
    .rowHighlighter {
        background-color: #ff0000;
        color: #fff !important;
    }
        .rowHighlighter:hover {
            background-color: #e95652 !important;
            color: #fff !important;
        }
    .rowHighlighter.k-state-selected {
            background-color: #009ec9 !important;
        }
     .rowHighlighter.k-state-selected td{
            background-color: #009ec9 !important;
        }
        .rowHighlighter td a {
            color: #fff !important;
        }
    .k-filter-row label > input[type=radio] {
        vertical-align: middle;
        position: relative;
        bottom: 2px;
        margin-left: 3px;
        margin-right: 10px;
    }

    .k-dropdown-wrap {
        max-height: 27px;
    }

    .k-grid td {
        line-height: 1em;
    }

    .k-grid .k-grid-header .k-header .k-link {
        height: auto;
    }

    .k-grid .k-grid-header .k-header {
        white-space: normal;
    }

    .vendor-controls {
        cursor: pointer;
        margin: 0 auto;
        width: 20px;
        height: 1.2em;
        max-height: 1.2em;
        padding: 6px;
    }
</style>
<div style="display:none">
    <ul id="vendor-search-grid-context-menu">
        <li id="copyText">@Html.Raw("Copy Text".Translate())</li>
    </ul>
</div>
@{
    var excludedFieldSet = ViewBag.ExcludedFields as HashSet<string> ?? Enumerable.Empty<string>();
    var choosenColumns = ViewBag.ChoosenColumns as HashSet<string> ?? Enumerable.Empty<string>();
    var availableStatus = (System.Collections.IEnumerable)ViewBag.AvailableStatus;
    var moduleName = ViewBag.ModuleName;
    var registrationType = (System.Collections.IEnumerable)ViewBag.RegistrationType;

    int defaultGridSize = int.TryParse(ViewData["DefaultGridSize"]?.ToString(), out int gridSize) ? gridSize : 20;
    var partialViewPath = "~/Areas/Registration/Views/PartialViews/VenderProfilesAction.cshtml";

    var multipleEditWindowErrorMessage = "Cannot save vendor data with multiple windows open. Please edit one vendor at a time".Translate();
}
<div class="k-grouping-header" style="padding-top: 10px; border-color: var(--button-border-color); border-width: 1px; border-style: solid; border-radius: 3px;width: calc(100% - 50px)">
    @await Html.PartialAsync(partialViewPath)
</div>
@(Html.DataGrid<VendorSearchResult>(false)
    .Name("vendorProfileGrid")
    .HtmlAttributes(new { @style = "height: 500px;width: calc(100% - 50px)" })
    .Reorderable(r => r.Columns(true))
    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Multiple)
        .Type(GridSelectionType.Row))
    .Resizable(r => r.Columns(true))
    .Pageable(p =>
    {
        p.Refresh(true);
        p.PageSizes([25, 50, 75, 100, 1000, 5000, 10000]);
    })
    .Events(_ => { })
    .Columns(columns =>
    {
        columns.Bound(v => v.VR_Id).Title("VR ID".Translate()).ClientTemplate("#= VR_Id === 0 ? '' : VR_Id #").Width(180).Lockable(false).Locked(true).Filterable(f => f.Cell(cell => cell.Template("VendorProfile.decimalToIntFilter"))).Visible(vendorProfileHelper.IsVrIdDisplayInGrid && choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.VR_Id), StringComparison.OrdinalIgnoreCase))).HeaderHtmlAttributes(new { @class = "NumericHeaderAlign" }).HtmlAttributes(new { @class = "NumericRowAlign" });
        columns.Bound(v => v.VendorId).Title("Vendor Number".Translate()).ClientTemplate("#= VR_Id === 0 ? '' : (VendorId || '') #").Lockable(false).Locked(true).Width(150).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.VendorId), StringComparison.OrdinalIgnoreCase))).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.CompanyName).Title("Company Name".Translate()).Width(220).Lockable(false).Locked(true).ClientTemplate("#=  VR_Id === 0 ? CompanyName : VendorProfile.buildCompanyNameLink(CompanyName, '" + @Url.Action("GetCompanyUrl") + "')#").Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.CompanyName), StringComparison.OrdinalIgnoreCase))).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.CompanyNameDBA).Title("Company Name DBA".Translate()).Width(220).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.CompanyNameDBA), StringComparison.OrdinalIgnoreCase))).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.VendorControls).Title("Vendor Controls".Translate()).Width(140)
            .ClientTemplate("#=  VendorControls ? '<div onclick=\"VendorProfile.openValidationResultDialogWindow(this)\"><span class=\"fal fa-check-circle validation-pass-icon-grid\"></span></div>':'<div onclick=\"VendorProfile.openValidationResultDialogWindow(this)\"><span class=\"fal fa-times-circle validation-fail-icon-grid\"></span></div>'  #")
            .Filterable(filterable => filterable.Messages(m => m.IsFalse("Fail".Translate()))
                .Messages(m => m.IsTrue("Pass".Translate()))).Visible((ViewBag.IsDisplayVendorControlInGrid ?? true) && choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.VendorControls), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "IconHeaderAlign" })
            .HtmlAttributes(new { @class = "IconRowAlign" });
        columns.ForeignKey(v => v.Status, availableStatus, "Value", "Name")
            .Title("Status".Translate())
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" })
            .ClientTemplate("#= VR_Id === 0 ? 'DISCOVERY' : VendorProfile.getGridTextByValue(Status,'Status') #")
            .Width(180)
            .Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.Status), StringComparison.OrdinalIgnoreCase)))
            .HtmlAttributes(new { @data_displayToolTip = "True", @data_column_name = nameof(VendorSearchResult.Status), @class = "StringRowAlign" });
        columns.Bound(x => x.Status_Desc).Title("Status".Translate()).ClientTemplate("#= VR_Id === 0 ? 'DISCOVERY' : Status_Desc #").Hidden(true).IncludeInMenu(false).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(x => x.RegistrationType_Desc).ClientTemplate("#= RegistrationType_Desc == null ? '' : RegistrationType_Desc.toUpperCase() #").Title("Registration Type".Translate()).Hidden(true).IncludeInMenu(false);
        columns.ForeignKey(v => v.SubStatus, availableStatus, "Value", "Name").ClientTemplate("#= SubStatus == null ? '' : VendorProfile.getGridTextByValue(SubStatus,'SubStatus') #").Title("Sub Status".Translate()).Width(140).Visible((ViewBag.IsDisplaySubStatusColumnInGrid ?? false) && choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SubStatus), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.ForeignKey(v => v.RegistrationType, registrationType, "Value", "Name").ClientTemplate("#= RegistrationType == null ? '' : VendorProfile.getGridTextByValue(RegistrationType,'RegistrationType').toLocaleUpperCase() #").Title("Registration Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.RegistrationType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.SupplierType).Title("Supplier Type".Translate()).Width(200).Visible( choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SupplierType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.SupplierSubType).Title("Vendor Category".Translate()).Width(140).Visible( choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SupplierSubType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.SupplierSubType).Title("Vendor Category".Translate()).Width(140).Visible( choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SupplierSubType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.BusinessUnit).Title("Business Unit".Translate()).Width(140).Visible( choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BusinessUnit), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.ProjectCode).Title("Project Code".Translate()).Width(140).Visible(sysSettingHelper.IsProjectCodeDrivenWorkflowEnabled && choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.ProjectCode), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.AddressTypeDescription).Title("Address Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.AddressTypeDescription), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.PayeeName).Title("Payee Name".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.PayeeName), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.PayeeDBA).Title("Payee DBA".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.PayeeDBA), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.InvitedBy).Title("Invited By".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.InvitedBy), StringComparison.OrdinalIgnoreCase)))
            .HtmlAttributes(new { @data_displayToolTip = vendorProfileHelper.IsUpdatedByToolTipToShowName, @data_column_name = nameof(VendorSearchResult.InvitedBy), @class = "StringRowAlign invited-by-tooltip" }).HeaderHtmlAttributes(new { @class = "StringHeaderAlign" });
        columns.Bound(v => v.CreatedDate).Format("{0:G}").Title("Date Registered".Translate()).Width(180).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.CreatedDate), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "DateHeaderAlign" }).HtmlAttributes(new { @class = "DateRowAlign" });
        columns.Bound(v => v.UpdatedBy).Title("Updated By".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.UpdatedBy), StringComparison.OrdinalIgnoreCase)))
            .HtmlAttributes(new { @data_displayToolTip = vendorProfileHelper.IsUpdatedByToolTipToShowName, @data_column_name = nameof(VendorSearchResult.UpdatedBy), @class = "StringRowAlign" })
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" });
        columns.Bound(v => v.UpdatedDate).Format("{0:G}").Title("Last Update".Translate()).Width(180).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.UpdatedDate), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "DateHeaderAlign" }).HtmlAttributes(new { @class = "DateRowAlign" });
        columns.Bound(v => v.ProfileType).Title("Profile Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.ProfileType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.IndividualType).Title("Individual Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.IndividualType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.GlobalSmartVMNumber).Title("Global SmartVM Number".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.GlobalSmartVMNumber), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.ParentSmartVMNumber).Title("Parent SmartVM Number".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.ParentSmartVMNumber), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.SmartVMBusinessEntityType).Title("SmartVM Business Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SmartVMBusinessEntityType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.SmartVMBusinessEntitySubType).Title("SmartVM Business Subtype".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.SmartVMBusinessEntitySubType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.BusinessEntityType).Title("Business Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BusinessEntityType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.TaxClassification).Title("Tax Classification".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.TaxClassification), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.IncomeType).Title("Income Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.IncomeType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.BusinessOwnershipType).Title("Business Ownership Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BusinessOwnershipType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.VendorRequestType).Title("Vendor Request Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.VendorRequestType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.LocalLanguageCompanyCountry).Title("Local Language Company Country".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.LocalLanguageCompanyCountry), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.LocalLanguageCompanyName).Title("Local Language Company Name".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.LocalLanguageCompanyName), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.LocalLanguageCompanyNameDBA).Title("Local Language Company NameDBA".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.LocalLanguageCompanyNameDBA), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.AddressInfo).Title("Address Info".Translate()).Width(240).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.AddressInfo), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.BankName).Title("Bank Name".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BankName), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.BankAddress).Title("Bank Address".Translate()).Width(240).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.BankAddress), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.PersonName).Title("Person Name".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.PersonName), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.ContactType).Title("Contact Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.ContactType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.Email).Title("Email".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.Email), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.PhoneInfo).Title("Phone Info".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.PhoneInfo), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.TaxType).Title("Tax Type".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.TaxType), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Bound(v => v.TaxIdNumber).Title("Tax Id Number".Translate()).Width(140).Visible(choosenColumns.Any(x => string.Equals(x, nameof(VendorSearchResult.TaxIdNumber), StringComparison.OrdinalIgnoreCase)))
            .HeaderHtmlAttributes(new { @class = "StringHeaderAlign" }).HtmlAttributes(new { @class = "StringRowAlign" });
        columns.Command(command => { command.Custom("Delete").Visible("VendorProfile.deleteVendorProfileRowVisible").Text("Delete".Translate()).Click("VendorProfile.deleteVendorProfile"); }).Width(200).Visible((ViewBag.IsDisplayDeleteColumnInGrid ?? false) && !excludedFieldSet.Contains(nameof(VendorSearchResult.IsDeleteAllowed)))
            .HeaderHtmlAttributes(new { @class = "IconHeaderAlign" }).HtmlAttributes(new { @class = "IconRowAlign" });
    })
    .Sortable()
    .Events(e => { e.DataBound("VendorProfile.vendorProfileGridDataBound").Change("VendorProfile.onVendorProfileGridChange").ExcelExport("VendorProfile.vendorProfileGridDataExcelExport"); })
    .AutoBind(true)
    .Editable(e => { e.Enabled(false); })
    .DataSource(datasource => datasource
        .Custom()
        .Type("aspnetmvc-ajax")
        .PageSize(defaultGridSize)
        .Transport(t => { t.Read(r => r.Url(Url.Action("ReadVendorProfiles", new { ModuleName = moduleName })).Data("VendorProfile.getVendorProfileAdditionalData")); }
        )
        .Schema(s => s
            .Model(model => { model.Id(request => request.VendorSearchResultId); })
            .Data("Data")
            .Total("Total")
        )       
        .ServerSorting(true) // as we are pulling 2000 records at a time from service, don't use server side sorting, paging, filtering
        .ServerPaging(true) // Once moved to odata service, we can turn it on
        .ServerFiltering(true)
        .ServerGrouping(false)
        .ServerAggregates(false)
        .Events(events => events.Error("VendorProfile.onGridError")
            .RequestEnd("VendorProfile.onGridRequestEnd")
            .RequestStart("VendorProfile.onGridRequestStart")
            .Change("VendorProfile.onVendorProfileGridChange"))
    )
)


<script>
    window.multipleEditWindowErrorMessage = '@multipleEditWindowErrorMessage';
</script>

this is my Layoutm Code

@using System.Threading
@using apexanalytix.app.HtmlHelperExtensions
@using apexanalytix.app.ViewComponents
@using apexportal.Services.Abstractions
@using Microsoft.AspNetCore.Mvc.Localization
@using Portal.BusinessObjects.Common
@model Portal.Models.MvcProfilePageModel
@inject SysSettings SysSettings
@inject IViewLocalizer Localizer

<!DOCTYPE html>
<html lang="@Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName">
<head id="Head1">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" charset="utf-8"/>
    <style>
        body {
            min-width: 850px;
            width: 100%;
        }

        .field-validation-valid {
            padding: 0 !important;
            margin: 0 !important;
            display: none !important;
        }

        /* Int, Long, Percentage */
        .NumericHeaderAlign {
            text-align: center !important;
        }

        /* Int, Long, Percentage */
        .NumericRowAlign {
            text-align: right;
        }

        /* Date and Date + Time */
        .DateHeaderAlign {
            text-align: center !important;
        }

        /* Date and Date + Time */
        .DateRowAlign {
            text-align: center;
        }

        /* Alpha Numeric */
        .StringHeaderAlign {
            text-align: left !important;
        }

        /* Alpha Numeric */
        .StringRowAlign {
            text-align: left;
        }

        /* Images, Icons */
        .IconHeaderAlign {
            text-align: center !important;
            text-overflow: clip !important;
        }

        /* Images, Icons */
        .IconRowAlign {
            text-align: center !important;
            text-overflow: clip !important;
        }
    </style>

    <link href="/Content/Themes/uilightness/jqueryui" rel="stylesheet" type="text/css"/>
    <link href="/Content/VendorRegistrationMaster" rel="stylesheet" type="text/css"/>

    <script src="/Styles/fa-pro-5_15_1/js/all.min.js"></script>
    @{
        var englishPageTitle = SysSettings.SiteContent[ValueName.PageTitleBase];
        var pageTitle = Localizer[englishPageTitle.Value ?? string.Empty].Value + " - " + ViewBag.Title;
    }

    <title id="Title1">@pageTitle</title>
</head>

<body style="width: 100%">

<!-- menu popup-->

<div class="modelbg" style="display: none;"></div>
<div id="cloneMenu" style="display: none;">
    <div id="cloneContent"></div>
</div>
<div id="fadeSection">
    <div id="coreDialog" style="display: none">
    </div>
</div>
<input type="hidden" id="hdnThemeMode"/>
@{
    var enableAutoComplete  = SysSettings.Display[ValueName.EnableBrowserAuto_complete].GetValue<bool>();
    var cultureCode = HtmlExtensions.GetFullCultureCode();
}
<form id="Form1" autocomplete="@(enableAutoComplete ? "on" : "off")">
    <script src="/bundles/MsAjaxJs"></script>
    <script src="/bundles/jquery"></script>
    <script src="/bundles/jqueryui"></script>
    <script src="/Scripts/kendo/2024.3.1015/kendo"></script>
    <script src="/bundles/WebFormsJs"></script>

    <script src="/bundles/PortalMaster"></script>
    <script src="/bundles/jqueryval"></script>
    <script src="/bundles/KendoWindowManager"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"
            type="text/javascript"></script>
    <script src="/Scripts/kendo/2024.3.1015/messages/kendo"></script>
    <script src="/Scripts/kendo/2024.3.1015/cultures/kendo"></script>
    <script src="~/Scripts/kendo/2024.3.1015/cultures/kendo.culture.@(cultureCode).min.js" type="text/javascript"></script>
    <script src="~/Scripts/kendo/2024.3.1015/messages/kendo.messages.@(cultureCode).min.js" type="text/javascript"></script>
    <script>
        kendo.culture("@(cultureCode)");
    </script>


    <div id="body">

        @{ await Html.RenderPartialAsync("~/Views/Shared/_Header.cshtml", ViewData); }
        @{ await Html.RenderPartialAsync("~/Views/Shared/_ThemeMode.cshtml", ViewData); }
        @{ await Html.RenderPartialAsync("~/Views/Shared/_GridRowDeleteDialog.cshtml", null); }
        @{ await Html.RenderPartialAsync("~/Views/Shared/_popupDialog.cshtml", null); }

        <div class="container-fluid landing-container">
            <div class="sidebar border-right bg-body-tertiary">
                <div class="sideMenubtm">
                    @{
                        await Html.RenderPartialAsync("~/Views/Shared/_MainMenu.cshtml", ViewData);
                    }
                </div>

            </div>
            <div class="main-content-section">
                <div id="bodytitle">
                    @{ await Html.RenderPartialAsync("~/Views/Shared/_Breadcrumb.cshtml", ViewData); }
                </div>
                <div id="bodynews">
                    @if (false)
                    {
                        await Component.RenderActionAsync("GetWelcomeBanner", "Dashboard");
                    }
                </div>
                <div style="padding: 0 24px; margin-bottom: 100px">
                    @RenderBody()
                    @await Component.ExtendKendoValidationsAsync()
                    <script type="text/javascript">
                        $(document).ajaxError(function (xhr, props) {
                            if (props.status === 401) {
                                location.reload();
                            }
                        });
                    </script>
                </div>
                @if (ViewBag.StartSessionExpire != false)
                {
                    await Html.RenderPartialAsync("~/Views/Shared/_SessionExpireNotification.cshtml", ViewData);
                }
            </div>
        </div>
        @{
            if (SysSettings.HomePage[ValueName.DisplayFooter].GetValue<bool>() && !(Model?.HideFooter ?? false))
            {
                <partial name="~/Views/Shared/_Footer.cshtml"/>
            }
        }
    </div>

</form>

<script type="text/javascript">

    var commonBaseUrl = '@Url.Content("~/")';

    function Translate(error) {
        try {

            let url = '/Registration/Common/TranslateJSStrings';
            $.ajax({
                type: "POST",
                async: false,
                url: url,
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({
                    Message: error
                }),
                success: function (result) {
                    error = result.d;
                }
            });

            return error;

        } catch (ex) {
        }
    }

</script>

@Html.RenderUnobtrusiveAjaxScript()

@await Component.GoogleAnalyticsAsync(SysSettings.SiteConfiguration[ValueName.AnalyticsId].GetValue<string>(), Context.User.Identity?.GetUserId())

</body>
</html>

this is my Error.

Good morning,
i am using MVC.ASP net in my project and i'm trying to send the DataSourceRequest to a service , via rabbitmq.

the message should contains all the request filters set in the ui in order to create an excel report. i have tried to use the System.Text.Json serialization but it's not working properly. it serializes only the first level props.
i have found a ".ToJson" extension  but it's returning a Dictionary<string, object>, not usefule here.

can you suggest how to serialize the DataSourceRequest in Json format? with all nested and recursive properties?

the filters can be about dates, strings, combobox, and so on

thanks in advance

Hi Guys

This stupid little issue is taking up way way too much time for me to resolve..

I am setting a timepicker as follows:

  <td class="tg-7uzy">

                @Code
                    With Html.Kendo().TimePicker()
                        .Name("1Open")
                        .Events(Function(events) events.Change("settime"))
                        .Value(New TimeSpan(0, Model.Hours(1).open, 0))
                        .Min(New TimeSpan(0, 0, 0))
                        .Max(New TimeSpan(0, 0, 0))
                        .Render()
                    End With
                End Code
            </td>

The result is as per the attached screen shot.

It 'looks like' the values are set right as the timepickers have the correct times , but when you drop down, it always starts at midnight and the current time is not highlighted.  I assume the timepicker needs the value to be set with AM or PM .. but that can't be done from a TimeSpan or a datetime.. the am pm always has dots ( a.m.  , p.m.)

If tried adding .Format("HH:mm:tt") and  .ParseFormats(New String() {"HH:mm:tt"}) etc, but I just can't get it to work. ( I've tried allot more formats than just these, I've tried "HH:mm tt" ,"HH:mm t.t." ( cause it's the dots around the am pm which seems to be whats stopping.))

Feeling a bit stupid having to ask this as it seems to be a straightforward thing.

I'm sure I will have a Face palm moment when shown the error in my ways.. but I've got to the point of not caring! :)

Cheers

Rob

We have use a MultiColumnComboBoxFor to select from a large dataset > 100.000 records.

At the time of selecting a record the DataText is correctly displayed.

But when we refresh the page the ComboBox behaves differently for records which appear early in the dataset, and records that come later.

The early records show the DataText correctly, records which come later in the dataset do not; they show their Id (DataValue).

If we implement virtualization, the Combobox displays the correct DataText in both cases, but seemingly with an extra server roundtrip?

Is this expected behaviour? Is there anything we could improve while using the MultiColumnComboBox with larger datasets?

Kind regards.

Hi there,

In my grids, I have a column with a menu :

columns.Template(@<text></text>).Width(106).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
                    Html.Kendo().Menu().Direction(MenuDirection.Left)
                        .Name("menu_#=AccountId#")
                        .Items(its =>
                        {
                            its.Add().Text("Functions:").Items(nested =>
                            {
                                nested.Add().Text(importFilesText).Action(importFilesAction, "Accounts", new { id = "#=AccountId#", cid = Model.CompanyId, returnUrl = returnUrl});
                            });

                        })
                        .ToClientTemplate().ToHtmlString()
                    );
                })

But in the TreeList there is no ClientTemplate

I tried using the TemplateId

<script id="menuFolder" type="text/x-kendo-template">
            @(Html.Kendo().Menu()
                  .Name("menu")
                  .Direction(MenuDirection.Left)
                  .Items(its =>
                  {
                      its.Add().Text("Functions:").Items(nested =>
                      {
                          nested.Add().Text("Create Rule").Url("javascript:createRule(#=Id#, #=AccountId#, #=CompanyId#);");
                          nested.Add().Separator(true);
                          nested.Add().Text("Select Account QBEAccountId").Url("javascript:SelectId(#=Id#);");
                      });
                  })
                  .ToClientTemplate())
</script>

And I can get the menu to display, but it is cut of inside the treelist.

In the old days with the grid we used to change the css of the parent with overflow-y:display !important; but that does not seem to work.

Any ways this can be accomplished in the treelist - next step is the items in the list are depending on the content of the row ...

Best regards,

 - René

I have a simple multiselect like so:

When I enter text, the search is submitted once with the text entered, then a second time with the Placeholder text, or if no Placeholder, with empty string.

A sample project replicating the issue is here : https://github.com/SteveWortho/TLCKendoTest 

It must be something simple I am doing wrong - any advice appreciated.

Using;

VS2017 Pro Version 15.5.1

KendoUI MVC 2017.3.1026

Chrome Version 63.0.3239.132 or Microsoft Edge or FireFox. Issue is repeatable.

So I must be firing the onChange event a second time with some of this configuration maybe?

But it is such a simple example.

Thanks in advance,

Steve

Hi,

I have a Kendo Grid and its first column is a Datetime and Its a Kendo DatePicker.

When the user click on Add new record button then the 1st cell which is a date picker should be auto focus.

Note: When the user click on Add new record button then we are sorting the grid in ascending order so that the new row should appear on the top, which is working fine but the 1st cell of the newly created row a Kendo Date picker in not in focus.

But when the user click on the first cell of the newly created row, then it opens the datepicker to allow user to select a date.

My requirement is when i am clicking the Add new record button then 
1. It should sort in ascending order (Which is working now)

2. The 1st cell of the Kendo Datepicker should auto focus like the above screenshot.

Hi,

I have a requirement in the Kendo grid

1. When the user click on cross icon in each row in the action column then the row should be deleted.

2. In the last available row, a + icon should display and when the user clicks the + icon then it should create new row in the grid 

instead of normal Add new record button.

Hi,

I want to load a kendo grid, after load the grid should add a new row at the bottom of the grid.

When the Kendo grid loads then, it is creating the new row, but after that it will load the records from the database and then refresh the screen and the new row is removing.