Questions on Kendo UI for jQuery Forum

1 answer

101 views

How to connect datasource to oberservable object

I have a couple of <div>'s that are bound to an observable object. Now I want that object to be bound to the datasource so that when the datasource reads data it automatically updates the bound fields. How do I do it? In other words, I call the web service with dataSource.read() and get the data back....OK, now what?

HTML:

<div id="view">

Sites Monitored: <div data-bind="html: sitesMonitored" ></div><br/>

Sites Failing: <div data-bind="html: sitesFailing" ></div>

</div>

var viewModel = kendo.observable({

sitesMonitored: 0,

sitesFailing: 0

});

var dataSource = new kendo.data.DataSource({

transport: {

read: "/Dashboard/Stats",

type: "get"

}

});

The JSON returned by the web service call:

{"SitesMonitored":35,"SitesFailing":4}

MVVM

answered on 01 Feb 2013

1 answer

166 views

Cannot group on more than one column

Hello,

I am currently using "Kendo UI Web v2012.3.1114" and I've had this problem where I couldn't group on a column containing line breaks, which is a known issue.

Yesterday I decided to update my project to Kendo UI Web v2012.3.1315 and by the same occasion, update jQuery to version 1.8.3. To my satisfaction, the grouping issue was solved, but I then realized I couldnt no longer group on more than one column.

I stumbled upon this post on stackoverflow which mentionned the same problem I have, but the accepted answer suggests that the multiple grouping is solved by upgrading to the version that solved the problem for me.

http://stackoverflow.com/questions/14536083/kendo-grid-groupping

Any thoughts?

Grid

answered on 01 Feb 2013

2 answers

234 views

Is it possible to keep tabstrip in layout page and the loaded content in some body section?

Hi,

My requirement is like, I want to keep my tabs in layout page, as its shared across all the pages.
But when im clicking tab, respective content needs to load in Body section(@RenderBody)
in some other views like below.

Layout.cshtml
*******************
<body>
        <header>
                @* Some Content here *@
                @Html.Partial("_TabPageUI") @*Tabstrip Page*@
        </header>
               @RenderBody()
    <footer>
         @* Some Content here *@
    </footer>
</body>

Index.cshtml (which is rendering in renderbody)
*****************
<div id="tabcontent">
         @* Needs to load tab content here *@
</div>

As of now, im using Ajax.actionlink with update target id (tabcontent), but i want to use kendo tabstrip and acheive the same.
Is it possible to do so?

Thanks,
PreethiBaskaran.

TabStrip

answered on 01 Feb 2013

7 answers

444 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

221 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

204 views

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

613 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

206 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

325 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