Questions on Kendo UI for jQuery Forum

1 answer

169 views

Lost intellisense after updating MVC via nuget

I am using Visual Studio 2012, and Kendo 2013.3.1324. I created a new Kendo UI MVC 4 (Razor) project. Then I updated all nuget packages, including MVC/Razor/Webpages.

After doing this, I lost intellisense on HTML helpers in general. I then applied the Web Tools 2013.1 for VS 2012 as found http://blogs.msdn.com/b/webdev/archive/2013/11/18/announcing-release-of-asp-net-and-web-tools-2013-1-for-visual-studio-2012.aspx. This fixed the intellisense on HTML helpers with the exception of the Kendo helpers.

The Kendo code works, but I cannot get intellisense for anything related to Kendo. I verified that the namespace tag was in both web.config files, and I updated the referrenced Kendo dll to use the MVC 5 based dll.

Is there any other way to get the intellisense working again?

General Discussions

answered on 28 Feb 2014

2 answers

459 views

Immediately Show and Not Hide ToolTip

when a user changes the value in a text box, it is validated and if it fails validation, I want to border the text box with red and show a tooltip that does not go away until the user changes the value

Here's the change event code:

$(document).on("change", "input.Percentage", function () {

var grid = $("#grid-pct").data("kendoGrid");

var row = $(this).closest('tr');

var dataItem = grid.dataItem(row);

var rawVal = $(this).val();

if (rawVal >= 0 && rawVal <= 100) {

var data = {

Id: dataItem.id,

Percentage: rawVal,

Username: dataItem.Username,

UpdateDate: dataItem.UpdateDate

};

} else {

$(this).kendoTooltip({ autoHide: false, content: 'value can only be between 0 and 100' });

$(this).css('border-color', '#f00');

}

});

Thanks,
--Ed

ToolTip

answered on 28 Feb 2014

1 answer

218 views

Line break in notes

Is there a way to insert a line break in the notes?

Here is my series

series.Line(model => model.ThisYear, model => model.ThisYearNote)
.Name("This Year")
.Axis("demand").Color("orange")
.Notes(note => note
.Position(ChartNotePosition.Top)
.Label(label => label
.Position(ChartNoteLabelPosition.Outside).Padding(7)
.Background("rgba(255,255,255,.7)")
.Border(border => border.Color("orange").Width(2).DashType(ChartDashType.Solid))))
.Tooltip(tooltip => tooltip.Visible(true).Color("white"));

The note may have more than one element, and I would like to have a line break for each element, I can't seem to get it working.

Charts

answered on 28 Feb 2014

4 answers

165 views

PullParameters function along with Pull To Refresh

Hello,



I'm trying to have my ListView working with Pull To Refresh. Nevertheless, I can't have the listview refresehd.



basically, when a user trigger pull to refresh, it should replace the whole content of the list view.



Here is how I have handled my list view and the pull to refresh:





$.when( Event.getEventsNearby( position.coords.latitude, position.coords.longitude, radius, limit, offset, key ) ).done(

function( response )

{

var dataToBeCached = new Array();

//In order not to cache the same results twice

var previousContent;

if( response.containsResults )

{

var results = response.results;

//On chope le nombre de resultats. Si !=limit, il y a de grandes chances qu'il n'y ai plus de resultats par la suite.

// resultLength = data.length;

// //On progresse dans les resultats

// //Et on adapte offset et limit

// offset += resultLength;

// limit = offset + 20 ;

//Merge the previous content with the new one

// previousContent = JSON.parse( getItem("contentEvent") );

// if ( previousContent != null )

// {

// var dataToBeCached = dataToBeCached.concat(previousContent);

// };

//Remove previous markers

Map.clearMarkers();

// Add Markers on the map

Map.setMarkerPosition( position.coords.latitude, position.coords.longitude, "grey" );

for ( var i=0; i<results.length; i++ )

{

Map.setMarkerPosition( results[i].lat, results[i].lng, "green");

results[i]["index"] = i;

}

setItem("events", JSON.stringify( results ), 1);

var template = Handlebars.compile( $( '#eventListTemplate' ).html() );

$("#list-container").kendoMobileListView({

template : template,

dataSource: kendo.data.DataSource.create(results),

fixedHeaders: false,

pullToRefresh: true,

pullParameters: function(item) {

console.log("pull");

//Here, another AJAX call to get the new results

$.when( Event.getEventsNearby( position.coords.latitude, position.coords.longitude, radius, limit, offset, key ) ).done(

function( response )

{

console.log("when");

//I can see I'm getting my results properly here.

console.log(response.results);

//Doesn't work ...

return response.results;

});

}

});

//We remove those fucking classes added by default with Kendo UI

// $("#list-container").removeClass("km-widget km-listview km-list");

// $(".post-actions [data-role='button']").removeClass("km-widget km-button");

$( document ).trigger( "wallReady" );

//Retrieve the different user conversations:

updateListOfChats();

}

});

What should I put into the pullParameters function to make it work ? Thanks.

ListView (Mobile)

answered on 28 Feb 2014

6 answers

1.5K+ views

Tabbing with tabindex attribute in Grid

Is there a way to enable tabbing with html attribute tabIndex on Grid paging controls (highlighted on the picture)?
The thing is that those elements (previous/next page, last/first page and page numbers) have tabIndex attribute explicitly set to -1.
Is there a way to change this behavior via API and what is the reason of specifying tabIndex in such a way that controls are excluded from tabbing sequence?

Grid

answered on 28 Feb 2014

5 answers

615 views

'Complex' DataSource model validation

Hello,



I am building a grid with a complex datatype. Example below.



I am trying to do some custom validation, but it is not working. It doesn't even seem like it is hitting it.



If I do it on the 'LegacyID' field, which is the only not 'complex' field, it works perfectly fine.



Am I missing something? Doing something wrong?





schema: {

model: {

id: 'LegacyID',

fields: {

LegacyID:{type:'number', editable:false},

Clean:{

ID: { type: 'number' },

JobID: { type: 'number' },

ProcessFlag: { type: 'string' },

OverallStatus: { type: 'string' },

LastRecordUpdater: { type: 'string' },

LastUpdatedDateTime: { type: 'date' },

CleansingComments: { type: 'string' },

MaterialNumber: {

type: 'string',

validation: {

custom: function (input) {

console.log(input);

if (input.val().length > 18) {

input.attr("data-maxlength-msg", "SAP Material Number cannot exceed 18 characters.");

return false;

}

return true;

}

},

MaterialBaseNumber: { type: 'string' }

}

},

Grid

answered on 28 Feb 2014

1 answer

164 views

[Solved] Grid - Support of Resizable and Non Resizable Columns

When we have a Grid with Resizable Columns we may need some of them to be non-resizable (ex. a column containing only status icons).
There are work around and customizations:

Column Resize - Min Width on Resize
http://www.telerik.com/forums/column-resize---min-width-on-resize

but I believe it will be more handy to define requested behavior as a property of the specific column (ex. in row template).

Also, for non resizable columns the user should not even take a resize handle when going on a non resizable column boundary instead of try to resize and when the user leaves the resize handle the column is bouncing back (restoring) the minimum width defined.

Regards,

Thomas

Grid

answered on 28 Feb 2014

2 answers

203 views

[Solved] CRUD operations clearing sorts and filters

Hi,

Currently, my grid clears any and all sort/filters applied to the grid after I perform any CRUD operation. I don't want to do that.
Can someone help?

I know that my ActionResult's return is not correct. I just don't know what should be there.

Here's my Controller

public class ItTasksController : Controller

{

private ITaskRepository _repository;

public ItTasksController() : this(new TaskRepository()){

}

public ItTasksController (ITaskRepository repository){

_repository = repository;

}

//

// GET: /ItTasks/

public ActionResult Tasks()

{

ViewBag.Message = "IT Dev Tasks";

ViewBag.Link = "Tasks";

var itTasks = new ItTasksDataContext().tnTasks;

return View(itTasks);

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Create([DataSourceRequest] DataSourceRequest request, TaskModel task)

{

if (ModelState.IsValid)

{

_repository.InsertTask(task);

}

return RedirectToAction("Tasks");

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Read()

{

return RedirectToAction("Tasks");

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Update([DataSourceRequest] DataSourceRequest request, TaskModel task)

{

if (ModelState.IsValid)

{

_repository.UpdateTask(task);

}

return RedirectToAction("Tasks");

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Destroy([DataSourceRequest] DataSourceRequest request, int taskID)

{

if (ModelState.IsValid)

{

_repository.DeleteTask(taskID);

}

return RedirectToAction("Tasks");

}

Grid

answered on 28 Feb 2014

3 answers

168 views

[Solved] I can't place input text to left inside a listview

Hi...

I need to place an input text/search field to left and button to right inside a listview. Button is ok, but i can't place the input text/search to left.

please advise me...

Here is my example:

http://jsbin.com/toxuyate/1/edit

<!DOCTYPE html>

<html>

<head>

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

<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />

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

<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

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

<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

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

<meta charset=utf-8 />

<title>JS Bin</title>

</head>

<body>

<div data-role="view" data-use-native-scrolling="true" id="search_products" data-title="Catalog" data-layout="mobile-tabstrip">

<ul data-role="listview" data-type="group">

<li>

Search

<ul>

<li><input id="txtSearch" autocomplete = "on" autofocus = "autofocus" type="search" value="123192831029831028931092831092831092381092831023" />

<a style="float:right" data-role="button" class="km-button" data-align="right" data-icon="search" onclick="searchProductName(document.getElementById('txtSearch').value);"></a>

</li>

</ul>

<ul id="listview" class="inboxList"></ul>

</li>

</ul>

</div>

<div data-role="layout" data-id="mobile-tabstrip">

<header data-role="header">

<div data-role="navbar">

<a data-align="left" data-role="backbutton" class="nav-button">Catalog</a>

<span data-role="view-title"></span>

</div>

</header>

<div data-role="footer">

<div data-role="tabstrip" id="myTabStrip">

<a href="#tabstrip-home" data-icon="recents">Catalog</a>

</div>

<script>

var app = new kendo.mobile.Application($(document.body), {

platform: "ios",

transition: "slide",

hideAddressBar: true,

serverNavigation: false,

loading: ""

});

</script>

</body>

</html>

General Discussions

answered on 28 Feb 2014

4 answers

296 views

Create action and event Issue

Hi Guys, I found a wierd behavior on my grid:

@(Html.Kendo().Grid<MyEntity>(Model)

.Name("valueGrid")

.ToolBar(commands => commands.Create().Text("Add new value"))

.Columns(columns =>

{

columns.Bound(c => c.DOMAINID).Visible(false);

columns.Bound(c => c.CODE);

columns.Bound(c => c.VALUE);

columns.Command(command => { command.Edit().UpdateText("Save"); command.Destroy().Text("Delete"); });

})

//.Events(e => e.SaveChanges("OnSaveChanges"))

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Model(m => m.Id(v => v.DOMAINID))

.Update(update => update.Action("UpdateValue", "DomainValue"))

.Create(create => create.Action("CreateValue", "DomainValue"))

.Destroy(delete => delete.Action("DeleteValue", "DomainValue"))

)

If I enable my Event, once I click on add Button, the whole page is raplaced by the result of the action/controller in the href of the anchor
say "/DomainValue/Details/2?valueGrid-mode=insert" (that would be the grid itself)

While if I disable the event, I get my inline add with no issue....

Am I doing somthing wrong??
I need the event because I somehow need to have the hidden value (DOMAINID) set to the same of the other lines. The problem is that my grid change based on another control; pratically this grid displays the values of some domain tables; so the Id Have to be fixed and it cannot be fixed as a default value in the model scheme.

thanks
Fabio

Grid

answered on 28 Feb 2014