Questions on Kendo UI for jQuery Forum

1 answer

1.5K+ views

Require Field validation Check for Space bar input

Hi,

I have a field set to required field validation.But had input given to that field is just a "Spacebar".

And the field does not contain any value in it and able to submit the form with empty field.

How to prevent this... Yaa I can go and use the java script to loop through required fields but then what is use of the required field.

Thanks
Chatrapathi Chennam

Validation

answered on 24 Sep 2014

5 answers

404 views

[Solved] custom grid validation popup message from edit event

Hi ,

I have tried to use a custom validation on the schema/model/fields but is not quite working for me.

custom: function (input) {

if (input.is("[name='LogicalName']") && input.val() != "") {

$http.post("odata/Entities/IsNameUnique", { logicalName: input.val() }).success(function (data, status, headers, config) {

if (!data.value) {

input.attr("data-custom-msg", "Name is not unique");

return false

}

return true;

});

}

Instead I am trying to use grid edit event which is giving me more flexibility.
Example
dojo.telerik.com/aJeXE

How could I display validation popup message from edit event?

Grid

answered on 24 Sep 2014

4 answers

386 views

Kendo Bar/Column Chart Series Name Remote Data

I'm trying to get a chart to bind the series from a WebAPI call. The data is coming back in the following json format. Each object in the return should create one bar/column on the chart with the "Name" being the corresponding label/categoryAxis value.

Thoughts?

[{"Name":"Site1","Count":4,"Color":"#02bc84"},{"Name":"Site2","Count":3,"Color":"#f08080"}]

Charts

answered on 24 Sep 2014

1 answer

185 views

Customeditortemplate save and cancel button all black with black theme

Hello,

i am using scheduler with custom editor template as per the sample provided by telerik. The only difference being i have culture set to de-DE. I also have a theme selector . Customeditor popup window save and cancel buttons look ok for most of the themes but not for black, high contrast. For these black themes the save and cancel button text is also black and save button does not have focus and no different color. Not sure what is messing up button style. So i would like to know if in custom editor or scheduler view i can define some css to get these 2 buttons behave properly.

Thanks

Anamika

Scheduler

answered on 24 Sep 2014

4 answers

146 views

MVVM Documentation accurate?

I am confused with a few parts of the documentation. Please help me understand what I am missing..

1) http://docs.telerik.com/kendo-ui/api/javascript/view#configuration-model
<div id="app"></div>
<script>
var foo = { foo: "foo" }
var view = new kendo.View('<span data-bind="text:foo"></span>', { model: foo });
view.render($("#app"));
</script>

The documentation says that model takes an observable object. Why isn't foo a kendo observable?
ie: var foo = kendo.observable({ foo: "foo" })

2) http://docs.telerik.com/kendo-ui/framework/spa/view#mvvm-bound-view-with-an-evaluated-template

MVVM Bound view with an evaluated template
<script id="index" type="text/x-kendo-template">
#: foo #
<div>Hello <span data-bind="text:foo"></span>!</div>
</script>

<script>
var model = kendo.observable({foo: "World"});
var index = new kendo.View('index', {model: model});
</script>

Why isn't index constructed with the evalTemplate option set to true?:
var index = new kendo.View('index', {model: model}, evalTemplate: true);

General Discussions

answered on 24 Sep 2014

2 answers

1.1K+ views

[Solved] Grid with another grid in detail template (detailrow not shown)

Hi,

I would like to create a grid which supports CRUD. The rows of this grid has a detail template which has a child grid for every record. The main record's CRUD operations work fine. But when I want to open the detail information for a row by clicking on the triangle, it shows nothing, the detail view is empty. As I noticed in the detailInit function (from line 89 in the example) the args.masterRow lose it's parent in the html dom. I think the body (or the row) of the grid is recreated when the sub grid is created. I have no more time to debug the source in depth of Kendo UI, but (maybe) it is related to observables (or maybe not). The children are loaded and the parent item notified that the children datasource changed, so the parent item also triggers change event which reloads the row of the grid.

The html for the example:

<script id="itemTemplate" type="text/html">

<div class="children"></div>

</script>

<div id="grid">

</div>

The javascript:

001.var items = [

002. { id: 1, name: 'Item 1' },

003. { id: 2, name: 'Item 2' }

004.];

005.

006.var children = {

007. '1': [{ id: 1, child: 'Child 1' }, { id: 2, child: 'Child 3' }],

008. '2': [{ id: 3, child: 'Child 3' }, { id: 4, child: 'Child 4' }]

009.};

010.

011.function createChildItemDataSource(item) {

012. return new kendo.data.DataSource({

013. transport: {

014. read: function (options) {

015. console.log('children.read: ' + item.id);

016. options.success(children[item.id]);

017. }

018. }

019. });

020.}

021.

022.$('#grid').kendoGrid({

023. dataSource: new kendo.data.DataSource({

024. transport: {

025. read: function (options) {

026. // simulate read from server

027. var itemsFromServer = items;

028. // simulate read from server end

029.

030. // create datasource

031. for (var i = 0; i < itemsFromServer.length; i++) {

032. itemsFromServer[i].dataSource = createChildItemDataSource(items[i]);

033. }

034. options.success(itemsFromServer);

035. console.log('items.read');

036. },

037. update: function (options) {

038. // simulate update on server

039. // ....

040. // simulate update on server end

041. options.success(options.data);

042. },

043. destroy: function (options) {

044. // simulate destroy on server

045. for (var i = 0; i < items.length; i++) {

046. if (items[i].id === options.data.id) {

047. items.splice(i, 1);

048. break;

049. }

050. }

051. // simulate destroy on server end

052.

053. options.success(options.data);

054. },

055. create: function (options) {

056. // simulate create on server

057. var id = 0;

058. for (var i = 0; i < items.length; i++) {

059. if (items[i].id > id) {

060. id = items[i].id;

061. }

062. }

063. options.data.id = id + 1;

064. children[options.data.id] = [];

065. items.push(options.data);

066. // simulate create on server end

067.

068. // get data from server

069. var itemCreated = options.data;

070.

071. itemCreated.dataSource = createChildItemDataSource(options.data);

072. options.success(itemCreated);

073. }

074. },

075. schema: {

076. model: {

077. id: 'id',

078. fields: {

079. id: { type: 'number', editable: false },

080. name: { type: 'string', validation: { required: true } }

081. }

082. }

083. }

084. }),

085. columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: 'Name' }, { command: ['edit', 'destroy'] }],

086. toolbar: ['create'],

087. editable: { mode: 'popup' },

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

089. detailInit: function (args) {

090. var index = args.masterRow.index('tr.k-master-row');

091.

092. console.log('args.masterRow.parent(): ' + args.masterRow.parent().length);

093. console.log('args.masterRow[0] === this.table.find(".k-master-row:nth-child(" + (index + 1) + ")")[0]: ' + (this.table.find('.k-master-row:nth-child(' + (index + 1) + ')')[0] === args.masterRow[0]).toString());

094.

095. args.detailCell.find('.children').kendoGrid({

096. dataSource: args.data.dataSource,

097. columns: [{ field: 'id', title: 'ID' }, { field: 'child', title: 'child' }]

098. });

099.

100. // grid created in args.detailCell

101. console.log('grid created in args.detailCell: ' + args.detailCell.find('[data-role="grid"]').length);

102.

103. // but args.masterRow is not the same was before

104. console.log('args.masterRow[0] === this.table.find(".k-master-row:nth-child(" + (index + 1) + ")")[0]: ' + (this.table.find('.k-master-row:nth-child(' + (index + 1) + ')')[0] === args.masterRow[0]).toString());

105.

106. // args.masterRow was removed from dom

107. console.log('args.masterRow.parent().length: ' + args.masterRow.parent().length);

108. }

109.});

Am I doing something wrong? Or is it a bug, or not supported way of handling this situation? Kendo UI version: 2014.2.903 (but it also didn't work with the previous version)

Grid

answered on 24 Sep 2014

2 answers

534 views

change transport / read / url

I am currently using the below to setup my autocomplete. it works well, however, it seems to bind the url just once, I need it to bind again later so that I can send a different value.
IE this $("#impRacf").val() changes, and I need that to reflect in my call. thanks!

$("#sellerNameFilter").kendoAutoComplete({
placeholder: "Enter Seller Name ...",
dataTextField: "seller_name",
filter: "searchValue",
minLength: 3,
dataSource: {
type: "json",
serverFiltering: true,
serverPaging: true,
pageSize: 20,
transport: {
read:
{
url: publish + "/home/sellerName?&id=" + $("#impRacf").val()
}, //read
parameterMap: function () {// send value of autocomplete as the "startsWith" parameter
return {
searchValue: $("#sellerNameFilter").data("kendoAutoComplete").value()
};
}
} //transport
} //datasource
}); //kendoAutoComplete

AutoComplete

answered on 24 Sep 2014

5 answers

275 views

Tick numbers appear outside slider

If you have a fairly large range of numbers, like a max of 1000 with a largeStep of 100, the tick label that shows "1,000" appears off the slider. I noticed this because I have my Slider in a div with a border, so the tick label is over the top of the border. See the example here, with the basic code copied from the demos.

As you can see, the "1,000" label is outside the border of the div. Why is it doing this? Is there anyway to fix it?

Slider

answered on 23 Sep 2014

1 answer

236 views

[Solved] MVVM selected tab

Is it possible to set active (selected) tab with MVVM or I have to do it in code?

TabStrip

answered on 23 Sep 2014

2 answers

189 views

range validation

Hello,

I am trying to validate a year range in a numeric text box in a grid. I am able to validate one end of the range, but not the other. For example, this works:

   validation: { custom:
          function (input) {
                 input.attr("data-custom-msg", "Year out of range");
                 return input.val() >= 1970;
                }
        }

but when i try this:

   validation: { custom:
           function (input) {
                  input.attr("data-custom-msg", "Year out of range");
                   return input.val() >= 1970 || input.val() <= 2050;
                  }
        }

it will not catch either end of the range. Is there a way to validate a range of numbers?

Thanks

Validation

answered on 23 Sep 2014