Questions on Kendo UI for jQuery Forum

4 answers

162 views

[Solved] Adjusting product quantity in a listview

Hi All,

I have a listview that binds to a list of products. Products have a quantity property, which will be specified by users.
I'd like to allow user to adjust quantity using "-" or "+" buttons. Basically, something like this:

Product Name - (10) +

Could anyone help me with this? A jsfiddle snippet would be perfect.

Thanks,

ListView (Mobile)

answered on 10 Sep 2013

1 answer

163 views

Viewport settings

Hi,

I'm trying to build a site to 640px wide and have it scale to the width of whichever device you're using. I'm currently testing on a Galaxy Nexus, at 480px wide and of course it's not displaying the entire width of my site.

I see that Kendo sets the viewport meta itself and that it's ill-advised to override it, but is there another way to achieve this?

Regards,
K.

General Discussions

answered on 10 Sep 2013

3 answers

984 views

Override Create/Edit buttons

Hi,

I'm using the grid control in my MVC 4 application to display selected columns of records.

I don't want to edit or create items from the grid, (i.e.the grid's built in popup/inline capabilities)

I want to transition to another page to do my creates and edits.

Can I override the default behavior of the create and edit buttons?

Below is an example of my grid:

$(function () {

// select the employeesGrid empty div and call the

// kendoGrid function to transform it into a grid

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

// specify the columns on the grid

columns: [

{ title: "", template: "<input type='checkbox' />" },

{ field: "FirstName", title: "First Name" },

{ field: "LastName", title: "Last Name" },

"Title",

"City",

{ field: "BirthDate", title: "Birthday", template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #' },

{ command: ["edit", "destroy"], title: " " }

],

// the datasource for the grid

dataSource: new kendo.data.DataSource({

// the transport tells the datasource what endpoints

// to use for CRUD actions

transport: {

read: "api/employees",

update: {

// get the id off of the model object that

// kendo ui automatically passes to the url function

url: function (employee) {

return "api/employees/" + employee.Id

},

type: "POST"

},

destroy: {

// get the id off of the model object that

// kendo ui automatically passes to the url function

url: function (employee) {

return "api/employees/" + employee.Id

},

type: "DELETE"

},

parameterMap: function (options, operation) {

// if the current operation is an update

if (operation === "update") {

// create a new JavaScript date object based on the current

// BirthDate parameter value

var d = new Date(options.BirthDate);

// overwrite the BirthDate value with a formatted value that WebAPI

// will be able to convert

options.BirthDate = kendo.toString(new Date(d), "MM/dd/yyyy");

}

// ALWAYS return options

return options;

}

},

// the schema defines the schema of the JSON coming

// back from the server so the datasource can parse it

schema: {

// the array of repeating data elements (employees)

data: "Data",

// the total count of records in the whole dataset. used

// for paging.

total: "Count",

model: {

id: "Id",

fields: {

// specify all the model fields, along with validation rules and whether or

// not they can be edited or nulled out.

FirstName: { editable: false },

LastName: { editable: true, nullable: false, validation: { required: true } },

Address: { editable: true, nullable: false, validation: { required: true } },

City: { editable: true, nullable: false, validation: { required: true } },

BirthDate: { editable: true, type: "date" }

}

},

// map the errors if there are any. this automatically raises the "error"

// event

errors: "Errors"

},

error: function (e) {

console.log(e.statusText);

},

// the number of records to show per page

pageSize: 3,

// do paging on the server

serverPaging: true

}),

// paging is enabled in the grid

pageable: true,

// editing happens inline, one row at a time.

editable: "popup",

groupable: true

}).data("kendoGrid");

});

Grid

answered on 10 Sep 2013

2 answers

165 views

[Solved] axisLabelClick - Change Cursor

I apologize if this is listed somewhere but I cannot find it. Is there a way to have the cursor change to a pointer on the Axis Label? Specifically if the axisLabelClick is enabled then it would be nice if the cursor changes.

Charts

answered on 10 Sep 2013

1 answer

71 views

Pagination Issue

I am using kendogrid to display data, when i load data to grid initially number of items in the grid is zero. when i sort the column in ascending or descending order it shows number of items in the grid.

Grid

answered on 10 Sep 2013

1 answer

253 views

Adding Lines dynamically kendo Line Chart

Hi,

I am trying to use Kendo Line Chart for my application and I want to know how i can add Lines dynamically I am using ASP.NET MVC (Razor).

So far this is what I have

@(Html.Kendo().Chart(Model.colorCart)
.Name("chart")
.Title("15°")

.Legend(legend => legend
.Position(ChartLegendPosition.Left)

)
.ChartArea(chartArea => chartArea
.Background("transparent")
)

.Series(
series =>
{
series.Line(l => l.Std_values).Name("Std"); //To be added dynamically
series.Line(l => l.Start_values).Name("Start"); //To be added dynamically
series.Line(l => l.Pred_values).Name("Pred"); //To be added dynamically
series.Line(l => l.End_values).Name("End"); //To be added dynamically
series.Line(l => l.Select_values).Name("Select"); //To be added dynamically
}
)

Charts

answered on 10 Sep 2013

4 answers

191 views

[Solved] Problem with resize shart after upgrade to latest version

Hi!

I just upgraded to the latest version of Kendo UI and now my charts wont render any more when I resize my mobile browser window.

In short, this is what I do:

I have two list views. The first one shows avaiable charts to display. The second one show the actual chart.
When a user clicks on a item in the first listview, I create the chart in the click event.
I then do a app.navigate("#chartView");
(In my test, the chart is bound to a static Array of data.)

The chart is displayed correctly, but then the user tilts his/her screen, the chart is redrawn but now no series or data is displayed in the chart. Only the axis is shown.

My resize function:
$(window).resize(function() { // for any chart or gauge widget
$("#chart").data("kendoChart").redraw();
});

This all worked before the update, what has changed?

Regards
Per

Charts

answered on 10 Sep 2013

4 answers

294 views

[Solved] Kendo Chart Ajax Binding - Autobind property

Hi,
I am using kendo chart with ajax binding.
I need to prevent the ajax call (read) when chart initialization.
Ajax call should occured only when firing from a button.
Is it possible to set the Autobind property for chart?

@(Html.Kendo().Chart<foo>()
.Name("foo")

.Legend(legend => legend.Position(Kendo.Mvc.UI.ChartLegendPosition.Right))
.Title("foo| ")

.SeriesDefaults(seriesDefaults =>
seriesDefaults.Column().Stack(true)
)
.DataSource(dataSource => dataSource
.Read(read => read.Action("foo", "foo").Data("foo")

)
.Group(group => group.Add(model => model.id))
.Sort(sort => sort.Add(s => s.id))
)

.Series(series =>
{

series.Column(x => x.ExecutionTime).Name(string.Empty);

})

.CategoryAxis(axis => axis
.Categories(m => m.DayFormat)

)
.ValueAxis(axis => axis
.Numeric().MajorUnit(10).Title("Minutes")
)

.Events(events => events.SeriesHover("onSeriesHover").SeriesClick("onSeriesClick").AxisLabelClick("onAxisLabelClick"))

)

Charts

answered on 10 Sep 2013

3 answers

416 views

MultiSelect shows inconsistent Placeholder Font and Width

I have a simple view with an AutoComplete, a MultiSelect, and an IntegerTextBox side-by-side with no other styling.

@Html.Kendo().AutoComplete().Name("AutoComplete").Placeholder("AutoComplete")

@Html.Kendo().MultiSelect().Name("MultiSelect").Placeholder("MultiSelect")

@Html.Kendo().IntegerTextBox().Name("IntegerTextBox").Placeholder("IntegerTextBox")

The AutoComplete and IntegerTextBox are the same width as each other and have the same font for the placeholder. The MultiSelect is radically different - it fills the width of the page and its placeholder has Arial font, which differs from the other two.

What's going on?

MultiSelect

answered on 10 Sep 2013

1 answer

231 views

ClientAltRowTemplate

The web page, http://docs.kendoui.com/api/wrappers/aspnet-mvc/Kendo.Mvc.UI.Fluent/GridBuilder, shows an example of ClientAltRowTemplate. Is this out of date? When I try it, I get CS1061: Kendo.Mvc.UI.Fluent.GridBuilder<System.Data.DataRowView>' does not contain a definition for ClientAltRowTemplate'. I am trying to set up alternate rows in a Kendo Grid using Razor syntax.

Grid

answered on 10 Sep 2013