Questions on Kendo UI for jQuery Forum

3 answers

2.5K+ views

[Solved] How to Pass the whole ${ data } object in a Template to a javascript function

hi

I have listView that bind to service that returns array of Product
Product Is { ProductId : 1 , ProductName : 'laptop' , Size : 1 , Quantity : 1000 }

i'm using the template like this:

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

<div class="ProdNameClass">

${ProductName}

</div>

<div class="ProdClass" onclick="EditProduct(${ProductId});">

click to run EditProduct function

// this works

</div>

<div class="ProdClass" onclick="EditProductDataObject(${data});">

click to run EditProductDataObject function

// this is not working, i'm getting nothing when i'm click

</div>

< /script>

function EditProduct(id){

// do something....

// this works fine.....

}

function EditProductDataObject(dataObject){

// this function need to get the Whole Object

// so i can do:

var id = dataObject.ProductId;

// do something...

}

Is it possible to pass the data to a function ?
i also try this:
     <div class="ProdNameClass" onclick="EditProductDataObject( # data #);">
         click to run EditProductDataObject function
     </div>
but this calls the function with undefined

Thanks for any help

moti

Templates

answered on 05 Jun 2015

5 answers

454 views

[Solved] Supply New Datasource to Existing Grid

I have a grid that is initialized with a datasource, then the user can choose different options from a form and get a new set of data that needs to be applied to the grid. I can't load the entire dataset to the grid and just let the grid filter the data because the dataset would be too large so I need to set a brand new dataset each time (note: the number of columns and formatting should stay the same). I have it working, EXCEPT, the date format does propagate.

Here is what I have:

function DisplayMeetingsGrid(myMeetings) {

var grid = $("#grid").data("kendoGrid");

if (typeof grid === 'undefined') {

$("#grid").kendoGrid({

dataSource: {

data: myMeetings,

schema: {

model: {

fields: {

MeetingDate: { type: "date" }

}

},

groupable: true,

sortable: true,

filterable: true,

pageable: {

refresh: false,

pageSizes: [10, 20, 50, 100],

buttonCount: 5,

pageSize: 10,

input: true

},

columns: [{

field: "MeetingName",

title: "Name",

width: 220,

template: "<a href='/${URLBase}/meeting/view/${MeetingId}/'>${MeetingName}</a>",

filterable: true

}, {

field: "MeetingDate",

title: "Date",

width: 90,

format: "{0:M/d/yyyy}",

filterable: {

ui: "datepicker"

}

}, {

field: 'StartTime',

title: "Start Time",

template: "${StartTime} <a style='float: right;' data-mid='${MeetingId}' title='Add this Meeting to your calendar' class='ical iCalendarLink'>Add to your calendar</a>",

width: 108,

filterable: false

}, {

field: "Location",

title: "Location",

width: 200,

filterable: true

}, {

field: 'agenda',

template: kendo.template($("#agendas-template").html()),

title: "Agendas (Group)",

filterable: false,

sortable: false,

groupable: false

}]

});

} else {

//WHEN THIS CODE IS HIT, THE DATE FORMAT IS LOST! <---------------

$("#grid").data("kendoGrid").dataSource.data(myMeetings);

}

Any help is appreciated.

Grid

answered on 05 Jun 2015

1 answer

124 views

[Solved] adding new record with ordering descending edits existing record

I've got a listview that is backed with a remote datasource.

I want the datasource to be ordered by the client so that new items added are automatically placed in the correct place (total number of items will not be that many).

If I order the items using in 'asc', then triggering listview.add() works as expected, however if I reverse the direction so it's 'desc', then listview.add() results in it editing the last item in the list instead.

Example posted here http://dojo.telerik.com/iMArI

$("#listView").kendoListView({

dataSource: {

data: [

{ name: "A Doe" },

{ name: "B Doe" },

{ name: "C Doe" },

{ name: "D Doe" },

{ name: "E Doe" }

],

sort: [{ field: 'name', dir: 'desc' }]

},

template: "<div>#:name#</div>",

editTemplate: '<div><input type="text" name="name" data-bind="value:name" /></div>'

});

// get a reference to the list view widget

var listView = $("#listView").data("kendoListView");

// add item

listView.add();

Kind regards,
Greg

ListView

answered on 05 Jun 2015

1 answer

463 views

[Solved] Tooltip mvvm control inside grid column.headerTemplate is not working

Hi,
I created grid definition using kendo mvvm framework and I'm trying to add tooltip for text inside column header. I thought I can use headerTemplate so I defined tooltip mvvm control inside header template but tooltip is not appearing. It looks that it’s imposible to define any mvvm control inside headerTemplate property? Is my assumption correct?

{ "field": "UnitPrice", "headerTemplate" : "<span data-role=\"tooltip\" title=\"tooltip message\"> Header should have tooltip</span>" }

Full example is available here: http://jsbin.com/zizawey/1/

Thanks in advance.

MVVM

answered on 05 Jun 2015

1 answer

230 views

[Solved] optgroup from html source, not datasource

Hi, I tried the new optgroup feature that way, and it is not working:

http://dojo.telerik.com/uZaSE/3

The optgroup is rendered as an "undefined" block.

According to that blog post, you supports dropdownlist option group.

But... for now, we are unable to sort them in "our" order, that is not alphabetical, from data source.

Also, we are unable to load them directly from the "html source" (select / optgroup / option)...

To be clear, we have 3 groups, and the name of these groups have nothing to do with alphabetical order. Also, our customer can change its UI Language, so that text can change when our user change its ui language. But, the logical order or the groups must stay the same, even if they are displayed in french, english, spanish, ...

Do you have plans to supports the option groups directly from the "<select>" source?

Or to "correctly" allow us to load them from data source, by providing a third "field" that allow us to manage order, independent of the displayted text?

Thank you.

DropDownList

answered on 05 Jun 2015

2 answers

154 views

Setting x & y parameters, loaded in json

Hello,

We're trying to layout our diagram by specifying x & y parameters, and loading the datasource at runtime, via json.

This is the client-side code we have:

<script type="text/javascript">

var serviceBaseUrl = "@dataAccessBase";

var datasource = new kendo.data.DataSource({

transport: {

read: {

url: serviceBaseUrl + "datasource",

type: "POST",

dataType: "json"

}

},

});

var conndatasource = new kendo.data.DataSource({

transport: {

read: {

url: serviceBaseUrl + "dataconnectors",

type: "POST",

dataType: "json"

}

});

$(document).ready(function () {

$("#@Model.SysName-diagram").kendoDiagram({

dataSource: datasource,

connectionsDataSource: conndatasource,

layout: {

horizontalSeparation: 30,

verticalSeparation: 30

                               type: "layered",

subtype: ""

},

editable: false,

shapeDefaults: {

type: "rectangle",

content: {

template: "#= name #"

},

width: 200,

height: 50,

hover: {

fill: "Orange"

}

},

connectionDefaults: {

stroke: {

color: "#979797",

width: 1

},

startCap: "FilledCircle",

endCap: "ArrowEnd",

content:{

template:"#= label#"

}

},

autoBind: true

});

</script>

And the server-side code is:

public JsonResult dataconnectors()

{

var ret = new List<object>

{

new {from = "1", to = "2", label = ""},

new {from = "1", to = "3", label = ""},

};

return Json(ret, JsonRequestBehavior.DenyGet);

}

public JsonResult datasource()

{

var ret = new List<object>

{

new {id = "1", name = "A1", x = "10", y = "10" },

new {id = "2", name = "B2", x = "30", y = "30" },

new {id = "3", name = "B3", x = "60", y = "60" },

};

return Json(ret, JsonRequestBehavior.DenyGet);

}

The question is, how do I use those x and y parameters, client-side to take effect?

Thanks in advance.

Diagram

answered on 05 Jun 2015

5 answers

205 views

Questions about refresh and filters with a custom search plugin

Hi,

My team is writing a custom search plugin for our Kendo grids. We are able to get the query and related functionality to work correctly, but we have had to do a couple of hacky things to get there. I was wondering if there were more formal and better ways to handle a couple of the problems we are facing. I will first list them as plain questions before describing any details:

1. How can I add a filter to dataSource.filter without having that affect the filter indicator on the UI?

2. What is the best way to override the functionality of the 'refresh' button?

For us, those to questions are very related. Basically, we would love to have our custom search work by just adding an additional filter to dataSource.filter. However, we cannot do that because it will trigger the filter indicator on the UI (and we don't want that). So we've written a backdoor way of passing in our extra search filter to avoid the UI change. However, when we do that the 'refresh' button does not know about our extra filter. Instead the 'refresh' button calls directly into dataSource.read(), which bypasses the functionality we added and would only respect filters if we persist the search filter to the grid's set of filters (back to the UI indication trigger problem).

Any help would be appreciated. Thank you!

Grid

answered on 05 Jun 2015

1 answer

102 views

Angular: Get Selected Count

I have a grid that multiple rows can be selected and a button that I want to enable when one or more are selected but I cant seem to find a property to bind to. Can you point me in the right direction. I am trying to do something like:

<button ng-disabled="vm.selectedItems.length == 0">Button Text</button>

Grid

answered on 05 Jun 2015

13 answers

868 views

Changing properties of a specific/single line chart marker at runtime

Hello,

I want to change the properties for specific marker(s) on a line chart based on data I have, e.g. the color of a marker or the tooltip for the specific marker.
Is there any way to do that??

Charts

answered on 05 Jun 2015

1 answer

87 views

problem with the function dataSource.read

Hi!
I have the following problem with the function read.

The problem occurs when a new call dataSource.read.

The problem is not immediately visible, it is required to click on the button 1-10 times, then the double line or become very much and does crashes Firefox.

http://dojo.telerik.com/umEse/2

TreeList

answered on 05 Jun 2015