Questions on Kendo UI for jQuery Forum

1 answer

174 views

Hi

I have an MVC view that contains 2 datepicker controls, a button and a grid. When the form loads the grid is loaded with data from the server. If the customer then presses the submit button I would like the grid to be loaded again from the server. This does not happen despite the fact that the server method is being called. Could somebody explain what the problem might be?

The code is as follows:

<script type="text/javascript">

$(document).ready(function () {

//Refresh the grid if the customer presses the submit button

$('#submit').click(function () {

Execute(); // this does not refresh the grid

});

// create DatePicker from input HTML element

$("#fromDate").kendoDatePicker();

$("#toDate").kendoDatePicker();

//Load the grid initially using the default date parameters

Execute(); // this works

});

var fromDate;

var toDate;

function Execute()

{

fromDate = $("#fromDate")[0].value;

toDate = $("#toDate")[0].value;

var element = $("#grid").kendoGrid({

dataSource: {

type: "json",

transport: {

read: { url: "Tests/Tests?fromDate=" + fromDate + "&toDate=" + toDate, dataType: "json"}

},

pageSize: 5,

serverPaging: true,

serverSorting: true

},

height: 450,

sortable: true,

pageable: true,

detailTemplate: kendo.template($("#template").html()),

detailInit: detailInit,

dataBound: function () {

this.expandRow(this.tbody.find("tr.k-master-row").first());

},

columns: [

{

field: "TestOne",

title: "Test One"

},

{

field: "TestTwo",

title: "Test Two"

}

]

});

}

function detailInit(e) {

var detailRow = e.detailRow;

detailRow.find(".tabstrip").kendoTabStrip();

detailRow.find(".details").kendoGrid({

dataSource: {

type: "json",

serverPaging: true,

pageSize: 5,

transport: { read: { url: "Tests/TestDetail", dataType: "json"} },

},

height: 200,

columns: [

{

field: "DisplayDate",

title: "Date"

},

{

field: "Type", title: "Text"

}

]

});

}

Grid

answered on 16 Jul 2012

0 answers

57 views

autocomplete against text field but post numerical id with input field

I've implemented the autocomplete component successfully to search against a list of website urls. However when I submit my form i want to submit the numerical id value of the site not the text value. Is this possible?

$("#maintSiteId").kendoAutoComplete({
               minLength: 3,
               dataTextField: "site_url",
               dataValueField: "site_id", // this doesn't seem to work and is depreciated?
               filter: "contains",
               height: 320,
               dataSource: {
                   pageSize: 20,
                   transport: {
                       read: {
                           url: "/Sites/DataJsonSites.cshtml",
                           dataType: "json",
                           type: "GET"
                       },
                       parameterMap: function(options) {
                           return $.extend(options, {
                               id: '',
                               title: $("#maintSiteId").data("kendoAutoComplete").value()
                           });
                       }
               },
               placeholder: "Select site...",
               separator: ", ",
               suggest: true
               }
           });

Input field contained within standard <form>
<input class="span6" id="maintSiteId" name="maintSiteId" style="width: 320px; margin-left: 0;"/>

Sample JSON data being used;
[{"site_id":1,"site_url":"www.mysite1.com","site_name":"my site 1"},{"site_id":2,"site_url":"www.mysite2.com","site_name":"my site 2"}]

AutoComplete

asked on 16 Jul 2012

2 answers

241 views

Filtering in KendoUI like textbox filter in ASP.NET Ajax

Hello,

I am considering moving to KendoUI (currently using 2010 Q2 ASP.NET Ajax, need to upgrade in any event).

I'm wondering if it is possible to render the filters for a KendoUI grid similarly to the ASP.NET Ajax grid, that has filter textboxes (by default) when filtering is turned on. Our users love the ability to quickly enter text and hit enter to get a "Starts With" (using some javascript). I cannot find an example, or documentation, on how to customize the default KendoUI filtering.

Also, important to a switch to KendoUI is the need for much improved documentation. I know the product is much newer than the ASP.NET Ajax controls, but the current documentation for KendoUI widgets, including all of the options, is quite sparse.

Thank you, Jason

Grid

answered on 16 Jul 2012

2 answers

257 views

MVVM toJSON() and object properties

I'm using MVVM and an Observable (called _alertModel) for a jQuery AJAX post.

$.ajax({

url: 'REST/Alert',

type: 'POST',

data: _alertModel.toJSON(),

timeout: 5000,

dataType: 'json',

Passing the Observable without calling toJSON does not work.

If I use toJSON, primitives work fine but objects (Date and Array objects in particular) raise exceptions.

I've been working around these issues by copying object properties to temporary vars, replacing them with string representations for the AJAX call, restoring the objects after the call is initialized, i.e.

var date = _alertModel.IncidentDate;

_alertModel.IncidentDate = (date.getMonth() + 1) + "/" + date.getDate() + '/' + date.getFullYear();

$.ajax(...);

_alertModel.IncidentDate = date;

This seems clumsy and I'm wondering if there is a better way.

MVVM

answered on 16 Jul 2012

3 answers

644 views

How to Navigate to Other View

HI ,

I have a IDetail view as following ,

<div data-role="view" id="SessionDetails" data-transition="slide" data-layout="default" data-show="showDetailsView">

<header data-role="header">

<div data-role="navbar">

<a data-role="backbutton" data-align="left">Back</a>

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

</div>

</header>

<div data-role="content">

</div>

On the click event of ListView Item I need to navigate to this view .. I am handling click event as following ,

$("#sessionsView").kendoMobileListView(

{

template: "<strong>${Title }</strong><br/><a data-role=\"detailbutton\" data-style=\"detaildisclose\"></a>",

endlessScroll: true,

scrollTreshold: 30,

dataSource: sessionData,

click: sessionDetailsViewClick

});

and sessionDetailsViewClick function is written as following ,

var sessionDetailsViewClick = function (e) {

console.log(e.dataItem.Title);

console.log("Navigate to Detail View from here");

}

I am successfully getting selected Title, I need to pass this as queryparamter to detail view while navigating. Any help would be much appreciated

Thanks
Dhananjay Kumar

ListView (Mobile)

answered on 16 Jul 2012

1 answer

337 views

Charts - Changing the default font

The default font for charts, as far as I can tell from the documentation, is 12px Arial,Helvetica,sans-serif. I would like to change the default font family to Tahoma. I want this to hit everything from legends, titles, to labels.

Is there a way to do this? I can't see anything in the CSS that seems to reference this.

Thanks

Charts

answered on 16 Jul 2012

0 answers

146 views

Chart with grid

Hi,

I'm looking for solution in MVC, which will provide me some kind of data presentation. I'll describe what I mean best I can. I've also attached a jpg schema of the solution that I need.

First of all - I need a chart, mostly line-chart, but bars-type also will be great. The chart should have a marker (blue one on my schema) which have ability to move left and right. On the same page I'll place a grid with all data from the chart. Moving marker left-right on the chart should move the cursor up-down on the grid. On the other hand - also moving cursor on grid should move marker on graph. I introduced this with orange arrows on my schema. Maybe some kind of events calling by chart/grid and handled by grid/chart?

One comment - data, which I will present are complex. It means, that on the X-axis on chart always will be time, but on Y - it depends, what is choosen. I mention this in the context of possibility of multiple data-series on chart - supplied with the same data, but each serie with different property attached. Will it be possible?

This functionality is very important for me and my customers, so I will be very glad for some tips, how to do this with (to say the truth - really awesome) Kendo UI for MVC.

Thanks in advance

Charts

asked on 16 Jul 2012

5 answers

217 views

Changing text of the 'Cancel' option in Actionsheet

How does one change the text of the 'Cancel' option in Actionsheet?

The documentation states that there is an actionsheet configuration parameter of 'cancel', but gives no example how to apply such configurations. Is there some sort of actionsheet object that is supposed to be instantiated to do this?

Thanks in advance

ActionSheet

answered on 16 Jul 2012

1 answer

155 views

DataViz Chart - Showing Values?

If I have a column in a chart with a value of "20", how do I show that value (e.g. sitting above the column)?

Can't see it anywhere and none of the demos show this...

In the demos, the value is present in the tooltip but my users might be far too lazy for that! They just want to see the value over each column.

Here's what I have in the context of Kendo for MVC Razor:

@using MyNamespace

@model Totals

@{

ViewBag.Title = "Chart";

}

@(Html.Kendo().Chart<Totals>()

.Name("chart")

.Title("Totals")

.DataSource(ds => ds.Read(read => read.Action("GetTotals", "Home")))

.Series(series =>

{

series.Column(model => model.Total).Name("Total");

})

)

Thanks!

Richard

Charts

answered on 16 Jul 2012

3 answers

1.0K+ views

Allow the user to change the page size of the grid

Hi Kendo UI team,
The KendoUI 2012 Q2 release note says:
Added : Allow the user to change the page size of the grid.
Added: Ability to change the current page by typing it in a textbox.

Where can I find an example of these two items?

Grid

answered on 16 Jul 2012