Questions on Kendo UI for jQuery Forum

3 answers

741 views

[Solved] How do I create a toolbar with custom template that uses the declarative syntax?

I am trying to replicate the demo here, but using MVVM:
http://demos.kendoui.com/web/grid/toolbar-template.html

I configured the grid using data-attributes and the grid works. The problem that I am encountering is the toolbar.

I modified the toolbar template to use the data attribute to create a kendo drop-down list:

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

<div class="toolbar">

<label class="category-label" for="category">Show products by category:</label>

<input type="search" id="category" data-role="dropdownlist" data-source="source"></input>

</div>

</script>

In the grid declaration I added the data-toolbar attribute referencing the template:

data-toolbar='[ { template: kendo.template($("#template").html()) } ]'

However, the data attributes in the template are not being processed by Kendo UI and is rendered as-is on the page. This resulted in a textbox rather than the drop-down list that I am expecting.

Is there a way to get this working?

MVVM

answered on 10 Jun 2016

1 answer

164 views

Case sensitivity on "List" Validation

Does anyone know of a way to turn OFF the case sensitivity on a List based validation?

Spreadsheet

answered on 10 Jun 2016

2 answers

895 views

Custom Toolbar Buttons and Commands

Hey,

I am trying to insert custom toolbar buttons (and actions) for our kendo grid. I would like to keep the existing functionality the same (i.e. the create and export to excel functions) but add additonal custom buttons by means of a toolbar template. Below is the existing code.

01.<div id="emailgroupgrid" style="height: 100%"

02. data-role="grid"

03. data-resizable="true"

04. data-reorderable="true"

05. data-sortable="true"

06. data-editable="popup"

07. data-scrollable="true"

08. data-toolbar="['create', 'excel']"

09. data-excel="{'fileName': 'file.xlsx', 'filterable': 'true'}"

10. data-columns=

"[{'field': 'firstName', 'title':'First Name', 'editable': 'true'}, {'field': 'surname', 'title':'Surname', 'editable': 'true'},{'field': 'email', 'title':'Email', 'editable': 'true'},{'command' : ['destroy', 'edit' ], 'width' : '25%'}]"

11. data-bind="source: users, events: {change: onGridChange}">

12. </div>

I have seen posts where the recommend hard coding the new buttons in data-toolbar parameter, and also via a template and calling

1.data-toolbar="['create', 'excel', {'template': '$(\'#toolbartemplate\').html()'}]"

1.<script id="toolbartemplate" type="text/x-kendo-template">

2. <div id="toolbar"

3. data-role="toolbar"

4. data-bind="events:{click: onActionsClick}">

5. <input type="button" class="k-button" onClick="create"/>

6. </div>

7. </script>

And other such variations, nothing seems to work as of yet. Everything returns either an invalid template error or simple prints out the string literal that was inputted.

As I said ideally I wouldn't have to reimplement the functionality of the existing create and excel buttons but add additional buttons with will call my own functions.

Any help would be great.

Grid

answered on 10 Jun 2016

2 answers

172 views

Grid Read Operation Not Populating Grid With Data

I need help returning Json data back and populating a very simple grid, here is my code:

Model:

public class CapitalLeaseCostModel

{

public int ID { get; set; }

public string Reasons { get; set; }

public CapitalLeaseCostModel()

{

}

View:

<script>

$(document).ready(function () {

var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",

dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "/CapitalLease/Costs_Read",

dataType: "json"

},

parameterMap: function (options, operation) {

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

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

}

},

batch: true,

pageSize: 20,

schema: {

model: {

id: "ID",

fields: {

ID: { editable: false, nullable: true },

Reasons: { type: "text" }

}

});

$("#capitalizedCostGrid").kendoGrid({

dataSource: dataSource,

pageable: true,

height: 550,

toolbar: ["create"],

columns: [

{ field: "ID", title: "ID" },

{ field: "Reasons", title: "Reasons" }],

editable: "inline"

});

</script>

@*Rent Information*@

<p class="title">Section Two - Lease Costs to Capitalize</p>

<div style="padding:15px;">

<div id="costsRowOne">

<div id="capitalizedCostGrid" class="inline-control"></div>

</div>

Controller:

[AcceptVerbs(HttpVerbs.Get)]

public JsonResult Costs_Read()

{

CapitalLeaseCostModel testModel = new CapitalLeaseCostModel();

testModel.ID = 1;

testModel.Reasons = "test reason1";

List<CapitalLeaseCostModel> list = new List<CapitalLeaseCostModel>();

list.Add(testModel);

return Json(JsonConvert.SerializeObject(list), JsonRequestBehavior.AllowGet); ;

}

The grid loads fine but now data. What am I missing? This is based off of the inline-editing demo for kendo-ui.

Thanks

Grid

answered on 09 Jun 2016

7 answers

139 views

[Solved] Filter - selected type on opening

Hello,

Is there a way so that when I open up the filter in the grid, "Contains" will be the default in the dropdownlist? Instead of the first item in the list ?

Regards,

Emil

Grid

answered on 09 Jun 2016

1 answer

577 views

Post selected values to controller

I seem to be having a problem posting the selected values from my Kendo Multiselect widget to an action on my controller. I've never had this issue before and as far as I know I am doing everything right, but something is obviously causing an issue.

I have this input on my view:

<input id="ProductHandlingTypes" name="ProductHandlingTypes" style="width: 100%"/>

Here is my viewmodel:

public class BuyerProfileViewModel

{

public string UserId { get; set; }

public string Name { get; set; }

public int BuyerTypeId { get; set; }

public string Address { get; set; }

public string City { get; set; }

public string State { get; set; }

public string Zipcode { get; set; }

public string Description { get; set; }

public List<int> ProductHandlingTypes { get; set; }

public bool Producer { get; set; }

}

JavaScript:

$("#ProductHandlingTypes").kendoMultiSelect({

placeholder: "-- Select Type(s) --",

dataTextField: "Name",

dataValueField: "Id",

dataSource: new kendo.data.DataSource({

transport: {

read: {

url: "/Helper/GetProductHandlingTypes",

dataType: "json",

type: "GET"

}

})

});

$("#btnSave").on("click", function (e) {

e.preventDefault();

var formCreate = $(".form-register-buyer");

formCreate.validate();

if (formCreate.valid()) {

var options = {

url: $(formCreate).attr("action"),

type: $(formCreate).attr("method"),

data: $(formCreate).serialize()

};

$.ajax(options)

.done(function(data) {

if (data.success === true) {

window.location.href = data.redirectTo;

} else {

toastr.options = { "postiionClass": "toast-bottom-full-width" };

toastr.error(data.message, "Uh, Oh!");

}

});

}

});

And a snippit of my controller:

[HttpPost]

public ActionResult BuyerProfile(BuyerProfileViewModel model)

{

if (ModelState.IsValid)

{

// do stuff here

}

All of the rest of the values post to the controller just fine. But when I hover over the model this is what I see for "ProductHandlingTypes" (I've attached a screenshot)

MultiSelect

answered on 09 Jun 2016

5 answers

117 views

Mobile Listview bug

I'm building a mobile application using Phonegap and Kendo UI. I have 2 mobile listviews in my application, one list has only one element, and the other has about 100. I've noticed that when I tap the list with only the single item and drag down slightly, the click event on the list item won't fire, yet it still navigates to the next screen when this happens.

The template for my listview looks like this:

I think what's happening is because of the anchor tag in the template it still navigates to the page its supposed to, but because I have code in the click event to populate the page that the list item navigates to, I end up with a blank page because the click event hasn't fired.

I don't have this problem with the other listview that has several items, so my guess is that when a listview is scrolled kendo internally prevents the default behaviour of the list item, which in this case in an anchor tag.

I tried to work around this by removing the anchor from my template and then used navigate() in the click event of the list item, which does work, but when I do it this way, an extra click event is fired on the page that is navigated to so the first item on that page is automatically clicked.

ListView (Mobile)

answered on 09 Jun 2016

3 answers

887 views

Grid Column Filter for number type

Hi,

I have problem to get filter on number type column working. Plunk: http://plnkr.co/edit/sBaDyB9OZtAJ9BKjQzwK?p=preview, The data structure as follow

Sample data:

[{

account: "AC",

portfolio: "B",

spendLine: [210, 220, 230, 240, 250]

},

...

]

Since the data structure has array within array, I have trouble defining schema model. The column filter for the number type is always using string filter instead of number. How can I solve this problem?

Grid

answered on 09 Jun 2016

1 answer

148 views

Tabstrip rendering spurious content

I am using the tabstrip widget from the 2016-Q2 build in an AngularJS app and calling a function to dynamically append tabs when a user clicks a command button on a grid - the tab is added fine and I also immediately select it but when I go back (select) to the first tab (search tab w/grid) I'm seeing spurious content being rendered below it (looks like content from dynamically appended tab) - please refer to the attached screen shots that show the sequence of screen updates as well as the code being executed to append the new tab (if it does not already exist based on tab name - otherwise reselected to be made active) .

TabStrip

answered on 09 Jun 2016

4 answers

385 views

[Solved] Turn off percent complete

In my gantt grid (I'm using the MVC version with IGanttTask and IGanttDependency implementations) i don't use the percent complete option at all, so i would like to be able to turn off that functionality in the grid itself that allows you to drag the carat back and forth. is there a way to hide that carat?

Gantt

answered on 09 Jun 2016