Questions on Kendo UI for jQuery Forum

7 answers

498 views

Pull to Refresh: Local Data Source, Freezing?

Hi Telrik Team,

At the moment I have a pull to refresh view based on the 'twitter' example you have, which works fine (see extract below)
At present, it is looking at json.txt included locally in my project and pulling data back via pull to refresh.

Now when I go to create a local data source:

var movies = [ {
      title: "Star Wars: A New Hope",
      year: 1977
   }, {
     title: "Star Wars: The Empire Strikes Back",
     year: 1980
   }, {
     title: "Star Wars: Return of the Jedi",
     year: 1983
   }
];
var localDataSource = new kendo.data.DataSource({data: movies});

And adjust my pull to refresh view to look at this data source instead, I map the fields via the template and I get a list of results fine,
however I am unable to refresh it when I pull down, it just hangs! Are you able to provide me with a step in the right direction?

Thanks so much

Rgds.

____________________________________
The Kendo Template:

<script type="script/x-kendo-template" id="pull-to-refresh-template">
<div class="inboxList">
<h3 class="time">9:00am</h3><h3>The Purchace ID is:#: PurchaseID #</h3>
<a class="reply" data-role="button" data-rel="actionsheet" href="\\#inboxActions" data-actionsheet-context="ID">Reply</a>
<h2>Another Field</h2>
<p>Something here</p>
</div>
</script>

Json Txt Example:
{
"results": [
{
"UserID": "33",
"PurchaseID": 944000
},
{
"UserID": 2,
"PurchaseID": 3584
},
{
"UserID": 3,
"PurchaseID": 7473
},
{
"UserID": 4,
"PurchaseID": 8654
______
Javascript Functions:

function mobileListViewPullToRefresh() {

var dataSource = new kendo.data.DataSource({

serverPaging: true,

pageSize: 10,

transport: {

read: {

url: "json.txt",

dataType: "json" // JSONP (JSON with padding) is required for cross-domain AJAX

},

schema: { // describe the result format

data: "results" // the data which the data source will be bound to is in the "results" field

}

});

$("#pull-to-refresh-listview").kendoMobileListView({

dataSource: dataSource,

pullToRefresh: true,

appendOnRefresh: false,

template: $("#pull-to-refresh-template").text(),

endlessScroll: false,

pullParameters: function(item) {

return {

since_id: item.id_str,

page: 1

};

}

});

}

ListView (Mobile)

answered on 01 Feb 2013

2 answers

266 views

Issue with Grid In Form Submit of DateTime and ForeignKeyColumn

We are using Kend Web Grid in Razor views and we are not able to submit the data to the controller from the Grid in the form. I have attached the screen shot of the Grid while editing.

As you can see we need to collect the details like OrderDate (DateTime), ShipCountry and Employee ID (Foreign Key Column).

We are following your sample project "378389_GridInForm" to submit the Grid data through Hidden controls. The issue we have is when we enter the date and submit the date, format of Date shown in the grid is "Tue Jan 22 00:00:00 UTC+0530 2013" which .Net is not able to parse to DateTime when using TryUpdateModel.

Another issue with ForeignKey column is when we select an option from the DropDown and click on the Update button the Selected Items Value (ID) is shown in the grid. We need to show the Selected Item's text in the Grid but assign the ID to the hidden control associated with the column.

We have attached the Model, View and Controller files for your review. Can you please guide how to use the Kendo Grid for our requirement. I know we have Kendo Specific commands for Insert, Update to update the Grid Values into Model, but, the sample we are working is for testing only Grid. We have UI scenarios where Grid is just one part of the Form and we have many other data inputs that we take.

We need to demo our POC as early as possible and any quick assistance will be of great help.

Grid

answered on 01 Feb 2013

7 answers

232 views

[Solved] posted data does not reflect user input on popup edit

When i edit my grid using popup editing the value of the 3rd field "Name" is always "" even if i fill the textbox with a value, I noticed that if i put filed "Name" on first position of grid column definition the vallue in the posted data is correct.
If i change editable mode from popup to inline every field is filled correctly.
Did i missed something in the initialization of the grid/datasource?

browser: IE9
Kendo UI: Q3 2012

I've got the following Kendo Grid definition:

$("#grid").kendoGrid({
autoBind:false,
sortable: true,
filterable: true,
columnMenu: true,
height: 400,
columns: [
{ field: "StoreType", title: "Store Type", editor: StoreTypesDDEditor },
{ field: "City", title: "City", editor: CitiesDDEditor },
{ field: "Name", title: "Store Name" },
{ field: "Code1" },
{ field: "Code2" },
{ field: "Code3" },
{ command: ["edit", "destroy"], title: " ", width: "200px" }
],
detailTemplate: kendo.template($("#StoreDetailTempl").html()),
detailInit: detailInit,
editable: "popup",
toolbar: [{ name: "create", text: "Add new Store"}],
dataSource: dsStore
});

Definition of DataSource is:

Grid

answered on 01 Feb 2013

2 answers

673 views

Dynamic grid with dynamic validations

We've been trying to figure out how to make the kendo grid dynamic, based on the models data. Then get validation settings from within the model onto the grid for the appropriate columns.

We got the dynamic grid working but cannot figure out how to setup the validations specified by the model. Has anyone done this, or have any ideas on how to do this?

Here's the partial razor view for this grid.

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

.Name("MappingGrid")

.Columns(columns =>

{

columns.ForeignKey(row => row.DataSource, new SelectList(new[]{

new {text="CPDP",value = "1"},

new {text="GXS",value = "2"},

new {text="Terminal",value = "3"},

}, "value", "text")).Title("Data Source");

if (@ViewBag.crossReferenceMapColumnsList != null)

{

foreach (CrossReferenceMapColumnViewModel availableColumn in @ViewBag.crossReferenceMapColumnsList)

{

switch (availableColumn.XrefDataColumnName)

{

case "DATA01":

columns.Bound(row => row.Data01).Title(availableColumn.ColumnName + " (" + (availableColumn.Direction.ToString() == "Input" ? "from" : "to") + ")");

break;

case "DATA02":

columns.Bound(row => row.Data02).Title(availableColumn.ColumnName + " (" + (availableColumn.Direction.ToString() == "Input" ? "from" : "to") + ")");

break;

case "DATA03":

columns.Bound(row => row.Data03).Title(availableColumn.ColumnName + " (" + (availableColumn.Direction.ToString() == "Input" ? "from" : "to") + ")");

break;

case "DATA04":

columns.Bound(row => row.Data04).Title(availableColumn.ColumnName + " (" + (availableColumn.Direction.ToString() == "Input" ? "from" : "to") + ")");

break;

case "DATA05":

columns.Bound(row => row.Data05).Title(availableColumn.ColumnName + " (" + (availableColumn.Direction.ToString() == "Input" ? "from" : "to") + ")");

break;

}

columns.Command(row =>

{

if (SecurityHelper.UserCanEdit(UserFeature.CrossReferenceDataMapping, Context))

{

row.Edit().HtmlAttributes(new {@name = "btnGridRowEdit"});

}

else

{

row.Custom("hdnE").HtmlAttributes(new { style = "display:none" });

}

if (SecurityHelper.UserCanDelete(UserFeature.CrossReferenceDataMapping, Context))

{

row.Destroy().HtmlAttributes(new {@name = "btnGridRowDelete"});

}

else

{

row.Custom("hdnD").HtmlAttributes(new { style = "display:none" });

}

}).Title("Actions");

})

.Pageable()

.Sortable()

.Scrollable()

.AutoBind(false)

.Filterable()

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

.ToolBar(toolBar =>

{

if (SecurityHelper.UserCanAdd(UserFeature.CrossReferenceDataMapping, Context))

{

toolBar.Create()

.HtmlAttributes(new { @id = "btnCreateMapping" });

}

toolBar.Custom()

.Text("Export To Excel")

.HtmlAttributes(new { @id = "btnExport" })

.Url(UrlMaker.ToCrossReferenceDataMappingExport());

})

.DataSource(dataSource =>

dataSource

.Ajax()

.Events(e => e.Error("onError"))

.Read(reader => reader.Action("Read", "CrossReferenceDataMapping").Data("additionalData"))

.Create(reader => reader.Action("Create", "CrossReferenceDataMapping").Data("additionalData"))

.Update(reader => reader.Action("Update", "CrossReferenceDataMapping"))

.Destroy(reader => reader.Action("Destroy", "CrossReferenceDataMapping"))

.Model(model => model.Id(row => row.MapDataId))

)

It's not the most elegant way, but it does the job for now, until we can find a better way.

So, I'm looking for anyone who has a better on how to create the grid and apply the validation. The model will have a regex expression or a max length to validate against.

Grid

answered on 31 Jan 2013

1 answer

234 views

kendoUpload removeURL - "HttpPostedFileBase files" retruns null

Hi

On clicking of "Remove" button, RemoveFiles method do get fired but "IEnumerable<HttpPostedFileBase> files" returns null value
However "SaveFiles" works fine.
                      $("#files").kendoUpload({
                                async: {
                                    saveUrl: "Attachment/SaveFiles",
                                    removeUrl: "WebSite/RemoveFiles",
                                    autoUpload: true
                                },
                                upload: function (e) {

                                }
                        }).data("kendoUpload");

public PartialViewResult RemoveFiles(IEnumerable<HttpPostedFileBase> files)
        {
            if (files != null)
            {
               ....................................
            }
            return PartialView("");
        }

Am I missing something here.

General Discussions

answered on 31 Jan 2013

9 answers

367 views

DropDownList - Click through issue on Android mobile device

On Android mobile devices the click event from the drop down lists popup triggers the click event of controls below the clicked item.

This was resolved for Mac Mobile devices in a previous build 2012.2.710 as "Prevent click events through widget's popup in mobile devices".

DropDownList

answered on 31 Jan 2013

1 answer

187 views

Adding PanelBar(another Kendo Component) inside Menu

Hello.

I want to add a PanelBar inside a Menu, because I need expanded/collapsed fields inside the menu
I tried this:

@(Html.Kendo().Menu().Name("Menu")

.Items(items =>

{

items.Add().Text("Products")

.Items(children =>

{

children.Add().Text("Furniture");

});

items.Add().Text("Stores")

.Content(@<text>

@(Html.Kendo().PanelBar().Name("panelbar").ExpandMode(PanelBarExpandMode.Multiple)

.HtmlAttributes( new { style = "width: 300px" })

.Items(panelbar =>

{

panelbar.Add().Text("My TeamMates")

.Items(it =>

{

it.Add().Text("First");

it.Add().Text("Second");

});

})

)

</text>);

})

)

But the panel is interpreted as children and his items as inner children.

Many thanks.

Menu

answered on 31 Jan 2013

1 answer

226 views

Loading Image not displayed

We recently force the look of the platform to ios and develop the app on Android.

Sometimes we need to display the loading icon (application loading image and pull to refresh icons) but they are not displayed properly.
A rotating grey square is displayed instead.

Please advice what can I do to correct this.

Thanks.

BR,
Ralph

Application

answered on 31 Jan 2013

2 answers

196 views

[Solved] Displaying JSON data from wcf service call

I am trying to set up a demo using the listview in kendoui and having some issues with it., I have the following code below, and when it runs the first time round. It loads in the first 20 items, but when I click on the button again, the button disappears and nothing happens on the page. Just sits there and does nothing, this code is based on the following.

http://demos.kendoui.com/mobile/listview/press-to-load-more.html

Any help you can give on this would be appreciated.

<%@ Page Title="" Language="C#" MasterPageFile="~/mobile.master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div data-role="view" data-init="mobileListViewPressToLoadMore" data-title="Patient List">

<header data-role="header">

<div data-role="navbar">

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

<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>

</div>

</header>

<ul id="load-more"></ul>

</div>

<script>

function mobileListViewPressToLoadMore() {

var dataSource = new kendo.data.DataSource({

pageSize: 20,

serverPaging: true,

transport: {

read: {

url: "http://myservices/rest/plan.svc/Patient" // the remove service url

},

parameterMap: function(options) {

var parameters = {

q: "javascript", //additional parameters sent to the remote service

rpp: options.pageSize,

page: options.page //next page

};

return parameters;

}

}, schema: { // describe the result format

data: "" // the data which the data source will be bound to is in the "results" field

}

});

$("#load-more").kendoMobileListView({

dataSource: dataSource,

template: $("#load-more-template").text(),

loadMore: true

});

}

</script>

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

<div class="tweet">

<div class="metadata">

<a class="sublink" target="_blank" href="http://#= id #" rel="nofollow">#= first_name + ' ' + last_name #</a>

|

<a class="sublink" href="http://#= mrn #" rel="nofollow">#= pat_seqno #</a>

</div>

</script>

<style scoped>

.tweet {

font-size: .8em;

line-height: 1.4em;

}

.pullImage {

width: 64px;

height: 64px;

border-radius: 3px;

float: left;

margin-right: 10px;

}

.sublink {

font-size: .9em;

font-weight: normal;

display: inline-block;

padding: 3px 3px 0 0;

text-decoration: none;

opacity: .8;

}

</style>

</asp:Content>

ListView (Mobile)

answered on 31 Jan 2013

3 answers

365 views

Calendar is displayed in the wrong position

I have one tree component, and in one of the columns, depending on the type, I use a date picker. As it's possible to see in the first attachment, the calendar is displayed always in the wrong position.

The top and left properties of the calendar container are wrong, so I was wondering why could it be causing that those values are calculated wrong (because I guess they are calculated when the button to show the calendar is clicked)

Could this be a known issue that was solver in newer versions?

Thanks,

Kendo UI version: Chrome 24.0.1312.56
OS: Windows 7
exact browser version: Chrome 24.0.1312.56
jQuery version (if registered independently from Kendo UI): jQuery v1.8.3

DatePicker

answered on 31 Jan 2013