Telerik Forums
UI for ASP.NET MVC Forum
1 answer
10 views

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

Anton Mironov
Telerik team
 answered on 12 Feb 2024
3 answers
591 views

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

Abraham
Top achievements
Rank 1
Iron
 answered on 07 Feb 2024
0 answers
16 views

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);
n/a
Top achievements
Rank 1
 asked on 07 Feb 2024
0 answers
13 views

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!

Ramesh
Top achievements
Rank 1
 asked on 07 Feb 2024
1 answer
14 views

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>
Anton Mironov
Telerik team
 answered on 07 Feb 2024
2 answers
4.2K+ views

 

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.

Patrick | Technical Support Engineer, Senior
Telerik team
 updated answer on 05 Feb 2024
1 answer
7 views

I have a chart that tracks website registrations by date, Country and State.  A user selects which country(ies) and state(s) they want to see and the chart should have a column for each country for each date (aggregate by year)

My current View code:

@(Html.Kendo().Chart<DatePoint>()
    .Name("RegistrationDashboard")
    .Title("Total Registrations")
    .Theme("material")
    .DataSource(ds => ds
        .Read(read => read.Action("RegistrationDashboard_Read", "Reports").Data("filterReport"))
        .Group(group =>
            group.Add(grp => grp.Country)
        )
    )
    .Series(series =>
    {
        series.Column(model => model.Value, categoryExpression: model => model.Date).Aggregate(ChartSeriesAggregate.Count).Stack("Country").Name("");
    })
    .CategoryAxis(axis =>
        axis
            .Date()
            .BaseUnit(ChartAxisBaseUnit.Years)
            .MajorGridLines(lines => lines.Visible(false))
    )
    .ValueAxis(axis => axis
        .Numeric()
        .Line(line => line.Visible(false))
    )
    .Tooltip(tooltip => tooltip.Visible(true))
    )

An example of JSON data sent from the datasource (I have a button that refreshes the data source whenever a user chooses new countries/states)


[
  {
    "Date": "/Date(1558584000000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Cundinamarca"
  },
  {
    "Date": "/Date(1562299200000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1572494400000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Antioquia"
  },
  {
    "Date": "/Date(1580533200000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Estado de Mexico"
  },
  {
    "Date": "/Date(1585281600000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Beni"
  },
  {
    "Date": "/Date(1594094400000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1594094400000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1594094400000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1594094400000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1607058000000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Antioquia"
  },
  {
    "Date": "/Date(1608008400000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Jalisco"
  },
  {
    "Date": "/Date(1608008400000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Jalisco"
  },
  {
    "Date": "/Date(1608526800000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Antioquia"
  },
  {
    "Date": "/Date(1626148800000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Queretaro"
  },
  {
    "Date": "/Date(1632801600000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1633924800000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Valle del Cauca"
  },
  {
    "Date": "/Date(1634011200000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Antioquia"
  },
  {
    "Date": "/Date(1640840400000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Aguascalientes"
  },
  {
    "Date": "/Date(1641445200000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Aguascalientes"
  },
  {
    "Date": "/Date(1642741200000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Aguascalientes"
  },
  {
    "Date": "/Date(1643691600000)/",
    "Value": 1,
    "Country": "Mexico",
    "State": "Mexico"
  },
  {
    "Date": "/Date(1650340800000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1650340800000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Santa Cruz"
  },
  {
    "Date": "/Date(1652241600000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Cochabamba"
  },
  {
    "Date": "/Date(1652328000000)/",
    "Value": 1,
    "Country": "Bolivia",
    "State": "Cochabamba"
  },
  {
    "Date": "/Date(1661140800000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Bogota"
  },
  {
    "Date": "/Date(1664856000000)/",
    "Value": 1,
    "Country": "Colombia",
    "State": "Narino"
  }
]
In this scenario, there are 3 countries returned.  For each year (these dates are between 2019 and 2022 but there could be any number of years from as far back as 2010)

I would like to have a series column for each country for each year. Each column would be stacked based on the number of registrations per state.

The user could choose from 1...N countries.  (I'm sure I can set a limit so the chart isn't out of control, but that's not the point)

When I set the datasource group to "State", there is a series column for each year and the legend shows each state. When I group by "Country", there is only 1 series column for each year and the legend shows the countries selected. I have included a screenshot of each grouping

How do I make a series column for each country with the amounts "stacked" for that country's respective states?

Eyup
Telerik team
 answered on 31 Jan 2024
0 answers
16 views

Hi, im currently creating a Grid with dynamic columns and came across with this post and current following the structure.

Dynamic Data in the Kendo UI Grid (telerik.com)

 

My problem is that during Update, I cant seem to access the Property Values of those edited columns. 

Can I get the actual code for the "Update" of this demo API?

https://demos.telerik.com/kendo-ui/service/products/Update

 

Heres my update code btw:

            

[HttpPost]
        public JsonResult Update_Employee([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<dynamic> models)
        {
            foreach(var obj in models)
            {
                string a = GetProperty(obj, "EmployeeName");

            }

            return Json(ModelState.ToDataSourceResult());
        }

        private object GetProperty(dynamic obj, string propertyName)
        {
            var objDict = obj as IDictionary<string, object>;
            if (objDict.ContainsKey(propertyName))
            {
                var value = objDict[propertyName];

                if (value != null)
                    return value;
            }

            return null;
        }

 

 

 

 

 

 

DPA
Top achievements
Rank 1
 asked on 29 Jan 2024
1 answer
22 views

Hi All,

We're using telerik kendo treelist for the application. we need functionality like if we click on Copy data button then it will clone the selected row along with data. We've tried to find copy functionality but we're not able to do it. so we have add custom button ("Copy Data"). 

Please let us know if there is any other way to achieve this functionality.

adding button "Copy Data"  in toolbar:


.Toolbar(tb =>
    {     
            tb.Custom().Name("Copy").Text("Copy Data");        
    })

"Copy Data" button click event:

$('.k-button-text').click(function () {
        alert('clicked');
        debugger
        var treeList = $("#TeamTreeList").data("kendoTreeList");
        var row = treeList.select();
        if (row.length > 0) {
            var data = treeList.dataItem(row);
            console.log(data.RoleName); 
        }
    });

 

 

 

Anton Mironov
Telerik team
 answered on 26 Jan 2024
0 answers
14 views

I have an ASP.NET MVC project, using Kendo MVC 2023 R1, and I am using a strict CSP policy. However, the following code is not working

      <add name="Content-Security-Policy" value="script-src 'self'

Index.Cshml

<script id="editor-template" type="text/x-kendo-template">
          @Html.Kendo().TextBox().Name("FieldExcel").Enable(false).ToClientTemplate()    

</script>

 

in JS

$(document).ready(() => {
    $(".list-item-icon").on("click", e => {
        $("#edit-dialog").kendoWindow({
            height: 320,
            width: 415,
            title: 'Editar',
            visible: false
        });

        var thtml = $("#editor-template").html();

        var htmlEncode = kendo.htmlEncode;
        var templateString = () => thtml;

        var template = kendo.template(templateString);
        var data = { firstName: "Todd", age: 16 };

        var result = template(data);

        //var template = kendo.template($("#editor-template").html());
        $("#edit-dialog").data("kendoWindow").content(template({})).open().center();  

The result is a simple input text instead of a disabled Kendo control.

I have been trying many ways, and I can't find a solution


AndreaG
Top achievements
Rank 1
 asked on 24 Jan 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Kevin
Top achievements
Rank 2
Stephan
Top achievements
Rank 3
Bronze
Iron
Iron
Jason
Top achievements
Rank 2
Iron
Iron
Iron
Janki
Top achievements
Rank 4
Bronze
Iron
Iron
Dominik
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Kevin
Top achievements
Rank 2
Stephan
Top achievements
Rank 3
Bronze
Iron
Iron
Jason
Top achievements
Rank 2
Iron
Iron
Iron
Janki
Top achievements
Rank 4
Bronze
Iron
Iron
Dominik
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?