I'm using a template and datasource to set up a tile view of objects, which works great. However, there is a case where the page may have zero objects to display, and I need to handle that.
This is my javascript to get the data and populate the template:
var tile_template = kendo.template($('#tile_template').html());var tile_dataSource = new kendo.data.DataSource({ transport: { read: { url: "/Controllers/MainController.cfc?method=getObjects" } }, schema: { type: "xml", data: "/Objects/Object", model: { id: "ID", fields: { Name: { field: "Name/text()", type: "string" }, Tag: { field: "Tag/text()", type: "string" }, Image: { field: "Image/text()", type: "string" } } } }});tile_dataSource.bind("change", function() { $('#main').html(kendo.render(tile_template, tile_dataSource.view()));});tile_dataSource.read();I was hoping there was some way to detect if the datasource is empty and then either using a different template, or, within the template itself, detecting if say, the ID was null/empty/0 and then rendering different HTML. To be clear, I'm not using an actual Kendo ListView or anything similar, simply using the template and datasource to render HTML:
<div id="main" class="col-xs-12 col-lg-12 padding list-items-content-area ui-layout-west k-widget k-listview"></div><script type="text/x-kendo-template" id="tile_template"> <div class="col-xs-12 col-md-6 col-lg-4 course-content"> <div class="k-block list-items"> <div class="list-items-heading padding k-block"> <div class="list-items-heading-icons "> <a href="##" data-role="button" class="k-button info-button" role="button" aria-disabled="false" tabindex="0"> <i class="fa-icon-info-circle"></i> </a> </div> <div class="list-items-heading-ellipsis"> <a href="##"><h3 class="item-title">#= Name #</h3></a> </div> </div> <div class="padding list-items-body"> # if (Tag != null && Tag != '') { # <div class="tag-overlay"><i class="fa-icon-tag"></i>#= Tag #</div> # } # # if (Image != null && Image != '') { # <img src="/object/#= ID #/Image/#= Image #" class="img-responsive border-radius"> # } else { # <img src="/object/default/image.jpg" class="img-responsive border-radius"> # } # </div> </div> </div></script>I haven't been able to find anything via Google, so any information/suggestions would be great.
So, in Kendo, you can bind inputs or spans to your data, like:
1.<input data-bind="value: selected.title" />1.<textarea rows='5' data-bind="value: selected.interestingNotes" required></textarea>I have spans, inputs, etc.. in an external editor, but I also need to display a editable grid in the editor, to permit editing of data in one of the columns, based on data in a nested json array in the same dataSource as the original grid.
My question is: Can I bind my nested grid in the external editor to the array of data in the original grid? The array name is, for example 'approvers', so I thought it would look something like:
1.<div id="Grid" data-role="grid" data-bind="source: selected.approvers">Thank you!
schema: {
data: function (data) {
return data || [];
},
model: {
id: "Id",
fields: {
Id: { editable: false,
nullable: false,
type: "number"
},
Frequency: { type: "string" },
FREQ_POOL: { type: "object" },//THIS IS A NAVIGATION IN MY MODEL
}
}}
I'm trying to put a select control in a grid column using ClientTemplate. The select control shows in the grid column, and I can select a value from the control, but after I select the value, the select control disappears from the cell and the value from the select option (i.e. the ID) appears in the cell. When I click off of the cell, the select control reappears, and the value selected is the original value, not the value I had just selected.
I'm probably missing some script, e.g. onchange script for the select control. Can someone tell me what I'm missing?
Here's the grid (with some columns omitted):
@(Html.Kendo().Grid(Model.MatrixLines)
.Name("Matrix")
.ToolBar(tools => tools.Create().Text("Add new Matrix"))
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Columns(columns =>
{
columns.Bound(p => p.TaxabilityId).ClientTemplate(
"#= taxabilityDropdown(data) #" +
"<input type='hidden' name='MatrixLines[#= index(data)#].TaxabilityId' value='#= TaxabilityId #' />"
).Title("Trans Code").Width(40);
})
.DataSource(dataSource => dataSource.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
})
.ServerOperation(false)
)
)
Here's the JavaScript function that returns the select control:
function taxabilityDropdown(data) { var selectControl = '<select>'
var selected = ''; for (i = 0; i < taxabilityCodes.length; i++) {
if (taxabilityCodes[i].id == data.TaxabilityId) {
selected = ' selected';
}
else {
selected = '';
}
selectControl += '<option value="' + taxabilityCodes[i].id + '"' + selected + '>' + taxabilityCodes[i].code + '</option>';
}
selectControl += '</select>'; return selectControl;
}
Here's the JavaScript that generates the client-side array of objects, generated from the model:
var taxabilityCodes = [
@{string comma2 = "";}
@for (int i = 0; i < Model.AllTaxabilities.Count; i++)
{
WriteLiteral(comma2);
WriteLiteral("{id:'");
WriteLiteral(Model.AllTaxabilities[i].Id);
WriteLiteral("', code: '");
@(Model.AllTaxabilities[i].Code);
WriteLiteral("', description: '");
@(Model.AllTaxabilities[i].Description);
WriteLiteral("'}");
comma2 = ", ";
}
];
Hi--
I am using a Diagram to display a tree-like structure using a HierarchicalDataSource.
I now need to have a set of Draggable items that users can drag into the Diagram (the visible elements in the diagram are drop targets). When the user drops an item onto the diagram, I want to insert a new data item as a child of the corresponding part of the datasource, then redraw the diagram.
My problem so far is that I don't know how to get the underlying data item (the item in the datasource that the dropTarget, which is a Group in the diagram, represents). When I pause my debugger during the "drop" event and inspect the dropTarget property of the drop event, I only see ways to look at the SVG elements. I don't see a way to get the underlying data value which spawned the visual diagram objects.
I am using a VisualTemplate to draw the diagram, and I thought that maybe I could provide an id attribute to the diagram Group, which would then end up in the generated SVG markup (the "g" element for the diagram Group), but I don't see a way to do that.
So far all I can think of is to "print" an ID using a TextBlock in the Group, using teeny tiny type the same color as the background color so that it is "invisible". Then when the drop event occurs, I would parse the ID out from the textContent property of the drop target (which is an svg "g" element at that moment). Then I could look up the corresponding data item myself, which would get me what I need. Seems like a terrible hack though. I feel like I have probably missed some part of the API which would make this relatively straightforward.
Any solution which allows me to look up the original data item would be fine. The "click" event for a Diagram element provides a "dataItem" property, which is great for click events. I just need something similar for drop events.
I think this would be straightforward if I was displaying the tree-like structure as a TreeView rather than a Diagram. Unfortunately the UI calls for a Diagram-like display.
Thank you for any help.
hi there,
When we used your example
http://demos.telerik.com/kendo-ui/combobox/serverfiltering
and added a single line (the one with refresh)
$(document).ready(function() { $("#products").kendoComboBox({ placeholder: "Select product", dataTextField: "ProductName", dataValueField: "ProductID", filter: "contains", autoBind: false, minLength: 3, dataSource: { type: "odata", serverFiltering: true, transport: { read: { } } } }); $("#products").data("kendoComboBox").refresh();});we had an strange behaviour
if you type in the text field - everything is normal
if you press on the arrow, no items will be shown, over network we saw, that the datasource has not been read.
best regards
mathias
Is there a working example using angular js. and serverside filtering (json / Web Api)

I have some issue with navigating to a view with a link created from template. This is my code
<div data-role="view" id="listview-products">
<a data-align="left" data-role="touch" href="\#listview-products">
<div class='product'>
</div>
</a>
</div>
<div data-role="view" id="listview-products">
test
</div>
when i click on this div (in chrome browser on pc) i get this error: XMLHttpRequest cannot load '<deleted for readability>' Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
I don't understand this error because i am trying to load a plain local view. This works when i use data-role="button" on the div element.