Telerik Forums
Kendo UI for jQuery Forum
2 answers
330 views
Hello,
I have a "selectedProject" property on a ViewModel. This property is initially defined as "null". Eventually, this property will be set to an instance of an object locally defined as kendo.data.Model, having an array of "users".

Now, I am adding the following:
<div data-template="row-user-info-template" data-bind="source: selectedProject.users"></div>

Initially the selectedProject is null and hence users is undefined. That's why I am getting this exception:
"Uncaught TypeError: undefined has no properties"

Any idea how to workaround this issue?

Thanks

Leandro
Top achievements
Rank 1
 answered on 05 Jun 2015
1 answer
113 views

In my grid, I'm working on Filter Multi Checkboxes. In the unique ajax call, I would like to return a simple array of strings, like the following:

data.OrgSelections.Select(o => o.CompanyName).Distinct().ToList()

But the js is expecting a full on data structure, e.g. with an array of {CompanyName: "Susie's Seashell Shop"}

When I look at the demo and the ajax response, it seems to be unnecessarily heavy with data that will never be used for the purpose of showing the distinct items (all other columns in the view model are included, complete with data). In other words, all the Unique ajax call should be interested in is the unique set of strings for the checkboxes, so why can't it just accept an array of strings?  Or.. is there a way to configure it to accept a simple array of strings and I just haven't found it yet? Or, is there a reason why you may need to send down the complete ViewModel data structure that I'm not yet realizing?

OK, so, I'm assuming (for the purpose of this post and in the interest of getting something working in the short term) there may not be a way to just send down a simple array of strings. How can I convert the above code to return an array of anonymous types with a single field, CompanyName? I know this is more of a generic C# question, but I'm drawing a blank right now.

Thanks,

--Ed

Ed
Top achievements
Rank 1
 answered on 05 Jun 2015
3 answers
2.5K+ views
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


beauXjames
Top achievements
Rank 2
 answered on 05 Jun 2015
5 answers
460 views

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.

 

 

Coty
Top achievements
Rank 1
 answered on 05 Jun 2015
1 answer
132 views

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

Alexander Popov
Telerik team
 answered on 05 Jun 2015
1 answer
469 views

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.

 

Dimo
Telerik team
 answered on 05 Jun 2015
1 answer
239 views

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.

Georgi Krustev
Telerik team
 answered on 05 Jun 2015
2 answers
160 views

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.

George
Top achievements
Rank 1
 answered on 05 Jun 2015
5 answers
217 views

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!

Alexander Popov
Telerik team
 answered on 05 Jun 2015
1 answer
102 views

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>

Kiril Nikolov
Telerik team
 answered on 05 Jun 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
Drag and Drop
Map
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
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?