Questions on Kendo UI for jQuery Forum

4 answers

1.3K+ views

[Solved] Programatically remove HTML element within Editor

I use the Kendo UI Editor using the MVC like this:

@(Html.Kendo().EditorFor(m => m.Content)

.Name("Content")

.Encode(false)

.Immutables(true)

.StyleSheets(css => css

.Add(Url.Content("~/Content/dfw/dfTemplateEditor.css"))

)

.HtmlAttributes(new { style = "width:100%;height:100%;min-height:100%" })

.Events(events => events

.Select("templateEditor_onSelect")

)

.Resizable(resizable => resizable.Content(true).Toolbar(true))

I have html in the editor like this:

<h1 style="text-align:left;">Title</h1>

<div id="xxx">HELP ME I WANT REMOVED!</div> 

<h1 style="text-align:left;">Another Title</h1>

I want to programatically remove the div where id="xxx" but cant get it to work.

I've tried the following all didn't work:

var editor = $("#Content").data("kendoEditor");

//NOTE event looking for the named element fails

if ($('#xxx').length > 0) {

//never gets here..

alert('I EXIST!');

}

//Failed Attempt 1

$('#xxx').remove();

editor.update();

//Failed Attempt 2

editor.body.remove($('#xxx'));

editor.update();

Editor

answered on 16 Jan 2017

1 answer

469 views

content is not getting saved in kendo editor

kendo script on aspx code:

$(document).ready(function () {

$("textarea[id$='txt_EmailBody']").kendoEditor({
tools: [
"dialogInsert", "bold", "italic", "underline", "fontName", "style", "fontSize", "justifyLeft", "justifyCenter", "justifyRight", "insertUnorderedList", "insertOrderedList", "foreColor", "backColor", "indent", "outdent", "createLink", "unlink", "insertImage", "createTable", "viewHtml"
],
change: Clearbuttonvisible,
encoded: false,
value: '',
messages: {
fontNameInherit: "Select font",
fontSizeInherit: "Select font size"
},

immutables: true,

stylesheets: [
"../kendo/kendo.css",
"../Styles/corev15.css"
]

});

on button save I try to save email body (while debugging I found here I can see full text whatever is written/updated in in email body from UI) but it is not getting saved properly something is geeting missed out.I am dealing the below html as email body-

Independence Checkpoint
Global Independence
 
Description:
The dispensation you requested for the relationship below in Independence Checkpoint has been reviewed and responded to by your territory Partner Responsible for Independence (PRI). 
<BLOCKQUOTE style="MARGIN-RIGHT: 0px" dir=ltr>

<TABLE class=MsoNormalTable style="BORDER-TOP: medium none; BORDER-RIGHT: medium none; BORDER-COLLAPSE: collapse; BORDER-BOTTOM: medium none; MARGIN: auto auto auto -18.25pt; BORDER-LEFT: medium none; mso-border-alt: solid windowtext .5pt; mso-yfti-tbllook: 1184; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-table-layout-alt: fixed" cellSpacing=0 cellPadding=0 width=786 border=1>
<TBODY>
<TR style="mso-yfti-irow: 0; mso-yfti-firstrow: yes">
<TD style="BORDER-TOP: windowtext 1pt solid; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 166.25pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt" vAlign=top width=222>
Issuer/Instrument Name<?xml:namespace prefix = "o" ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p></TD>
<TD style="BORDER-TOP: windowtext 1pt solid; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 64.15pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt" vAlign=top width=86>
Entity<SPAN style='FONT-SIZE: 12pt; COLOR: black; mso-ascii-font-family: Calibri; mso-fareast-font-family: "Times New Roman"; mso-hansi-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'><o:p></o:p></TD>
<TD style="BORDER-TOP: windowtext 1pt solid; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 124.85pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt" vAlign=top width=166>
Relationship Type<SPAN style='FONT-SIZE: 12pt; COLOR: black; mso-ascii-font-family: Calibri; mso-fareast-font-family: "Times New Roman"; mso-hansi-font-family: Calibri; mso-bidi-font-family: "Times New Roman"; mso-themecolor: text1'><o:p></o:p></TD>
<TD style="BORDER-TOP: windowtext 1pt solid; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 160.85pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt" vAlign=top width=214>
Owner/Ownership Type<o:p></o:p></TD>
<TD style="BORDER-TOP: windowtext 1pt solid; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 73.4pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt" vAlign=top width=98>
Folder<o:p></o:p></TD></TR>
<TR style="mso-yfti-irow: 1; mso-yfti-lastrow: yes">
<TD style="BORDER-TOP: #d4d0c8; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 166.25pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt" vAlign=top width=222>
#Issuer/Security Name#<o:p></o:p></TD>
<TD style="BORDER-TOP: #d4d0c8; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 64.15pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt" vAlign=top width=86>
#Entity#<o:p></o:p></TD>
<TD style="BORDER-TOP: #d4d0c8; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 124.85pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt" vAlign=top width=166>
#Relationship Type#<o:p></o:p></TD>
<TD style="BORDER-TOP: #d4d0c8; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 160.85pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt" vAlign=top width=214>
#Owner/Ownership Type#<o:p></o:p></TD>
<TD style="BORDER-TOP: #d4d0c8; BORDER-RIGHT: windowtext 1pt solid; WIDTH: 73.4pt; BORDER-BOTTOM: windowtext 1pt solid; PADDING-BOTTOM: 0in; PADDING-TOP: 0in; PADDING-LEFT: 5.4pt; BORDER-LEFT: #d4d0c8; PADDING-RIGHT: 5.4pt; BACKGROUND-COLOR: transparent; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt" vAlign=top width=98>
#Folder#<o:p></o:p></TD></TR></TBODY></TABLE></BLOCKQUOTE>
Action Required:
This is only a notification and no action is required.   Follow the link to your Independence Checkpoint portfolio and view the “Queue Details” section with the dispensation status.<o:p></o:p>
 <o:p>#Link to Checkpoint#</o:p>
<o:p></o:p> 
<o:p></o:p>
<o:p><o:p></o:p></o:p>
<o:p><o:p>Questions:</o:p></o:p>
 
- Please do not reply to this automated notification - Contact your Partner Responsible for Independence (PRI) or a PRI team member within your local Independence Office. A Listing of territory PRI's is available in the "Independence Organisation & Key Contacts" section of the Global Independence Portal.

Editor

answered on 16 Jan 2017

3 answers

224 views

[Solved] Mix stacked and unstacked columns

Hi, in my scenario I have for example 4 series of the type column. The first two have to be unstacked columns. The other two have to be stacked on each other.

Fo xample:

series: [

{ name: "India", data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855], stack: false},
{ name: "Russian Federation", data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3], stack: false},
{ name: "Germany", data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.9], stack: "stack"}
{ name: "World", data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727], stack: "stack"}

]

It appears that either all of the columns have ot be stacked or to be unstacked.

If this is true, is there any workaround to mix stacked and unstacked columns?

Thank you!

Best regards

Charts

answered on 16 Jan 2017

3 answers

128 views

spreadsheet relies on en-US months only for dates in Dynamicfilter

I'm using the componentized version of KendoUI (v2016.3.1028) and I ran across a few oddities. The first being that the spreadsheet component appears to only use the en-US culture for the DynamicFilter property. Looking at kendo.web.js, there is this code block (see line 1 below):

1.kendo.cultures['en-US'].calendar.months.names.forEach(function (month, index) {

2. kendo.spreadsheet.DynamicFilter.prototype[month.toLowerCase()] = function (value) {

3. if (value instanceof Date) {

4. return value.getMonth() === index;

5. }

6. return false;

7. };

8.});

There doesn't appear to be a culture property that can be set on the spreadsheet kendo config, so I was curious if it's possible to even adjust the culture for the dates in the DynamicFilter to better respect localization?

Secondly, we include a number of culture localization files with our kendo.datpicker.js component so we can internationalize the text for datepicker usages. Unfotunately, adding the en-US culture to the datepicker becomes a problem for the spreadsheet which takes a dependency on datepicker. Looking at the code below from kendo.core.js, you can see that there is a function (called on file load) which will take in a culture (line 13 shows it's invoked with en-US) and add the calendar property to that particular culture. This calendar property is only used by the spreadsheet component, which assumes en-US, likely because this kendo.core.js only does this for en-US. It appears that the work-around would be to simply have the spreadsheet use the calendar's.standard property instead of assuming the kendo.cultures dictionary won't be updated between kendo.core.js load and the load of the kendo.web.js for spreadsheets. This could be achieved by exposing a property on spreadsheet for datePickerCulture which falls back to en-US by default. In any case, this is what drives the DynamicFilter property code for the spreadsheet and when we load a new culture for en-US, we lose the calendar property. We've worked around this by loading the culture files for the localizations we want, calling kendo.culture('en-US') to get the calendar property, then loading the kendo.spreadsheet.js with it's dependencies. Is this the right approach, or am I missing some instructions?

01.kendo.culture = function (cultureName) {

02. var cultures = kendo.cultures, culture;

03. if (cultureName !== undefined) {

04. culture = findCulture(cultureName) || cultures[EN];

05. culture.calendar = culture.calendars.standard;

06. cultures.current = culture;

07. } else {

08. return cultures.current;

09. }

10.};

11.kendo.findCulture = findCulture;

12.kendo.getCulture = getCulture;

13.kendo.culture(EN);

Spreadsheet

answered on 16 Jan 2017

2 answers

530 views

Custom constructor for Model?

I'm looking at a case where the "defaultValue" sort of initialization of a Model may not be sufficient. I wanted to try and hook in to Model's constructor process, but I'm not quite successful. I have a little example on the dojo that sets up the Model, a DataSource that uses it with a couple rows of data, and a grid that displays it.

It tries to use the "init" event handler inherited by kendo.data.Model from kendo.Class with my custom constructor function (MyConstructor). This works in that my constructor function gets called, and I can successfully manipulate the data record (available as "this"). But something about this seems to prevent the datasource from actually finishing up initializing the records with the actual data, even if I make no actual modifications in MyConstructor(). "id" and "description" have their default values, not those from the array of data records that you see when the init constructor does not run.

I do "kendo.data.Model.call(this)" to run the parent constructor from Model - perhaps something slightly different is needed? Or is there some other proper way to hook into model construction? It is for the "create" process on for a grid, so the model instance is created and bound to the edit template all internally in kendo code before I can get ahold of it via the grid's "edit" event.

Data Source

answered on 16 Jan 2017

1 answer

7.8K+ views

How to disable paging on a kendogrid

We are using a Kendo grid. I created a table in my cshtml file and in my js file, I bind it to the data. My problem here is that the grid paging does not go away. I need all the items on one single page since we don't expect much load. I tried removing the pageable attribute and I tried marking pageable: false. But I still see that the grid displays only 10 items in one page and gives the paging.By using this.pager.element.hide(), we can hide the pager but that does not solve the purpose since the pager is hidden but the paging is still being done. So, now, the elements starting 11th element are on the next page but we wont be able to navigate to it.Here is the existing code. I have removed the irrelevant columns in the table.

.CSHTML File:

<table style="width: 100%;" class='list-entity' id='inboxItems'>
<thead>
<tr>
<th data-field='Actions' class="iconCell" style='width: 1%'> </th>
<### THERE ARE MORE COLUMNS HERE AND THOSE HAVE CORRESPONDING COLUMNS IN SETTINGS ###>
</tr>
</thead>
</table>

Here is the script:

var settings = {
kendosettings: {
dataSource: {
data: requestItemsList,
schema: {
// required if get method will be used
model: {
id: "StepApproverKey"
}
},
group: [
{
field: "GroupByAttribute",
dir: "asc",
aggregates:
[
{ field: "GroupByAttribute", aggregate: "count" }]
}]
},
sort: { field: "SubmittedOn", dir: "desc" },
sortable: true,
pageable: false,
scrollable: false,
columns: [
{
field: "Actions",
title: "Actions",
template: kendo.template($("#inboxrowEditTemplate").html())
},
{ field: "StepApproverKey", hidden: true },
{
field: "GroupByAttribute",
hidden: true,
groupHeaderTemplate: kendo.template($("#inboxrowgroupHeaderTemplate").html()),
headerAttributes: {
style: "width: 100%"
}
}
],
selectable: "row",
}
};
$('#inboxItems').pdi().displaygrid(settings);

Grid

answered on 16 Jan 2017

2 answers

565 views

[Solved] How to execute callback after the navigate (to a new view) has completed

Hi,

As my title says, I'm trying to execute a method/callback after the user has navigated to a new view (ie, month) as I'd like to make changes to the structure of the calendar in month view.

I see that the 'navigate' callback execute before the change, is there some way to execute a method after new view is loaded?

Thanks,
Grant

Scheduler

answered on 16 Jan 2017

1 answer

107 views

Specifying minLength = 0 prevents dropping down on mouse click

The documentation specifies that minLength defaults to 0. However behavior of MultiSelect changes when minLength is explicitly set to 0. Clicking on the MultiSelect with the mouse no longer opens the list of values to select. See http://dojo.telerik.com/AWutut

MultiSelect

answered on 16 Jan 2017

4 answers

842 views

Telerik Kendo UI Grid - Inline editing of composite object as a single column with multi-field widget

We are considering kendo ui to replace GWT in our ERP product. The main motivator is kendo grid. We have many composite objects that are rendered and edited as a single column. The column editor will contain multiple fields.
An example: In sales invoice lines, the product column should display product code (autocomplete field), product name (Link), and a button to open products browser (a modal dialog with search fields and a grid that displays products along with images, names, available quantities, etc).After selecting a product in the products browser the grid should update the product in the row that requested the browser.
I think I know how to implement the products browser. But the composite editor is the one I do not know how to implement.
My question is: how can I edit a composite object in a single grid column using a composite widget? And we need inline editing not popup editors.
I have been browsing the demos to find a close example but could not find any. My search was "kendo grid composite object custom editor".
Attached two screen shots of our current ui that uses GWT.

Grid

answered on 16 Jan 2017

1 answer

487 views

Sorting child rows in TreeList

I have the following data representation displayed in a TreeList where there are two columns: Name and Creation Date. (Each Value entry is a child of the parent Item entry.)

Name - Creation Date

Item 1 - Jan 01, 2017

Value 1 - Jan 11, 2017
Value 3 - Jan 02, 2017
Value 2 - Jan 01, 2017

Item 2 - Dec 20, 2016

Value 2 - Dec 20, 2016
Value 1 - Dec 17, 2016
Value 3 - Dec 16, 2016

Item 3 - Nov 15, 2016

Value 3 - Nov 25, 2016
Value 1 - Nov 22, 2016
Value 2 - Nov 20, 2016

What do I need to do in order to sort by the Name value vs. the Creation Date so that it appears as follows:

Item 1 - Jan 01, 2017
Value 1 - Jan 11, 2017
Value 2 - Jan 01, 2017
Value 3 - Jan 02, 2017

Item 2 - Dec 20, 2016
Value 1 - Dec 17, 2016
Value 2 - Dec 20, 2016
Value 3 - Dec 16, 2016

Item 3 - Nov 15, 2016
Value 1 - Nov 22, 2016
Value 2 - Nov 20, 2016
Value 3 - Nov 25, 2016

No sort order is set in the TreeList markup; all the columns in the TreeList are sortable such that if I click the Name column header, the child rows are sorted appropriately.

TreeList

answered on 13 Jan 2017