Questions on Kendo UI for jQuery Forum

5 answers

244 views

How to handle nested lists w/animation and datasource

Hi

I'd like to create a navigable list that is multiple levels deep. I'd like to do this in a ListView, and have the listview animate (slide) when the user chooses an item that exposes another hierarchy level.

E.g. assume this data:

top
item 1
item 2
item 3
item a
item b

I'm OK getting the listview to show items 1, 2, 3 - that's easy. What I don't understand is how to force the listview to provide a slide navigation when I re-run the query with a different set of query params to get item a, b.

To be honest - I've actually implemented this already - but the only way I was able to force the listview to provide me the slide transitions was to build a complete new view on the fly, with a new unique ID for every single level in the hierarchy - and I wondered if there was a better way to do this.

Thanks

General Discussions

answered on 14 Mar 2013

1 answer

390 views

TabStrip item Visible() Method isn’t working when used in Grid Detail template scenario

Hi,

I’m trying to add tabs control as client template (nested element inside grid) and hide some tabs based on the data in the grid using ajax binding.

I’m using boolean expression inside item().Visible([boolean expression here]) to determine whether or not show each tab. Even though Boolean expression is correct, Visible() method doesn't reflect it.

As an example I used Kendo Demo Project (Kendo.Mvc.Examples) /razor/web/grid/detailtemplate.cshtml page:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("Employees")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(140);
        columns.Bound(e => e.LastName).Width(140);
        columns.Bound(e => e.Title).Width(200);
        columns.Bound(e => e.Country).Width(200);
        columns.Bound(e => e.City);
    })
    .ClientDetailTemplateId("employeesTemplate")
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
        .PageSize(5)
    )
    .Sortable()
)
 
<script id="employeesTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("TabStrip_#=EmployeeID#")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Orders").Content(@<text>
                    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
                        .Name("Orders_#=EmployeeID#")
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.OrderID).Width(101);
                            columns.Bound(o => o.ShipCountry).Width(140);
                            columns.Bound(o => o.ShipAddress).Width(200);
                            columns.Bound(o => o.ShipName).Width(200);
                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
                        )
                        .Pageable()
                        .Sortable()
                        .ToClientTemplate())
                </text>                        
                );
                items.Add()
                    .Visible("#= Country #" == "USA")
                    .Text("Contact Information: #= Country #").Content(
                    "<div class='employee-details'>" +
                        "<ul>" +
                            "<li><label>Country:</label>#= Country #</li>" +
                            "<li><label>City:</label>#= City #</li>" +
                            "<li><label>Address:</label>#= Address #</li>" +
                            "<li><label>Home Phone:</label>#= HomePhone #</li>" +
                        "</ul>" +
                    "</div>"
                );                
            })
            .ToClientTemplate())
</script>

I've highlighted the only 2 changes I had made.

Any suggestions?

Thanks,
-Brett

TabStrip

answered on 14 Mar 2013

1 answer

107 views

Select an item in DropdownList control present inside a custom editor feild of a grid.

Hi,

I have a grid in which i have a column, for which i have a custom editor defined, in edit mode it shows a drop down list in the column. The dropdownlist is getting remote data and its rendering correctly, but I am unable to select an item after the dropdownlist is getting data binded. Basically the item to be default selected is different for different rows.

This is my code :

$("#grid").kendoGrid({

dataSource: dataSource,

filterable: true,

sortable: {

mode: "multiple",

allowUnsort: true

},

height: 400,

pageable: true,

selectable: "row",

resizable: true,

reorderable: true,

columns: [

{ field: "DocumentName", title: "Document Name", width: "150px" },

{ field: "DocumentDescription", title: "Description", width: "150px" },

{ field: "StateId", title: "State", width: "120px", editor: categoryDropDownEditor },

{ field: "Policy_CertificateNumber", title: "Policy/Certificate Number", width: "170px" },

{ field: "Amount", title: "Amount", format: "{0:c}", width: "110px" },

{ field: "ExpiryDate", title: "Expiry Date", width: "110px", template: '#= kendo.toString(ExpiryDate,"M/d/yyyy")#' },

{ command: [{ id: "View", name: "View", click: showDetails, template: "<a class='k-button k-button-icontext k-grid-View' href='' style='min-width:7px;'><input type='image' src='../../Content/Images/document.png' text='''/></a>" },

{ id: "edit", name: "edit", template: "<a class='k-button k-grid-edit' href='' style='min-width:7px;'><span class='k-icon k-edit'></span></a>"}],

title: " ", width: "92px"

}],

editable: "inline"

});

And this is my custom editor code :

function categoryDropDownEditor(container, options) {

$('<input data-text-field="StateName" data-value-field="StateId" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

autoBind: false,

dataTextField: "StateName",

dataValueField: "StateId",

dataSource: {

type: "json",

transport: {

read: function (options) {

$.ajax({

type: "GET",

url: "Documents.aspx/GetStates",

contentType: "application/json; charset=utf-8",

dataType: "json",

data: options.data,

success: function (result) {

var d = $.parseJSON(result.d);

options.success(d);

}

});

}

});

}

So what i want to achieve is that, after dropdownlist databind, it should an item out of it, and this item to be selected is different for each row.

Please help.

Grid

answered on 14 Mar 2013

1 answer

93 views

Calling datasource.read(data) will delete .pageSize property when serverPaging is not enabled

If I have a data source on with serverPaging: false and the following object:

var params =

{

"date": "2013-03-13T07:00:00.000Z",

"region":0,

"pageNumber":1,

"pageSize":10,

"sortBy":0,

"sortOrder":0

};

When I call

myDataSource.read(params),

the pageSize property is removed from my params object. This is due to line 6817 in kendo.all.js, version 2013.3.1315, highlighted below:

if (!that.options.serverPaging) {
     delete options.take;
     delete options.skip;
     delete options.page;
     delete options.pageSize;
}

I would love to set serverPaging: true and avoid the running of this code, but it causes
an infinite loop, continuously requesting reloading of my data from the server,
so I must set it false. I do not have the time to post about that separate problem
unfortunately, but it is very concerning.

Regardless, seems like properties on user-created data objects being passed to the .read() method
should never be deleted.

Data Source

answered on 14 Mar 2013

0 answers

76 views

PUT and DELETE http verbs don't work in transport, change "contentType" either (2)

First of all sorry for this thread, but I can't access my old one with the same title.
I only want to say thank you very much to Rosen, your solution works perfect.
A quick, precise and right answer. Good job!

Data Source

asked on 14 Mar 2013

0 answers

64 views

trouble with more series in the mvc wrapper

I have trouble with multiple series in chart with the MVC wrapper.

Any help would be great!

public class IncomeChartModel

{

public string Label { get; set; }

public List<int> Year { get; set; }

public List<int> Data { get; set; }

}

My razor

@{

var kendo = Html.Kendo().Chart(Model.IncomeChart);

kendo.Title("Inkomen");

kendo.Name("IncomeChart");

kendo.CategoryAxis(axis => axis.Categories(model => model.Year));

kendo.SeriesDefaults(s => s.Area());

foreach (var item in Model.IncomeChart)

{

var myItem = item;

kendo.Series(series => series.Area(model => myItem.Data).Name(myItem.Label)).AutoBind(true);

}

kendo.Render();

}

The result:

jQuery(function(){jQuery("#IncomeChart").kendoChart({"title":{"text":"Inkomen"},"series":[{"name":"AOW","type":"column","field":"myItem.Data"},{"name":"Brand New Day","type":"column","field":"myItem.Data"}],"categoryAxis":[{"categories":["System.Collections.Generic.List`1[System.Int32]","System.Collections.Generic.List`1[System.Int32]"]}],"dataSource":{"schema":{"model":{"fields":{"Label":{"type":"string"},"Year":{"type":"object"},"Data":{"type":"object"}}}},"data":[{"Label":"AOW","Year"

:[2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025,2026,2027,2028,2029,2030,2031,2032,2033,2034,2035,2036,2037,2038,2039,2040,2041,2042,2043,2044,2045,2046,2047,2048,2049,2050,2051,2052,2053,2054,2055,2056,2057,2058,2059,2060,2061,2062,2063,2064,2065,2066,2067,2068,2069,2070,2071,2072,2073,2074],

"Data"

:[1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},{

"Label":"Brand New Day","Year"

:[2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025,2026,2027,2028,2029,2030,2031,2032,2033,2034,2035,2036,2037,2038,2039,2040,2041,2042,2043,2044,2045,2046,2047,2048,2049,2050,2051,2052,2053,2054,2055,2056,2057,2058,2059,2060,2061,2062,2063,2064,2065,2066,2067,2068,2069,2070,2071,2072,2073,2074],

"Data"

:[25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000,25000]}]},

"autoBind":true});});

Charts

asked on 14 Mar 2013

1 answer

88 views

Kendo MVVM whitepaper with comparison info?

Hello,

Is there an available Kendo whitepaper or blog post comparing and contrasting Kendo's MVVM support with alternatives, like Knockout.js? I know there's a not-very-flattering thread here about that comparison, but haven't found anything official from Kendo.

Thanks,

Jon

MVVM

answered on 14 Mar 2013

2 answers

124 views

looking for a similar function "Callbackpanel"

Greetings

Devexpress got a functionallity which can be used for a ClientSide events to call the Controller. Check out this demo CallbackPanel.
Does Kendoui has something similar?
I think this could be handled by Ajax, but for the moment I want to avoid it.

cheers and thanks

General Discussions

answered on 14 Mar 2013

5 answers

266 views

Routing to Other Pages?

Hello,

Is the approach to Kendo to use templates to route between views on a single page? Does it support navigation between multiple HTML pages, for example, like the approach Windows takes to single page applications?

Thanks.

SPA

answered on 14 Mar 2013

1 answer

300 views

PUT and DELETE http verbs don't work in transport, change "contentType" either

Hello everybody:
I'm currently testing KendoUI in order to adopt it for new developments and I have two big problems with the ajax request. You can download a complete solution from https://github.com/ragare62/AriUserManagement in order to test this behaviour. If you load AriUMSolution and start AriUMWebApi and AriUMWebHtml (UserGroupGrid.shtml) you'll access to a Kendo grid page and try to create, update or delete registers.

PUT and DELETE http verbs don't work:
When I specify the "type" attribute in "transport.create" to "POST", "transport.update" to "PUT" and "transport.destroy" to "DELETE" the result is always a request with the "OPTIONS" verb. Reading the JQuery documentation about ajax request I realize that "PUT" and "DELETE" could be problematic. Well, I said to myself I'll work only with "POST" so far, and then it came the second problem.

When change "contentType" the request doesn't work:
In my example when you create a new register a "POST" request is issued but webapi can't deserialize the JSON object in the request body. When I debugged that problem with Fiddler I realized that the Content-Type was "Content-Type: application/x-www-form-urlencoded; charset=UTF-8", if I changed "application/x-www-form-urlencoded" to "application/json" with Fiddler everything worked fine. I tried to fix the content type in "transport.create" with the "contentType" attribute to "application/json". But if I did that, the http verb changes from "POST" to "OPTIONS".

I tested these issues with "html" pages instead of "shtml" pages and with different browsers with the same result.
Any help would be appreciate.
Thanks in advance.

Data Source

answered on 14 Mar 2013