Telerik Forums
Kendo UI for jQuery Forum
or
Ask question
All Questions
Unanswered
Answered
28,617 questions
3 answers
751 views
Kendo UI datasource filter in detail template not working

i created a testing grid (hierarchial grid) to be applied in our project. problem is that the datasource filter didn't apply the matching id (employee's id column to subordinate's ReportingTo column).

 

<body>
    <div id="testGrid"></div> 
  <script>
    var employee = [{
       empID: 1, lastName: "Sarsonas", firstName: "Christine", ReportingTo: 0
    },
    {
        empID: 2, lastName: "Sarsonas", firstName: "Alyssa", ReportingTo: 0,
    }
];
 
var subordinate = [
    {
        empID: 10, lastName: "Hatake", firstName: "Kakashi", ReportingTo: 1
    },
    {
        empID: 11, lastName: "Maito", firstName: "Gai", ReportingTo: 1
    }
];
 
 
$("#testGrid").kendoGrid({
    columns: [
        { title: "Emp ID", field: "empID" },
        { title: "Last Name", field: "lastName" },
        { title: "First Name", field: "firstName" },
        { title: "Reporting To", field: "ReportingTo" }
    ],
    dataSource: { data: employee },
    detailInit: detailInit
    ,dataBound: function() {
        this.expandRow(this.tbody.find("tr.k-master-row"));
    }
});
 
 
function detailInit(e) {
    console.log(e.data.empID);
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            data: subordinate,
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize: 10,
            filter: { field: "ReportingTo", operator: "eq", value: e.data.empID }
        },
        scrollable: false,
        sortable: true,
        pageable: true,
        columns: [
            { title: "Emp ID", field: "empID" },
            { title: "Last Name", field: "lastName" },
            { title: "First Name", field: "firstName" },
            { title: "Reporting To", field: "ReportingTo" }
        ]
    });
}
 
    </script>
  </body>
Grid
christine
Top achievements
Rank 1
 answered on 27 Jan 2017
3 answers
336 views
Issues with refresh of Grid

Any help on the following code would be greatly appreciated.  I have the following :

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
  
  <div id="app"></div>
  <div><button onClick: "refresh()">refresh</button></div>
    <script id="grid-view" type="text/x-kendo-tmpl">
    <div class="manage-roles">
      <div data-role="grid"
      data-scrollable="true"
      data-editable="inline"
      data-columns='[
        { field : "JobTitle", width: 120, title : "Job Title Code" },
        { field : "Description" },
        { field : "CategoryId", template: "${Category}" },
        {"command": "edit"}]'
      data-bind="source: roles"
      style="height: 500px">
      </div>
      </div>
    </script>

    <script>
      
      var roleViewModel = kendo.observable({
        categories: new kendo.data.DataSource({
          data: [
            { "CategoryId": 1, "Description": "IT" },
            { "CategoryId": 2, "Description": "Billing" },
            { "CategoryId": 3, "Description": "HR" },
            { "CategoryId": 4, "Description": "Sales" },
            { "CategoryId": 5, "Description": "Field" },
            { "CategoryId": 10, "Description": "Stuff" },
            { "CategoryId": 11, "Description": "Unassigned" }
          ]
        }),
        roles: new kendo.data.DataSource({
          data: [
            { "RoleId": 1, "JobTitle": "AADM1", "Description": "Administrative Assistant I", "Category": "Stuff", "CategoryId": 10 },
            { "RoleId": 2, "JobTitle": "AADM2", "Description": "Administrative Assistant II", "Category": null, "CategoryId": 0 },
            { "RoleId": 3, "JobTitle": "ACCIN", "Description": "Accounting Intern", "Category": null, "CategoryId": 0 },
            { "RoleId": 4, "JobTitle": "ACCSU", "Description": "Accounting Supervisor", "Category": null, "CategoryId": 0 }, { "RoleId": 5, "JobTitle": "ACCTC", "Description": "Accountant", "Category": null, "CategoryId": 0 }
          ]
        })
      });

      function refresh() {
        var grid = $("#grid").data("kendoGrid");
        grid.data( [
            { "RoleId": 10, "JobTitle": "AADM11", "Description": "Administrative Assistant I", "Category": "Stuff", "CategoryId": 10 },
            { "RoleId": 12, "JobTitle": "AADM12", "Description": "Administrative Assistant II", "Category": null, "CategoryId": 0 },
            { "RoleId": 13, "JobTitle": "ACCIN1", "Description": "Accounting Intern", "Category": null, "CategoryId": 0 },
            { "RoleId": 14, "JobTitle": "ACCSU1", "Description": "Accounting Supervisor", "Category": null, "CategoryId": 0 }, { "RoleId": 5, "JobTitle": "ACCTC", "Description": "Accountant", "Category": null, "CategoryId": 0 }
          ]
          )
        console.log('am here');
        grid.read();
        grid.refresh();
      }
      
      var categoryEditor = function(container, options) {     
        $('<input data-bind="value: ' + options.field + '" />')
        .appendTo(container)
        .kendoDropDownList({
          dataSource: roleViewModel.categories,
          dataTextField: 'Description',
          dataValueField: 'CategoryId'
        });
      };

      var view = new kendo.View($("#grid-view").html(), {
        model: roleViewModel,
        init: function() {
          var widget = this.element.find("[data-role=grid]").data("kendoGrid");

          widget.columns[2].editor = categoryEditor;
        }

      });

      var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

      layout.render($("#app"));

      layout.showIn("#content", view);
    </script>
</body>
</html>

 

on the click of the refresh button I would expect the grid to be refreshed.  Can someone tell me what I'm doing wrong?

Grid
Dimiter Topalov
Telerik team
 answered on 26 Jan 2017
1 answer
285 views
Time picker masking

I am using the kendo timepicker and its working wonderfully

 

@(Html.Kendo().TimePicker()
                         .Name("EndTime")
                         .Value(@Model.EndTime)
                         .HtmlAttributes(new { style = "width: 100%", id = "EndTime", name = "EndTime", autocomplete = "off" })
                       )

 

The problem I'm running into is users who want to type values aren't including the AM/PM nor following the correct format.  How can I apply a mask to the timepicker so that they are forced to format properly?

Date/Time Pickers
Eduardo Serra
Telerik team
 answered on 25 Jan 2017
4 answers
141 views
ListView DataSource Not Available on RequestEnd/Change Event

Hello!

I am using Kendo MVC UI. I have a Kendo Window that I do a refresh with a passed in url that obtains a MVC partial view which contains a Kendo ListView. This ListView, I do a DataSource read. I created a javascript function to call after the data is received to use the items returned. I tried using the RequestEnd/Change event to call it. It calls the function but the ListView does not appear to be done as the Loading icon is visible still and I don't have access to the dataItems. I am using version 2015.2.805.

How can I access the dataItems right after the request is made to get them?

Thanks!

ListView
Craig
Top achievements
Rank 1
 answered on 25 Jan 2017
1 answer
387 views
Disable Column Autofit On Double Click

Hi,

The column resizes to fit to content on double clicking the separator.

Is there any way to keep the column resizable but disable the autofit on double click?

Thanks.
Grid
Stefan
Telerik team
 answered on 25 Jan 2017
3 answers
114 views
Trouble updating children through model

Attached are the two simple files that demonstrate the problem. I'm trying to load a simple JSON file and then update the data through the model. The trouble is, while the field value is changing in the model, the screen never gets updated unless I change the root of the tree. Any assistance is appreciated.

<!DOCTYPE html>
<head>
<title>MVVM Demo 2</title>
    <link href="/styles/kendo.common.min.css" rel="stylesheet">
    <link href="/styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="/styles/kendo.default.min.css" rel="stylesheet">
    <link href="/styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jszip.min.js"></script>
    <script src="/js/kendo.all.min.js"></script>
<style type="text/css">
th {
width: 135px;
        }
</style>
</head>
<body>
<script>
 
var elementMapping = new Map();
 
</script>
     
 
    <div id="example"
        data-role="treeview"
        data-bind="source: root"
        data-text-field="_name">
            
 
 
    </div>
<button type="button" data-bind="click: updateSomething" >Update</button>
 
 
         
<script>
var inputJSON="";
 
const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
 
$.ajax({
    url: "this.json",
    dataType: "json",
    cache: false,
    success: function(data) {
        inputJSON = data;
 
     
                 
        var topSchema = {
            model: {   
                id:"_secnum",
                children: "section",
                hasChildren: (e)=> e.section
                 
                 
            }
        };
     
        var oh = kendo.observableHierarchy(
        {
            data:   [inputJSON],
            schema: topSchema
         
        });
        var viewModel = kendo.observable({
            root: oh,
            updateSomething: function(){
                var r = this.get("root");
                var g = elementMapping[4];
                 
                g.set("_name", "test this thing");
                 
            }
        });
         
        var rec = function(r){
            elementMapping[r.id]=r;
            r.items.forEach(h=>rec(h));
        }
        viewModel.root._dataSource.data().forEach(e=>rec(e));
         
         
         
        kendo.bind($("body"), viewModel);          
      
     
         
         
    }
});
     
</script>
 
 
 
</body>
</html>

 

{
    "_template": "Electronic Procedures Template",
    "_revision": "1.4.0",
    "section": [
        {
            "_name": "Cover Page",
            "_secnum": "",
            "rititle1": [ ],
            "rinumber1": [ ],
            "rititle2": [ ],
            "rinumber2": [ ]
        },
        {
            "_name": "Purpose",
            "_secnum": "1",
            "_sectype": "text"
        },
        {
            "_name": "Scope",
            "_secnum": "2",
            "_sectype": "text",
            "section": [
                {
                    "_name": "Responsibilities",
                    "_secnum": "1",
                    "_sectype": "text"
                },
                {
                    "_name": "Background",
                    "_secnum": "2",
                    "_sectype": "text"
                }
            ]
        },
        {
            "_name": "Precautions & Limitations",
            "_secnum": "3",
            "_sectype": "text"
        },
        {
            "_name": "Prerequisite Actions",
            "_secnum": "4",
            "section": [
                {
                    "_name": "Radiological Concerns",
                    "_secnum": "1",
                    "_sectype": "text"
                },
                {
                    "_name": "Employee Safety",
                    "_secnum": "2",
                    "_sectype": "text"
                },
                {
                    "_name": "Special Tools and Equipment, Parts, and Supplies",
                    "_secnum": "3",
                    "_sectype": "text"
                },
                {
                    "_name": "Approvals & Notifications",
                    "_secnum": "4",
                    "_sectype": "single",
                    "procedure": {
                        "_seq": "9",
                        "_sid": "0",
                        "_refid": "",
                        "_pagetype": "Master",
                        "_procedurelevel": "1"
                    }
                },
                {
                    "_name": "Preliminary Actions",
                    "_secnum": "5",
                    "_sectype": "single",
                    "procedure": {
                        "_seq": "10",
                        "_sid": "0",
                        "_refid": "",
                        "_pagetype": "Master",
                        "_procedurelevel": "1"
                    }
                },
                {
                    "_name": "Field Preparations",
                    "_secnum": "6",
                    "_sectype": "single",
                    "procedure": {
                        "_seq": "11",
                        "_sid": "0",
                        "_refid": "",
                        "_pagetype": "Master",
                        "_procedurelevel": "1"
                    }
                }
            ]
        },
        {
            "_name": "Performance",
            "_secnum": "5",
            "_sectype": "multiple"
        },
        {
            "_name": "References",
            "_secnum": "6",
            "section": [
                {
                    "_name": "Performance References",
                    "_secnum": "1",
                    "_sectype": "text"
                },
                {
                    "_name": "Source Requirements",
                    "_secnum": "2",
                    "_sectype": "text"
                }
            ]
        },
        {
            "_name": "Records",
            "_secnum": "7",
            "_sectype": "text"
        },
        {
            "_name": "Attachments",
            "_secnum": "8",
            "_sectype": "text"
        },
        {
            "_name": "Monitor Response 1",
            "_secnum": "11",
            "_sectype": "monitortable"
        }
    ],
    "hashcode": "e388152e636cf0a2779c2da2dca7a534"
}

 

 

 

MVVM
Boyan Dimitrov
Telerik team
 answered on 25 Jan 2017
1 answer
751 views
Use Edit button in Row to Navigate

Is there way to hook the Edit button in the row to navigate to another template?  I would like to navigate to another template that has a hierarchical grid that would display relevant data.  In this case the initial grid shows a listing of tests. 

When the user clicks the "edit" button in the grid I want to navigate to another page representing the questions and answers for the selected test in a hierarchical grid.  So how could the second page's Grid pass the testId from the action (URL) to the Read() function specified in the grid?

 

Thanks!

Grid
Alex Hajigeorgieva
Telerik team
 answered on 25 Jan 2017
1 answer
1.9K+ views
Strip HTML tags from content programatically

I am using the Kendo UI angular editor and need to save both the markup and the plain text from inside the control. I would like to keep the markup text encoded. This editor is being used within a custom template for a Kendo UI Grid popup edit.  From what I have researched, I see two possible options to handle this. 

  1. Write code to programmatically call the cleanFormatting toolbar method, save the original copy of the text, create a range of the body of the editor, select this range, call the cleanFormatting method, and save the new copy of the text. 
  2. Programmatically replace all markup in the original copy of the text using some jQuery approach.

I would think that the first option would be the cleanest since it would be using Kendo throughout. However, the original copy of the text is encoded and calling the cleanFormatting method does not seem to call the exec method listed in the tools array for the editor. Furthermore, all HTML tags are still present.  This is what I have so far for my tools and for the create method for my grid:

vm.editorOptions = {
    tools: [
        {
            name: 'cleanFormatting',
            tooltip: 'Clean formatting',
            exec: function (e) {
                console.log('ready to clean');
                var editor = $(this).data('kendoEditor');
                editor.exec('cleanformatting');
            }
        },
        'insertUnorderedList',
        'insertOrderedList',
        'foreColor',
        'backColor'
    ],
    execute: function(e){console.log("executing command", e.name, e.command);}
};
function createLogEntry(options) {
    var markup = options.data.markupText;
    console.log(markup);
    var editor = $('table.k-editor.k-editor-widget').kendoEditor().data('kendoEditor');
    var range = editor.createRange();
    range.selectNodeContents(editor.body);
    editor.selectRange(range);
    editor.exec('cleanFormatting');
    options.data.plainText = options.data.markupText;
    console.log(options.data);   //...
}

When I use the button on the editor itself, I get exactly what I want. Is there a way to handle this programmatically, or is that not possible?

Because of the encoding, getting a jQuery method to strip the tags does not seem to work either.  I have tried a few approaches, including 

var markup = options.data.markupText;
var plain = $('<div>' + markup + '</div>').text();

That seems to keep all the HTML tags that are inside the string, though.

Is there some way to do this with Kendo editor?  Thanks for all your help!

Editor
Ianko
Telerik team
 answered on 25 Jan 2017
1 answer
88 views
Accessing fields in a grid column using C#

Is it possible to access the data of a column/field in a template like a row template in a razor template?
for instance : <li><label>Parent Test :</label>&nbsp; <strong>#= ParentTest #</strong></li>   

@{

    // How would I get the value of this var?

   var parentTest = ?

}

 

Thanks

 

Grid
Dimiter Topalov
Telerik team
 answered on 25 Jan 2017
1 answer
388 views
Editor by default is in read-only mode

First of all, someone should review the code in these forums so that if a user hits the backspace key when creating a new post the page does not navigate back!  So this is my second attempt to post this question because my first 95% complete post was vaporized when I hit the backspace key.  [arg!]

I am basing the code from this documentation:
http://docs.telerik.com/kendo-ui/controls/editors/editor/overview

I have a razor form with two editors on them and am formatting them as in the link above but they are showing up as read only.  Also the data from the model is not populating the control.  I tried using a standard input control as well with the same results.

Here is the code:

<p>
  @Html.TextAreaFor(m => m.Test.IntroText, new {style = "width:591px", id = "introtext"})
</p>

I tried removing the style attribute above with no change.

Here is the JavaScript:

$("#thankyoutext").kendoEditor({
    resizable: {
        content: true,
        toolbar: true,
        editable : true  <<-- Just tried that does not change anything
    },
    tools: [
        "bold",
        "italic",
        "underline",
        "strikethrough",
        "justifyLeft",
        "justifyCenter",
        "justifyRight",
        "justifyFull",
        "insertUnorderedList",
        "insertOrderedList",
        "indent",
        "outdent",
        "createLink",
        "unlink",
        "insertImage",
        "insertFile",
        "subscript",
        "superscript",
        "createTable",
        "addRowAbove",
        "addRowBelow",
        "addColumnLeft",
        "addColumnRight",
        "deleteRow",
        "deleteColumn",
        "viewHtml",
        "formatting",
        "cleanFormatting",
        "fontName",
        "fontSize",
        "foreColor",
        "backColor",
        "print"
    ]
 
});
 
var editor = $("#thankyoutext").data("kendoEditor"),
editorBody = $(editor.body);
editorBody.attr("contenteditable", true).find("a").off("click.readonly");

 

Can someone help explain why it is greyed, read-only and does not contain data from the model?

 

Reid




 

Editor
Marin Bratanov
Telerik team
 answered on 25 Jan 2017
Narrow your results
Done
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
SPA
Filter
Drawer (Mobile)
Drawing API
Globalization
Gauges
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
PivotGridV2
CheckBoxGroup
TextArea
Barcode
Collapsible
Localization
MultiViewCalendar
Touch
Breadcrumb
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
ToggleButton
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
+? 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?
Learn how
732 733
734
735 736
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?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how