Telerik Forums
UI for ASP.NET MVC Forum
2 answers
505 views
I've currently inherited an application which has numerous Kendo grids (and other controls) throughout, and I'm trying to fix an error which keeps cropping up now and again - specifically when the user is no longer authenticated.

I know what the solution is for a single instance of the control - return a flag to indicate authentication failed, and then detect this in the error handler and perform the authentication.

The problem is am I really going to have to handle this for every instance of a Kendo control I have? Is there not a global error handler I can hook into for the DataSource? Or the grid or all Kendo controls?

This would be a more straighforward short term solution than refactoring everything to specific error handlers, etc.
Steve
Top achievements
Rank 1
 answered on 21 Mar 2013
5 answers
290 views
Maybe there's some difference in Telerik/Kendo MVC behaviour here?

I've been converting some code from the Telerik MVC components to the Kendo MVC equivalents.

I have a Kendo grid in which one of the columns has embedded a Kendo menu. However when the menu is moused over the menu does not expand, nor does it do so when the menu is clicked.

I've created two small sample projects, one showing the menu expanding on hover as expected with the Telerik components, the other project has been ported to Kendo and the menu no longer displays.

I've made only minor changes to have the code run with Kendo, including updating the menu name to use the revised template format and adding a call to ToClientTemplate when building the menu.

The projects are larger than the allowed 2MB limit so I've shared them via SugarSync.
https://www.sugarsync.com/pf/D104910_65492427_756235

Why though does the menu not display with the Kendo code?

Here's the code;
View
@using MvcMenuPopup.Models
@{
    ViewBag.Title = "People";
}
<h2>Some People</h2>
    @(Html
    .Kendo()
    .Grid<Person>()
    .Name("peopleGrid")
    .Columns(columns =>
        {
            columns.Template(t => { }).ClientTemplate(
                Html
                .Kendo()
                .Menu()
                .Name("themenu#=PersonId#")
                .Items(menu => menu.Add().Text("::").Items(sub =>
                    {
                        sub.Add().Text("Do this thing");
                        sub.Add().Text("Do that thing");
                    }))
                    .Orientation(MenuOrientation.Vertical)
                    .HighlightPath(true)
                    .OpenOnClick(false)
                    .ToClientTemplate()
                    .ToHtmlString()
                )
                .HtmlAttributes(new { @class = "navigationColumn", style = "overflow: visible;" })
                .Width(50);
             
                columns.Bound(t => t.Birthday);
                columns.Bound(t => t.FirstName);
                columns.Bound(t => t.Surname);
            })
    .DataSource(binding => binding.Ajax().Read("PeopleAjax", "Home")))

Model
namespace MvcMenuPopup.Models
{
    using System;
 
    public class Person
    {
        public long PersonId { get; set; }
 
        public DateTime Birthday { get; set; }
 
        public string FirstName { get; set; }
 
        public string Surname { get; set; }
    }
}

Action
namespace MvcMenuPopup.Controllers
{
    using System;
    using System.Linq;
    using System.Web.Mvc;
 
    using Kendo.Mvc.Extensions;
    using Kendo.Mvc.UI;
 
    using MvcMenuPopup.Models;
     
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return this.View();
        }
 
        public ActionResult About(string firstName)
        {
            return this.View((object)firstName);
        }
 
        public JsonResult PeopleAjax([DataSourceRequest]DataSourceRequest request)
        {
            DataSourceResult result = GetPeople().OrderByDescending(train => train.Birthday).ToDataSourceResult(request);
 
            return this.Json(result);
        }
 
        private static IQueryable<Person> GetPeople()
        {
            var birthdays = Enumerable.Range(1, 12).Select(month => new DateTime(1980, month, 1)).ToList();
 
            return birthdays.Select((date, index) => new Person
                {
                    PersonId = index,
                    Birthday = date,
                    FirstName = "Bill" + index,
                    Surname = "Smith" + index
                }).AsQueryable();
        }
    }
}
Nick
Top achievements
Rank 1
 answered on 21 Mar 2013
6 answers
261 views
Hello,

Please see this fiddle http://jsfiddle.net/ptrinephi/vWHzs/3/
It's the default kendoUI Basic Usage demo at http://demos.kendoui.com/web/grid/index.html with 1 modification:
I've added selectable: true to the grid:

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: {
            data: createRandomData(50),
            pageSize: 10
        },
        selectable: true,
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true
        },
        columns: [{
            field: "FirstName",
            width: 90,
            title: "First Name"},
        {
            field: "LastName",
            width: 90,
            title: "Last Name"},
        {
            width: 100,
            field: "City"},
        {
            field: "Title"},
        {
            field: "BirthDate",
            title: "Birth Date",
            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'},
        {
            width: 50,
            field: "Age"}
                   ]
    });
});​
Everything works properly when run in IE (8,9,10), FF 17, Safari 5 and Opera 12.  You can select rows on the grid. 

Run in Chrome 23:
1.Row selection does not work! Click on any row and nothing happens.
2.You can only drag 1 column to the group header.  Drag a second column to the group header and nothing happens.

Thanks.

PT

William
Top achievements
Rank 1
 answered on 20 Mar 2013
4 answers
909 views
I am new on Kendo UI.
I am using Kendo Grid from Client Side. I am also bound data from Client side.
Consider following code which i have used to bind json data.
var people = [
             { firstName: "Hasibul", lastName: "Haque", email: "hasibul@yahoo.com" }
       ];
 
       $('#grid').kendoGrid({
           scrollable: true,
           sortable: true,
           pageable: true,
           selectable: "row",
           filterable: true
 
         , dataSource: { data: people, pageSize: 10 }
         , columns:
             [
               { field: "firstName", title: "First Name" }
             , { field: "lastName", title: "Last Name" }
             , { field: "email", title: "email" }
             , {
                 field: "action", title: "Action",
                 template: "I want to put action linke here by using field value(firstName)"
               }
             ]
            
 
       });

I just want to show another column called action column. From where user can do perform another action. In my action link i want to show First name. How i can do that?
I can populate action column from server side but now i want to do everything from client side.
If i consider server side
column.Template(c => @Html.ActionLink(c.Description, "foo", new { id = c.prop, })
I want something similar on client side.

Hope you will help me. 
Hasibul
Top achievements
Rank 1
 answered on 20 Mar 2013
3 answers
110 views
I can't figure out how to specify an altTemplate with the MVC Helper.  Is this possible?  I tried adding the altTemplate later in jQuery code and it seems that I have to re-specify all values from the MVC Helper as well.
Dimiter Madjarov
Telerik team
 answered on 20 Mar 2013
4 answers
230 views
In the Grid I'm looking for a way to do a batch edit for all the fields in 1 column (the only editable field).  I've turned on Batch Edit, In Cell Editing, and Navigateable for keyboard Navigation.
Since this is a 10 key function for the most part, ideally I would like tab go to the next editable cell, which is the next row.  (As designed, tab goes to next cell - regardless of being editable)  In other applications, tab goes to the next editable cell. If all cells editable showed as a textbox in Batch Edit, that would be an option as well.

I've tried to capture the current cell, then after saving set the cell below to be editable.  But the grid synchronization isn't complete or grid is refreshing or something and the first cell in grid is selected.
Would be better if this could be connected to a Tab key from the cell being edited.

For the Save Event:
.Events(events =>
                           {
                               events.Save(
                                   @<text>
                                        function (e) {
                                            var currentCell = $("#AreaPhysicalCountGrid_active_cell");
                                            setTimeout(function () {
                                                
                                                $("#AreaPhysicalCountGrid" + @ViewBag.CycleCountID).data("kendoGrid").dataSource.sync();
                                                SelectNextEditableCell(currentCell);
                                            });
                                        }
                                    </text>);     
                           })

My function for changing to the next editable cell.
function SelectNextEditableCell(currentCell) {
    var grid = $("#AreaPhysicalCountGrid").data("kendoGrid");
    //var currentCell = $("#AreaPhysicalCountGrid_active_cell");
    
    //Get index of the td (2)
    var currCellIndex = currentCell.index();
    var cellBelow = currentCell.closest("tr").next().children().eq(currCellIndex);
    
    grid.editCell(cellBelow); //Put the cell into editMode in grid
    //grid.editRow(currentCell.parent().next());
}

Attached is a visual of the grid, the yellow cells are the only one's being edited.
Any help would be great.
Dimiter Madjarov
Telerik team
 answered on 20 Mar 2013
1 answer
147 views
I have MVC 4 project and using a listview with edit.
When I use en-US culture everything work as aspected. I got problem with my native sv-SE culture however. Firt I used the 2012-3 release but after the problem I tryed the 2013 release unfortunately with same result.
Problem with sv-SE.
fields with decimal comma seperator does not work (both decimal and double) cant save to the database. No validation errors.
I tested with culture fr-FR same result.
SO I tested with de-DE and suddenly the save to database worked. However all values was 10 times bigger. eg. 14,5 was saved as 145.
The errors was only when I use decimal comma value bigger than 0. eg 10,0 works but 10,xx does not.
I asume Kendo MVC cant be so bad so I have to do something wrong, but I cant find the error.

In all test I change webconfig to use the the culture I test. I load the coresponding kendo js too and I set the kendo culture.
I run my machine in my native culture and the database have also Swedish collation.

If I use a "normal" edit and save all works as it shoud do.

Do I need some other js to get the Kendo UI json transport to work for other cultures than US.

If I cant work this out maybe my try just will be a try. Hopefully not as I invested a lot of time in this in the project in question.

Thanks in advance.
Jan

Daniel
Telerik team
 answered on 20 Mar 2013
1 answer
153 views
I have necessary to auto hide menu items when current user have not access to this action
below I present my custom filter attribute, based on AuthorizeAttribute
As you can see, if user can't have rights to action, system redirect him to AccessDenied action
but menu item binded on action market with this action filter, rendered always
please help

public class PermissionOnEntityActionAttribute : AuthorizeAttribute
    {
         protected override bool AuthorizeCore(HttpContextBase httpContext)
        {
            var isAuthorized = base.AuthorizeCore(httpContext);
            if (!isAuthorized) return false;
          
            return securityModule.CurrentUserHasPermission(...);
        }

        protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext)
        {
            if (!filterContext.HttpContext.User.Identity.IsAuthenticated)
            {
                base.HandleUnauthorizedRequest(filterContext);
            }
            else filterContext.Result = new RedirectToRouteResult(new RouteValueDictionary(new { controller = "Error", action = "AccessDenied" }));
        }
    }
Georgi Krustev
Telerik team
 answered on 19 Mar 2013
1 answer
101 views
I have a grid partial as follows:

@using (Ajax.BeginForm("DppExcpnUpdate",
"DppExcpn", new AjaxOptions
    {
        UpdateTargetId = "divDppExcpnContent"
    }))
        {       
            @(Html.Kendo().Grid(Model)
                  .Name("gridDppExcpn")
              .Columns(columns =>
              {
                  columns.Bound(item =>
item.DppExcpnUid).Hidden().Visible(false);
                  columns.Bound(p =>
p.OrglUser).Hidden().Visible(false);
                  columns.Bound(p =>
p.OrglStamp).Hidden().Visible(false);
                  columns.Bound(p =>
p.UpdtUser).Hidden().Visible(false);
                  columns.Bound(p =>
p.UpdtStamp).Hidden().Visible(false);
                  columns.Template(@<text></text>).Width(25).Title("").ClientTemplate("<div class='gridAction' param-DppExcpnUid='#=
DppExcpnUid #'></div>");
                  columns.Bound(item =>
item.EqpTyp)
                    .Title("Equipment Type")
                    .Sortable(false)
                    .Filterable(false)
                    .Width(150);
                  columns.Bound(item =>
item.DmgCd)
                    .Title("Damage Code")
                    .Sortable(false)
                    .Filterable(false)
                    .Width(120);
                  columns.Bound(item =>
item.Dscr)
                    .Title("Damage Description")
                    .Filterable(false)
                    .Sortable(false)
                    .Width(240);
                  columns.Bound(item =>
item.Rmks)
                    .Title("Remarks")
                    .Sortable(false)
                    .Filterable(false);
              })
             //.AutoBind(false)
                  .Editable(editable =>
editable.Mode(GridEditMode.InLine))
                                     .Events(e
=> e.DataBound("Mol.Mr.CONMOCodes.DppExcpn.Ux.gridDppExcpndataBound")
.Save("Mol.Mr.CONMOCodes.DppExcpn.Ux.gridDppExcpnSave"))
                 .DataSource(dataSource =>
dataSource.Ajax()
                       .Sort(sort =>
                                {
                                    sort.Add(m
=> m.LsrCode).Ascending();
                                })
                .Model(model => model.Id(p
=> p.DppExcpnUid))
                .Read(read => read.Action("DppExcpnRead",
"DppExcpn", new { lsrCode = strLsrCode }))
                                    .Create("DppExcpnCreate",
"DppExcpn")
                                    .Update("DppExcpnUpdate",
"DppExcpn")
                .Events(events =>
events.Error("Mol.Mr.CONMOCodes.DppExcpn.Ux.DppExcpnError")
.RequestEnd("Mol.Mr.CONMOCodes.DppExcpn.Ux.gridDppExcpnRequestEnd"))
             )
              .Selectable()
              .Pageable()
              .Sortable()
              .Filterable()
                  )
}

My model is like:

/// <summary>
        /// Get or set property for DmgCd property.
        /// </summary>
        /// //[Required]
        [DataMember]
        [UIHint("DmgCdEditor")]
        public string DmgCd { get; set; }

        /// <summary>
        /// Get or set property for Dscr property.
        /// </summary>
        [DataMember]
        public string Dscr { get; set; }

        /// <summary>
        /// Get or set property for Rmks property.
        /// </summary>
        [DataMember]
        //[UIHint("RemarksEditor")]
        public string Rmks { get; set; }

        /// <summary>
        /// Get or set property for EqpTyp property.
        /// </summary>
        [DataMember]
        [DisplayName("Equipment Type")]
        [UIHint("EqpTypEditor")]
        [ConcurrencyCheck]
        public string EqpTyp { get; set; }

The above editor template are :
DmgCdEditor:

@using Mol.Mr.CONMOCodes.Ux
@model string
@{
    MaxRepairAmtController ctrl = new MaxRepairAmtController();
    }
@(Html.Kendo().DropDownListFor(m => m)
          //.Name("DmgCd")
          .HtmlAttributes(new {style="width:99px;" })
                              .DataValueField("Value")
                                  .DataTextField("Text")
                                  .BindTo(ctrl.GetListData("DmgCd"))
)

EqpTypEditor:

@using Mol.Mr.CONMOCodes.Ux
@model string
@{
    MaxRepairAmtController ctrl = new MaxRepairAmtController();
    }
@(Html.Kendo().DropDownListFor(m => m)
          //.Name("EqpTyp")
          .HtmlAttributes(new {style="width:99px;" })
                              .DataValueField("Value")
                                  .DataTextField("Text")
                                  .BindTo(ctrl.GetListData("EqpTyp"))
)

Now the problem is:
My grid actually has 4 columns as :
Equipment Type
Damage Code
Damage Description
Remarks

Now on add/edit I am getting "Remarks" value always as null but if database already had value for the column then I can successfully edit it. Again, if I take out the editor templates from the grid partial then I am getting all the columns' values, but I can't take them out as all those are needed for my case.

Please help it is urgent. 
Petur Subev
Telerik team
 answered on 19 Mar 2013
2 answers
95 views
Here is how my code looks on a MVC app. 

<body>
    @Html.Kendo().Calendar().Name("calendarstart").Value(DateTime.Now)
    <button id="save">Set date</button>
    <script>
        $(document).ready(function () {
            $("#save").click(function () {
                var startDate = $("#calendarstart").data("kendoCalendar");
                $.post("/Home/Index", { StartDate: startDate.value() });
            });
        });
    </script>
</body>

The issue i see is that their is no tight binding like what you have on MVC view model binding. 

Jay

Petur Subev
Telerik team
 answered on 19 Mar 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
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
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Security
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?