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

I'm using the bootstrap theme, although I am not using Bootstrap itself.  My form fields and buttons, such as on the Kendo menu and panel bar, when selected have a blue glowing halo around it.  I was able to modify it for the inputs with 

input:focus
{
        outline: thin dotted;
        /*outline: 5px auto -webkit-focus-ring-color;*/
        outline: 2px auto #fe9827;
        outline-offset: -2px;
}

 

but this doesn't alter the color (which is what I really want) for the Kendo menu and panelbar.  How can I accomplish that please?

Orlin
Telerik team
 answered on 20 Mar 2017
6 answers
222 views

Dear All,

I have a treeview & listview in different spliter panes.

I successfully retrieved the tree-view data, what I want now is to display the related items of the selected tree-view node.

here is what I have so far:

@(Html.Kendo().Splitter()
     .Name("RefFilesSplitter")
     .HtmlAttributes(new { @style = "height:100%;" })
     .Panes(panes =>
         {
            panes.Add()
                .Size("310px")
                .Collapsible(true)
                .Content(
                    @<div id="RefFiles">
                    @(Html.Kendo().TreeView()
                        .Name("TVtoc")
                        .HtmlAttributes(new { @style = "height:100%;width:100%" })
                        .DragAndDrop(true)
                        .DataTextField("Name")
                        .DataSource
                        (dataSource => dataSource
                            .Read(read => read.Action("GetGroups", "TreeOfAccounts"))
                            .Model(m => m.Id("GroupId"))
                            .Events(e => { e.RequestEnd("requestEndHandler"); })
                        )
                        .Events(e => e.Select("onSelect"))
                    )
                    </div>);
            panes.Add()
                .Content(
                    @<div id="RefFilesContent">
                    @(Html.Kendo().ListView<IdeaGL.Models.IGL_account>()
                    .Name("LVAccounts")
                    .HtmlAttributes(new { @style = "height:100%;width:100%" })
                    .ClientTemplateId("template")
                    .TagName("div")
                    .DataSource
                        (dataSource => dataSource
                            .Read(read => read.Action("GetAccounts", "TreeOfAccounts", new  {groupid=Model.GroupId}))
                            .Model(m => m.Id("account_id"))
                        )
                        .Pageable()
                    )
                </div>);
         })
    )

 

and here is the JavaScript OnSelect:

function onSelect(e)
{
     
    // this doesn''t work ...
    $("#LVAccounts").data("kendoListView").dataSource.read();
    $("#LVAccounts").data("kendoListView").refresh();
 
    var data = $('#TVtoc').data('kendoTreeView').dataItem(e.node);
     
    $.ajax({
        url: "/TreeOfAccounts/GetAccounts?groupid=" + data.id
    }).success(function ()
    {
        // what should i do here !!
    })
}

 

I can see how to make the listview refresh the data for the selected treeview node.

any help ?

Ianko
Telerik team
 answered on 20 Mar 2017
1 answer
86 views

Hello,

Does anyone know if it's possible to set the popup editor window position?

I thought I could do something like:

$(".k-window").css('top', '35px');

in the Scheduler's Edit event. (This works in for the Grid btw).

Thanks in advace,

Paul

Ivan Danchev
Telerik team
 answered on 20 Mar 2017
15 answers
550 views

Dear All,

I have just downloaded the asp.net MVC product.

I started with the validation using DataAnnotation attributes, which works fine for client-side validation on the UI.

I then searched for implementation of server-side validation attribute for DataAnnotation where I found the [Remote] attribute that allow to call methods on the controller, looks pretty good.

I started with the following at the Controller:

public JsonResult IsValidName(string coin_name_2)
        {
            bool found = db.IGL_coin.Any(name => name.coin_name_2 == coin_name_2);
            if (!found)
            {
                return Json(true, JsonRequestBehavior.AllowGet);
            }
            return Json(false, JsonRequestBehavior.AllowGet);
        }

 

Then I decorate my model (IGL_coin) with MetaData class that holds the validation as follows:

// Metadata defenitions
public class CoinMetadata
    {
        public int coin_id { get; set; }
 
        public string coin_name_1 { get; set; }
 
        [Required(ErrorMessageResourceType = typeof(Errors), ErrorMessageResourceName = "NameReq")]
        [Display(Name = "CoinName", ResourceType = typeof(ScreenRes))]
        [Remote("IsValidName", "Coin", ErrorMessageResourceType = typeof(Errors), ErrorMessageResourceName = "NameDuplicate")]
        public string coin_name_2 { get; set; }
 
        [Display(Name = "Rate", ResourceType = typeof(ScreenRes))]
        [Required(ErrorMessageResourceType = typeof(Errors), ErrorMessageResourceName = "RateReq")]
        [Range(0.00001,100000, ErrorMessageResourceType=typeof(Errors), ErrorMessageResourceName="RateInvalid")]
        public decimal coin_rate { get; set; }
    }
 
// Partial Classes defenitions
[MetadataType(typeof(CoinMetadata))]
public partial class IGL_coin
{}

 

Then my CoinCustomEditor partial view has the following markup to show the details:

<div style="margin: 5px 15px 5px 15px; height: auto; width: 350px">
    @using (Html.BeginForm())
     {
        @Html.AntiForgeryToken()
 
        @Html.HiddenFor(model => model.coin_id)
        @Html.ValidationSummary()
        <ul id="fieldlist">
            <li>
                @Html.LabelFor(model => model.coin_name_2)
                @Html.TextBoxFor(model => model.coin_name_2)
                @*@Html.Kendo().MaskedTextBoxFor(model => model.coin_name_2).Name("coin_name_2").HtmlAttributes(new { style = "width: 100%;" })*@
                @Html.ValidationMessageFor(model => model.coin_name_2)
 
            </li>
            <li>
                @Html.LabelFor(model => model.coin_rate)
                @Html.Kendo().TextBoxFor(model => model.coin_rate).Name("coin_rate").HtmlAttributes(new { style = "width: 100%;" })
                @Html.ValidationMessageFor(model => model.coin_rate)
            </li>
        </ul>
     }
</div>
@Scripts.Render("~/bundles/jqueryval")

 

This partial view is called from the add/edit action on the grid using GridEditMode.PopUp and .TemplateName("CoinCustomEditor")).

The problem is that the remote attribute calls the method IsValidName correctly as shown by fiddler (see attached file).

The result in the Partial view shows the red border around the TextBoxFor but the error message is not shown.

Just in case this is the jqueryval scripts loaded by partial : @Scripts.Render("~/bundles/jqueryval"), which are defined at the _Layout as follows:

<head>
    <title>@ViewBag.Title - My App</title>
 
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/kendo")
 
    @Styles.Render("~/Content/kendo/css")
     
    <link href="@Url.Content("~/Content/kendo/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/kendo.rtl.min.css")" rel="stylesheet" type="text/css" />
 
    <script src="@Url.Content("~/Scripts/kendo/jquery.min.js")"></script>
 
    <script src="@Url.Content("~/Scripts/kendo/angular.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/jszip.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/kendo.aspnetmvc.min.js")"></script>
</head>

 

and also the BundleConfig definitions:

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));
 
        //bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));
        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate.min.js",
                    "~/Scripts/jquery.validate.unobtrusive.js"));
 
        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));
 
        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.js",
                    "~/Scripts/respond.js"));
 
        //bundles.Add(new StyleBundle("~/Content/css").Include(
        //          "~/Content/bootstrap.css",
        //          "~/Content/Site.css"));
 
        bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
                 "~/Scripts/kendo/2016.2.504/kendo.all.min.js",
            // "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler
                 "~/Scripts/kendo/2016.2.504/kendo.aspnetmvc.min.js"));
 
        //bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
        //       "~/Content/kendo/2016.2.504/kendo.common-bootstrap.min.css",
        //       "~/Content/kendo/2016.2.504/kendo.bootstrap.min.css"));
 
        bundles.IgnoreList.Clear();
 
        bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
            "~/Content/kendo/2016.2.504/kendo.common.min.css",
            "~/Content/kendo/2016.2.504/kendo.default.min.css"));
 
 
    }
}

 

I hope to find some help, as server-side validation is crucial to go further.

Best

Ianko
Telerik team
 answered on 20 Mar 2017
2 answers
2.1K+ views

I have a grid with the export to excel functionality turned on:

 

@(Html.Kendo().Grid<IncompleteCOATests>()
                          .Name("IncompleteCOATestsGrid")
                          .HtmlAttributes(new { style = "width: 980px" })
                          .Columns(columns =>
                          {
                              columns.Bound(c => c.UnitId).Title("Unit Id");
                              columns.Bound(c => c.ParentId).Title("Parent Id");
                              columns.Bound(c => c.Qparam).Title("QParam");
                              columns.Bound(c => c.TestAlias).Title("Test Name");                                                    
                          })
                          .ToolBar(tools => tools.Excel())
                          .Excel(excel => excel
                                    .FileName("Missing Tests.xls")
                                    .Filterable(true)
                                    .ProxyURL(Url.Action("Excel_Export_Save", "Grid")))
                          .NoRecords(x => x.Template(@ResourceMessages.NoRecordFoundForConsignee))
                          .AutoBind(false)
                          .Pageable(pageable => pageable
                              .Enabled(false)
                              .Refresh(true)
                              .PageSizes(false))
                          .DataSource(dataSource => dataSource
                              .Ajax()
                              .Events(events => events.Error("GlobalModule.onError"))
                              .Read(read => read.Url(Url.HttpRouteUrl("ActionApi", new { controller = "PoPsApi", action = "GetIncompleteCOATests" })).Type(HttpVerbs.Get).Data("IncompleteCoAsModule.getLoadOrderItem")))
 
)

 

It databinds on a client-side button press

export function showMissingTests(e) {
    $('#IncompleteCOATestsGrid').data("kendoGrid").dataSource.read();
}

 

Is it possible to set the excel.Filename property client side? 

When/how in the page lifecyle would I do that? 

 

 

 

Danny
Top achievements
Rank 2
 answered on 17 Mar 2017
1 answer
540 views

I have implemented a MVC controller which returns data. However that data is not getting bound to the kendo MVC grid. On further inspection, I have noticed is that the action method defined in the kendo grid isn't getting called. 

When I check the developer tools I can see the following errors

 

Team:78 Uncaught ReferenceError: kendo is not defined
    at Team:78
glyphicons-halflings-regular.woff2 Failed to load resource: the server responded with a status of 404 (Not Found)
glyphicons-halflings-regular.woff Failed to load resource: the server responded with a status of 404 (Not Found)


<p>    </p><div class="reCodeBlock" style="border:solid 1px #7f9db9;width:10;height:10;overflow-y:auto;"><div style=" background-color: #fff;"><span style=" "><span style=" margin-left: 0px !important;"><code style="color: #000;">@(Html.Kendo().Grid<</code><code style="color: #069;font-weight: bold;">CC.GRP.MCRequest.Models.TeamIn</code><code style="color: #000;">>()<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>    .Name("GridTeam")<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>    .Columns(columns =><</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>    {<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>        columns.Bound(o => o.TeamID).Groupable(false);<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>        columns.Bound(o => o.CountryCode);<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>        columns.Bound(o => o.TeamName);<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>        columns.Bound(o => o.TeamDescription);<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>    })<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>    .Pageable()<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>    .Sortable()<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>    .Filterable()<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>    .Scrollable()<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>    .Groupable()<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>    .DataSource(dataSource => dataSource<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>        .Ajax()<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>        .Read(read => read.Action("Team_Read", "Admin"))<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>    )<</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">><</code><code style="color: #069;font-weight: bold;">br</code><code style="color: #000;">>    )</code></span></span></div></div>
Viktor Tachev
Telerik team
 answered on 17 Mar 2017
3 answers
174 views

So according to the information on the Dialog demo page (http://demos.telerik.com/aspnet-mvc/dialog/index) there are:

  • Fully customizable visual appearance of the dialog title and body
  • Predefined Alert, Confirm, and Prompt Dialogs

But of course, it's not documented on the demo page.  So how do I call one of the pre-built dialogs, and secondly how can I change the style of it without mucking up every other style I've overridden for the telerik components?

 

 

Ivan Danchev
Telerik team
 answered on 17 Mar 2017
5 answers
100 views

Hello!

In our application, the combo boxes are working good every time an item is selected by mouse. But, when selecting items by touch (Chrome browser on Windows 10), if the combo uses filter and has less than 4 values, the selected item is sometimes seen as null. This happens sometimes also on this demo: http://demos.telerik.com/aspnet-mvc/combobox/index (but not every time).

Is this a bug, or is there a solution to solve the problem?

 

Thank you,

Iuliana Maria Candea

Iuliana Maria
Top achievements
Rank 1
Iron
 answered on 17 Mar 2017
14 answers
626 views

So far all of the Telerik components I've used thus far have been fairly simple.  Irritating to get it to look the way I want, but when it comes to binding to data, it's been pretty simple.

But this is my first time in using the PanelBar, and I'm confused beyond all belief.  I have a database with Topic information such as Title, Description, Created by, etc...  Some of these are marked as Active, and others are marked as In-Active.  I'd like the panel bar to have two panels, one each for Active and In-Active, and upon opening each of them, display a list of Titles for the appropriate type.

So I have a controller action returning an IEnumerable<Topic> and tried using the DataSource Read action, but they just all get listed in the panel bar.  I've tried coding two separate panels, and trying LoadContentFrom, but this is showing my topic information as JSON, and they're all grouped together. 

I've seen examples using Model Binding, but I'm not passing the data in as a Model.

So how in the holy heck do I get this thing to do what I want it to do?

My class is pretty simple:

public class TopicBank
    {
        public TopicBank();
 
        public bool Active { get; set; }
        public string CreatedBy { get; set; }
        public DateTime CreatedOn { get; set; }
        public string Description { get; set; }
        public string FormData { get; set; }
        public Guid ID { get; set; }
        public DateTime LastModified { get; set; }
        public string LastModifiedBy { get; set; }
        public string Title { get; set; }
    }

 

And my controller is even more simple:

[HttpGet]
[ActionName("GetTopicList")]
public ActionResult GetTopicList()
{
    var hold = WebApiHelper.CallGetAPI<List<TopicBank>>($"{_baseURL}api/Transcend/GetTopicList");
    return Json(hold, JsonRequestBehavior.AllowGet);
}

 

What do I need to do to get this thing to display how I want it to?

Ivan Danchev
Telerik team
 answered on 17 Mar 2017
6 answers
416 views

I'm trying to add a new view/controller using the Kendo UI Grid Scaffolding.

I am able to set the controller name, and select an existing model and view model; however, the drop down for the 'Data Context Class' is empty.

How do I specify a data context class? I'm using Nhibernate as an ORM.

Alex Hajigeorgieva
Telerik team
 answered on 17 Mar 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?