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

Hi, the date filtering does not appear to be working.  I am in the UK and i have formatted the datepicker to be dd/MM/yyyy but when the data is being filtered it is not working correctly.  Is there a quick fix for this.  Also if you type into the datepicker and press enter should the grid data update?  

 

Thanks Graham

Tsvetina
Telerik team
 answered on 20 Mar 2017
1 answer
176 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
232 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
92 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
572 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.2K+ 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
552 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
187 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
106 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
663 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
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?