Questions on Kendo UI for jQuery Forum

2 answers

180 views

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

126 views

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

256 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

1 answer

136 views

DateTimePicker inside UpdatePanel doesn't work

Hi,
my question is, i have a kendo DateTimePicker inside Usercontrol. I call that user control and everything looks fine but if i place that Usercontrol inside UpdatePanel the styles are not loaded and the DatePicker doesn't work

Any solution please,
Bruno F.

Data Source

answered on 28 Feb 2014

1 answer

91 views

How to get tooltip on all "dirty" red triangles?

When I am editing and a form element is marked as dirty (k-dirty) and the little red triangle shows up, how can I always have a tooltip associated with that red triangle?
I currently have text boxes in a grid (using a client template) and attach to the change event and mark the dataItem as dirty and prepend the k-dirty span. I want to have the tooltip show on hover of the dirty indicator (the little red triangle).
Thanks,
--Ed

ToolTip

answered on 28 Feb 2014

1 answer

96 views

Native scrolling Issue on Android 4.3

Hi,

My problem is only on Android. I've a View with native scrolling enabled. Inside this view i have a listview with anchors. When i touch the screen to scroll the list with my fingers, Kendo understand my movement as a clic. how can i fix it? This problem is under Android. iPhone and Windows Phone works ok.

please advise.

thanks

General Discussions

answered on 28 Feb 2014

1 answer

157 views

Sparkline Width Issues - Date Axis

I'm setting the datasource of the sparkline to a json result which has 365 days of data. I plan to use the sparkline to aggregate the data and plot a smaller subset of data points as 365 is not something you'd want to plot in a small area. I set the baseUnit of the date categoryAxis to months so it will plot 12 points, which it does, but the width is out of control... it spans way beyond the confines of my plot area.

I think the problem lies with the width algorithm of sparklines when using baseUnits/aggregate w/ a date category axis. Even though we are only plotting 12 points, the sparkline behaves as if it is plotting 365. Documentation states that, "The width of line, area and column sparklines is determined by the number of data points". Help me understand this... other charts are responsive yet the sparkline is not? The sparkline is not taking the final number of datapoints after baseUnits/aggregates are applied with the date axis.

$("#sparkQtyVehicles").kendoSparkline({

series: [{

name: "QtyVehicles",

aggregate: "avg",

type: "column",

field: "QtyVehicles"

}],

categoryAxis: {

type: "date",

baseUnit: "months",

field: "Date"

},

tooltip: {

visible: true,

shared: false,

template: $('#sparkQtyVehiclesTemplate').html()

},

theme: "bootstrap"

});

Sparkline

answered on 28 Feb 2014

3 answers

129 views

ListView with comment and >

I have an issue with the ListView where having a comment in between the <li> and <a> tags causes the > not to show up. For example:

<li>

<a>Foo</a>

</li>

<li>

<a>Foo</a>

</li>

It seems like in the 2nd case, the comment should be ignored and the > character should still appear for the list item.

ListView (Mobile)

answered on 28 Feb 2014

10 answers

1.7K+ views

Best way to Clean HTML / Clear Formatting ?

When pasting from Word into the editor there is a lot of extra formatting styles that don't get automatically cleaned e.g.

<p style="text-align:justify;"></p>

<ul style="margin-top:0cm;" type="disc">

<li style="text-align:justify;tab-stops:list 36.0pt;"><span lang="EN-GB" style="font-family:'Arial','sans-serif';">

Also depending on the jQuery code used in the page you can get Sizzle attributes left in the saved html e.g.

<ul sizcache07677761204452295="38 16 10" sizset="false"><li sizcache07677761204452295="38 16 10" sizset="false" value="0">

What is the best way to clean this HTML on paste / during editing (clear formatting tool) / on save ?

We want to save just the structural formatting (H1-6/UL/OL/LI/STRONG/EM/A/IMG) with no styling (having removed the font/size/colour tools)

Thanks

Editor

answered on 28 Feb 2014

1 answer

465 views

How to access html elements generated from kendo ui list view using jquery

I am working with Kendo UI Asp.Net wrapper.
I have implemented a ListView and it is working.
I need to set the width of ListView items(li inside ul) dynamically using jquery by class name

var col_width = jQuery('#test_col').outerWidth();

// set product width
jQuery(".products .product").css('width', col_width - 0.1);

But it is not working. I have checked the page source from my browser. But I couldn't find any HTML generated for ListView control, only javascript and data.
how can I access these li elements which I have defined in my template using jquery.

<h2 class="font2">Most Popular</h2>
<ul id="MostPopular" class="products products_scroll row">

</ul>
</p>

<script type="text/x-kendo-tmpl" id="template1">

<li class="product ">
<div class="inside">
<div class="image_wrapper">
<div class="image">
<a href="/home/subcategory?CategoryUrlKey=0&SubCategoryUrlKey=0&SubCategoryUrlKey=0"><img src=" #:ThumbImage#" class="product-retina first" data-image2x="#:LargeImage#" alt="Slate Blue Printed Saree"><img class="second" src="#:MouseOverImage#" alt=" slate blue printed saree" /></a>
</div>
</div>
<div class="text_wrapper">
<div class="sort_price">790.0000</div>
<div class="price-box">
<span class="regular-price" id="product-price-11417">
<span class="price">£#:kendo.toString(Price, "c")#</span>
</span>
</div>
<div>SKU : #:ProductID#</div>
<div class="info font5"><a href="https://www.jtplaza.com/best-sellers/slate-blue-printed-saree.html" title="Slate Blue Printed Saree">Slate Blue Printed Saree</a></div>
</div>
</div>
</li> 

</script>

<ul id="MostPopular"></ul><script>
jQuery(function(){jQuery("#MostPopular").kendoListView({"dataSource":{"transport":{"prefix":"","read":{"url":"/Home/Products_Read"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"ProductID":{"type":"number"},"ProductName":{"type":"string"},"ThumbImage":{"type":"string"},"MouseOverImage":{"type":"string"},"LargeImage":{"type":"string"},"Price":{"type":"number"}}}},"data":{"Data":[{"ProductID":30313,"ProductName":"Patiala Suits","Price":15.000,"MouseOverImage":"http://www.rupalionline.com/images/Thumb/30313_01.jpg","ThumbImage":"http://www.rupalionline.com/images/Normal/Salwar-Patiala-Suits-Womens-Wear-30313_01.jpg","LargeImage":"http://www.rupalionline.com/images/Large/30313_01.jpg"},{"ProductID":30426,"ProductName":"Salwar Suits","Price":12.500,"MouseOverImage":"http://www.rupalionline.com/images/Thumb/30426_01.jpg","ThumbImage":"http://www.rupalionline.com/images/Normal/salwar-patiala-suits-womens-wear-30426_01.jpg","LargeImage":"http://www.rupalionline.com/images/Large/salwar-patiala-suits-womens-wear-30426_01.jpg"},{"ProductID":30624,"ProductName":"Salwar Suits","Price":19.000,"MouseOverImage":"http://www.rupalionline.com/images/Thumb/30624_01.jpg","ThumbImage":"http://www.rupalionline.com/images/Normal/salwar-suits-womens-wear-30624_01.jpg","LargeImage":"http://www.rupalionline.com/images/Large/salwar-suits-womens-wear-30624_01.jpg"},{"ProductID":30628,"ProductName":"Salwar Suits","Price":15.000,"MouseOverImage":"http://www.rupalionline.com/images/Thumb/30628_01.jpg","ThumbImage":"http://www.rupalionline.com/images/Normal/salwar-suits-womens-wear-30628_01.jpg","LargeImage":"http://www.rupalionline.com/images/Large/salwar-suits-womens-wear-30628_01.jpg"},{"ProductID":30633,"ProductName":"Salwar Suits","Price":18.000,"MouseOverImage":"http://www.rupalionline.com/images/Thumb/30633_01.jpg","ThumbImage":"http://www.rupalionline.com/images/Normal/salwar-suits-womens-wear-30633_01.jpg","LargeImage":"http://www.rupalionline.com/images/Large/salwar-suits-womens-wear-30633_01.jpg"},{"ProductID":30635,"ProductName":"Salwar Suits","Price":12.500,"MouseOverImage":"http://www.rupalionline.com/images/Thumb/30635_01.jpg","ThumbImage":"http://www.rupalionline.com/images/Normal/salwar-suits-womens-wear-30635_01.jpg","LargeImage":"http://www.rupalionline.com/images/Large/salwar-suits-womens-wear-30635_01.jpg"}],"Total":6}},"template":kendo.template($('#template1').html())});});
</script>

ListView

answered on 28 Feb 2014