Questions on Kendo UI for jQuery Forum

4 answers

213 views

requestEnd - e.response does not return the raw remote service response.

Hi, when I use e.response the object contains a whole lot of information that was not returned from the server.
How do I access just the raw remote service response?
Regards
Andrew

Data Source

answered on 26 Apr 2013

3 answers

183 views

requestEnd fires only once?

My Data Source is set up to read JSON from my server for a Grid with scrollable.virtual = true.

I would like to access the data being returned from the server each time the Data Source makes a request and gets more data as the Grid is being scrolled. I think requestEnd is the event I should be using for this.

However, the requestEnd event seems to fires only once the first time the Grid loads. When the Grid is scrolled down, subsequent requests are made to the server, data is returned and displayed however requestEnd is not fired again. Is this expected?

Kenny

Data Source

answered on 26 Apr 2013

3 answers

184 views

Load html content of an external file onto ScrollView

Hi,

Is there a way to load a content of an external file onto a ScrollView?

Suppose I have a file named data.html with the following content:

data.html
<b>
This is a sample text in data.html
</b>

Then I have a kendoUI page like this:

<!DOCTYPE html>
<html>
<head>
<title></title>

<link href="css/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="css/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="css/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="css/TON/generic.css" rel="stylesheet" type="text/css" />

<script src="cordova-2.5.0.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.mobile.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>

<body>

<div data-role="view" id="pregnancyarticledetails" data-layout="default" data-title="Shocker" data-init="mobileListViewDataBindInitFlat">

<div id="article_content">
<div style="height:5px;"> </div>
<div id="pregnancy_detail" data-role="scroller" class="scroller-content"></div>
<div style="height:76px;"> </div>
</div>
</div>

<script>
$("#pregnancy_detail").load("data.html");
</script>

</body>
</html>

The ScrollView seems to be empty. Has anyone done something like this? Any ideas you can share please? Thanks!

Antonio

ScrollView (Mobile)

answered on 26 Apr 2013

2 answers

98 views

kendoNumericTextBox+editor not sending save event in IE10

Dear Kendo Team,
I have an issue with a grid in editable mode (incell), selectable row and navigatable.
A column is set as number, so when the grid is in edit mode, a kendoNumericTextBox is shown.
When i navigate into the cell, with the tab key, the other cells (not numeric) throw the save event binding to the grid.
All works fine in chrome, but in IE10, the event is not thrown....and the value is not updated. Only the "enter" key throws the save event for this kind of cell (=>kendoNumericTextBox)
Could you provide a solution for this issue?
Thanks in advance

Grid

answered on 26 Apr 2013

1 answer

204 views

Master page example for asp.net MVC

Hello,

I wanted to develop application using kendo mobile ui in Asp.net MVC 3. In my application for all view couple of things are common like footer.

I want same footer in all pages . Right now I am writing below code in all my view. I don't wont to write below code in all my view.

<footer data-role="footer">
<div data-role="tabstrip">
<a href="#home" data-icon="home">Home</a>
<a href="#products" data-icon="info">Products</a>
<a href="#settings" data-icon="cart">Cart</a>
<a href="#contact" data-icon="contacts">Contact</a>
</div>
</footer>

Is there any way to achieve this thing? Can any one please send me sample code for this?

Thanks

General Discussions

answered on 26 Apr 2013

4 answers

3.8K+ views

Explanation of data-role attribute

I keep coming across usage of the data-role attribute, but I can't find any documentation that explains what it is for and how to use it. Can you help?

MVVM

answered on 25 Apr 2013

2 answers

156 views

Grid command buttons issue.

Here's the scenario, I have a grid (i'm using MVC wrapper to create it, but the problem is on the client so this forum should be ok...), the grid is setup for editing in popup mode. On the databound event, I have some script that alters the buttons to use my own icons rather than the default and it removes any text in the buttons as well.

This is made necessary since there is no way to customize the button's html.

Here's the script that runs on the databound event:

function updateGridButtons() {

$(".k-grid-Details")

.each(function () { styleGridButton(this, "View Details", "e-icon-viewDetails"); });

$(".k-grid-edit")

.each(function () { styleGridButton(this, "Edit", "e-icon-customEdit"); });

$(".k-grid-delete")

.each(function () { styleGridButton(this, "Delete", "e-icon-customDelete"); });

}

function styleGridButton(button, title, icon) {

$(button)

.removeClass("k-button-icontext")

.addClass("k-button-icon")

.attr("title", title)

.html("<span class=\"k-icon " + icon + "\"></span>");

}

The above script works great, it displays exactly like i want it to. The details button is a custom button, while the edit and delete are the default output of the MVC wrapper for those commands. The problem starts when I complete an edit, rather when i click the "Update" or "Cancel" button on the popup. For some reason, the buttons switch back to thier original state with the original icons and text.

I've tried binding to the click events of the update and cancel, but the change is occuring after that event. I've tried binding to the DOMNodeInserted/DOMNodeRemoved events but I cannot seem to get those events to bind or fire consistently across all browsers or all situations.

Any ideas on how to prevent the buttons from changing back to thier original state? Any help would be appreciated.

Grid

answered on 25 Apr 2013

2 answers

234 views

Custom Downloader for internal build .js files

I built a custom download using your tool for the last release. I now need to use the current internal build/hotfix but the custom download tool does not support internals, apparently.

How can I combine the .js files I need into one kendo.custom.min.js file? Is it simply a matter of iterating thru each file and concatenating the text into the new file? Is there an order that must be observed?

I tried this LinqPad C# script but the resulting .js file did not appear to work.

// Iterate thru .js files in KendoCustom to create kendo.custom.min.js

void Main()

{

var files = Directory.EnumerateFiles(@"C:\Users\me\Desktop\KendoCustom\", "*.js");

var outputFile = @"C:\Users\me\Desktop\KendoCustom\kendo.custom.min.js";

if (File.Exists(outputFile)) File.Delete(outputFile);

foreach (var fileName in files)

{

var contents = File.ReadAllText(fileName);

contents = "/* " + fileName + " */ " + contents + "\n\n";

File.AppendAllText(outputFile, contents);

}

Thanks,
Gary Davis

General Discussions

answered on 25 Apr 2013

1 answer

189 views

kendo grid in kendo tabs using partial view

For some reason i can get second tab (Product Details) to bind record in the grids although the GetAllProductList return records. Please advise, thank you

index.cshtml

@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(items =>
{
items.Add().Text("Search")
.LoadContentFrom("Index", "ProductDetails")
.Selected(true);

items.Add().Text("Product Details")
.LoadContentFrom("_Product", "ProductDetails")

})
)

_Product.chtml (Partial page)

@(Html.Kendo().Grid<HH.PrductModel>()

.Name("Product")
.HtmlAttributes(new { @Style = "align:center; font-size:10px; width:950px" })
.Columns(columns =>
{

columns.Bound(p => p.ProductId).Width(95);
columns.Bound(p => p.Name).Width(120);

})

.ToolBar(toolbar => toolbar.Create())
.Sortable()
//.Pageable()
.Pageable(paging => paging
.Input(false)
.Numeric(true)

.PreviousNext(true)
.PageSizes(new int[] { 5, 10, 25, 50 })
.Refresh(false)

)
.Selectable()
.Scrollable()
.ColumnMenu(c => c.Columns(false))
.DataSource(dataSource => dataSource

.Ajax()//bind with Ajax instead server bind
.PageSize(10)
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.ProductId);

})
.Sort(sort => sort
.Add(x => x.Name).Descending())

.Read(read => read.Action("GetProductData", "ProductDetails").Type(HttpVerbs.Get))

)

)

ProductDetails controller

public ActionResult GetProductData([DataSourceRequest] DataSourceRequest request)
{
Response.Cache.SetCacheability(HttpCacheability.NoCache);
return Json(GetAllProductList().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

The following will return records but for some reason it would bind to grid in Product details tab

/// <summary>

/// </summary>
/// <returns></returns>
private static IEnumerable<ProductModel> GetAllProductList()
{
using (var dc = new HHEntities())
{
var result = (from a in dc.Products

select new ProductModel
{
ProductId= a.ProductId,
Name= a.Name,
Description= a.Description,
ExpiryDate= a.ExpiryDate

});
return result.Distinct().ToList();
}

}

public ActionResult _Product()
{
return PartialView();
}

Grid

answered on 25 Apr 2013

14 answers

1.0K+ views

ComboBox MVVM binding entire object instead of object value(MVVM Bug)

I have a ClientListItem javascript prototype with several fields such as "ClientName" and "ClientID". I have a list of these objects in a viewmodel datasource called "BrokersDatasource". It is a property of a kendo observable.

In the HTML markup I declare the combobox and bind it to the datasource with the following
<input
id="viewRequest_drpBroker"
data-role="combobox"
data-text-field="ClientName"
data-value-field="ClientID"
data-bind="source: BrokersDatasource, value: InspectionRequest.BrokerID"
/>

The list is populated correctly, the datasource is bound, the proper text appears, however the ClientID is not being bound as the value. On selection of a combobox item I am expecting the ClientID to be reflected in the viewmodels InspectionRequest.BrokerID. However instead of setting the ClientID, it is setting the entire ClientListItem instance to the BrokerID. So the actual BrokerID value is something like '{ClientName: "Generic Broker", ClientID: "44"}', when in fact it should just be "44".

The issue only occurs one way. If I set the BrokerID using viewmodel.set("InspectionRequest.BrokerID", 44), it will find and toggle the correct list item and text in the widget. However when selecting from GUI/Widget it sets the BrokerID to entire instance of the object instead of just numeric value.

The bug is present in both the latest commercial release(2012.1.515) and latest internal build(2012.1.615). I have used autocomplete and dropdownlists in a similar way with no issues encountered.

ComboBox

answered on 25 Apr 2013