Questions on Kendo UI for jQuery Forum

1 answer

167 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

133 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.0K+ 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

521 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

263 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

227 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

171 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

3 answers

142 views

Problem with Grid Popup Editor and Combo Boxes while in Add Mode.

I have a Grid with a popup editor that contains combo boxes. Each of the boxes works fine when in Edit mode. However, when I click Add New, and then "Update" button on the template....the values from the Combo Boxes are not being returned from the form. The fields remain NULL. I throw an alert up to verify that the selection was made...which it is. But the record does not get sent to the controller with the value that is selected.

Here is the Popup Editor Template

@model sgrc.vpd.home.Models.vwInventory

<script>

function onSelect(e) {

var combobox = $("#ItemType").data("kendoComboBox");

var dataItem = this.dataItem(e.item.index());

alert(dataItem.ItemType + " " + dataItem.TypeID);

};

</script>

@{

ViewBag.Title = "Edit Inventory Item";

}

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

@Html.ValidationSummary(true)

@Html.HiddenFor(model => model.ItemID)

@Html.HiddenFor(model => model.VehicleID)

@Html.HiddenFor(model => model.memorycard)

@Html.HiddenFor(model => model.remarks)

@Html.HiddenFor(model => model.signon)

@Html.HiddenFor(model => model.signoff)

@Html.HiddenFor(model => model.AssignedName)

@Html.HiddenFor(model => model.caliber)

<div id="tabstrip">

<ul>

<li class="k-state-active" >

Item Information

</li>

<li >

Assignment Information

</li>

<li >

Vehicle Information

</li>

</ul>

<div id="Item Information">

<div class="edit-field">

<br />

<label for="ItemType" style="color:#212a33">Select Type:</label>

@(Html.Kendo().ComboBox()

.Name("ItemType")

.Placeholder("Select Item Type...")

.DataTextField("ItemType")

.DataValueField("TypeID")

.Filter("contains")

.Events(e => e.Select("onSelect"))

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetItems", "Inventory");

})

.ServerFiltering(false);

})

)

<label for="Status" style="color:#212a33">Select Status:</label>

@(Html.Kendo().ComboBox()

.Name("StatusID")

.Placeholder("Select Status...")

.DataTextField("Status")

.DataValueField("StatusID")

.Filter("contains")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetStatus", "Inventory");

})

.ServerFiltering(false);

})

)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.serialnumber, "Serial Number/VIN")

@Html.TextBoxFor(model => model.serialnumber, new { style = "width: 80%; float:right" })

@Html.ValidationMessageFor(model => model.serialnumber)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.Description, "Description")

@Html.TextAreaFor(model => model.Description, new { cols = 83, rows = 5 })

@Html.ValidationMessageFor(model => model.Description)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.PurchaseDate, "Date Purchased")

@Html.EditorFor(model => model.PurchaseDate, new { style = "width: 80%; font-size:18px; font-family:inherit" })

@Html.ValidationMessageFor(model => model.PurchaseDate)

@Html.LabelFor(model => model.InServiceDate, "In Service Date", new { style = "color:#212a33" })

@Html.EditorFor(model => model.InServiceDate, new { style = "width: 80%; font-size:18px; font-family:inherit" })

@Html.ValidationMessageFor(model => model.InServiceDate)

</div>

<div id="Assignment Information">

<div class="edit-field">

<br />

<label for="AssignedID" style="color:#212a33 "width: 80%" >Assigned Officer:</label>

@(Html.Kendo().ComboBox()

.Name("AssignedID")

.DataTextField("FullName")

.DataValueField("PersonID")

.Placeholder("Select Officer")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetOfficers", "Inventory");

})

.ServerFiltering(false);

})

)

@Html.LabelFor(model => model.AssignedDate, "Date Assigned", new { style = "color:#212a33" })

@Html.EditorFor(model => model.AssignedDate, new { style = "width: 80%; font-size:18px; font-family:inherit" })

@Html.ValidationMessageFor(model => model.AssignedDate)

</div>

<div class="edit-field" style="width:40%">

<label for="AssignedBy" style="color:#212a33" >Assigned By</label>

@(Html.Kendo().ComboBox()

.Name("AssignedBy")

.DataTextField("FullName")

.DataValueField("PersonID")

.Placeholder("Select Officer")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetOfficers", "Inventory");

})

.ServerFiltering(false);

})

)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.lastupdated, "Last Updated", new { style = "color:#212a33" })

@Html.EditorFor(model => model.lastupdated)

@Html.ValidationMessageFor(model => model.lastupdated)

@Html.LabelFor(model => model.lastupdatedby, "Last Updated By")

@Html.TextBoxFor(model => model.lastupdatedby, new { disabled = "disabled", style = "width: 30%; float:right" })

</div>

<div id="Vehicle Information">

<div class="edit-field">

<br />

@Html.LabelFor(model => model.make, "Make", new { style = "color:#212a33" })

@Html.TextBoxFor(model => model.make, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })

@Html.ValidationMessageFor(model => model.make)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.model, "Model", new { style = "color:#212a33" })

@Html.TextBoxFor(model => model.model, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })

@Html.ValidationMessageFor(model => model.model)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.year, "Year", new { style = "color:#212a33" })

@Html.TextBoxFor(model => model.year, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })

@Html.ValidationMessageFor(model => model.year)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.color, "Color", new { style = "color:#212a33" })

@Html.TextBoxFor(model => model.color, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })

@Html.ValidationMessageFor(model => model.color)

</div>

<div class="edit-field">

@Html.LabelFor(model => model.tag, "Tag", new { style = "color:#212a33" })

@Html.TextBoxFor(model => model.tag, new { style = "width: 80%; font-size:18px; font-family:inherit; float:right" })

@Html.ValidationMessageFor(model => model.tag)

</div>

}

<script>

$(document).ready(function () {

$("#tabstrip").kendoTabStrip({

animation: {

open: {

effects: "fadeIn"

}

});

</script>

@section Scripts {

@Scripts.Render("~/bundles/jqueryval")

}

Here is the grid.

@(Html.Kendo().Grid<sgrc.vpd.home.Models.vwInventory>()

.Name("grid")

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))

.Columns(columns =>

{

columns.Bound(dataInventory => dataInventory.serialnumber).Title("Serial#").Width(200);

columns.ForeignKey(dataInventory => dataInventory.ItemType, (System.Collections.IEnumerable)ViewData["itemtypes"], "TypeID", "ItemType")

.Title("Type").Width(250);

columns.ForeignKey(dataInventory => dataInventory.StatusID, (System.Collections.IEnumerable)ViewData["status"], "StatusID", "status")

.Title("Status").Width(250);

columns.ForeignKey(dataInventory => dataInventory.AssignedID, (System.Collections.IEnumerable)ViewData["officers"], "PersonID", "FullName")

.Title("Assigned To").Width(250);

columns.Bound(dataInventory => dataInventory.Description).Title("Description").Hidden(true);

//columns.Bound(dataInventory => dataInventory.StatusID).Title("status").Hidden(true);

columns.ForeignKey(dataInventory => dataInventory.AssignedBy, (System.Collections.IEnumerable)ViewData["officers"], "PersonID", "FullName")

.Title("Assigned By").Width(250);

columns.Bound(dataInventory => dataInventory.AssignedDate).Title("Date Assigned").Format("{0:g}");

columns.Bound(dataInventory => dataInventory.ItemID).Hidden(true);

columns.Bound(dataInventory => dataInventory.VehicleID).Title("VehicleID").Width(150).Hidden(true);

columns.Bound(dataInventory => dataInventory.memorycard).Title("memorycard").Hidden(true);

columns.Bound(dataInventory => dataInventory.year).Title("year").Hidden(true);

//columns.Bound(dataInventory => dataInventory.status).Title("status").Hidden(true);

columns.Bound(dataInventory => dataInventory.make).Title("Make").Hidden(true);

columns.Bound(dataInventory => dataInventory.model).Title("Model").Hidden(true);

columns.Bound(dataInventory => dataInventory.color).Title("Color").Hidden(true);

columns.Bound(dataInventory => dataInventory.tag).Title("Tag").Hidden(true);

columns.Bound(dataInventory => dataInventory.signon).Title("Signon").Hidden(true);

columns.Bound(dataInventory => dataInventory.signoff).Title("Signoff").Hidden(true);

columns.Bound(dataInventory => dataInventory.Ten84).Title("10-84").Format("{0:g}").Hidden(true);

columns.Bound(dataInventory => dataInventory.lastupdated).Hidden(true);

columns.Bound(dataInventory => dataInventory.lastupdatedby).Title("Updated By:").Hidden(true);

//columns.Bound(dataInventory => dataInventory.AssignedID).Title("OfficerID").Hidden(true);

columns.Bound(dataInventory => dataInventory.remarks).Title("Remarks").Hidden(true);

columns.Bound(dataInventory => dataInventory.PurchaseDate).Title("Purchase Date").Format("{0:MM/dd/yyyy}").Hidden(true);

columns.Bound(dataInventory => dataInventory.InServiceDate).Title("In Service Date").Format("{0:MM/dd/yyyy}").Hidden(true);

columns.Bound(dataInventory => dataInventory.caliber).Hidden(true);

columns.Command(commands =>

{

commands.Edit();

commands.Destroy();

}).Title("Commands").Width(180);

})

.ToolBar(toolbar =>

{

toolbar.Create();

// toolbar.Save();

})

.Events(e => e.SaveChanges("onSaveChanges"))

//.Events(events => events.Save("onSave"))

//.Events(events => events.Edit("onEdit"))

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditInventory"))

.DataSource(dataSource => dataSource

.Ajax()

.Events(e => e.Error("onError")) // Handle the "error" event (errors set in controller)

.Batch(false)

.ServerOperation(false) // Paging, sorting, filtering and grouping will be done client-side

.Model(model =>

{

model.Id(dataInventory => dataInventory.ItemID);

//model.Field(dataDestruction => dataDestruction.CaseID).Editable(false);

})

.Create(create => create.Action("Single_Create", "Inventory"))

.Read(read => read.Action("Item_Read", "Inventory"))

.Update(update => update.Action("Single_Update", "Inventory"))

.Destroy(destroy => destroy.Action("Item_Destroy", "Inventory"))

)

.AutoBind(true)

.Pageable(page => page.Enabled(true).PageSizes(new[] { 10, 20, 30, 40 }))

.Sortable()

.Navigatable()

//.Scrollable(scrolling => scrolling.Enabled(false))

.Events(e => e.Change("onChange"))

//.Filterable()

//.Scrollable(scrolling => scrolling.Enabled(true))

//.Scrollable(s => s.Height("auto"))

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

.Filterable()

)

Grid

answered on 23 Sep 2014

1 answer

104 views

[Solved] Not rendering sub-items when full source is loaded via ajax

I try with this code but it is not rendering childs:

<body>

<div id="main">

<div data-role="treeview" data-bind="source: test" data-load-on-demand="true"></div>

</div>

<script>

$(document).ready(function()

{

var MVVM = kendo.observable(

{

test: new kendo.data.HierarchicalDataSource(

{

transport:

{

read:

{

url: "GetTreeViewData.php"

}

},

}),

});

kendo.bind($('#main'), MVVM);

});

</script>

</body>

My GetTreeViewData is:

<?php

$result = [];

$item = new stdClass();

$item->text = "level 1.1";

$result[] = $item;

$item = new stdClass();

$item->text = "level 1.2";

$item->items = [];

$subitem = new stdClass();

$subitem->text = "level 2.1";

$item->items[] = $subitem;

$subitem = new stdClass();

$subitem->text = "level 2.2";

$item->items[] = $subitem;

$item = new stdClass();

$item->text = "level 1.3";

$result[] = $item;

header('Content-type: application/json;');

echo json_encode($result);

?>

I also try to experiments with hasChildren, children, loadOnDemand properties, without success.
What I am doing wrong?

TreeView

answered on 23 Sep 2014

3 answers

362 views

Dynamic Ajax call, get tooltip to fix it's position

This has been asked before more or less

http://www.telerik.com/forums/tooltip-opens-in-the-wrong-place-when-the-marker-is-clicked-and-then-corrects-itself-when-the-marker-is-clicked-a-second-time

I have a series of Ajax calls for loading tooltips, the size will vary per call.

I get the behaviour described in the other thread. The workaround of setting the width/height will probably work

What would be better would be if I could initially set the tooltip to invisible, hide it, get it to fix it's position and then show it. Is this possible? It obviously knows how to fix itself once the data is loaded

thanks

ToolTip

answered on 23 Sep 2014