Questions on Kendo UI for jQuery Forum

1 answer

99 views

Hello there.
I am using kendo Mvc Ui on my application.
In my scenario I have to used a tree view on the left side, and on the right the details section. when i click a node from the tree view, on details section it will show its details.

It is fine upto now, now the problem is like I need to show records from two tables on the tree.
Like, I have a sector table, Id and Name, another table category is Id, SectorId and name.
So now I have to bind the grid as

Sector1

Category1

Category2

Category2-1

category2-2

Sector2

Category1

Category2

Category2-1

category2-2

and it is based on ajax data source.

here is my configurations

@(Html.Kendo().TreeView()

.Name("categoryList")

.DataTextField("Name")

.DragAndDrop(true)

.DataSource(ds =>

{

// ds.Read("ajaxCateegoryList", "category");

ds.Read(read => read.Action("ajaxCateegoryList", "category"));

})

.Events(evt =>

{

evt.Expand("expandHandler");

evt.Select("selectedHandler");

})

)

My controller

public JsonResult ajaxCateegoryList(string id)

{

if (string.IsNullOrEmpty(id))

id = Request.QueryString["id"];

var cats = new List<Category>();

if (!string.IsNullOrEmpty(id))

cats = _categoryService.GetAllCategoriesByParentCategoryId(Convert.ToInt64(id)).ToList();

else

cats = _categoryService.getAllParentCategories();

var model = cats.Select(x =>

{

return new

{

id = x.Id,

Name = x.Name,

hasChildren = _categoryService.GetAllCategoriesByParentCategoryId(x.Id).Count > 0

};

});

return Json(model, JsonRequestBehavior.AllowGet);

}

This one is being used for only category navigation. I m clue less how to make it sector base from ajax datasource, I means how the tree will understand what is sector and what is category.

TreeView

answered on 11 Sep 2013

1 answer

90 views

Hierarchy Grid from one object

I have an object that is nested, and want to have a grid that shows a hierarchy from that, without (as the examples are shown) ajax to get the data for each parent. Is that possible?

For example
The object (Authors) with a Books Collection.

I don't want to query through to an object to get the books for each author, rather I've already got it.

Does the hierarchy require Ajax calls via DataSource()?

Grid

answered on 11 Sep 2013

1 answer

42 views

jquery.min.js to jquery-min.js

Hi,
can you please change jquery.min to jquery-min in the next upgrade?

it will help anyone who uses MVC as jquery-min is loaded first by default.

P.S.
of course there is a workaround but it is still better to have the defaults synchronized

General Discussions

answered on 11 Sep 2013

4 answers

128 views

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

138 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

939 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

146 views

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

48 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

226 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

149 views

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