Telerik Forums
Kendo UI for jQuery Forum
8 answers
208 views
Hello,

How can change the title of the total (last rows) of the pivot grid?

In the image attached we can see I want to change with  mark in red.

thanks.
Viktor Tachev
Telerik team
 answered on 13 Apr 2017
1 answer
213 views

I want to initialize a date picker inside a bound view with week numbers like this:

<input name="Deadline" data-bind="value: deadline" data-role="datepicker" data-week-number="true" />

However week numbers wont be displayed. Is this a bug? Here is a dojo link

http://dojo.telerik.com/Ogoyu/2

I cannot use jQuery initialization as I need that binding.

Milena
Telerik team
 answered on 13 Apr 2017
1 answer
216 views

I have disabled Add and Delete always .. But after postback of the page . The options are automatically enabled on rightclick

 

This is my code : 

 

function detailInitKendoCostGrid(e) {
    if (e.data.Id > 0) {
        var ds = new kendo.data.DataSource({
            schema: {
                id: "jobCodeID",
                data: "d",
                total: "d.length",
                model: {
                    fields: {
                        Cost: { type: "string" },
                        Total: { type: "string" },
                        Desc: { type: "string" },
                        Quantity: { type: "string" },
                  }
                }
            },
            pageSize: 500,
            transport: {
                read: {
                    url: "Cost.aspx/CostPart",
                    contentType: "application/json; charset=utf-8",
                    dataType: 'JSON',
                    type: "POST",
                    complete: function (jqXhr, textStatus) {
                        if (textStatus === 'error') {
                            var message = $.parseJSON(jqXhr.responseText).Message;
                            ShowMessageDialog(message);
                        }
                    }
                },
                parameterMap: function (options, operation) {
                    // ////
                    switch (operation) {
                        case "read":
                            return JSON.stringify({
                                "jobcodeId": e.data.Id,
                            });
                            break;
                        default:
                            return JSON.stringify(options);
                            break;
                    }
                }
            }
        });
        $("<div style='height: 400px'/>").appendTo(e.detailCell).kendoGrid({
            dataSource: ds,
            columns: [
                { field: "Cost", title: "Task", width: "500px" },
                { field: "Total", title: " Part Number", width: "100px" },
                { field: "Desc", title: "Part Description", width: "100px" },
                { field: "Quantity", title: "Quantity", width: "100px" },
               
            ],
              selectable: true
        });
    }
}
function SetContextMenuforCost()
{
    var taskPartGridId = "#Kendo_CostGrid";
    $("#E_ContextMenu").kendoContextMenu({
        dataSource: [{ text: "Add Cost" },
                     { text: "Edit Cost" },
                      { text: "Delete Cost" }],
        target: CostGridId,
        filter: ".k-detail-row tbody tr.k-state-selected[role='row']",
        open: function (e) {
            showopen(e);
        },
        select: function (e) {
            ShowGridPopup(e);
        },
    });
      $("#E_ContextMenu").kendoMenu().data("kendoMenu").enable("li:eq(1)", true);
            $("#E_ContextMenu").kendoMenu().data("kendoMenu").enable("li:eq(0)", false);
            $("#E_ContextMenu").kendoMenu().data("kendoMenu").enable("li:eq(2)", false);
}
function showopen(e) {
    var menu = e.sender;
    if (menu != null) {
        var total= e.target.childNodes[3].textContent;
           if (quantity > 0) {
            $("#E_ContextMenu").kendoMenu().data("kendoMenu").enable("li:eq(1)", true);
            $("#E_ContextMenu").kendoMenu().data("kendoMenu").enable("li:eq(0)", false);
            $("#E_ContextMenu").kendoMenu().data("kendoMenu").enable("li:eq(2)", false);
        }
    }
}

Ivan Danchev
Telerik team
 answered on 13 Apr 2017
1 answer
176 views

Hi,

I have a grid with multiple gauges inside of it. The gauges represent measure values. Because the measures changes in real time I have to constantly reload the gauges with the new measures.Also, the user can decide that it doesn't want to display a specific measure, I have to reload them in this case too. 

So the only way that I found to do this is to create all my gauges and destroy them once I get the new measures values or when the user decide he doesn't want a measure anymore.

The problem is that I have a lot of memory leaks while doing this process again and again.

I manage to reproduce the bug on kendo dojo using random data (same behavior as my code)

memory leak dojo code

is there a way to avoid all that memory leaks.

ps : I use google chrome (use More tools>task manager  too see how many kb a tab is using)

Any help will be appreciated

Stamo Gochev
Telerik team
 answered on 13 Apr 2017
1 answer
167 views

Hello,

I am facing couple of issues in KendoGrid.

1. I wanted to add a new row once user starts editing the last row, but I need focus on current row. Currently, when i start editing, new row is added but focus shifts on new row.

2. Need an indicator for all the new Row added

3. Can we fire validation on complete row instead of a cell?

Please help if there is any possibility.

Thanks in anticipation.

Kranthi

Boyan Dimitrov
Telerik team
 answered on 13 Apr 2017
4 answers
844 views

Hello,

Currently I'm having an issue with a Custom Filter in my Grid. I'm trying to get all our function groups from our server and make those filterable in the Grid.
However the name I want to use for filtering isn't found in the Grid schema and throwing an error.

To fill my Grid i'm using odata-v4 and Extending it with extra data. The problem is i'm trying to create the custom filter on data in the Extended object I get from odata. However when i try to apply the filter I get the error message "ReferenceError: Employee is not defined". 

I've tested what happens if I try to apply the filter to a field in the base schema of the Grid's datasource and then the data is retrieved as expected. 

So my question is how can I apply the filter to an attribute in the Extended object?

Kendo Grid Schema

01.schema: {
02.    total: function(data) {
03.        return data["@odata.count"];
04.    },
05.    model: {
06.        id: "EmployeeId",
07.        fields: {
08.            EmployeeId: { type: "number", editable: false },
09.            EmployerBudgetId: { type: "boolean" },
10.            Id: { type: "string" },
11.            CreatedDate: { type: "string", defaultValue: new Date().toISOString() },
12.            CreatedBy: { type: "string" },
13.            LastModifiedDate: { type: "string", defaultValue: new Date().toISOString() },
14.            LastModifiedBy: { type: "string" },
15.            Description: { type: "number" },
16.            StartDate: { type: "number" },
17.            EndDate: { type: "number" },
18.        }
19.    }
20.},

KendoGrid Datagrid

01.$scope.datagrid = {
02.        dataSource: dataSource,
03.        pageable: true,
04.        filterable: true,
05.        sortable: true,
06.        selectable: true,
07.        height: 800,
08.        toolbar: ['create', { name: 'edit', title: 'Bulk Edit', template: '<a ng-click="bulkEdit()" class="k-button k-button-icontext k-grid-edit">Bulk Edit</a>' }],
09.        columns: [
10.            { title: 'select', template: '<input class="checkbox" type="checkbox" />' },
11.            { field: "Employee.Email", title: "Email" },
12.            { field: "Employee.LocalFunctionGroup", title: "Local Function Group" },
13.            {
14.                field: 'Employee.FunctionGroup.Name', // Custom Filter (on extended data)
15.                title: "Global Function Group",
16.                filterable: {
17.                    multi: true,
18.                    dataSource: filterDatasource,
19.                    dataTextField: "Name"
20.                },
21.                template: '# if (Employee.FunctionGroup != null) { # #: Employee.FunctionGroup.Name # # } #',
22.            },
23.            { field: "CurrentAmount.Amount", title: "Current Amount" },
24.            { command: ["edit", "destroy"], title: " ", width: "110px" },
25.        ],
26.        editable: "popup",
27.    };

KendoFitlerSchema

01.schema: {
02.    model: {
03.        id: "Id",
04.        fields: {
05.            Id: { type: "number", editable: false },
06.            Name: { type: "string" },
07.        }
08.    }
09.},

ResponseBody odata

01.{
02.  "@odata.context": "https://localhost/Awvn.Admin.Api/odata/$metadata#EmployeeBudgets",
03.  "value": [
04.    {
05.      "Id": 4,
06.      "CreatedDate": "2017-03-29T08:27:07.17+02:00",
07.      "CreatedBy": "EmployeeBudgetsInitializer",
08.      "LastModifiedDate": "2017-03-29T08:27:07.17+02:00",
09.      "LastModifiedBy": "EmployeeBudgetsInitializer",
10.      "Description": null,
11.      "StartDate": "2000-01-01T00:00:00+01:00",
12.      "EndDate": "2100-01-01T00:00:00+01:00",
13.      "EmployeeId": 4162,
14.      "EmployerBudgetId": 3,
15.      "InitialAmount": {
16.        "Amount": 0,
17.        "Currency": "EUR"
18.      },
19.      "CurrentAmount": {
20.        "Amount": 0,
21.        "Currency": "EUR"
22.      },
23.      "Employee": {
24.        "Id": 4162,
25.        "IsDeleted": false,
26.        "Email": "Rick75@import.nl",
27.        "LocalFunctionGroup": "Automotive",
28.        "FunctionGroupId": 2,
29.        "UserId": null,
30.        "EmployerId": 2,
31.        "FunctionGroup": {
32.          "Id": 2,
33.          "Name": "Accounting / Financieel" <- The field I want to use for my filtering
34.        }
35.      }
36.    }
37.  ]
38.}

 

Kendo UI version: "2017.1.223"
Chrome Version 56.0.2924.87

Boyan Dimitrov
Telerik team
 answered on 13 Apr 2017
13 answers
1.2K+ views
Hello,

I have MVC application that inserts some texts into the grid template.
MVC encodes quotes (') to (&#39;) and it is fine but after that the template stops working!

Here is an example: http://jsfiddle.net/GFV52/8/
Why the template cannot work with html encoded symbols and how to fix this?

Vova
Tsvetina
Telerik team
 answered on 13 Apr 2017
3 answers
265 views

As far as I can see (http://docs.telerik.com/kendo-ui/api/javascript/drawing/tooltip-options#fields-content) I can only really provide a text string to the .drawingElement.options.tooltip (or a function that returns a text string). If the string is a uri then the tooltip actually tuns into a iFrame with whatever content you want as delivered by the uri.

What I would like to do is to be able to use a function that returns a DOM element (a div containing data laid out in a non trivial way). Can this be done? if so how? If not do I have any other choice than to use the uri and iFrame mechamism?

Also: is there any documentation anywhere that describes the properties and methods (if any) associated with the parameter that is passed to 'function' version of the tooltip content?

 

Regards

 

Alan

Tsvetina
Telerik team
 answered on 13 Apr 2017
5 answers
753 views
I'm using a version of the Insert Video snippet from another forum post that makes use of the Editor's "insertHtml" function to embed videos. It works great in most browsers. However, in IE9, the video is always inserted at the beginning of the text instead of where the cursor is. Is there anything I can do about this?

Here's the relevant code snippet

<script type="text/x-kendo-template" id="insertVideo-template">
    <div>
        <label for="videoUrl">Enter a Share URL from YouTube:</label>
        <input type="text" id="videoUrl" name="videoUrl"/>
              
        <div class="insertVideo-actions">
            <button class="k-button insertVideo-insert">Insert</button>
            <button class="k-button insertVideo-cancel">Cancel</button>
        </div>
    </div>
</script>
 
<script type="text/x-kendo-template" id="youTube-template">
    <iframe width="458" height="315" src="http://www.youtube.com/embed/#= source #?wmode=opaque&rel=0" frameborder="0"></iframe>
</script>
 
function insertVideo(e) {
    var editor = $(this).data("kendoEditor");
 
    var dialog = $($("#insertVideo-template").html())
        .find(".insertVideo-insert")
        .click(function() {
 
            var media = testUrlForMedia(dialog.element.find("input").val());
            if (media) {
                var template = kendo.template($("#youTube-template").html());
 
                editor.exec("insertHtml", { value: template({ source: media.id }) });
            }
 
            dialog.close();
        })
        .end()
        .find(".insertVideo-cancel")
        .click(function() {
            dialog.close();
        })
        .end()
        .kendoWindow({
            modal: true,
            title: "Insert Video",
            animation: false,
            deactivate: function() {
                dialog.destroy();
            }
        }).data("kendoWindow");
 
    dialog.center().open();
}
 
// Check inserted URL for valid Media Link
function testUrlForMedia(pastedData) {
    var success = false;
    var media = {};
    if (pastedData.match('http://(www.)?youtube|youtu\.be')) {
        if (pastedData.match('embed')) {
            youtube_id = pastedData.split(/embed\//)[1].split('"')[0];
        } else {
            youtube_id = pastedData.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0];
        }
        media.type = "youtube";
        media.id = youtube_id;
        success = true;
    }
 
    if (success) {
        return media;
    } else {
        alert("No valid media id detected.\nBe sure to use the \"Share\" url, located in the menu under the video on the youtube page.");
    }
    return false;
}
 
$(".fnRichTextField").kendoEditor({
    encoded: false,
    tools: [
        "bold",
        "italic",
        "underline",
        "separator",
        "fontName",
        "fontSize",
        "foreColor",
        "backColor",
        "separator",
        "insertUnorderedList",
        "insertOrderedList",
        "separator",
        "justifyLeft",
        "justifyCenter",
        "justifyRight",
        "justifyFull",
        "separator",
        "createLink",
        "unlink",
        "separator",
        { name: "insertVideo", tooltip: "Embed Youtube Video", exec: insertVideo },
        "viewHtml"
    ]
});
Ianko
Telerik team
 answered on 13 Apr 2017
4 answers
1.9K+ views

We allow our users to define masked fields that then appear in a kendo grid.  I've seen the example (http://www.telerik.com/forums/masked-column-in-a-grid) that recommends using a JavaScript function to format the value, but how would that work with unknown mask formats?

Furthermore, I'm not interested in allowing users to edit the value, just to display the value such that if the unformatted string value is 123456789 and the mask is ###-##-####, it would appear in the grid as "123-45-6789".  How can this be accomplished on the fly?

Martin
Telerik team
 answered on 13 Apr 2017
Narrow your results
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
Map
Drag and Drop
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
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?