Questions on Kendo UI for jQuery Forum

1 answer

236 views

Kendo Grid with jquery context-menu plugin

have a kendo mvc grid with one of the column as client template images. Whenever images are clicked I would like to open jquery context menu which has links to other pages. Now, I have implemented my code this way.

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

.Name("Flights")

.Events(builder => builder.DataBound("gridDataBound"))

.DataSource(dataSource => dataSource

.ServerOperation(false)

.Read(read => read.Action("Index", "Flights"))

.PageSize(50)

)

.HtmlAttributes(new { style = "height:220px;" })

.Columns(col =>

{

col.Bound(customer=> customer.Name).Width(280);

col.Template(t => t.ClassName).ClientTemplate("<img class='activate-menu' src='/Content/Images/flipo.jpg' style='cursor: pointer;' />").Title("").Width(40);

}).Sortable()

.Scrollable()

.Pageable(pageable => pageable.ButtonCount(1))

.ColumnMenu()

.Filterable()

)

and in my javascript I would like to use jquery contextmenu..The standard form of using context menu by jquery team is like this:

$.contextMenu({

selector: '.activate-menu',

trigger: 'left',

autoHide: false,

callback: function (key, options) {

if (key == "Book") {

$('body').css('cursor', 'wait');

$.post("/CustomerInformation/SetId", { code: className}, function (data) {

window.location.href = "/Hotels/CInformation/Index";

});

}

},

items: {

"Book": {

name: "Book", icon1: "Booking"

}

});

Now I would like pass the class name of the particular image to the contextmenu . I have tried onclick on the client template to pass it, but When I nest function with jquery context menu function.. Its throwing me errors. How can I access directly clicked element class name in the context menu function.

Grid

answered on 26 Aug 2013

4 answers

1.7K+ views

Can I pass a parameter on the databound event.?

Now I write the event three times:
grid1 .Events(events => events.DataBound("onDataBound1") function onDataBound1(){alert('grid1 bound!')}
grid2 .Events(events => events.DataBound("onDataBound2") function onDataBound2(){alert('grid2 bound!')}
grid3 .Events(events => events.DataBound("onDataBound3"). function onDataBound3(){alert('grid3 bound!')}
I
have 3 grid in a view page,I use databound .Events(events =>
events.DataBound("onDataBound") on each gird,Can I pass a parameter on
the databound event.
function onDataBound(index){
if(index==1) alert('grid1 bound!');
else if(index==2) alert('grid2 bound');
else alert('grid3 bound');
}

Grid

answered on 26 Aug 2013

1 answer

89 views

Best design for listview with chart generation?

Hi!

I have a application with 2 views.
The first view contains a list of charts I can choose from.
When a user clicks on one of the rows in the list, the second view slides in and presents the chart.
All data is retreived from ONE json url. The data I get back from the json service contains all charts.

I been trying to figure out what's the best design for handling data retrival and ui interactions.
Shall I retrive all data when my application starts, and store it as a array?
Shall I retrived the chartsdata from the datasource, in the "OnClick" event, when the user clicks on a row?
Shall I create the chart in the OnClick event?

What is the best practice in this senario?

I'm greatfull for any answers :)

Regards
Per

General Discussions

answered on 26 Aug 2013

3 answers

148 views

Date axis and multiple series

Good evening

I've got the attached chart showing strange "holes" where the data actually exists.
Demo:
http://70.43.83.4/Test/date/
I know this would work when data from both series was "fitted into single elements" but this can't be done here because series can have different number of points. As I understand from docs for date axis data is always aggregated so I believe this is not a problem "by design"?
Thanks.

Raido

Charts

answered on 26 Aug 2013

1 answer

404 views

not selectable column

Hi,

I have a check box in one of the column, how can i make the column not selectable for the row?

thanks.

Grid

answered on 26 Aug 2013

1 answer

124 views

Grid attribute “scrollable” cause strange problem in IE9

Hi，
I use kendoui.complete.2013.2.716.commercial to create a web page which shows data in the database. But when I slid down the mouse in the grid, there would appear blanks between scrollbar and pager div. At first I thought there might be some problems of my code or datasource, but when I turn to demos on your site, the problem exists! Maybe you can find where the problem is and kindly solve that.
As you can see in the attached file, if you resize the window until the x-scrollbar appears, there would be blanks between scrollbar and div 'pager'. If you modify the attribute scrollable:false the problem will not appear. This only appears on IE, not in Chrome and FF.

Grid

answered on 26 Aug 2013

3 answers

917 views

Grid column conditional editor

Hi;

I've got a grid and I want to have a custom editor in one column under certain conditions, and have no editor under other conditions. Building the editor without the conditions is trivial, but I cannot figure out how to do it conditionally.

Let me be specific: I want to have a dropdown editor in one column if the related dataItem has a value of "true" in another of its fields, and no editor if the value is "false".

I think it should be something like this:

{

field: "ID",

title: "Title",

template: "#=TITLE#",

editor: function () {

if (RELATED) {

MyEditor

} else {

}

}

In this example the column with the editor uses the MyEditor function to create the editor. This works great without the conditional code, but fails with it. Essentially if the value of the dataItem field "RELATED" is true I want the editor, and otherwise I want no editor.

Grid

answered on 26 Aug 2013

1 answer

241 views

Long label in Mobile Form overlaps input

I just noticed that when using the Kendo Mobile Forms, if the label of the form element is too long and takes up more than 50% of the row, it overlaps the input box. I had this happen on our project and didn't know if it was just us, so I manually changed a label on Kendo's demo page for Form, but it does the same thing (see screenshot). Is this broken, or are we expected to come up with some custom CSS to have the labels not overlap the inputs?

General Discussions

answered on 26 Aug 2013

1 answer

359 views

kendo grid in inline editing mode with Dropdownlist required field.

I have a kendo grid in inline editing mode. When I press "Add new item" button, new row is added. some editable fields are ForeignKey column in the grid, if i fill the text fields in the new records without filling or select the dropdownlist fields for ForeignKey columns, a null values are set for ForeignKey fields.

the question , how to enforce the user to select dropdownlist and make this field is required on "update" button click action.

i am using ASP.NET MVC 4.0 and Kendo UI for ASP.NET MVC Q2 2013.

Note: sample code for this issue if exist.

Grid

answered on 26 Aug 2013

1 answer

138 views

Only Show Chart When It Has Data

Hi

What is the recommended approach for showing a chart - only when it has data.

By default, the chart draws without any data. This means there's a bit of a flicker when it redraws to show the data loaded from a remote source. All my chart initialization is currently in the jQuery.ready( event...

Is there any easy way to only show the chart when it has data? Ideally, this is a just a property rather than having to wire up this behaviour every time?

Thanks

Charts

answered on 26 Aug 2013