Questions on Kendo UI for jQuery Forum

3 answers

341 views

[Solved] CheckBoxFor + FluenValidation + Client side

Hi,
I want to have client side for a checkbox. When the user presses submit button, or checkbox loose focus the validation should be trigged. Basically same behaviour as for textboxes (which are working fine).

I try to make client side validation for a CheckBox
Here is the sample code:
@Html.CheckBoxFor(model => model.RulesAccepted, new { @class = "control-label" })
@Html.ValidationMessageFor(model => model.RulesAccepted)

If I do similar to the example code (http://demos.telerik.com/aspnet-mvc/validator/index) checkbox is validated. If it is not check then I get an error, which is correct.
But there is number of issues preventing me to use that code:
1.Model passed back to the post action does not have boolean value set (RulesAccepted is the property name on the model)
2.I'm not able to plug-in fluent validation messages to display them to the user.

If I try to do any other way no message is appearing when it should.
In the code I have now the TextBoxes validators work fine. I have only problem with CheckBox validator.

Validation

answered on 12 Aug 2015

10 answers

1.1K+ views

Using http interceptor to provide auth token

Hello,
I have angular js application using kendo. In angular I defined http interceptor which adds auth token to every request:
public request = (config) =>
{
    config.headers = config.headers || {};

    var authData = this.localStorage.AuthorizationData;
    if (authData)
    {
        config.headers.Authorization = 'Bearer ' + authData.token;
    }

    return config;

}

Iam also using webapi so to populate grid I have to use beforeSend in DataSource and set there token:
$scope.people = new kendo.data.DataSource({
    transport: {
        read: {
            url: Config.ApiUrl + 'doctors',
            dataType: 'json',
            beforeSend: (xhr) =>
            {
                var auth = "Bearer " + token;
                xhr.setRequestHeader("Authorization", auth);
            }
        },
    },
    pageSize: 5,

});

Is it possible to make datasource use my httpinterceptor as function that provides the token to the request? I just want to have token setup in one place.

Data Source

answered on 12 Aug 2015

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

439 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

655 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

299 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.1K+ 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

547 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

139 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

335 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