Questions on Kendo UI for jQuery Forum

3 answers

249 views

Hello Good afternon
I have a Grid in my application recently I added this property in style

.k-grid {
font-size: 10px;
}

but when Grid has only One Row dosen´t show me the text's row,
and if i removed .k-grid { font-size: 10px;} then Grid loaded correctly
can you tell me why happend that?

Grid

answered on 29 Oct 2013

7 answers

333 views

More events for panelbar

Hello,
I us e the kendo panelbar to substitute a custom component to generate an accordion.
I created in the code-behind a hierarchy of <ul> - <li> levels with a sequence of HtmlGenericControl objects;
I initialized in a js script the top ul HtmlGeneric Control with

$("#panelbar").kendopanelbar();

It worked fine, but unfortunately the old custom component has on every main item bar, the <li> item, another icon to trigger actions as expand and edit a general review for the item. See image below.
The whole is a panelbar, the dark blue lines are the <li> items, the icon on the left is the expand/collapse icon, the icon on the right allows clicking on it to trigger an action. The light blue part is the list of the various sub items.
So I would need to add an image in the main item and to have an event when I click this image, sort of superimpose a button with an image on the main item bar.
What could be a workaround using the kendopanelbar to reproduce this behavior ?

And further is it possible to port the kendo panelbar in mobile environment ?

Sorry for the vague thread topic, I wasn't able to find a proper definition
Thanks for your attention

best regards

Marco Furlan

PanelBar

answered on 29 Oct 2013

2 answers

209 views

[Solved] Read custom bound update data in controller

Hello,

I am using the Kendo UI Grid control with the following key features activated:

Custom Toolbar
Batch Editing

I would like to get a string from a textbox in the custom toolbar when the user saves the changes made in grid. Here my code:

@(Html.Kendo().Grid(Model.TrackAndTraceTypeList)

.Name("Grid")

.Columns(columns =>

{

columns.Bound(item => item.CustomerLevel).Title("Customer<br/>Level").Width(80);

columns.Bound(item => item.TrackAndTraceTypeId).Title("T&T<br/>Type Id").Width(80);

columns.Bound(item => item.TrackAndTraceTypeName).Title("T&T Type<br/>Name");

columns.Bound(item => item.Level).Title("Level").Width(60);

columns.Bound(item => item.Description).Title("Description");

columns.Bound(item => item.MTC).Title("MTC").Width(60);

columns.Bound(item => item.Failure).Title("Failure").Width(80);

columns.Bound(item => item.Success).Title("Success").Width(80);

columns.Bound(item => item.Multiple).Title("Multiple").Width(80);

columns.Bound(item => item.Photo).Title("Photo").Width(60);;

columns.Bound(item => item.MessageTypeId).Title("Msg<br/>Type Id").Width(80);

})

.ToolBar(toolbar =>

{

toolbar.Template(@<text>

<div class="k-toolbar k-grid-toolbar k-grid-top">

<table style="width:400px">

<tr>

<td>

<a class="k-button k-button-icontext k-grid-save-changes" href="javascript:void(0)">

<span class="k-icon k-update"></span>Save changes

</a>

<a class="k-button k-button-icontext k-grid-cancel-changes" href="javascript:void(0)">

<span class="k-icon k-cancel"></span>Cancel changes

</a>

</td>

<td>

<label class="category-label" for="category">Version No:

<input id="txtVersionNumber" type="text" style="width: 80px" />

</label>

</td>

</tr>

</table>

</div>

</text>);

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Groupable()

.Pageable(page => page.PageSizes(new int[] { 10, 20, 30, 50 }))

.Sortable()

.Filterable()

.Selectable(s => s.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Events(events => events.Error("error_handler"))

.Model(model => {

model.Id(ttt => ttt.TrackAndTraceTypeId);

model.Field(ttt => ttt.TrackAndTraceTypeId).Editable(false);

model.Field(ttt => ttt.TrackAndTraceTypeName).Editable(false);

model.Field(ttt => ttt.CustomerLevel).Editable(false);

model.Field(ttt => ttt.Level).Editable(false);

model.Field(ttt => ttt.MessageTypeId).Editable(false);

})

.PageSize(20)

.Read(read => read.Action("TrackAndTrace_Read", "Customers"))

.Update(update => update

.Action("TrackAndTrace_Update", "Customers")

.Data("versionNumber"))

)

.Resizable(resize => resize.Columns(true))

)

</div>

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

function versionNumber(){

return {version: $("#txtVersionNumber").val()};

}

</script>

And my Controller look like this:

public ActionResult TrackAndTrace_Read([DataSourceRequest] DataSourceRequest request)

{

// Get the customer Id from the URL

int customerIdValue = 0;

if (Request.UrlReferrer.Segments.Length > 1)

{

string customerId = Request.UrlReferrer.Segments[Request.UrlReferrer.Segments.Length - 1];

int.TryParse(customerId, out customerIdValue);

}

var data = GetCustomerTrackAndTraceTypeDetails(customerIdValue, request.Page).TrackAndTraceTypeList.AsEnumerable();

return Json(data.ToDataSourceResult(request));

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult TrackAndTrace_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<CustomerTrackAndTraceType> trackAndTraceTypes)

{

if (trackAndTraceTypes != null && ModelState.IsValid)

{

int customerIdValue = 0;

if (Request.UrlReferrer.Segments.Length > 1)

{

string customerId = Request.UrlReferrer.Segments[Request.UrlReferrer.Segments.Length - 1];

int.TryParse(customerId, out customerIdValue);

}

Customer currentCustomer = db.Customers.Find(customerIdValue);

foreach (var tttItem in trackAndTraceTypes)

{

// Save the Track And Trace Type Updates

db.AddCustomerTrackAndTraceTypeLink(tttItem.TrackAndTraceTypeId,

tttItem.CustomerId,

tttItem.Description,

tttItem.MTC,

tttItem.Failure,

tttItem.Multiple,

tttItem.Success,

tttItem.Photo,

User.Identity.Name); // record who made the change

// Update the customer level for the Grid

tttItem.CustomerLevel = currentCustomer.Name;

}

return Json(trackAndTraceTypes.ToDataSourceResult(request, ModelState));

}

To summarize, I need to pass the data in the txtVersionNumber into the db.AddCustomerTrackAndTraceTypeLink() method.

Thanks in advance,
Paul

Grid

answered on 29 Oct 2013

7 answers

727 views

Index must be within the bounds of the List

Here is what I've got:

Controller:

public ActionResult TestIndex()
{
var model = new Zeus.Models.SiteModels();
Models.Site[] sites = model.List(50, 1);

return View(sites.ToList());
}

View:

@model IEnumerable<Zeus.Models.Site>
@{
ViewBag.Title = "TestIndex";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>TestIndex</h2>

@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Name).Groupable(false);
columns.Bound(p => p.Address1);
columns.Bound(p => p.CityName);
columns.Bound(p => p.OwnerGroupName);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
)

I get an error:

[ArgumentOutOfRangeException: Index must be within the bounds of the List.<br>Parameter name: index]<br> System.ThrowHelper.ThrowArgumentOutOfRangeException(ExceptionArgument argument, ExceptionResource resource) +64<br> System.Collections.ObjectModel.Collection`1.Insert(Int32 index, T item) +9573490<br> Kendo.Mvc.UI.Grid`1.WriteHtml(HtmlTextWriter writer) +365<br> Kendo.Mvc.UI.WidgetBase.ToHtmlString() +86<br> Kendo.Mvc.UI.Fluent.WidgetBuilderBase`2.ToHtmlString() +22

Any idea why?

Grid

answered on 29 Oct 2013

3 answers

382 views

[Solved] How to insert single characters (or string) in editor.

Hi,

I need to insert single characters programmatically into an editor (use case symbol selector for special characters).

Using the insertHTML API I can insert the right character, but the character/string is inserted outside the existing text-span's in the editor.
Same result when using the 'paste' API.

Since the character is *not* inserted inside the span of the existing text, it will be using the default formatting, and not the formatting of the text next to it.

Example: "ABC" is entered into the editor, the font-size is set to a non-default size. If a character is inserted using insertHTML or paste after the "ABC", it will be using the default font-size, not the size of the text next to it.

Is there a way to insert a character or string into the current text-span so formatting can be preserved ?

Thanks.

Editor

answered on 28 Oct 2013

1 answer

77 views

Remote view causes unpredictable form/DOM behavior.

I have attached a simple test app to replicate this behavior.
There are 2 pages, the main index.html page, and a remote list.html page.
On the index page there is a textbox into which you can enter any input. When you click the login button the value of that input is read and echoed to the console, as well as appended to the URL for the remote view.

So if you enter 'bilbo' the URL for the remote view will be ".../list.html?val=bilbo'".

If you hit the cancel button on the list page you go back to the index page. Now the interesting part. If you enter another value in the text box and click login, it will always read 'bilbo' from the text box.

What I have noticed:
if the cancel button on the list page invokes app.navigate("#:back") or you use the back button everything works.
if you invoke app.navigate("index.html") or app.navigate("vIndex") then we get the same 'locked in' behavior.

Now, in this example it's great that the "#:back" function works. But in my actual app I have multiple remote views and I can't transition between them to capture new input. Once the value is set the first time it's locked in.

General Discussions

answered on 28 Oct 2013

15 answers

1.5K+ views

Implementing Image Browser for editor

Hi there

I am trying to implement Image Browser for Kendo Editor using the example here : http://demos.kendoui.com/web/editor/imagebrowser.html

My controller class :

public class ImageBrowserController : EditorImageBrowserController

{

private const string contentFolderRoot = "~/Content/";

private const string prettyName = "Images/";

private static readonly string[] foldersToCopy = new[] { "~/uploads/newsitem/" };

/// <summary>

/// Gets the base paths from which content will be served.

/// </summary>

public override string ContentPath

{

get

{

return CreateUserFolder();

}

private string CreateUserFolder()

{

var virtualPath = Path.Combine(contentFolderRoot, "UserFiles", prettyName);

var path = Server.MapPath(virtualPath);

if (!Directory.Exists(path))

{

Directory.CreateDirectory(path);

foreach (var sourceFolder in foldersToCopy)

{

CopyFolder(Server.MapPath(sourceFolder), path);

}

return virtualPath;

}

private void CopyFolder(string source, string destination)

{

if (!Directory.Exists(destination))

{

Directory.CreateDirectory(destination);

}

foreach (var file in Directory.EnumerateFiles(source))

{

var dest = Path.Combine(destination, Path.GetFileName(file));

System.IO.File.Copy(file, dest);

}

foreach (var folder in Directory.EnumerateDirectories(source))

{

var dest = Path.Combine(destination, Path.GetFileName(folder));

CopyFolder(folder, dest);

}

My js code

$("#Content").kendoEditor({

encoded: false,

imageBrowser: {

messages: {

dropFilesHere: "Drop files here"

},

transport: {

read: "/console/ImageBrowser/Read",

destroy: {

url: "/console/ImageBrowser/Destroy",

type: "POST"

},

create: {

url: "/console/ImageBrowser/Create",

type: "POST"

},

thumbnailUrl: "/console/ImageBrowser/Thumbnail",

uploadUrl: "/console/ImageBrowser/Upload",

imageUrl: "/console/ImageBrowser/Image?path={0}"

}

},

tools: [

"bold",

"italic",

"underline",

"strikethrough",

"fontSize",

"foreColor",

"backColor",

"justifyLeft",

"justifyCenter",

"justifyRight",

"justifyFull",

"createLink",

"unlink",

"insertImage",

"style",

"viewHtml"

],

style: [

{ text: "Highlight Error", value: "hlError" },

{ text: "Highlight OK", value: "hlOK" },

{ text: "Inline Code", value: "inlineCode" }

],

stylesheets: [

"../../content/web/editor/editorStyles.css"

]

});

My image folder is : /uploads/newsitem and the code generates a folder /content/userfiles/images and this folder does have write permission.

When any actions are invoked on EditorImageBrowserController they are 404'ed. I've attached a screen shot to show what is going on.

Any help would be greatly appreciated.

Editor

answered on 28 Oct 2013

3 answers

127 views

[Solved] Custom Icons

Hi Telerik support team
I am using custom icons for listview but those don't work fine using the documentation guidelines
I Attached the project for your review.

Thanks in advance and I am aware for your help.

Regards.

Diego Varela

ListView (Mobile)

answered on 28 Oct 2013

1 answer

189 views

[Solved] Callback function or parameter for each treeview item

Hi everyone!

I'm having a problem with treeview - I need to set a callback function (or an individual parameter to a common function, which would be even better) for the click event on each treeview leaf element (or all elements regardless whether they be leaf or non-leaf node). Imagine it as a structured menu for javascript functions (not http links).

I'm now using a very unelegant and unnice workaround with javascript: link in dataUrlField. I'v been reading through this forum, SO and whatever google threw at me but could not find any single mention about callbacks in the treeview other than dataUrlField and the select event, use of which I find as unfeasible as the first possibility I mentioned.

Thank you very much for ideas and suggestions.

Pavel

TreeView

answered on 28 Oct 2013

3 answers

1.5K+ views

Hide header row?

I have two grids on top of one another, showing different data but using the same column layout. Don't ask why; it's a market research thing.

To save space, I really don't need the header row for the second grid, since it aligns with the header columns for the first grid.

How to get rid of header row for the second grid and use that saved space for data rows?

I've tried this, but it leaves a gap at the bottom of the grid instead of distributing the saved space to the rest of the grid.

#cntr-bnch .k-grid-header {

display : none;

}

Grid

answered on 28 Oct 2013