Telerik Forums
Kendo UI for jQuery Forum
or
Ask question
All Questions
Unanswered
Answered
28,698 questions
1 answer
248 views
Using DOM node in renderer callback
Hi!

I'm new to the community and just getting started with the Kendo UI, and while this forum (as well as stackoverflow) is a really great resource, I struggle to find any information about the grid rendering/templating process that would answer my question.

I'm currently in the process of using a Kendo UI Grid instead of a SAP UI5 table (let's assume I know what I'm doing) and would like to stick with UI5's data binding. Thus, I'm in a very special position where the cells in a row would already be defined in a template (similar to the template in the Kendo Grid, but instead of a simple String it is an actual DOM node that would be cloned for every row) (I'll be able to provide a snippet in a bit, just have to work out some issues with that first).

My question is: While I have the 'template' property on a column (which can be a function), it expects the return value to be a String that then later on is used as the html template (using jQuery, I presume). What I want to do though is returning a fresh DOM node (that is created through a factory elsewhere) to be used instead, as in, use the template as a rendering function and putting my own DOM node into the cell. Is that possible?

I have a really hard time stepping through the base code as it is minified and was wondering if anyone knows a trick how to approach this.

I hope I filed this in the right section, thanks in advance!

-- Lukas
Grid
Petur Subev
Telerik team
 answered on 11 Feb 2015
10 answers
1,000 views
Client Side Binding with Foreign Key Columns
Hi,

I am trying to find out how to do client side binding on foreign keys, all the examples I have come across are for server side binding and also I have seen no reference to how to deal with different model scenarios or what your controller actions should look like.

I have been stuck about a week now and basically I have a grid that is showing permissions that references Users, Payrolls and Functions. The idea is that the grid will display the User.NetLogin, Payroll.Title and Function.Title on the grid and in the dropdowns. This is working fine, however the way I passed the data to my model as you will see below I don't think is correct and the main issue is the code controlling the create, edit, delete and save (as this uses batch edit) features. Currently only read works, all the data manipulation fails and this is what I need to get working.

The permissions model has 3 foreign keys and these are refenced in the way the MVC Student Enrolement tutorial described the enrolement model. So on the permissions table the ID of the 3 reference tables are held as well as virtual object:

e.g. public int UserID {get;set}
       public virtual User User {get;set;}

On the 3 reference tables a reciprical link is held to the permissions table using:

public virtual ICollection<Permission> Permissions

I don't quite understand why this structure is used perhaps someone could exaplain? But this structure was from a tutorial on the MVC site and it worked perfectly what I have and Index view and 4 views for CRUD actions. The examples I have seen for foreign keys so far only show models with the public User User {get;set;} in them.

I am using entity framework so my permissions model is like

public class User
{
    public int UserID { get; set; }
    public string NetLogin { get; set; }
    [Required(ErrorMessage = "Employee number is required.")]
    [Display(Name = "Employee Number")]
    [MaxLength(6)]
    public string EmpNumber { get; set; }
    [Required(ErrorMessage = "First name is required.")]
    [Display(Name = "First Name")]
    [MaxLength(50)]
    public string Forename { get; set; }
    [Required(ErrorMessage = "Last name is required.")]
    [Display(Name = "Last Name")]
    [MaxLength(50)]
    public string Surname { get; set; }
    public bool Active { get; set; }
    public virtual ICollection<Permission> Permissions { get; set; }
}
 
public class Payroll
{
    public int PayrollID { get; set; }
    [Required(ErrorMessage = "Payroll title is required.")]
    [Display(Name = "Payroll")]
    [MaxLength(20)]
    public string Title { get; set; }
    [Required(ErrorMessage = "C21 description is required.")]
    [Display(Name = "C21 Name")]
    [MaxLength(30)]
    public string C21Name { get; set; }
    [Required(ErrorMessage = "Server name is required.")]
    [Display(Name = "Server Name")]
    [MaxLength(20)]
    public string Server { get; set; }
    [Required(ErrorMessage = "Port is required.")]
    [Display(Name = "Port")]
    [MaxLength(5)]
    public string Port { get; set; }
    [Required(ErrorMessage = "Connection string is required.")]
    [Display(Name = "Connection String")]
    [MaxLength(200)]
    public string Connection { get; set; }
    public virtual ICollection<Permission> Permissions { get; set; }
}
 
public class Function
{
    public int FunctionID { get; set; }
    [Required(ErrorMessage = "Function description is required.")]
    [Display(Name = "Function")]
    [MaxLength(20)]
    public string Title { get; set; }
    public virtual ICollection<Permission> Permissions { get; set; }
}
 
public class Permission
{
    public int PermissionID { get; set; }
    [Required(ErrorMessage = "You must select a payroll.")]
    public int PayrollID { get; set; }
    [Required(ErrorMessage = "You must select a function.")]
    public int FunctionID { get; set; }
    [Required(ErrorMessage = "You must select a user.")]
    public int UserID { get; set; }
    [Range(typeof(double), "1", "5")]
    [Required(ErrorMessage = "You must enter an access level.")]
    public double? Level { get; set; }
    public virtual Payroll Payroll { get; set; }
    public virtual Function Function { get; set; }
    public virtual User User { get; set; }
}


I have managed to get the read and custom dropdown editors working, but I can't find any code examples for the controller or the view using foreign keys like this and entity framework with kendo grid.

Currently the add action creates a javascript runtime error of 'NetLogin' is undefined. (NetLogin is a child entity of the User Object)

The save action for any delete and edit (add add) action litterally does nothing, I have traced it with firebug and it creates no errors and no actions and my knowledge of jquery is minimal to non so I couldn't trace it back.

Here is my controller:
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PayPlate.Models;
using PayPlate.DAL;
using PagedList;
 
namespace PayPlate.Controllers
{
    public class PermissionController : Controller
    {
        UnitOfWork unitOfWork = new UnitOfWork();
 
        public ActionResult Index()
        {
            return View();
        }
 
        /// <summary>
        /// Creates new products by inserting the data posted by the Kendo Grid in the database.
        /// </summary>
        /// <param name="products">The products created by the user.</param>
        /// <returns>The inserted products so the Kendo Grid is aware of the database generated ProductID</returns>
        [HttpPost]
        public ActionResult Create(IEnumerable<Permission> perms)
        {
            var result = new List<Permission>();
 
            //Iterate all created products which are posted by the Kendo Grid
            foreach (var permission in perms)
            {
                var perm = new Permission
                {
                    UserID = permission.UserID,
                    PayrollID = permission.PayrollID,
                    FunctionID = permission.FunctionID,
                    Level = permission.Level                 
                };
 
                // store the product in the result
                result.Add(perm);
 
                // Add the entity
                unitOfWork.PermissionRepository.Insert(perm);
            }
 
            // Insert all created products to the database
            unitOfWork.Save();
 
            // Return the inserted products - the Kendo Grid needs their ProductID which is generated by SQL server during insertion
            return Json(result.Select(r => new { PermissionID = r.PermissionID, UserID = r.UserID, PayrollID = r.PayrollID, FunctionID = r.FunctionID, Level = r.Level, NetLogin = r.User.NetLogin, PayrollTitle = r.Payroll.Title, FunctionTitle = r.Function.Title }));
             
            /*
            return Json(result.Select(p => new Permission
            {
                PermissionID = p.PermissionID,
                UserID = p.UserID,
                PayrollID = p.PayrollID,
                FunctionID = p.FunctionID,
                Level = p.Level 
            })
            .ToList());
             */
        }
 
        /// <summary>
        /// Reads the available products to provide data for the Kendo Grid
        /// </summary>
        /// <returns>All available products as JSON</returns>
        [HttpPost]
        public ActionResult Read()
        {
 
            var perms2 = unitOfWork.PermissionRepository.Get()
                .Select(r => new { PermissionID = r.PermissionID,
                    UserID = r.UserID, PayrollID = r.PayrollID,
                    FunctionID = r.FunctionID, Level = r.Level,
                    NetLogin = r.User.NetLogin,
                    PayrollTitle = r.Payroll.Title,
                    FunctionTitle = r.Function.Title });
             
            var perms1 = unitOfWork.PermissionRepository.Get()
                // Use a view model to avoid serializing internal Entity Framework properties as JSON
                .Select(p => new Permission
                {
                    PermissionID = p.PermissionID,
                    UserID = p.UserID,
                    PayrollID = p.PayrollID,
                    FunctionID = p.FunctionID,
                    Level = p.Level
                }).ToList();
            
 
            return Json(perms2);
        }
 
        /// <summary>
        /// Updates existing products by updating the database with the data posted by the Kendo Grid.
        /// </summary>
        /// <param name="products">The products updated by the user</param>
        [HttpPost]
        public ActionResult Update(IEnumerable<Permission> perms)
        {
            //Iterate all created products which are posted by the Kendo Grid
            foreach (var permission in perms)
            {
                // Attach the entity
                unitOfWork.PermissionRepository.Update(permission);
            }
 
            // Save all updated products to the database
            unitOfWork.Save();
 
            //Return emtpy result
            return Json(null);
        }
 
        /// <summary>
        /// Destroys existing products by deleting them from the database.
        /// </summary>
        /// <param name="products">The products deleted by the user</param>
        [HttpPost]
        public ActionResult Destroy(IEnumerable<Permission> perms)
        {
            //Iterate all destroyed products which are posted by the Kendo Grid
            foreach (var permission in perms)
            {
                // Delete the entity
                unitOfWork.PermissionRepository.Delete(permission);
            }
 
            // Delete the products from the database
            unitOfWork.Save();
 
            //Return emtpy result
            return Json(null);
        }
    }
}

Here is my  razor view:
@section CustomHeader {
    @* kendo.common.min.css contains common CSS rules used by all Kendo themes *@
    @* kendo.silver.min.css contains the "Blue Opal" Kendo theme *@
}
<h2>Permissions</h2>
<h3>Page Size: <div id="comboBox"></div></h3>
<script>
    $("#comboBox").kendoComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            { text: 10 },
            { text: 25 },
            { text: 50 },
            { text: 100 },
            { text: 500 }
        ],
        change: function (e) {
            var grid = $("#grid").data("kendoGrid");
            grid.dataSource.pageSize(this.value());
        }
    });
</script>
@* The DIV where the Kendo grid will be initialized *@
<div id="grid"></div>
<script>
 
$(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
    transport: {
        create: {
            url: "@Url.Action("Create", "Permission")", //specify the URL which should create new records. This is the Create method of the HomeController.
            type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
        },
        read: {
            url: "@Url.Action("Read", "Permission")", //specify the URL which should return the records. This is the Read method of the HomeController.
            type: "POST", //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
        },
        update: {
            url:"@Url.Action("Update", "Permission")", //specify the URL which should update the records. This is the Update method of the HomeController.
            type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
        },
        destroy: {
            url: "@Url.Action("Destroy", "Permission")", //specify the URL which should destroy the records. This is the Destroy method of the HomeController.
            type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
        },
        parameterMap: function(data, operation) {
            if (operation != "read") {
                // post the products so the ASP.NET DefaultModelBinder will understand them:
 
                var result = {};
 
                for (var i = 0; i < data.models.length; i++) {
                    var perm = data.models[i];
 
                    for (var member in perm) {
                        result["perms[" + i + "]." + member] = perm[member];
                    }
                }
 
                return result;
            }
        },
        batch: true, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
        pageSize: 20,
        schema: {
            model: { // define the model of the data source. Required for validation and property types.
                id: "PermissionID",
                fields: {
                    PermissionID: { editable: false, nullable: true },
                    NetLogin: "User",
                    PayrollTitle: "Payroll",
                    FunctionTitle: "Function",
                    Level: { type: "number", validation: { required: true, min: 1} }
                }
            }
        }
    }});                     
 
    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 425,
        sortable: true,
        filterable: true,
        groupable: true,
        resizable: true,
        reorderable: true,
        toolbar: ["create", "save", "cancel"], // specify toolbar commands
        columns: [
            { field: "NetLogin", width: "70px", editor: userDropDownEditor },
            { field: "PayrollTitle", width: "70px", editor: payrollDropDownEditor },
            { field: "FunctionTitle", width: "70px", editor: functionDropDownEditor },
            { field: "Level", width: "70px" },
            { command: "destroy", title: "Delete", width: "60px", groupable: false, filterable: false }],
        editable: true // enable editing
    });
 
});
 
function userDropDownEditor(container, options) {
    $('<input data-text-field="NetLogin" data-value-field="NetLogin" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataSource: {
                transport: {
                    read: {
                        url: "@Url.Action("Read", "User")", //specify the URL which should return the records. This is the Read method of the HomeController.
                        type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                    }
                }
            }
        });
}
 
function payrollDropDownEditor(container, options) {
    $('<input data-text-field="Title" data-value-field="Title" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataSource: {
                transport: {
                    read: {
                        url: "@Url.Action("Read", "Payroll")", //specify the URL which should return the records. This is the Read method of the HomeController.
                        type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                    }
                }
            }
        });
}
 
function functionDropDownEditor(container, options) {
    $('<input data-text-field="Title" data-value-field="Title" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataSource: {
                transport: {
                    read: {
                        url: "@Url.Action("Read", "Function")", //specify the URL which should return the records. This is the Read method of the HomeController.
                        type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                    }
                }
            }
        });
}
 /
</script>

Any help would be really appreciated. I will make a quick example project when I get to work to assist.

Many thanks,

Andy
Grid
Andreas
Top achievements
Rank 1
 answered on 11 Feb 2015
1 answer
194 views
Grid selection with Angular $scope.$apply()
I have a simple grid with the click event bound. When the user clicks a row in the grid, it should be highlighted and a detail table included on the page populated based on data from the selected row.

Within the click event of the grid, I populate an array from the selected row's dataitem. The table is populated via ng-repeat acting on the array. In order to force data binding once the array has been prepared, I'm calling $scope.$apply() - but as soon as that happens, the row selection highlight disappears. I want the selected row to remain highlighted.

    $("#gridItemResults").on("click", "tbody", function (e) {
        var grid = $("#gridItemResults").data("kendoGrid");
        var dataItem = grid.dataItem(grid.select());
        var dataJson = dataItem.toJSON();
        $scope.selectedItem.length = 0;

        // populate the selectedItem arrary from the selected row:
        for (var key in dataJson) {
            if (dataJson.hasOwnProperty(key)) {
                $scope.selectedItem.push({ 'key': convertCamelCase(key), 'value': dataJson[key] });
            }
        }

        $scope.$apply(); // update binding

    });
Grid
Mark
Top achievements
Rank 1
 answered on 11 Feb 2015
3 answers
578 views
[Solved] How To pass data between 2 Pages ?
 Hi :)
I`m completely new with Kendo UI , I need  to know how to pass parameters between 2 Pages Using Kendo . 
and please i need to useful tutorials for Dealing with  Kendo  .
thaaanks . 
Application
Kiril Nikolov
Telerik team
 answered on 11 Feb 2015
6 answers
89 views
pane which has been dragged will not be resized on window resize event.
by default ,changing window's size will resize all the panes of splitter ,it worked well,

but if I  adjust a pane size by dragging splitbar before, panes will not be able to resize themself on window resize event.

any solution for this problem? thanks.

demo:
http://plnkr.co/edit/ZxBSjet64mI90FALXLCr?p=preview

<div id="main-splitter">
<div></div>
<div></div>
</div>
<script>
      $(function(){
        $("#main-splitter").kendoSplitter();
      });
      $(window).on("resize",function(){
        kendo.resize($("main-splitter"));
      })
    </script>
Splitter
Alex Gyoshev
Telerik team
 answered on 11 Feb 2015
7 answers
185 views
App reloads when using back navigation after a change to a local datasource in Chrome
We have a complex application using kendo ui mobile framework. Today we discovered a new problem for a very specific scenario.
Our development environment uses Chrome browser (Version 40.0.2214.93 m). We are using a datasource that is bounded to local array. In a certain view the user is updating this datasource (using the datasource set api). After the change, if we click on the back button to return to the previous view, the entire app reloads, as if the entire page URL was reset. A few important remarks:

1 The datasource error gives nothing and the update seems to work well. It is only when we use app.navigate("#:back") that the problem appears
2. If instead of app.navigate("#:back") we navigate to the previous page with app.navigate("prev-view-id") it works correctly and there is no problem
3. We are using version: telerik.kendoui.professional.2014.3.1119.commercial
We also tried the latest version and got the same result (telerik.kendoui.professional.2014.3.1316.commercial)
4. We found out that the problem is only with Chrome browser. It all works well in IE & firefox browsers as well as on iPhone (5s) and Android (nexus 7) devices

Since our development environment is using Chrome we will appreciate any assistance solving this problem.
Application
Alexander Valchev
Telerik team
 answered on 11 Feb 2015
1 answer
141 views
Treeview, iPhone, possibly use mobile data-click like event
Hi
  I have a treeview on mobile which is pretty unresponsive on iPhones. A lot of the problems I have had on iPhones are because I was using onclick instead of data-click and the iPhone has an issue here

Using a jquery event handler called bindFirst (http://jsfiddle.net/x8Na8/2/) I was able to confirm that a touchstart event was firing on the expand arrow but no click was firing. 

Is there anyway I can make the tree picker use something like data-click to make it more responsive on iPhones. On Android it just works anyway.

thanks

(NB I have asked a separate question in the past about treeviews with checkboxes but that was unusable so ignore that)
TreeView
Kiril Nikolov
Telerik team
 answered on 11 Feb 2015
1 answer
159 views
when I use this design, I get an error "activeElement.nodeName = undefined".
How to do that would work?

<div ng-controller="LoginCtrl">
        <div ng-if="!isAutorized">
…
<input ng-model="user.name" type="text" class="form-control" placeholder="Login” />
<input ng-model="user.password" type="password" class="form-control" placeholder=" Password " required />
…
        </div>

        <div ng-if="isAutorized" class="containerss">
            <div ui-view>
<!-- Gantt  -->
            </div>
        </div>
</div>

For more information:
After authorization and appearance  widget Gantt, I choose a mouse task and triggered event  "change" ( change: function (e) {   }, -  empty function ), I receive an error "activeElement.nodeName = undefined".   kendo._activeElement() return null.

 




Gantt
Dimitar Terziev
Telerik team
 answered on 11 Feb 2015
1 answer
128 views
Cannot find RecurrenceException definition
Hi

I apologize but after a lengthy search I just cannot find any page where the datasource is properly defined for the scheduler module.

I would like to know how "RecurrenceException" and "RecurrenceID" work and maybe some examples but cannot find it.

Can someone please point me in the right direction?

Many thanks
Grid
Vladimir Iliev
Telerik team
 answered on 11 Feb 2015
1 answer
334 views
How to select combo box text on tab when using Angular
Hi, I am trying to select combo box text that is in a grid cell template as is shown here

The only difference is that I am trying to do it when using the grid within Angular. As in the attached, I have the template function as follows..
function categoryDropDownEditor(container, options) {
    var input = $('<input name="Category" />')
    input.appendTo(container)
    var combobox = input.kendoComboBox({
        autoBind: true,
        filter: "contains",
        placeholder: "select...",
        suggest: true,
        dataTextField: "description",
        dataValueField: "code",
        dataSource: comboData,       
      });
     
    combobox.input.on("keydown", function(e) {
          var filter = combobox.dataSource.filter() || { filters: [] };
 
          if (e.keyCode === 9 && filter.filters[0]) { //TAB
            combobox.select(combobox.current().index());
          }
        });
   }

However, the call to combobox.input.on is not correct, so I just cant' work out what object the .on should be called.

I have tried calling it on the combobox (as above), but input is not defined on this. I have tried calling it on the var input, but this does nothing.

Any ideas how I can get it to work here?

Thanks in advance for any help
regards, Peter
Grid
Alexander Popov
Telerik team
 answered on 11 Feb 2015
Narrow your results
Done
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Drag and Drop
Map
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Learn how
1374 1375
1376
1377 1378
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how