Questions on Kendo UI for jQuery Forum

0 answers

98 views

Issue in multi-series chart when bind from datasource(without ajax)

Hi,

I am generating a bar chart having multiple series. i have generated datasource in controller and passed to view.
chart is getting displayed with no grouping on series.

Here is view code:

@(Html.Kendo().Chart(Model.VOCBar)
        .Name("chart6")
        .Title("Sales")
        .DataSource(dataSource => dataSource
            .Group(group => group.Add(model => model.Type))
            .Sort(sort => sort.Add(model => model.Date).Ascending())
            .Read(read => read.Action("_StockData", "Home"))
        )
        .Series(series =>
        {
            series.Column(model => model.Count)
                .Name("Type")
                .GroupNameTemplate("#= group.value #");
        })

.Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .ValueAxis(axis => axis.Numeric()
            .Labels(labels => labels
                .Format("{0}")
                .Skip(2)
                .Step(2)
            )
        )
        .CategoryAxis(axis => axis
            .Categories(model => model.Date)
            .Labels(labels => labels.Format("MMM"))
        )
        .Tooltip(true)
     )

Please guide me.

--
Swapnil

General Discussions

asked on 12 Oct 2012

0 answers

62 views

js events for Kendo Charts

Hey I was wondering is there a js event fired when the chart is rendered completely ? Not when the page appears with the axis (so no document.ready doesnt do the job) but when the actual points are rendered ?

General Discussions

asked on 12 Oct 2012

1 answer

137 views

Drag and Drop issue using Binding to remote data method.

Hi all,
I have found an errors when drag and drop a node to another node in Kendo UI Treeview.
I'm using remote data method to bind the treeview.
Error: 'dataSource' is null or not an object
Error: 'this._data.length' is null or not an object

TreeView

answered on 12 Oct 2012

0 answers

104 views

schema.data in razor syntax

I am new to kendoUI.

I define the chart as follows

@(Html.Kendo().Chart<SureCalc.Models.HomePurchaseReportDataModel>()
                      .Name("homePuchaseChart")
                      .Legend(legend => legend
                      .Position(ChartLegendPosition.Top)
                    )
                    .DataSource(ds => ds.Read(read => read.Action("_HomePurchaseResult", "Decision")))
                    .................................

I want to bind to a specif field in the returned object instead of the top level object.
How do I do this? I don't see schema.data exposed in RAZOR syntax.

Thanks
Sunil

Charts

asked on 12 Oct 2012

2 answers

140 views

new version of kendo.all.min.js script not supported for grid paging selection

Hi,
I have a row detail template grid with checkbox for selection of rows and paging. When I select the checkbox in first page and move to the second page and selected 1 more row, if I have returned back to the first page the selected row is not in checked condition.

I have tried out several examples and finally got it. But the problem is with the older version of kendo.all.min.js file it is working fine.
But with the new version it is not working.If we use the old version the problem is paging styles and for other different pages it is not working.

So, help me to sort this out.

Regards,
sri.

Grid

answered on 12 Oct 2012

0 answers

259 views

Make column in Grid non-editable after value is set from another column in Grid

Hello! I am working with a kendo grid control and it is pulling data from a remote source. The grid has a drop-down for one column, which when selected, will populate another field. All that is working fine. The issue I have is that, the field that is being populated by the drop down should be non-editable in the grid.

Ok, so I thought to just update the data source > model > field > editable: property for the field I want. This does make the column non-editable, but when I select the drop-down on column 1, the non-editable field never gets updated based on the drop-down field. I was debugging and saw that when the editable property is set to false, the field will never get set.

However, let's say that I already had a form saved to the db. When I open this form and it pulls the data from the db, the grid will display the correct value for the drop-down column 1, and correct value for the column 2 which is based on column 1. So I am thinking that it is a timing thing, where if the form is pulling from the db, the value is set on cols 1 and 2 before the code hits and reads the editable property for col 2?

Is there a way to make a column in a grid non-editable after it has been rendered? Or is there a way to default the column to non-editable, but ensure the change event on the drop-down is able to populate the other column?

The save fn() of the grid is below. It sets the SerialNo field just fine if the column is editable, but if not, it will never set it. I wonder if there is a reference, say to e.model.field.editable?

save: function (e) {

if (e.values["FA_No_"]) {

//Select below loops thru all values in ddl and if it = FANo,

//then set the other fields based off the FA.

//If we set the FANo field somewhere above, it does NOT trigger the

//dd.select() or .change(), so we create inline select() below to

//set the fields we need.

//NOTE: 'e.model' refers to datasource model fields and the

//faddl.dataItem refers to the ddl datasource fields.

var currFA = e.values["FA_No_"];

var faddl = $("#ddFA").data("kendoDropDownList");

faddl.select(function (dataItem) {

if (dataItem.Code == currFA) {

//First reset all values based on FANo.

e.model.set("Description", "");

e.model.set("Serial_No_", "");

//Next, update all values based on newly selected FANo.

if (dataItem.SerialNo)

e.model.set("Serial_No_", dataItem.SerialNo);

return dataItem.text === currFA;

}

});

}

Grid

asked on 11 Oct 2012

15 answers

532 views

Binding json webservice to menu - menu not populating

Hi

I am trying to implement Kendo on my webpage, with dynamically loaded menu's.
I have one menu up and running, which is generated on the server-side and then rendered by Kendo.
This works ok.

Now I am trying to retrieve the same data via a json webservice (WCF Rest) and populate the menu via the datasource.
Since there is no sample code for this, I am cutting and pasting from other samples, but I cannot get this to work.

My code is
"

            <ul id="k-menu2"></ul>
			
            <script type="text/javascript">
			    $(document).ready(function() 
                {
                    $("#k-menu2").kendoMenu(
                    {
                        dataTextField: "Name",
                        dataValueField: "Id",
                        dataSource: 
                        {
                        type: "json",
                        transport: 
                            {
                                read: "http://jason.platform4telecom.com/JsonTest/GetRoles/henkjelt/simpel/1/58/1"
                            }
                        }
                     });
                });

"

If I look in the browser via Firebug I see the following:
"
<ul id="k-menu2" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal"></ul>
"
and

"
<script type="text/javascript">
$(document).ready(function()
{
$("#k-menu2").kendoMenu(
{
dataTextField: "Name",
dataValueField: "Id",
dataSource:
{
type: "json",
transport:
{
read: "http://jason.platform4telecom.com/JsonTest/GetRoles/henkjelt/simpel/1/58/1"
}
}
});
});
</script>
"

If I test the json call via a browser I get the following output:
"
[{"Id":1,"Name":"superuser"},{"Id":3,"Name":"VNO"},{"Id":4,"Name":"Partner"},{"Id":5,"Name":"Gebruiker"}]
"

the menu should be populated with 4 roles, but this is not happening.

Where is the pitfall?

Thanks for all help!

KR

Henk Jelt

Data Source

answered on 11 Oct 2012

0 answers

151 views

setDataSource method not found on TreeView widget

Hello all,

I've been trying to create a tree-view widget using MVVM, declartive initialization and a remote Hierarchical data source. However, kendo.web is throwing a javascript error when attempting to call widget.setDataSource(source) on line #8126 of kendo.web.js (version 2012.2.710). This is in the binders.widget.source.refresh() method.

I'm confused, because looking through the JavaScript code for the TreeView widget, I see comments that say essentially that remote data sources are not supported for the TreeView widget, but various examples on the Kendo UI website show remote data being used with the HierarchicalDataSource, which in turn is used with the TreeView widget.

Does anyone have any ideas on what I might be doing wrong? I know that the binding is partially working because one of the other controls on the page is getting wired-up to its corresponding function on the viewModel.

Here is my markup...

<div id="dlsAdmin">

<select id="Mode" name="Mode" data-bind="events: { change: ChangeMode }">

<option value="Maintenance">Maintenance</option>

<option value="Reporting">Reporting</option>

</select>

<div id="customerTree"

data-role="treeview"

data-bind="source: TreeViewDataSource, value: SelectedNode"

data-checkboxes="{ checkChildren: true }"

data-load-on-demand="false"

data-text-field="text"

data-value-field="id">

</div>

Here is my ViewModel

// Generated by CoffeeScript 1.3.3

(function() {

var root;

root = typeof window !== "undefined" && window !== null ? window : global;

root.DLSAdminManager = (function() {

function DLSAdminManager(treeViewUrl) {

var dataSource;

this.SelectedNode = {};

dataSource = {

transport: {

read: {

url: treeViewUrl,

dataType: 'json'

}

},

schema: {

model: {

id: 'id',

hasChildren: 'hasChildren'

}

};

this.TreeViewDataSource = new kendo.data.HierarchicalDataSource(dataSource);

}

DLSAdminManager.prototype.ChangeMode = function() {

return alert('change mode!');

};

return DLSAdminManager;

})();

}).call(this);

and here is my initialization code

$(function() {

var adminManager = kendo.observable(new DLSAdminManager('/Admin/GetAccountHierarchy'));

kendo.bind('#dlsAdmin', adminManager);

});

TreeView

asked on 11 Oct 2012

1 answer

336 views

Using checkboxes in Detail Grid of Grid Hierarchy

Good morning everyone,

I am currently using a grid with a hierarchy where in the detail grid, I cannot get the page to render properly when I use checkboxes, that are in readonly mode, to be displayed in a column in the detail grid. If I do not use the checkboxes, the page renders properly. I am not sure what I am doing wrong in the detail grid. I am currently using a licensed version of Kendo UI Complete for ASP.NET MVC (Q2 2012).

I am using "ClientTemplate" method call in the detail grid (the grid in the "WebsiteLanguagesTemplate" script block). I tried to do many different things but still cannot get it to work

The following is my code:

@model IEnumerable<WebsiteViewModel>

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

.Name("grdAllWebsites")

.Columns(columns =>

{

columns.Bound(o => o.Id)

.Visible(false);

columns.Bound(o => o.Name)

.Width(200);

columns.Bound(o => o.Type)

.Width(125);

columns.Bound(o => o.IsActive)

.Width(75)

.Filterable(false)

.HtmlAttributes(new { style = "text-align: center;" })

.ClientTemplate("<input readonly='readonly' type='checkbox' disabled='disabled' name='chkIsActive_#=Id#' id='chkIsActive_#=Id#' #= IsActive? \"checked='checked'\" : \"\" # />");

columns.Command(command =>

{

command.Edit().Text(" ");

command.Destroy().Text(" ");

})

.HtmlAttributes(new { style = "text-align: center;" });

})

.ClientDetailTemplateId("WebsiteLanguagesTemplate")

.DataSource(dataSource =>

{

dataSource.Ajax()

.Model(model =>

{

// DataKey

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

})

.PageSize(15)

.Read(read => read.Action("Read", "Websites"))

.Update(update => update.Action("Read", "Websites"))

.Destroy(destroy => destroy.Action("Read", "Websites"));

})

.Events(events =>

{

events.Edit("Grid.onEdit");

events.Remove("Grid.onDelete");

})

.Pageable(paging =>

{

paging.Numeric(true)

.Info(true)

.PreviousNext(true)

.Refresh(true)

.Messages(message =>

{

message.Empty(AdminResource.Admin_Page_Websites_Grid_NoRecordMsg);

});

})

.Sortable()

.Filterable()

)

<script id="WebsiteLanguagesTemplate" type="text/kendo-tmpl">

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

.Name("WebsiteLanguages_#=Id#")

.Columns(columns =>

{

columns.Bound(o => o.Id)

.Visible(false);

columns.Bound(o => o.Name)

.Width(200);

columns.Bound(o => o.Code)

.Width(50);

columns.Bound(o => o.IsActive)

.Width(75)

.Filterable(false)

.HtmlAttributes(new { style = "text-align: center;" });

.ClientTemplate("<input readonly='readonly' type='checkbox' disabled='disabled' name='chkIsActive_#=Id#' id='chkIsActive_#=Id#' #= IsActive? \"checked='checked'\" : \"\" # />");

})

.DataSource(dataSource =>

{

dataSource.Ajax()

.Model(model =>

{

// DataKey

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

})

.Read(read => read.Action("Read2", "Websites", new { websiteId = "#=Id#" }));

})

.Pageable(paging =>

{

paging.Enabled(false)

.Refresh(false)

.Messages(message =>

{

message.Empty(AdminResource.Admin_Page_WebsiteLanguages_Grid_NoRecordMsg);

});

})

.Sortable()

.ToClientTemplate()

)

</script>

I am struggling a bit on this and really need to have that checkbox column available in the detail grid.

Any help on this matter, is very much appreciated.

Thank you so much for your help.

Grid

answered on 11 Oct 2012

0 answers

78 views

How not to get grid settings applied to plain html table in detail row?

I have a grid with expanding detailed row enabled and within the detailed row, I have a tabstrip (just like the demo) but instead of having another data grid inside one of the tabs, I opt to have a plain html table. However, in doing so the parent grid's table settings are applied to the plain html table. Mainly, the width is fixed and not automatically adjusted based on the content of the cell and even explicit width declaration doesn't override it. From what I read from other threads, setting "scrollable" to false in the parent grid does the trick but since this is just a plain html table, why can't I override this? I don't want to compromise by changing the parent grid as I do want it to be scrollable. I've tried setting table-layout to auto but that doesn't do anything. Any other CSS override I can apply to the plain html table to achieve this? Many thanks.

Update: turns out applying table-layout as inline works. The CSS I had in the CSS file was as followed:

.k-grid .k-detail-cell .gridtable {table-layout:auto;}

where gridtable is the class name I applied to the table.

Did I miss something?

Grid

asked on 11 Oct 2012