Telerik Forums
Kendo UI for jQuery Forum
5 answers
115 views
So I've figured out from the documentation how to format a cell based on a condition.

I've also learned how to display a foreign key lookup in a cell. How do I combine the two?

So in this example:     
​columns: [ {
    field: "name",
    template: "# if (name.substr(0, 4) == 'Jane') { #" +
     "<span style='color: lightgray'> #: name # </span>" +
      "# } else { #" +
         "#: name #" +
      "# } #"
  }],


How would I test on the model's value that I want to test on, but still display the foreign key value?

The foreign key field is defined thus:
field: "MarketngEngnrID",
values: theMarketers, // a JSON array containing key-value pairs to show the text rather than the value


But I don't know how to combine. I need to show people who are no longer active employees in a different color.

Thanks, Bob

Nikolay Rusev
Telerik team
 answered on 01 Oct 2014
1 answer
227 views
I have a Kendo Grid that works fine if I use the built in popup editor, .Editable(editable => editable.Mode(GridEditMode.PopUp))                

If I switch to a custom template it won't bind the data. 

Any help is appreciated.

@(Html.Kendo().Grid<Application.Models.OrgHtmlContentViewModel>()
    .Name("ContentGrid")
    .Columns(columns =>
    {
        columns.Bound(c => c.OrgHtmlContentTypeName).Width(150).Title("Content Type");
        columns.Bound(c => c.HtmlContent).Width(600).Title("Html Content").Encoded(false);
        columns.Command(command => { command.Edit(); }).Width(100);
    })
    .HtmlAttributes(new { style = "height: 600px;" })
    .Scrollable()
    .Sortable()
    //.Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Editable(editable => { editable.Mode(GridEditMode.PopUp); editable.TemplateName("OrgHtmlContentEditor").Window(w => w.Title("Org Html Content").Width(760)); })           
    .DataSource(dataSource => dataSource
        .Ajax()
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(c => c.OrgHtmlContentId))
        .Read(read => read.Action("OrgHtmlContent_Read", "OrgHtmlContents", new { id = Model.OrganizationId }))
        .Update(update => update.Action("OrgHtmlContent_Update", "OrgHtmlContents"))
    )
)

Custom Editor
@model Application.Models.OrgHtmlContentViewModel
 
<div style="padding: 10px;">
   <h6>@Html.DisplayFor(m => m.OrgHtmlContentTypeName)</h6>
 
    @(Html.Kendo().EditorFor(c => c.HtmlContent)
          .Name("contentEditor")
          .HtmlAttributes(new { style = "width: 740px;height:440px" })
    )
</div>

Vladimir Iliev
Telerik team
 answered on 01 Oct 2014
1 answer
207 views
After upgrading to the latest kendo (2.903), a js exception is being thrown when using a placeholder. Adding single quotes around the placeholder value seems to work as a workaround.

Thanks,
Georgi Krustev
Telerik team
 answered on 01 Oct 2014
4 answers
1.7K+ views
Hi,


I have a kendo window (child view) defined in the parent view which is set to hidden until the "Add" button is clicked.

This window has the "LoadContentFrom" property set which calls a method in the controller.

The parameters are currently static with only one value used every time the window is opened but is there any way to change just the parameters for "LoadContentFrom" using jquery?


This is what the parent view looks like:
    @(Html.Kendo().Window()
        .Name("PurchaseOrderDetailWindow")
        .Title("Update Purchase Order")
        .Draggable()
        .Visible(false)
        .Iframe(true)
        .Width(1000)
        .Height(662)
        .Modal(true)
        .LoadContentFrom("PODetailView", "Home", new { isNewPO = "true", companyId = 2 })
        .Actions(actions => actions.Minimize().Maximize().Close())
        .Events(e => e.Close("WindowClosed"))
    )

This is what the add button looks like (static loading of data)
    // Open window for new Purchase Order creation.
    function AddPurchaseOrder(e) {
        var window = $("#PurchaseOrderDetailWindow").data("kendoWindow");
        window.center().open();
    }

Is there any way to modify the above AddPurchase method to dynamically change "LoadContentFrom("PODetailView", "Home", new { isNewPO = "true", companyId = 2 })"

Mainly the "new {isNewPO = ....}" section,


Thanks in advance
Kiril Nikolov
Telerik team
 answered on 01 Oct 2014
4 answers
344 views
I need to perform some javascript action whenever user dropped a column header or delete a column header. How do I detect? Thanks.
Dimiter Madjarov
Telerik team
 answered on 01 Oct 2014
5 answers
655 views
Hi, I have a ListView  that is the target of a ContextMenu, when you right-click on a ListView item the ContextMenu opens. The next action is the user selecting a ContextMenu option. I am trying to access the data for the ListView item that was right clicked to open the ContextMenu.

I can do this if I bind a double-click event handler to the each ListView item and open the ContextMenu in JavaScript.

@(Html.Kendo().ListView<SchedulerMVC.Models.EmployeeViewModel>()
    .Name("listview-context-menu")
    .TagName("div")
    .ClientTemplateId("template")
    .DataSource(dataSource =>
    {
        dataSource.Read(read => read.Action("Data", "ContextMenu").Type(HttpVerbs.Get));
        dataSource.PageSize(5);
    })
    .Selectable()
    .Events(e =>
    {
        e.DataBound("setItemDoubleClickEvent");
    })
)

@(Html.Kendo().ContextMenu()
    .Name("context-menu")
    .Target("#listview-context-menu")
    .Orientation(ContextMenuOrientation.Vertical)
    .Items(items =>
    {
        items.Add().Text("MenuItem").SpriteCssClasses("k-icon k-i-tick");
    })
    .Events(events => events.Select("selectContext"))
)

// ListView DoubleClick
function setItemDoubleClickEvent() {
    var items = $(".product");
    items.dblclick(function (e) {
        var listView = $("#listview-context-menu").data("kendoListView");
        var contextMenu = $("#context-menu").data("kendoContextMenu");
        var uid = $(this).data("uid");
        var item = listView.dataSource.getByUid(uid);
        contextMenu.open(e.clientX, e.clientY);
    });
}

I figured that if you are opening a ContextMenu for a ListView item there should be a direct way to access that items data. Is there any way to do this with the right-click event or within the ContextMenu select event handler?


Dimiter Madjarov
Telerik team
 answered on 01 Oct 2014
1 answer
166 views
Hello,

I have a simple angular controller that should handle the selected row of a kendo-angular grid.  However, angular is throwing an exception, "Referencing DOM nodes in Angular expressions is disallowed! Expression: uc.handleChange(selected, data, dataItem, columns)".

Is there a way around this or a better practice for retrieving the data model for a selected row?

Thanks
Mihai
Telerik team
 answered on 01 Oct 2014
5 answers
121 views
Hi,

 We need to programatically de-select a particular node in the ListView control. Listview has option - selectable: "multiple". We don't want to use clearSelection() as it will remove selection for all the nodes.

 Please let me know how we can achieve this.

Thanks a lot.
Dimiter Madjarov
Telerik team
 answered on 01 Oct 2014
1 answer
642 views
Hi,
I am trying to populate tabs dynamically with Angular JS. The no. of tabs is controlled by data retrieved from database.
I am not sure what is going wrong. It works fine if I return the JSON from controller without using promise service. But I need promise service because I in the tab content, I have to populate the kendo Pie chart dynamically. I would appreciate any help. 

Following is what I am trying out in the view:

<div kendo-tab-strip>
        <ul>
            <li ng-repeat="tab in tabs" class="{{tab.headerClass}}">{{tab.title}}</li>
        </ul>
<div ng-repeat="tab in tabs">{{tab.content}}</div> 
</div>

Angular controller looks like:

myApp.controller("InterestController", ['$scope', '$state', 'dataService', function ($scope, $state, dataService) {
dataService.getTabData().then(function (data) {        
        $scope.tabs = [];
        var headerClass = '';
        for(var i = 0; i < data.length; i++){
            if(i == 0){
                headerClass = 'k-state-active'; // make the first tab auto selected
            }
            $scope.tabs.push({'title' : data[i].title, 'headerClass' : headerClass, 'content' : data[i].content});
            headerClass = '';
        }

        console.log($scope.tabs); // I see data perfectly in console
    });
}])

Angular service looks like following :
myAppp.service('dataService', ['$q', function ($q) {
this.getTabData = function(){
        var deferred = $q.defer();

        new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/some_data_provider/data.json",
                    dataType: "json"
                }
            }
        }).fetch(function(){
            deferred.resolve(this.data());
        });

        return deferred.promise;
    }
}]);

Thanks

Petyo
Telerik team
 answered on 01 Oct 2014
5 answers
1.0K+ views
I am using column filters as described here:
http://www.telerik.com/forums/column-filter-menu-with-(not-visible)-implied-operator

and using the following to show the drop down of the distinct values in the column:
http://www.telerik.com/forums/column-filter-menu-with-(not-visible)-implied-operator

This all works great until someone filters a column, at which point the values in the drop downs aren't proper for the current resultset represented by the grid.I have 2 questions:

1. How can I hook into the filter update so I can then refresh my distinct values.
2. Once I have the distinct values, how can I update the dataSources on my dropdowns?

for #1, Is there a way for me to hook into transport.read.complete so I can get the filters used to filter the grid - and I can use those same filters in my ajax call to get distinct col values? Or is there a different, preferred approach?

for #2, Apart from trying to select the dropdowns by searching through the source in DevTools, is there a way i can access that from the kendo API?
Ed
Top achievements
Rank 1
 answered on 30 Sep 2014
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?