Questions on Kendo UI for jQuery Forum

9 answers

1.6K+ views

[Solved] How to render only the selected tab content?

Is it possible to render only the selected tab content from partial view? Something like:
index.cshtml

<body>

<div>

@(Html.Kendo().TabStrip()

.Name("Tabs")

.Items(tabs =>

{

tabs.Add().Text("Tab1");

tabs.Add().Text("Tab2");

tabs.Add().Text("Tab3");

})

.ItemAction(item =>

{

string tabViewName = string.Format("Tabs/{0}", ViewBag.TabName);

if (item.Text.Equals(ViewBag.TabName, StringComparison.CurrentCultureIgnoreCase))

{

item.Selected = true;

item.Content = () =>

@Html.Partial(tabViewName).ToHtmlString();

}

else

{

item.Url(item.Text);

}

)

</div>

</body>

The code above renders an empty div for the content of the selected tab.
However when using @Html.Partial(tabViewName).ToHtmlString(); in a different section of the view the partial content is correctly rendered.
I do have a sample project if needed.
Thanks,
Julian

TabStrip

answered on 12 Aug 2015

1 answer

432 views

[Solved] Custom Template not working with knockout

Hi there,

We trying to display a custom event template on my view but doesn't seem to work. I even tried using to custom editor but to no avail.

Please see my code below script:

define([

'global/session',

'services/logger'

],

function (session, logger) {

var vm = function () {

var self = this;

self.title = "All Reservations";

self.table = null;

self.session = session;

self.config = {

currentTimeMarker: false,

allDaySlot: false,

majorTimeHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'h')#</strong><sup>00</sup>"),

date: new Date(),

startTime: new Date(getDateTime('07', getMonday(new Date()).getDate())),

endTime: new Date(getDateTime('20', getMonday(new Date()).getDate())),

mobile: true,

//height: 700,

views: [

"day",

{ type: "week", selected: true },

//"month",

"agenda",

//"timeline"

],

majorTick: 1440,

minorTickCount: 1,

editable: {

window: {

title: "My Custom Title",

animation: false,

template: $("#editor").html()

//open: myOpenEventHandler

}

},

eventTemplate: $("#eventTemplate").html(),

dataBinding: function (e) {

var tables = $(".k-scheduler-times .k-scheduler-table");

//Required: remove only last table in dataBound when grouped

tables = tables.last();

var rows = tables.find("tr");

rows.each(function () {

$(this).children("th:last").hide();

});

},

dataSource: {

batch: true,

transport: {

read: {

url: "http://demos.telerik.com/kendo-ui/service/meetings",

dataType: "jsonp"

},

update: {

url: "http://demos.telerik.com/kendo-ui/service/meetings/update",

dataType: "jsonp"

},

create: {

url: "http://demos.telerik.com/kendo-ui/service/meetings/create",

dataType: "jsonp"

},

destroy: {

//Delete Meeting

url: "http://demos.telerik.com/kendo-ui/service/meetings/destroy",

dataType: "jsonp"

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

},

schema: {

model: {

id: "meetingID",

fields: {

meetingID: { from: "MeetingID", type: "number" },

title: { from: "Title", defaultValue: "No title", validation: { required: true } },

start: { type: "date", from: "Start" },

end: { type: "date", from: "End" },

startTimezone: { from: "StartTimezone" },

endTimezone: { from: "EndTimezone" },

description: { from: "Description" },

recurrenceId: { from: "RecurrenceID" },

recurrenceRule: { from: "RecurrenceRule" },

recurrenceException: { from: "RecurrenceException" },

roomId: { from: "RoomID", nullable: true },

attendees: { from: "Attendees", nullable: true },

isAllDay: { type: "boolean", from: "IsAllDay" }

}

},

group: {

resources: ["Rooms"],

orientation: "vertical"

},

resources: [

{

field: "roomId",

name: "Rooms",

dataSource: [

{ text: "Meeting Room 101", value: 1 },

{ text: "Meeting Room 202", value: 2 },

{ text: "Meeting Room 203", value: 3 },

{ text: "Meeting Room 204", value: 4 },

{ text: "Meeting Room 205", value: 5 },

{ text: "Meeting Room 206", value: 6 },

{ text: "Meeting Room 207", value: 7 }

],

title: "Room"

}

],

footer: false

};

self.activate = function () {

};

self.attached = function () {

};

self.deactivate = function () {

};

return vm;

});

And my html:

<div class="col-md-12">

<h2 data-bind="text: title"></h2>

</div>

<div class="col-md-12">

<div style="margin-bottom: 20px;" data-bind="kendoScheduler: config"></div>

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

<div class="movie-template">

<h3>#: title #</h3>

</div>

</script>

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

<h3>Edit meeting</h3>

<p>

<label>Title: <input data-bind="value: title" /></label>

</p>

<p>

<label>Start: <input data-role="datetimepicker" data-bind="value: start" /></label>

</p>

<p>

<label>End: <input data-role="datetimepicker" data-bind="value: end" /></label>

</p>

</script>

</div>

Your assistance would highly appreciated.

Sincerely

Scheduler

answered on 12 Aug 2015

1 answer

651 views

Filter in Kendo grid with JSON using AngularJS

I have a kendo grid populated dynamically using AngularJS. I am using web api for populating in my grid.

I want to perform filter on each of the columns, filter is getting displayed in browser but it is not working.

Appreciate if someone finds time to guide me how to achieve filtering in all columns (dynamically irrespective of column data type) in case of my code.

My code for reference is as below:

---dataApp.js---------------

var app = angular.module("app", ["kendo.directives"]);
app.controller("dataController", function ($scope) {
var uri = '';
$scope.LoadLib = function () {
uri = 'api/libs';
loadGrid();
}
$scope.LoadProd = function () {
uri = 'api/products';

loadGrid();
}
function loadGrid() {
$scope.dataTableSource = new kendo.data.DataSource({
type: "json",
transport: {
read: uri
},
serverFiltering: true
});
$scope.dataTableGridOptions = {
dataSource: $scope.dataTableSource,
filterable: {
mode: "row"
}
}
}
});

---index.html----------------------------------------------------------------------------------

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/dataApp.js" type="text/javascript"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div>
<div ng-app="app" data-ng-controller="dataController">
<button id="loadLib" class="btn btn-primary" type="button" data-ng-click="LoadLib()">Get Lib</button>
<button id="loadProd" class="btn btn-primary" type="button" data-ng-click="LoadProd()">Get Products</button>
<div kendo-grid="dataTableGrid" k-options="dataTableGridOptions" k-rebind="dataTableGridOptions"></div>
</div>
</div>
</body>

---model------

public class lib
{
public string Name { get; set; }
public string Path { get; set; }
public string DateUpdated { get; set; }
}

--- web api controller----

public class libsController : ApiController
{
lib[] libs = new lib[]
{
new lib{ Name = "Book1", Path="Path1", DateUpdated=System.DateTime.Now.ToString() },

new lib{ Name = "Book2", Path="Path2", DateUpdated=System.DateTime.Now.ToString() }

        };
public IEnumerable<lib> GetAllLibs()
{
return libs;
}
}

------------model-----------------

public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public decimal Price { get; set; }
}

-------web api controller--------

public class ProductsController : ApiController
{
Product[] products = new Product[]
{
new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
};
public IEnumerable<Product> GetAllProducts()
{
return products;
}
}

----------------WebApiConfig.cs-----------------------

public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
//To produce JSON format add this line of code
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
}
}

Grid

answered on 12 Aug 2015

1 answer

294 views

Cannot save data from inline editing

I recently tried the facility for CRUD data using inline editing, I just tried to run the save command but failed. I combine three files:
1. SQL to store data that has been inputted

2. Javascript to run commands on kendo ui.

3. PHP as an object that is used as a variable for the operation of the data.
<script type="text/x-kendo-template" id="edit">
<button class="btn btn-default btn-sm" type="button" onclick="group.save('${inventorygroupname}')">Edit Data</button>
</script>

I have successfully used this concept to the method of the popup, but for my inline application failed. ask for help. Thank you

Grid

answered on 12 Aug 2015

3 answers

2.0K+ views

How to use the DataSourceRequest as a parameter in a WebAPI GET method?

Hello,

After reading the MVC AJAX binding sample code:
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding

I considered using the DataSourceRequestAttribute and DataSourceRequest in a WebAPI Get method. The signature would look like this:

public DataSourceResult Get([DataSourceRequestAttribute] DataSourceRequest request)

I configured the Grid to make the AJAX request as a Get. However it doesn't work. After some research I found out ModelBinders in WebAPI have to implement the System.Web.Http.ModelBinding.IModelBinder, while MVC requires implementing the System.Web.Mvc.IModelBinder interface instead.

Everything works fine, but that's not very REST-compliant. I rather call the Get method from the grid and pass all parameters in the query string.

This question is for Telerik: Do you have something in place (or planning to implement) similar to "ApiDataSourceRequestAttribute" that returns a ModelBinder based on System.Web.Http.ModelBinding.IModelBinder to bind the Get query string parameters to a DataSourceRequest?

Thanks.

Data Source

answered on 12 Aug 2015

3 answers

542 views

[Solved] Update Template content dynamically

Hey Guys

Here's another odd one and I wonder if there is any way to do this.

I use a template to provide additional information about the selection and ideally I want to refresh this every X seconds without having to reload the whole data source.

Currently this extra info is added using the template:

template: '<div class="k-state-default"><span class = "left">#: data.Name #</span><span class="right">(#: data.waittime #)</span>',

Is there any way I can update the 'waittime' part of the template without having to refresh the whole datasource. ? ( I guess reloading the whole datasource will screw up the current selection)

I'm doubtful , but hopeful :)

Many thanks In advance

Rob

AutoComplete

answered on 12 Aug 2015

2 answers

136 views

[Solved] Please update your documentation

Hi,

I'm requesting that the documentation regarding permissible button bindings be reconciled and made consistent in the following places:

http://demos.telerik.com/kendo-ui/button/mvvm

http://docs.telerik.com/KENDO-UI/framework/mvvm/bindings/enabled

I realize that the first is about the Button widget, and the second is about MVVM. The problem is that some of our developers have started using the 'disabled' binding on regular old HTML5 buttons, which does not appear officially supported, but nevertheless works. We need to know if this is an undocumented feature that could change, or a mistake in the MVVM documentation.

FWIW, the disabled attribute is a legal value for button elements, so it would be surprising to find that Kendo's MVVM does not recognize that.

Many thanks!

Trav

General Discussions

answered on 11 Aug 2015

5 answers

325 views

ToDataSourceResult Problems with NHibernate in a Grid

Hello,

I am having trouble using the ToDataSourceResult method in combination with NHibernate.

Here is a minimal example of what I'm doing:

            using ( var session = NHibernate.DefaultFactory.OpenStatelessSession())
            {
                IQueryable<MyDataRow> myQuery = session.Query<MyDataRow>();
                DataSourceResult myResult = dataRowRepo.ToDataSourceResult(request, x => new ListRowViewModel()
                {
                    ID = x.ID,
                    Property2 = x.Property2
                });
                return Json(myResult, JsonRequestBehavior.AllowGet);
            }

This works perfectly fine as long as I don't try to use aggregate or grouping. As soon as I start that my service returns something like this:

Specified method is not supported.

Or for aggregation:
Query Source could not be identified: ItemName = x,
ItemType = MyDataRow, Expression
= from MyDataRow x in
value(NHibernate.Linq.NhQueryable`1[MyDataRow])

And help or suggestions would be greatly appreciated.

Data Source

answered on 11 Aug 2015

4 answers

696 views

[Solved] Donut chart with dynamic data in angular

I have did my research on chart with angular. However, I can't find a good example for using angular with donut chart. The example that is demon online isn't good enough. First, The demon donut chart code is creating different series. I want to be able to just create one series with different categories. And secondly, I want to load the data dynamically. I got it work with static data. Now, I have to know how to load dynamic data to donut chart. I didn't get it work by using k-data-resource.

HTML:

AngularJS:

$scope.backupData = [{
category: "file system",
value: 28,
color: "#009DD6"
},{
category: "sql server",
value: 12,
color: "#F2B33D"
},{
category: "db2",
value: 8,
color: "#90CC38"
},{
category: "oracle",
value: 7,
color: "#FF5444"
},{
category: "hyperV",
value: 8,
color: "#D9D9D9"
}, {
category: "Office365",
value: 2,
color: "#D96CC7"
}];

$scope.backupchart = {
series: [{
data: $scope.backupData,
overlay: {
gradient: "none"
}
}],
seriesDefaults: {
type: 'donut',
style: 'smooth'
}
};

Suppose $scope.backupData is coming from a remote server. How can I redraw into donut chart? I can get the data no problem.

Thank you in advanced.

Charts

answered on 11 Aug 2015

4 answers

976 views

Grid with remote datasource in row template causes infinite loop

Hi,

When I initialize the grid via MVVM and use a <select> element in the row template which uses a remote datasource kendo gets into an infinite loop once the remote datasource request has completed.

Problem can be reproduced at: http://dojo.telerik.com/UhEzE/6

In my specific scenarion I have noticed the problem does not occur if the datasource has already loaded (e.g.: calling kendo.bind after dataSource.read() has completed).

I also noticed that when editing any of the values in the array (e.g. the textbox in the above example) will re-render all rows and as such cause new remote calls to the datasource.

Grid

answered on 11 Aug 2015