Questions on Kendo UI for jQuery Forum

1 answer

223 views

I'm using treeview with angularjs. When I check a parent node, none of the child checkbox ng-models are updating. I supplied ng-models via the checkboxTemplate property in the config. Do I need to do something special to get these to update if their parent checkbox is checked?

TreeView

answered on 18 Mar 2015

1 answer

95 views

Wiring a js along with the create command

Hi Everyone,

Good Morning!

Have implemented the Batch edit grid. I need to call a js after the out of box command of create is executed, is there any way to do it?

Karishma

Grid

answered on 18 Mar 2015

6 answers

511 views

Manually add chart legends to stacked chart

Hi,

Following on from the excellent help so far from Telerik I am now on the final part of my chart but once again seem to have come up short. I essentially have two questions regarding getting data and the other on showing legends when added manually from JavaScript

Accessing Data
When I create the chart I find the template feature very helpful but am having trouble getting some data items for the tool-tip as well as legends (which is why I ask question two), my structure is:

public class ClassOne

{

public ClassOne()

{

Sites = new List<ClassTwo>();

}

public string FieldOne { get; set; }

public string FieldTwo { get; set; }

public List<ClassTwo> Sites { get; set; }

}

public class ClassTwo

{

public decimal Value { get; set; }

public string Name { get; set; }

}

So in the above example how would I show the "Name" part which is essentially my Y axis in the chart from the template as the following does not work, or should I look at flattening out the objects?

.Template("#= category # : #= dataItem.Name ##= kendo.toString(value, 'n') #")

2 - Manually Add Legends
The second question is related to adding legends, I would like the name from the above structure to be added as legends to the chart, I'm doing the following to add them:

var leg = [];

for (var website = 0; website < websiteCount; website++) {

leg.push(ds[0].WebSite[website].WebSiteName);

}

chartOptions.legend.labels = leg;

chart.redraw();

When doing this and running though the chrome debugger console I can see the results

chart.options.legend

Object

{

labels: Array[9],

inactiveItems: Object,

visible: true, position: "bottom"

}

inactiveItems: Objectlabels: Array[9]

0: "SITE1"

1: "SITE2"

2: "SITE3"

3: "SITE4"

4: "SITE5"

5: "SITE6"

6: "SITE7"

7: "SITE8"

8: "SITE9"

length: 9

__proto__: Array[0]

position: "bottom"

visible: true

__proto__: Object

Yet nothing shows on the chart so I'm guessing I'm missing something so any help would be appreciated on this.

Regards
Mike

Charts

answered on 18 Mar 2015

4 answers

220 views

Show Raw Value in Form

I have a MastedTextbox in a form. It is for zip codes that use the 00000-0000 mask. When I send the data to the back-end I strip the -____ off if only 5 digits were entered. This part works fine.

When displaying the form I would like to be able to show the zip code as 12345 (if 5 digits entered) or 12345-6789 (if nine digits were entered). If the MaskedTextbox is in a grid I can do this with a template such as template: '#= (zip) ? formatZipCode(zip) : " " #'. How do I do this in a normal form?

Thanks

Steven

MaskedTextBox

answered on 18 Mar 2015

1 answer

761 views

Dynamically creating panel bar items containing partial views and models

I want to dynamically create several panel sections that each contain a partial view and have each bind to a corresponding model.
I have a main model that contains a list of child models. Each child model has a property to specify the name of it's partial view.

The logic below correctly outputs each panel's content by using a foreach statement.
The issue I'm having is the "for each" loses my child models when I post my main model back to the controller on save.
How can I perform the same logic utilizing a "BindTo" instead of a "foreach"?
Are their any other ways to dynamically create panel bars containing partial views via a model collection?

@(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.Animation(animation => animation.Enable(false))
.Items(panelbar =>
{
foreach (ModelBase childModel in Model.ChildModels)
{
panelbar.Add()
.Text(childModel.PartialViewTitle)
.Content(@<section>
@Html.Partial(childModel.PartialViewName, childModel)
</section>);
}
}));

PanelBar

answered on 18 Mar 2015

1 answer

118 views

Erasing all data (Angular)

I have a dropdown to select a new calendar to view. That also triggers new resources. I need to remove all the current data and resources, and then reload it.

What is the best way? I am currently using the ObservableArrays like:

event = new kendo.data.ObservableArray([]);
$scope.ds = new kendo.data.SchedulerDataSource({
data: event
});

Setting event to null doesn't work, same for $scope.ds, I even iterate over event calling pull, nothing makes the data go away.

Help :)

I should mention, I put data back by using event.push

Scheduler

answered on 18 Mar 2015

3 answers

572 views

Editable:false not working with complex model

I have a grid with most cells bound to model members at the first level. However, my model also contains object members, and I am binding a few columns to members within the object. I am using incell editing, but I obviously want to restrict editing on certain fields.

Here is an small example of my model:
{
Id: 123456,
Name: 'some name',
Cost: 34.56,
Station: {
CallLetters: 'WKGB',
NetworkId: 123
}
}

I am able to bind to the grid without any issue using the following:
schema: {
model: {
fields: {
Id: { type: "number", editable: false },
Name: { type: "string" },
Cost: { type: "number" },
Station: { CallLetters: { type: "string", editable: false }, editable: false }
}
}
}

and:
columns = [
{ title: 'Id', field: 'Id', hidden: true, menu: false },
{ title: 'Station', field: 'Station.CallLetters', width: 80 },
{ title: 'Name', field: 'Name', width: 120 },
{ title: 'Cost', field: 'Cost', width: 95, format: '0:c2' }
]

As you can see, I am setting (and trying to set) certain fields editable: false, and this works just fine for the Id field, and any other field at the top level of my model, but it does not work for the Station.CallLetters field. The Station column is still editable.
Everything else is working fine.

Anyone know what I am doing wrong?

Grid

answered on 17 Mar 2015

3 answers

190 views

[Solved] series.labels.visual not working

Hi,

I've been trying to get the custom rendering of the series label to work with a donut series chart, but the error I get is "Cannot read property 'center' of undefined" when trying to access the 'rect' property of the e object. This also fails in the dojo example supplied in the docs. Inspecting the object sent to the visual function shows that none of the documented argument fields are available, only dataItem, series and value. I've tried using both seriesDefaults and setting it specifically on the series itself, both result in the same error.

I've been following the instructions here http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.labels.visual

Additionally, there might be a typo somewhere as inspecting the series object received shows a field called 'vericalLine'.

Kind regards,
Greg

Charts

answered on 17 Mar 2015

10 answers

1.4K+ views

Click Event

I would like to have a notification that auto hides after a period, but allows for a separate click event. Any idea how to do this?

Notification

answered on 17 Mar 2015

1 answer

205 views

Inline Editing not working in Kendo WIndow

Hello,

I have a Grid as below. If I use the Grid in regular page, It is working fine. The same Grid I used in Kendo Window. When I click on Edit, Grid row is changing to Editable mode. After changing and Click on Update, controller is not getting fired and Grid is still in Editable mode. How Can I fire controller from Kendo WIndow ?

@(Html.Kendo().Grid(Model)
.Name("ZipGrid")
.HtmlAttributes(new { @class = "GridStyle" })
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden();
columns.Bound(p => p.ZipCode).Width(250);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.ToolBar(toolBar =>
{
toolBar.Create().Text("Add Zip Code");
})
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("onError"))
.Model(model => model.Id(p => p.Id))
.Create(create => create.Action("AddZipCode", "Manage"))
.Read(read => read.Action("GetZipCode", "Manage"))
.Update(update => update.Action("UpdateZipCode", "Manage"))
.Destroy(Destroy => Destroy.Action("AddZipCode", "Manage")).ServerOperation(false)
)
)

Grid

answered on 17 Mar 2015