Questions on Kendo UI for jQuery Forum

1 answer

276 views

Is it possible to have a TabStrip widget render content using a template?
The goal here is to have something of a client card. For each card I want a tab with the Name. The content should be based on a template. I want to create an event that would allow the user to add a new item to the model and have that reflected by the tab strip[New tab, with items content rendered using the template]

Sample Data:

[{ Name: "Program 1", selectedClient: null, clients: clients},

{ Name: "Program 2", selectedClient: null, clients: clients},

{ Name: "Program 3", selectedClient: null, clients: clients}]

<div id="tabStrip" data-role="tabstrip"

data-bind="source: myModel"

data-text-field="Name"data-content-field="myTemplate">

</div>

<script type="text/x-kendo-template" id="myTemplate">

<div>

<div class="window-row">

<div class="form-label">Client:</div>

<div id="clientDropDown" data-role="combobox"

data-filter="contains"

data-bind="value: selectedClient, source: clients"

data-text-field="Name"

data-value-field="Id"

data-min-length="3" />

</div>

</script>

General Discussions

answered on 16 Apr 2014

2 answers

276 views

Problem getting multiselect values to the controller

Hello,

I'm using a multiselect and i have a problem returning the value of the multiselect to the controller while using a ajax call.

@(Html.Kendo().MultiSelect()

.Name("BaPaymentMachine")

.Placeholder("Please choose BA")

.DataTextField("Id")

.DataValueField("Id")

.DataSource(ds => ds.Read("GetAllBaPayment", "Report"))

.HtmlAttributes(new { @style = "width:200px;" }))

Model

public class SearchViewModel

{

public List<string> BaPaymentMachine { get; set; }

}

Controller

[HttpGet]

[OutputCache(Duration = 0)]

public ActionResult _GetReportPartial(SearchViewModel model)

{

do stuff to model

return PartialView(model);

}

Ajax call

var ba = $("#BaPaymentMachine").val();

alert("ba:" + ba);

$.ajax({

type: "GET",

url: '@Url.Action("_GetReportPartial", "Report")',

data: { BaPaymentMachine: ba },

cache: false,

success: function (data) {

var newBox = "<div id='reportmap' class='width:100%'>" + data + "</div>";

$("#result").html(newBox);

$(".loaderrepport").fadeOut("slow");

},

error: function () {

showerror("There was a problem getting the values, please try again.");

$(".loaderrepport").fadeOut("slow");

}

});

If i run this with an empty multiselect i get an empty string, but with values it returns null in the controller. Also the alert before the ajax call returns all the values perfectly, the version that i'm currently using 2013.3.1119.545

MultiSelect

answered on 16 Apr 2014

0 answers

233 views

Yearly Calendar View Sample

Hi All,

Just thought that i would help anyone else out struggling to replicate a yearly view of the kendo Calendar (12 instances of the calendar on the same page with a year picker).

I've implemented a couple of additional features including opening a kendoui window on select, JSON data binding and a couple of other things.

http://jsbin.com/qaqab/3/edit

Cheers,
Jonathan

Calendar

asked on 16 Apr 2014

6 answers

377 views

MVC Gird Master/Detail - How-to when all hierarchical data is in the Model already.

I am using MVC Grid to create a Master/Detail Grid.

Model.Customers, each Customer has an Orders collection (Master/Detail)

The Master Gird binds to Customers fine, but how do I tell the detail grid for each row in the master that the data is in the grid. I'm missing the linkage between the two.

The Kendo Demos have the grid going to the server each time the user clicks the Master row, but I have the data already in the Model so just need an example on how to bind it all up.

Grid

answered on 15 Apr 2014

1 answer

155 views

TabStrip is not hiding previously selected tabs content

http://trykendoui.telerik.com/@malcolm.clarke@qlinesolutions.com/omoM/12

When selecting a tab to the left of the currently selected tab, both tabs contents are being rendered.
This is cumulative if you keep moving to tabs to the left.

If this a bug or have I made a mistake?

General Discussions

answered on 15 Apr 2014

0 answers

130 views

Pass data to controller on refresh.

I am trying to pass data to the controller using MVC wrappers. But data not being send, controller is executing but data is not passed. am I doing things correctly?
Thanks

var chart = $("#SalesChart").data("kendoChart");chart.refresh({ data: { "FromDate": $("#FromDate").data("kendoDatePicker").value(), "ToDate": $("#ToDate").data("kendoDatePicker").value() }});

Function GetSalesByDate(salesByDate As BO.Models.Statistics.SalesByDate) As JsonResult

Return Json(BO.Factory.Statistics.GetSalesByDateData(BO.Factory.Statistics.GetSalesByDate))

End Function

@code

Dim SalesChart As Kendo.Mvc.UI.Chart(Of BO.Models.Statistics.SalesTimeSpan) = _

Html.Kendo.Chart(Of BO.Models.Statistics.SalesTimeSpan).Legend(False).

Name("SalesChart").Title("Units sold").Series(Sub(series)

series.Line(Function(model) model.Value, categoryExpression:=Function(model) model.Period).

Aggregate(ChartSeriesAggregate.Avg)

End Sub).

CategoryAxis(Function(axis) axis.Date().BaseUnit(ChartAxisBaseUnit.Days)).

DataSource(Function(ds) ds.Read(Function(read) read.Action("getsalesbydate", "statistics", New With {.area = String.Empty})))

SalesChart.Render()

End Code

Charts

asked on 15 Apr 2014

1 answer

120 views

Autocomplite with list

Does anybody have any idea why the autocompile not working?

Here my js code:

var list = [];

$.post('get_all_teaor', function(data){

$.each($.parseJSON(data), function() {

list.push("(" + String(this.id) + ") " + String(this.teaor_name) + "|");

});

$("#business_branch").focus(function() {

$(".foo").html(list);

console.log(typeof(list));

console.log(list.length);

$('#business_branch').kendoAutoComplete({

dataSource: list,

placeholder: "Kérem várjon ..."

});

It didnt show anything, but the list is not empty.

AutoComplete

answered on 15 Apr 2014

1 answer

128 views

'Partial' adaptive rendering

Hello
My site is using bootstrap responsive layout so, grid doesn't have vertical scroll. The grid always resizing down automatically (I have minimum height set). So grid has always some space visible.

I like very much how adaptive rendering is working for column menu.

I would like to use adaptive rendering column menu with vertical scroll less grid. So grid would behave normally like without adaptive rendering, but column menu, column resizing, would bavahave like in adaptive rendering.

Is that solution possible?

Kind Regards
Marcin

Grid

answered on 15 Apr 2014

3 answers

340 views

[Solved] Context menu functionality.

Hi.

Is there any context menu functionality related to treeview control?
Do I have to use third party libs to do that (e.g, jquery ui), or there exists some ways to do that using kendoui controls?

TreeView

answered on 15 Apr 2014

1 answer

378 views

serverSorting datasource for webui.grid

Basically I am implementing a variant of the demonstration shown here for grid with detail template

http://demos.telerik.com/kendo-ui/web/grid/detailtemplate.html

I almost have it working but.. some filter operations aren't working.

I have it working now such that the grid only requests the data it needs from the controller, which was a problem at first.. Initially I was getting ALL data from the controller and it was filtered on the grid. Not what I wanted as I anticipate the list of data might grow to be quite large eventually.

During this exercise, I switched from the asp.net grid to the kendui.web grid as it seems the asp.net grid did not have a way to enable serverfiltering in its datasource..? I am ok with using the kendo.ui web now and then

I end up with the following for my grid/datasource for the main grid
There is a detail grid that I dont' show for brevity.. it has the same issue in that sorting is not working.
This seems overly verbose but it works (almost). I took this example from this blog
http://blog.longle.net/2012/04/13/teleriks-html5-kendo-ui-grid-with-server-side-paging-sorting-filtering-with-mvc3-ef4-dynamic-linq/

$(document).ready(function () {

$("#ordersGrid").kendoGrid({

pageable: true,

sortable: true,

detailTemplate: kendo.template($("#template").html()),

detailInit: detailInit,

dataBound: function () {

this.expandRow(this.tbody.find("tr.k-master-row").first());

},

columns: [

{

field: "shopOrderHexID",

title: "ID",

},

{

field: "characterName",

title: "Pilot"

},

{

field: "CreatedDate",

title: "Created",

format: "{0:yyyy.MM.dd}"

},

{

field: "LastModifiedDate",

title: "Last Modified",

format: "{0:yyyy.MM.dd}"

}],

dataSource: {

transport: {

read: "/ShopOrders/OrderList",

dataType: "json",

type: "POST",

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

data: {}

},

parameterMap: function (options) {

return JSON.stringify(options);

},

schema: {

model: {

fields: {

shopOrderHexID: { type: "string" },

characterName: { type: "string" },

characterID: { type: "number" },

CreatedDate: { type: "date" },

LastModifiedDate: { type: "date" }

}

},

data: "Data",

total: "Total"

},

pageSize: 5,

serverPaging: true,

serverSorting: true,

serverFiltering: true

}

});

So here is what works.

serverpaging is definitely working. I can observe the separate calls as I page through the data and I can review the results, I see that it definitely only pulled a single page of information. Great!

http://localhost:58507/ShopOrders/OrderList?take=5&skip=0&page=1&pageSize=5
http://localhost:58507/ShopOrders/OrderList?take=5&skip=5&page=2&pageSize=5

Ok so far so good.
What doesn't work though.. is sorting.
If I select any column to be sorted (ID, or Created) for example, I can see the request sent to the controller but the controller is returning with unsorted data..as if the sort is not support.

These two requests from the grid, return the same exact data for example.. that's not good.
I can see it asking for sort on the shopOrderHexID which is a valid field in the data I pass to ToDataSourceResult... but... it isn't sorted.
Basically I should be getting the last 5 entries in the data table but I still get the same first 5 entries, even sorted in the same order.

http://localhost:58507/ShopOrders/OrderList?take=5&skip=0&page=1&pageSize=5

http://localhost:58507/ShopOrders/OrderList?take=5&skip=0&page=1&pageSize=5&sort%5B0%5D%5Bfield%5D=shopOrderHexID&sort%5B0%5D%5Bdir%5D=asc&sort%5B0%5D%5Bcompare%5D=

Now I notice that if I ask for serverSorting: false, then the grid does sort the data when I manipulate the columns, but it is only sorting the data it has at ahnd which is of course only the data on the current page. Ok fine.. but thats not what I want. I want sorting by a column to basicaly be showing the first or last 5 items in the table... right? That is what the end-user is going to expect and desire I think..

Ok so the magic is likely in the controller (though it might be in the configuration of the datasource above)
My controller function is

// returns a list of products in a specific category for the active user

public JsonResult OrderList([Kendo.Mvc.UI.DataSourceRequest]Kendo.Mvc.UI.DataSourceRequest request)

{

var userID = User.Identity.GetUserId();

// build results, make sure to return only orders from current user

var orders = repository.shopOrders

.Where(order => order.userID == userID)

// avoid circular reference by converting to view model, and flatten the model

.Select(e => new ShopOrderViewModel

{

shopOrderID = e.shopOrderID,

characterName = e.characterName,