Questions on Kendo UI for jQuery Forum

3 answers

351 views

Column Menu -> Filter Menu not staying open

Hello!

I was able to reproduce the problem by adding just two lines of code (filterable: true, columnMenu: true) to the official Kendo Grid basic usage demo: http://dojo.telerik.com/iSEcU/2

Repeat following steps:

1. Click on column menu icon
2. Move mouse cursor to "Filter" menu button -> "Filter" sub menu opens
3. Move mouse cursor to one of the two filter text input fields without leaving the "Filter" sub menu area -> "Filter" sub menu closes immediately

Current work-around is to click at one of the drop down lists first or to use the tab key to navigate between the input fields.

However, this seems like a bug to me, which is very annoying to our users. How can this be fixed?

Best regards,
Kaan

Grid

answered on 23 Jan 2017

9 answers

217 views

What is right way to do inline autoadding to grid?

Hi team!

I need to add new row with inline input to grid automatically when grid loaded. I do it in dataBound (see below).

My "pipeline" is next:

I have page with Shopping Cart and I need to fill it by shop assistant.
I type product code to inline input and call Update (through barcode scanner)
pass barcode to server and check availability of such a product
If no such product - return error otherwise save product
after adding product to cart I need automatically show inline input for adding next product or dublicate previous etc.
when the cart is filled I need possibility to save it

I have two problem with it:

When I click Save I get requare validation error (if I remove required: true new row will adding in infinity loop. If I click Cancel new row will added again in dataBound).
When I delete row a new one empty row is added to grid (in total - two)

see screenshot please.

Could you please suggest me a right way? :)

Just in case I've attached an screenshot and my js code

Thank you.

dataBound: function () {

setTimeout(function () {

var grid = $("#order-grid").data("kendoGrid");

grid.addRow();

});

},

...

model: { id: "Id", fields: { Gtin: { validation: { required: true }, editable: true, type: "string" }, ... } }

Grid

answered on 23 Jan 2017

1 answer

71 views

Permanently Make Connectors Visible

I'm trying to permanently make the connectors visible and not just when you hover over it with the mouse. I can't seem to find the option to turn off the hover option that makes them appear when I hover over a shape. What would be the best way to accomplish this?

Thanks!

Diagram

answered on 23 Jan 2017

5 answers

327 views

Align category labels with line values

Hi,

If my chart has only a line series, then the category axis labels align with the line values. But if i add an area series too, then the labels align with the area values instead of the line values.

Is it possible to have both, a line and an area series, but to keep the category axis labels aligned with the line values? (in the images, the grey area has 2 values: 0, 0)

@(Html.Kendo().Chart()

.Name("graph")

.Title("")

.Legend(legend => legend.Visible(false))

.Series(series =>

{

//light grey area

series.Area(Model.Model.GreyAreaValues).Name("GreyArea").Color("#F2F2F2").Opacity(1).Line(l =>

{

l.Color("#F2F2F2");

l.Style(ChartAreaStyle.Step);

l.Width(4);

}).Axis("valuesAxis").Markers(false);

//blue line

series.Line(Model.Model.BlueLineValues).Name("BlueLine").Color("#3399FF").Width(4).DashType(ChartDashType.Solid).Markers(false).Style(ChartLineStyle.Step);

})

.CategoryAxis(axis => axis.Name("categoryAxis")

.Categories(Model.Model.CategoryValues)

.MajorGridLines(lines => lines.Visible(false))

.Labels(l => l.Format(CateGoryLabel)

.Margin(1)).Justify(true)

.Labels(l => l.Font("'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans - serif"))

)

.ValueAxis(axis => axis

.Numeric("valuesAxis")

.Labels(labels => labels.Format("{0:C}"))

.Labels(l => l.Font("'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans - serif"))

.AxisCrossingValue(-10)

.MinorGridLines(l => l.Visible(false))

.MajorGridLines(l => l.Visible(false))

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0}%")

.Template("#= kendo.toString(value, \"c\") #")

)

Thank you in advance!

Charts

answered on 23 Jan 2017

1 answer

44 views

Having troubles with the 0 point when using multiple y-axes

Hi,

in my scenario I have two different y-Axes. As you can see on the screenshot below the 0 point of the axes are not on the same height. Is there any possibility to modify they-axes, so the 0 point of the y axes are on the same height?

Thanks and best regards
Daniel

Charts

answered on 23 Jan 2017

1 answer

290 views

angularjs load tabstrip on demand

I want to load tabstrip when the tab is clicked only. It would work if I put contentUrls in "document ready function". But when I put url in <div class k-content-url=...> with angularjs, it will load all the tab content together.

How can I use angularjs inside tabstrip but load the tab content on demand only? Thanks.

No angularjs, but each tab load on demand:

$(document).ready(function () {
var ts = $("#tabstrip").kendoTabStrip({
animation: { open: { effects: "fadeIn" } },
contentUrls: [
'clientApp/views/admin/access.html',
'clientApp/views/admin/facility.html',

angularjs but all tab content load immediately

<div class="col-md-9 addpadding" kendo-tab-strip k-content-urls="[ null, null, null]">
<ul>
<li class="k-state-active">Basic Info</li>
<li>another tab2</li>
<li>another tab3</li>
</ul>
<div style="padding: 1em" data-ng-class="{inactivePink: staff.Inactive}">
<div data-ng-include="'/clientApp/staff/partial/basicinfo.html'"></div>
</div>
<div style="padding: 1em">
<div data-ng-include="'/clientApp/staff/partial/anothertab2.html'"></div>
</div>
</div>

TabStrip

answered on 23 Jan 2017

20 answers

4.4K+ views

Image only on command buttons.

Hi All:

I would like to decrease the size of the edit controls. I have an edit command as follows:

{ command: [{ name: "edit", text: "", width: 30 }], title: " ", width: 55 },

the width 30 does not seem to do anything. I would like to only have the image.
I am using 7/10/2012 version 2012.2.710.340.

Phil

Grid

answered on 23 Jan 2017

3 answers

196 views

How to override mobile style on DropDownList?

I am using a DropDownList with Kendo Mobile, and would like to override the mobile style when clicking the control.

Now it get's style as the image to the left (mobile style), but I'd prefer the standard kendo style (right)

DropDownList

answered on 22 Jan 2017

1 answer

428 views

How to remove filter for boolean column

I have a column on a grid that is a boolean value. The user has three filter choices; True, False or Show All (i.e. no filter). Because the column is boolean

filter({ field: "fieldName", operator: "startswith",value: "" })

raises an exception. The boolean column won't accept a string in the filter on the server (uses Ajax).

How can the filter for the column be 'reset' (there may be other columns filtered, so any other filters are still needed)?

Grid

answered on 20 Jan 2017

7 answers

115 views

Inline Edit a field that is not in a column

Hi,

So to expand on my title a bit, I have a grid that displays columns (for example): From address, to Address, cc Address and Subject. And then in a 'detailTemplate' I'd like to display the 'message'. I'd like to use Inline editing to add/edit records if its possible.

Which is why Im here, Is it possible to use inline editing to set/edit an attribute that isnt actually displayed in the grid, or is this something thats outside the scope of the inline edit functionality?

Thanks,
Grant

Grid

answered on 20 Jan 2017