Questions on Kendo UI for jQuery Forum

1 answer

143 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

Grid

answered on 13 Apr 2017

4 answers

803 views

Custom Filter on Extended Data with odata

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

Grid

answered on 13 Apr 2017

13 answers

1.1K+ views

Template is not working with html encoded symbols (like ')

Hello,

I have MVC application that inserts some texts into the grid template.
MVC encodes quotes (') to (') 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

Templates

answered on 13 Apr 2017

3 answers

241 views

Complex tooltips on diagram shapes?

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

Diagram

answered on 13 Apr 2017

5 answers

715 views

Editor - Embed Video in IE

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>

</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"

]

});

Editor

answered on 13 Apr 2017

4 answers

1.8K+ views

Formatting Column using mask format from MaskedTextBox

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?

Grid

answered on 13 Apr 2017

1 answer

140 views

Kendo MVC Schedular customization

Hi guys,

I am using:
1-Kendo MVC - 2014.3.1411.545
2-Chrome/Mozilla regardless the version
I have been working with kendo UI scheduler control which works fine with its default functionality, but I need to do the customization to meets the requirements.

Here are the certain things I want to do with kendo scheduler:

1. I want to to generate kendo scheduler rows with respect to the binded resource dynamically.
2. To Remove the time slots and create appointments with certain height & width.
3. I want to show the kendo scheduler appointments created in concerned row with respect to every resource with a certain height and width.

I have uploaded an image to explain what I wanted to do with Kendo MVC scheduler.

Scheduler

answered on 13 Apr 2017

1 answer

446 views

Serialize / Deserialize Grid

I am using the Kendo grid in an MVC application. I would like to provide a way for users to save a grid layout (serialize it). Then, later, when a user comes back to the page, I'd like to enable the user to restore the grid layout exactly as they had saved it. I presume I would do this by taking the serialized copy of the grid, feed it to some grid method which would then modify the grid layout to match the serialized copy. Is this possible to do with the Kendo grid?

Grid

answered on 12 Apr 2017

1 answer

466 views

Column disappear when Export to Excel

I have a grid with 2 columns, first colum is a data column (FirstName) and last column is an column with template (3 buttons for different action). When I click Export to Excel button, column with my 3 buttons disappear. Do you know why ? I don't want to change the layout of my grid when user export data.

Thanks

Grid

answered on 12 Apr 2017

1 answer

259 views

building themes with bower/gulp

Along with the "custom" task for making a custom JS build, the gulpfile in your Bower distribution also has a "less" task for compiling the CSS. A couple of questions:

On my OSX machine with node 6.9.4 installed, "gulp less" fails with "TypeError: Path must be a string. Received undefined", apparently in clean-css/input-source-map-tracker. On an Ubuntu 16.04 box with the node 4.2.6 that comes with that, it works fine. I assume there is some breakage that happened somewhere between those two node versions?
"gulp custom" looks like it compiles the ".less" for all themes to dist/styles, but it doesn't bring over things like fonts/ or Default/ that would be needed by a theme? There's no intent for dist/styles to be self-contained without adding in more bits from the source distribution?
the "less" task has a "styles" command line option which presumably lets you compile specific .less subsets? I was able to do "gulp less --styles **/kendo.*default.less", which gave me those matching files, but when I tried two patterns (separated with a comma) with "gulp less --styles **/kendo.*default.less,web/kendo.common.less", it ran but produced no output files at all. Is there a way to do multiples like this as the "custom" task does?

Since the styles are provided precompiled in the top-level "styles" directory, and since there is presumably nothing that would change for any particular style by recompiling it, the "less' task isn't of great use for me. I'd hoped there would be some way to tell it to assemble all the required stuff for a particular theme in "dist/styles".

General Discussions

answered on 12 Apr 2017