Questions on Kendo UI for jQuery Forum

2 answers

425 views

Hi - I have a requirement to show our corporate logo from every view, and their preference is to show it in the left-side area of the navbar. I have it showing up, but it is not vertically centered, and I have tried a number of things. I've tried vertical-align:middle, and margins:auto, but neither have worked so far:

<header data-role="header">
<div data-role="navbar">
<img id="corp-logo" src="images/app/corp-logo.png"
data-align="left" style="width:120px;height:30px;vertical-align:middle;"/>
<span data-role="view-title"></span>
</div>
</header>

and...

<header data-role="header">
<div data-role="navbar">
<img id="corp-logo" src="images/app/corp-logo.png"
data-align="left" style="width:120px;height:30px;margin: auto .3em auto .3em;"/>
<span data-role="view-title"></span>
</div>
</header>

What would be preferred approach approach for vertically aligning a logo image within the navbar area?
Thanks, Jim Wangler

NavBar

answered on 16 May 2013

1 answer

58 views

Edit button returns json but popup edit isn't working?

Hi all. I'm new to the JS/JQuery/AJAX world & new to Kendo controls as well.

Not sure what's going on and would appreciate any help. My grid displays with an edit and delete button. Both buttons hit the controller actions as expected and the delete does, in fact delete. However it, it returns to a blank page instead of a refreshed grid, and my edit button returns raw JSON to an empty view. I'm guessing I don't have the grid wired correctly so that it know's how to catch the pass. Here's the code in my partial view. I commented out some columns that I don't need to see until the edit screen.

Any ideas? TIA

@{

Layout = null;

}

@model IEnumerable<Nop.Plugin.Other.Rewards.Models.ReferralProgramModel>

@(Html.Kendo().Grid((IEnumerable<Nop.Plugin.Other.Rewards.Models.ReferralProgramModel>)Model)

.Name("kendoGrid")

.Columns(columns =>

{

//columns.Bound(p => p.Id).Width(0).Hidden();

columns.Bound(p => p.Name).Width(100).Title("Name");

//columns.Bound(p => p.ReferralDiscount).Width(20).Title("Friend Discount");

//columns.Bound(p => p.DiscountEventsPerReferral).Width(100).Title("Discounts per Referral");

columns.Bound(p => p.PointsAwardPerReferral).Width(100).Title("Points Reward on referral");

columns.Bound(p => p.MinimumPurchaseForAward).Width(100).Title("Min Purchase Amt");

//columns.Bound(p => p.RewardEventsPerReferredFriend).Width(100).Title("Discount Events");

//columns.Bound(p => p.CookieLifespan).Width(100).Title("Cookie Lifespan");

columns.Bound(p => p.InsertDateUtc).Format("{0:d}").Width(100).Title("Insert Date");

columns.Command(command => command.Edit());

columns.Command(command => command.Destroy());

})

.Editable(editable => editable.Mode(GridEditMode.PopUp)) //.TemplateName("ReferralEditForm")

.Pageable(pager => pager.PageSizes(new[] { 5, 10, 20, 50 }))

.Sortable()

.Selectable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => {

model.Id(p => p.Id);

model.Field(p=>p.Id).Editable(false);

})

.Read(read => read.Action("GetReferralPrograms", "Referrals"))

.Update(update => update.Action("UpdateRefferalProgram", "Referrals"))

.Destroy(destroy => destroy.Action("DeleteReferralProgram", "Referrals"))

.Create(create => create.Action("CreateReferralProgram", "Referrals"))

)

Grid

answered on 16 May 2013

5 answers

608 views

Show multiple series value in a CategoryAxis CrossHair Tooltip.

Hi,
I've been able to create a chart that fits my need except for one requirement which is to show all the series value in a single tooltip (CategoryAxis CrossHairToolTip).

I have 4 series (Weight1, Time1, Weight2, Time2) and 1 category (Period). By default i can easily show the CategoryAxis value in the CategoryAxis CrossHair Tooltip, but what i want to do is show the value of Weight1, Time1, Weight2 and Time2 in that tooltip.

Here is the code that show the Category value. and in comment what i would like to show instead.

Thanks in advance for your help.

<%: Html.Kendo().Chart<Data.DonneeChart>()

.Name("chart")

.Title("Multiple Series Chart")

.DataSource(dataSource => dataSource

.Read(read => read.Action("Charts_Data", "Home")).ServerOperation(false)

)

.Series(series => {

series.Line(model => model.Weight1)

.Color("#ff1a1c")

.Name("Weight1")

.Axis("weight");

series.Line(model => model.Time1)

.Color("#ff0e00")

.Name("Time1")

.Axis("time");

series.Line(model => model.Weight2)

.Color("#73e100")

.Name("Weight2")

.Axis("weight");

series.Bar(model => model.Time2)

.Color("#007aff")

.Name("Time2")

.Axis("time");

})

.CategoryAxis(axis => axis

.Categories(model => model.Period)

.AxisCrossingValue(0,9999,9999)

.Justify(true)

.Crosshair(crosshair => crosshair

.Visible(true)

.Tooltip(tooltip => tooltip

.Visible(true)

.Template("Category : #= value #") // Here i would like to show the value of Weight1,Time1,Weight2,Time2 instead of Period value !!!

.Format("{0:n1}")

))

)

.ValueAxis(axis => axis

.Numeric("weight")

.Min(0)

.Title("(Kg)")

.Max(8000)

)

.ValueAxis(axis => axis

.Numeric("weight")

.Color("#ffae00")

.Min(0)

.Max(35)

)

.ValueAxis(axis => axis

.Numeric("weight")

.Color("#007eff")

.Min(0)

.Max(1.1)

)

.Tooltip(tooltip => tooltip

.Visible(false)

)

%>

Charts

answered on 16 May 2013

1 answer

603 views

Create a blank first column in the kendo ui grid and hide a column

Hello,
I am new to using kendo ui grid. I have a requirement where I want to display data in the grid using kendo ui grid.

I have added a div and using kendo ui grid I am able to display the data in the grid.

All the data is dynamic. All the columns are created at runtime/dynamically.
What I want is to have a first column in the grid which will display an image with click event to it.

Also at the same time after the image column there will be ID column that I want to hide. I want to bind it to grid and hide it as I will require that particular columns value on row click event.

So, I want the first column in the grid to be displaying a image/icon and want to hide the second (next column after the image column).

Please help me on this.

Grid

answered on 16 May 2013

1 answer

84 views

decode values displayed as series values on Chart

I have a column chart with series values of 0, 1,2,3,4.
Rather than display the numbers, I would like to decode the numbers to a string value, e.g. instead of 1 as a label display something like 'low', instead of 2 display 'medium' etc. I have tried to get this to work with templates but have been unsuccessful.

something like

series: [{
type: "column",
aggregate: "avg",
field: 'value',
labels: {
template: "#if(value == 4) { # ${'exceed'} # } else { # ${value} #} #"

}
}],

The chart ignores the template and just displays the numbers 1,2 etc.
Is it possible to do what I want to do.

Charts

answered on 16 May 2013

2 answers

450 views

Sub Grid in pop-up editor window

I've got a complex form, which requires a pop-up edit window. There are several hierarchical tables that also require editing. I hoped to do this with sub-grids, embedded in the editor template of the main grid.

However, I have encountered two issues.

Passing the main ID to the read action of the sub grid - using the Model.ID doesn't work - it is just zero.

@(Html.Kendo().Grid<CDIFFAudit.Models.AntibioticHistory>()

.Name("ahGrid")

.Events(e=>e.Edit("onEditah"))

.Columns(columns =>

{

columns.Bound(p => p.ID).Title("ID");

columns.Bound(p => p.AntibioticID).Title("ID");

columns.Bound(p => p.StartDate).Title("Start").Format("{0:d}"); ;

columns.Bound(p => p.Appropriate).Title("Appropriate?");

columns.Command(command => { command.Edit(); });

})

.ToolBar(commands=>commands.Create())

.Editable(editable=>editable

.Mode(GridEditMode.PopUp))

.DataSource(datasource => datasource

.Ajax()

.Model(m=>m.Id(p=>p.ID))

.PageSize(10)

.Read(read => read.Action("GetAntibioticHistory", "CDIff", new { CDiffID = Model.ID }))

.Create(create=>create.Action("insertAntibioticHistory","CDIff"))

.Update(update=>update.Action("updateAntibioticHistory","CDiff"))

)

.Pageable()

.Sortable()

.Filterable()

)

The only answer I can fin about this is this post (http://stackoverflow.com/questions/13384901/grid-into-grid-popup-editor-passing-id-parameter-in-sub-grid ) on StackOverflow , which seems like a complete bodge, and one I don't want, as I'll have at least four grids on this edit form (if it can be made to work).

Editing the sub-grids data in a pop-up form doesn't work. When I hard-coded a real ID into the read method, the grid displayed data, but the pop-up form just displayed a 0 (screen shot attached).

I need to know whether kendo can support a complex editing scenario such as this, otherwise I'll have to take another route to achieve what's needed.

Grid

answered on 16 May 2013

1 answer

101 views

background image of chart still not working

hey all
im trying to apply a background image to a chart and cant make it happen
i have it running both inline and in css

any thoughts?

heres the link:
www.the-agora.com

thanks!

Charts

answered on 16 May 2013

3 answers

269 views

Android Touch Events

I have a mobile app built with icenium and using kendo ui for the styling. I have noticed on android that touch events seem to behave strangely, I am linking 2 videos to demonstrate the problem in case my description here is not sufficient.

When an action sheet on android has an action that is located above a control with a click handler, the click event is fired. In this video I show this happening, first I touch a phone link to show that it launches the dialer, then I log into the application and open the 'options' action sheet. When I touch the 'logout' option the app navigates back to the login page which contains the phone link and because the 'logout' action is over the phone link the phone link gets touched and the dialer launches.

The second video shows another issue where touching a link will trigger the touch event of a control on the page that is linked. I first touch a link to another page in my app on the left side of the screen, there everything seems to work normally. After that I touch the link again but on the right side when the page navigates it activates the text field on the form of the second page as if it had recieved the touch action.

Is there a work around to fix this behavior? It works fine on iOS devices I have only noticed it on android ones.

General Discussions

answered on 16 May 2013

10 answers

371 views

Data not shown in kendo grid from remote data source

Creating a kendo grid from remote data source which is a odata wcf data service.
clicking on data service url shows the data in browser. however not showing the data in kendo grid.

Please check the code below and point me what am I missing here..

$(document).ready(

function() {

$(

"#grid").kendoGrid({

dataSource: {

type:

"odata",

transport: {

read:

"http://localhost:61766/WebSite1/WcfDataService.svc/Suppliers"

},

schema: {