Telerik Forums
Kendo UI for jQuery Forum
4 answers
854 views

 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.

 

Ashleigh L
Top achievements
Rank 1
 answered on 07 May 2015
2 answers
10.9K+ views
Hello,
I tryed to set the size of the chart through the parent div, but it seems that there is no result.. Size doesn't follow my values.
Is there a correct way to do that ?
Thanks in advance

PS : excuse me for my bad english..
TISAL
Top achievements
Rank 1
 answered on 07 May 2015
1 answer
174 views

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!

Alexander Popov
Telerik team
 answered on 07 May 2015
1 answer
241 views
 I am using the kendo ui grid and am trying to add CRUD operations for my model that has some navigation properties. Here is my schema:
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

}
}

}


And here is my grid:

$("#AFTRCCFreqGrid").kendoGrid({
dataSource: AFTRCCDS,

columns: [
// { field: "Id", title: "Freq ID", format: "{0:c}", width: "120px" },
{ field: "Frequency", title: "Frequency", editor: categoryDropDownEditor, format: "{0:c}", width: "120px" },
{ field: "FREQ_POOL.Comments", title: "Comments", format: "{0:c}", width: "120px" },
{ command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
],
toolbar: ["create"],
editable: "inline",
pageable: true

});

When I hit the "Add New Record Button" in the kendo grid, I get the following error:Uncaught TypeError: Cannot read property 'Comments' of undefined(anonymous function). Now here is the thing. I manually added a row to my SQL table, and I can use the kendo grid to UPDATE the row successfully. I can edit the navigation property "Comments".

But for some reason, when I create a new row, I cannot get it to work.My guess is that when I load the table it loads the navigation properties, but when I hit "Add New Record", it doesn't know how to create the navigation property "From scratch", whereas when I update a row it already has the navigation property info loaded.Any ideas how I would go about fixing this? Thank you.
Daniel
Telerik team
 answered on 07 May 2015
1 answer
523 views

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 = ", ";
        }
    ];

Daniel
Telerik team
 answered on 07 May 2015
1 answer
223 views

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.

Daniel
Telerik team
 answered on 07 May 2015
2 answers
94 views

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: {
                    url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                }
            }
        }
    });
  $("#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

 

 

Georgi Krustev
Telerik team
 answered on 07 May 2015
1 answer
225 views

Is there a working example using angular js. and serverside filtering (json / Web Api)

Plamen
Telerik team
 answered on 07 May 2015
1 answer
113 views

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.

 

Rosen
Telerik team
 answered on 07 May 2015
2 answers
104 views
Hello.

I want to create a program using the
following functions .

[Grid / Multi-column headers]
http://demos.telerik.com/aspnet-mvc/grid/multicolumnheaders

Please tell if I buy any product .
UI for ASP.NET MVC  ?

Please answer .
Best regards.
oda
Top achievements
Rank 1
 answered on 07 May 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?