Questions on Kendo UI for jQuery Forum

5 answers

1.4K+ views

Prevent Initial Content Load Until Window Is Opened

I am rendering a Kendo Window in my view like the following:

@(Html.Kendo().Window()

.Name("FeedbackWindow")

.Title(Resources.Title_Feedback)

.LoadContentFrom("Index", "Feedback")

.Actions(action => action.Maximize().Close())

.Modal(true)

.Iframe(true)

.Visible(false)

.AutoFocus(true)

.Events(events => events.Refresh("FeedbackWindow_Refresh"))

)

While the window starts off hidden (Visible == false) upon view render, it still loads the content on view render. While this is likely due to using an iframe (so that the window can internally navigate between the different Feedback steps), is there any way to prevent the initial content load until the first time the window is opened (similar to how the ajax window works)?

Window

answered on 06 May 2014

2 answers

98 views

What I'm doing wrong?

I'm trying to load from a kendo-template a window and here is my code. The windows goes empty.

@Html.Kendo().Window().Width(500).Height(275).Modal(true).Visible(false).Name("newPersonWin").Title("Añadir Estudiante")

<script>
function openWindow() {
var win = $("#newPersonWin").data("kendoWindow");
                $("#newPersonWin").data("kendoWindow").refresh({
                    content: {
                        template: $("#newPersonTemplate").html()
                    }
                });

                win.open().center();
}

</script>
<script id="newPersonTemplate" type="text/x-kendo-template">
    <div class="container" id="newPersonForm">
            <div class="form-group">

                <input class="k-textbox" id="ActivityPersonFirstName" name="ActivityPersonFirstName" placeholder="Nombre" required="required" style="text-transform:capitalize;" type="text" value="" />
                <input class="k-textbox" id="ActivityPersonInitName" name="ActivityPersonInitName" placeholder="Inicial" style="text-transform:capitalize;" type="text" value="" />
            </div>
            <div class="form-group">

                <input class="k-textbox" id="ActivityPersonLastName1" name="ActivityPersonLastName1" placeholder="Apellido P" required="required" style="text-transform:capitalize;" type="text" value="" />
                <input class="k-textbox" id="ActivityPersonLastName2" name="ActivityPersonLastName2" placeholder="Apellido M" required="required" style="text-transform:capitalize;" type="text" value="" />
            </div>
            <div class="form-group">

                <input class="k-textbox" id="ActivityPersonPhone1" name="ActivityPersonPhone1" placeholder="Telefono 1" required="required" type="text" value="" />
                <input class="k-textbox" id="ActivityPersonPhone2" name="ActivityPersonPhone2" placeholder="Telefono 2" type="text" value="" />
            </div>
            <div class="form-group">

                <input class="k-textbox" id="ActivityPersonSocSec" name="ActivityPersonSocSec" placeholder="Seguro Social" required="required" type="text" value="" />
            </div>
            <div class="form-group">

                <a id="btnSometer" onclick="someter()" class="k-button">Someter</a>
                <a id="btnCancelar" onclick="cancelar()" class="k-button">Cancelar</a>
            </div>
        </div>
</script>

Window

answered on 05 May 2014

2 answers

162 views

ImageBrowser - delete directory not working?

Our Editor, with ImageBrowser, code is like so:

$("#Html").kendoEditor({

encoded: false,

imageBrowser: {

schema: {

model: {

id: "EntFileId",

fields: {

name: "name",

type: "type",

size: "size",

EntFileId: "EntFileId"

}

},

transport: {

read: "@Url.Action("Index", "EditorImageBrowser", new { area = "" })",

destroy: {

url: "@Url.Action("Delete", "EditorImageBrowser", new { area = "" })",

type: "POST"

},

create: {

url: "@Url.Action("Create", "EditorImageBrowser", new { area = "" })",

type: "POST"

},

thumbnailUrl: function (path, name) {

var entFileId = "";

var data = $(".k-imagebrowser").data("kendoImageBrowser").dataSource.data();

$.each(data, function (key, obj) {

if (obj.name == decodeURI(name))

entFileId = obj.EntFileId;

});

var ext = name.substring(name.lastIndexOf("."));

var url = "@Model.BlobPath" + entFileId + "/thumb" + ext;

return url;

},

uploadUrl: "@Url.Action("Upload", "EditorImageBrowser", new { area = "" })",

imageUrl: function (name) {

//get only filename

if (name.indexOf('/') !== -1) {

name = name.substring((name.lastIndexOf("/") + 1));

}

var entFileId = "";

var data = $(".k-imagebrowser").data("kendoImageBrowser").dataSource.data();

$.each(data, function (key, obj) {

if (obj.name == decodeURI(name))

entFileId = obj.EntFileId;

});

var url = "@Model.BlobPath" + entFileId + "/" + name;

return url;

}

},

tools: [

"clear", "bold", "italic", "underline", "strikethrough", "justifyleft", "justifycenter", "justifyRight", "justifyFull",

"insertUnorderedList", "insertOrderedList", "indent", "outdent",

"createLink", "unlink", "insertImage", "createTable", "addColumnLeft", "addColumnRight", "addRowAbove", "addRowBelow", "deleteRow", "deleteColumn",

"viewHtml", "formatting", "fontName", "fontSize", "foreColor", "backColor"

]

});

Everything is working great, except when I click on a Directory in the ImageBrowser and click the Delete button. When I click the Delete button, the alert pops up asking if I want to delete the directory . When I click OK, the directory disappears from the ImageBrowser, but a call to the server is never made. No errors appear in the console of Developer Tools in Chrome 34 or IE11.

I should note that deleting individual images works fine. It's only deleting directories that doesn't currently work.

I notice that the demo on demos.telerik.com does work with deleting directories, so it has got to be a problem with our code. But what from my code above could be causing this issue? Why are no errors appearing in the console? Any tips, advice, or thoughts of possible things that could be wrong are appreciated. Thank you for your time.

Editor

answered on 05 May 2014

1 answer

320 views

Showing gallery in scroll view

I have the following that works fine to show a series of images I have stored on AWS using a list view

<div id="reports-detail-images-view" data-role="view" data-title="Report Images"

data-layout="back-layout" data-show="Schoofo.reportsDetailImagesView.show">

<div data-role="listview" data-source="Schoofo.reportsDetailImagesView.listData"

data-template="reports-detail-images-binding-template">

</div>

<script id="reports-detail-images-binding-template" type="text/x-kendo-template">

<img style="max-width: 100%; max-height: 100%;" src='https://schoofofile.s3.amazonaws.com/#: FileKey #'></div>

</script>

I am trying to get this working using the scroll view - thought it would be a simple case of changing the data-role to "scrollview" but I get nothing

What am I missing??

Many thanks in advance

ScrollView (Mobile)

answered on 05 May 2014

1 answer

112 views

Copy pasting the content or bulleted list from PDF

I am copy pasting the content or bulleted list from PDF. But its not working as expected and single paragraph displaying in more than 3 paragraphs sometimes. ie it is not displaying as it is in PDF.

Is there any attributes available in editor to resolve this?

Suresh.

Editor

answered on 05 May 2014

1 answer

102 views

Expand grid row to expose additional fields of same record

I understand how to create a grid with a detail template that displays *related* detail data, but I need to do something slightly different. The scenario is that I have a grid with a handful of fields displayed on the row, I would like to expand the row to show the rest of the fields in a "card view" under the expanded row. Since I already have the data in the grid, how can I achieve the desired result with the least amount of data retrieval from my controller (I am using MVC/Razor and the Kendo MVC wrappers) Any advice on the best way to do this would be appreciated. Thanks.

Grid

answered on 05 May 2014

4 answers

183 views

Wrong parsing of year when using named month

In the following code, the button is wired to parse the value of the datepicker when clicked. It works fine until I try to enter the name of the month e.g. 15 juli 2015 will be converted to 2014-07-15. This means that the month and year are parsed correctly, whilst the year is not. The culture in this case is set to NL, but this also fails when using en-US with the date value July 15 2015.

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/web/datepicker/index.html">

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />

<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.1.416/js/cultures/kendo.culture.nl-NL.min.js"></script>

</head>

<body>

<div id="example" class="k-content">

<div id="email-settings">

<div style="margin-top: -6px; margin-left: 180px">

<input id="datepicker" value="10/10/2011" style="width:150px;" />

</div>

<div><button onclick="alert(kendo.parseDate($('#datepicker').val()));">Test</button></div>

</div>

<script>

$(document).ready(function() {

kendo.culture("nl-NL");

// create DatePicker from input HTML element

$("#datepicker").kendoDatePicker();

$("#monthpicker").kendoDatePicker({

// defines the start view

start: "year",

// defines when the calendar should return date

depth: "year",

// display month and year in the input

format: "MMMM yyyy"

});

</script>

<style scoped>

#example h2 {

font-weight: normal;

}

#email-settings {

width: 395px;

margin: 30px auto;

padding: 110px 0 0 30px;

background: url('../../content/web/datepicker/mailSettings.png') transparent no-repeat 0 0;

}

</style>

</div>

</body>

</html>

DatePicker

answered on 05 May 2014

1 answer

156 views

Copy Bulleted list from word to Editor

Hi,

I am copying the bulleted list from word to editor. Also I have few more code to strip the html in the paste event of the editor.

paste: function (e) {

e.html = CleanWordHTML(e.html);

}

function CleanWordHTML(str) {

str = str.replace(/<br><br>/g, "");

str = str.replace(/<br> /g, " ");

str = str.replace(/<br>/g, " ");

str = str.replace(/<o:p>\s*<\/o:p>/g, "");

str = str.replace(/<o:p>.*?<\/o:p>/g, " ");

str = str.replace(/(<(?!\/)[^>]+>)+(<\/[^>]+>)+/gi, '');

str = str.replace(/<span[^>]*>[\s| ]*<\/span>/, '');

str = str.replace(/\s*class="MsoNormal"/gi, '');

str = str.replace(/<SPAN\s*[^>]*>\s* \s*<\/SPAN>/gi, '');

str = str.replace(/<SPAN\s*[^>]*><\/SPAN>/gi, '');

str = str.replace(/<span\s*[^>]*>\s* \s*<\/span>/gi, '');

str = str.replace(/<span\s*[^>]*><\/span>/gi, '');

str = str.replace(/\s*mso-[^:]+:[^;"]+;?/gi, "");

return str;

}

After pasting into the editor, when I see the source code, bulleted list is coming as paragraph instead of ul, li tag.

Is there anyway to convert word bulleted list to html bulleted list?

Suresh.

Editor

answered on 05 May 2014

1 answer

167 views

Expand Column not showing (MVC)

Trying to create a simple expand for details grid and the first column is not showing (the expand icon)

This is what I have on the view:

  <script id="upc_detail" type="text/x-kendo-template">

            @(Html.Kendo().Grid<PeriodicCheckWithLineage>()

                      .Name("upcgrid_#=Test_ID#")

                      .Columns(columns =>

                      {

                          columns.Bound(o => o.Date_Time).Title("Date/Time");

                          columns.Bound(o => o.IsND);

                          columns.Bound(o => o.IsSigShift);

                          columns.Bound(o => o.IsSigBias);

                      })

                      .DataSource(dataSource => dataSource

                          .Ajax()

                          .Read(read => read.Action("PeriodicDetail", "Review", new { TestID = "#=Test_ID#" }))

                      )

                      .ToClientTemplate())

        

        </script>



@(Html.Kendo().Grid<

TestLineage>(upc_test)

.Name("upcgrid")

.Columns(columns =>

{

columns.Bound(e => e.Lab_Name);

columns.Bound(e => e.Instrument_Name);

columns.Bound(e => e.Analyte_Name);

columns.Bound(e => e.Test_Name);

})

.ClientDetailTemplateId("upc_detail")

)

Chrome and IE show no JS errors. I have two other grids (no details or heirarchy) and they look fine. Not sure what I am doing wrong here.

Grid

answered on 05 May 2014

1 answer

100 views

changed symbol is disappeared when creating or deleting new row

hi,

i use grid on batch mode and i have a problem with the grid presentation when editing the grid.

The problem occurs when i create or remove another row while other fields are in changed mode and have the changed symbol (orange little triangle),
in this scenario, the symbol is disappeared from the rows that were changed, although the changes has not been saved! .

This problem exists also in the demo grid on:
http://demos.telerik.com/kendo-ui/web/grid/editing.html

To reproduce the problem:

1. Change one cell in the grid.
2. Move to other field and notice that the orange triangle appears.
3. Press on "Add new record" .
4. The orange symbol is disappeared !

can you advice how to solve the problem?

thanks,
Mali

Grid

answered on 05 May 2014