Telerik Forums
Kendo UI for jQuery Forum
1 answer
141 views
We have a Flex app that is used internally and has a hierarchial grid with several options including context menu, popup editor on individual columns.
We are writing an app for external customers with limited functionality on the grid. But we need an option to mass update a particular column on the grid, either all rows or selected rows. See the attached png file for current implementation.

Instead of specifying columnMenu:true, we want to open an html template on the grid as model popup. Is there an way to do this on Kendo grid?
Thanks
Alexander Popov
Telerik team
 answered on 29 Oct 2014
1 answer
843 views
Hi,
Can create button outsite gird to add new row?I dont want to use toolbar because It must inside grid container.Right?Please check my attachment.When click button Add Location.The new row will insert into grid or popup display to fill data and after saving the grid will reload new data?

Thanks
Dimiter Madjarov
Telerik team
 answered on 29 Oct 2014
5 answers
292 views
My issue is with the categoryAxis not showing the text.  Which becomes an issue when trying to understand the graphing points.  I have included my code below with a small sample dataset to show what is going on.  Thank you!

var chartOptions = {
theme: "",
seriesDefaults: {
type: "line"
},
title: {
text: ""
},
legend: {
position: "bottom"
},
series: "",
categoryAxis: {
field: "category"
}
};

//Set Chart Data
chartOptions.series = dataSetContents.Series;
chartOptions.seriesDefaults = { type: $("#chartType").val() };
chartOptions.theme = $("#colorType").val();
chartOptions.title = { text: $("#dimensionsType").val() + " BY " + $("#dataType").val() };

function createChart() {
$("#chart").kendoChart(
$.extend(true, {}, chartOptions)
);
}

my series is set up as the following:
{
    name: "2008-2010"
    data: [{
       category: "2008"
       value: "500"
    }]
}

full text is here:
{"Series":[{"name":"2008-2010","data":[{"category":"2010 - Q01","value":733},{"category":"2009 - Q02","value":921},{"category":"2008 - Q01","value":690},{"category":"2009 - Q01","value":1584},{"category":"2008 - Q03","value":1778},{"category":"2008 - Q04","value":359},{"category":"2008 - Q02","value":1308},{"category":"2009 - Q04","value":64},{"category":"2007 - Q03","value":20},{"category":"2009 - Q03","value":411},{"category":"2010 - Q02","value":17},{"category":"2007 - Q04","value":19},{"category":"2007 - Q02","value":11},{"category":"2007 - Q01","value":5}]},{"name":"2009 Data","data":[{"category":"2008 - Q01","value":6230},{"category":"2008 - Q02","value":7635},{"category":"2008 - Q03","value":4294},{"category":"2007 - Q03","value":101},{"category":"2007 - Q02","value":86},{"category":"2007 - Q04","value":65},{"category":"2007 - Q01","value":63},{"category":"2009 - Q02","value":8}]}]}

Hristo Germanov
Telerik team
 answered on 29 Oct 2014
1 answer
104 views

Please find the attached file or check into the link: http://dojo.telerik.com/emAq/2

    As per the code, My problem is that, I am unable to modify the child nodes onClick of expand.  It is able to modify the child nodes for the first time but, once I re-expand the same node the styles are not applying properly.

   My usecase: I should be able to get the child nodes from the server and render dynamically into the respective parents. My calls to the server are POST requests where the request data will be modified according to the currently selected parentNode.


If there is any sample code please help me to make my usecase work with Kendo-Tree widget.
Alex Gyoshev
Telerik team
 answered on 29 Oct 2014
4 answers
197 views
I am using kendo UI Pro 2014.2.1008 with Visual Studio 2013 (update 3). I have the kendo.all.min.intellisense.js file in the same folder as the kendo.all.min.js. The folder is "~/Scripts/kendo/2014.2.1008". It is also listed in _reference.js file properly. Still I am not getting any intellisense either in cshtml or in js files. Can't figure out what I am missing. Please advice. Thank you.
Petyo
Telerik team
 answered on 29 Oct 2014
7 answers
2.3K+ views
Hi,

I've a few queries related to kendo grid (using via AngularJS way).

1. What is the recommended way to read the entire grid data in AngularJS.. I want to read all the rows and find a row whose column value matches a given value..

2. Once I find this row, I would like to set the background color of this row and its detailedRow (aka child row) to gray color.. I think every row in kendo grid has a rowId value set dynamically. That will be of use in setting the background-color of the row..

3. There is a checkbox column too in the grid.. so would like to check the checkbox for this row.

Any thoughts on this? A sample code would be of great help..
Thanks in advance.

Thanks,
Sagar
Sagar
Top achievements
Rank 1
 answered on 29 Oct 2014
3 answers
727 views
 I would like to get the dataItem onExpand of the node. I am using AngularJs Kendo treeGrid<div kendo-tree-view="tree"
             k-data-source="treeData"
             k-template="itemTemplate"
             k-on-expand="onExpand(selected, data, dataItem, columns)"></div>

<!-- angular module -->
angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope) {
           $scope.onExpand = function(selected, data, dataItem, columns) {
           <!-- Here I would like to get the current dataItem. The dataItem as a parameter is coming as undefined. -->
           alert('onExpand ' + e); 
      }
}

Here data-Item represents the current selected node dataSource value.
Alex Gyoshev
Telerik team
 answered on 29 Oct 2014
1 answer
1.7K+ views
I'm trying to eliminate the chart's y axis. I can accomplish this through CSS, but then I have a margin to eliminate. I'd rather do this through the JS, but the kendo examples weren't working in Kendo Dojo so I'm not sure of the correct way to do this.

This is my HTML
<span class="w50 left">"Job Name"</span>
<span class="">
      <div id="profitChart" ></div>
</span>

This is my CSS to hide it (I commented this out to take the screen grab - see attached)
/*hides sidebar of Cost Discount Profit Bar*/
#k10000 > path:first-child, #k10000 > path:nth-child(2), #k10000 > path:nth-child(3){
    display:none !important;
}

This is my JS
// Creates the Profit bar chart on Job Info screen
function createChart() {
    $("#profitChart").kendoChart({
        chartArea: {
            height: 80,
            margin: {
                top:5,
                bottom:5
            }
        },
        //title: {
        //    text: "Job Name"
        //},
        legend: {
            visible: true,
            position: "bottom",
            labels: {
              font: "20px sans-serif",
            }
        },
        seriesDefaults: {
            type: "bar",
            stack: {
                type: "100%"
            }
        },
        series: [{
            name: "Cost",
            data: [50],
            color: "#3498db"
        },  {
            name: "Discount",
            data: [10],
            color: "#FFA500"
        }, {
            name: "Profit",
            data: [40],
            color: "#61B329"
        }],
         
        valueAxis: {
            visible: false,
            majorGridLines: {
                visible: false
            },
            minorGridLines: {
                visible: false
            }
        },
         
        categoryAxis: {
            categories: [],
            majorGridLines: {
                visible: false
            },
            minorGridLines: {
              visible: false
            },
        },
        tooltip: {
            visible: false,
            template: "#= series.name #: #= value #"
        },
        panes: [
        { height: 50 }]
    });
}
 
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
Iliana Dyankova
Telerik team
 answered on 28 Oct 2014
1 answer
139 views
I am using the Kendo TreeView with pure JavaScript, no JSP or ASP.NET involved.

My TreeView is 4 levels deep. The actual formatting of the nodes is accomplished using the template language.

I have a need to (potentially) change the information displayed for each node as the selection is changed. I have created my own onSelect event handler to do this. Specifically, what I need is to change a node's descendant nodes recursively based upon the value of the node.Nodes that have never been expanded can be ignored since this is handled by a different mechanism, only the loaded nodes need to be modified.

I know that I can recursively modify the value of each descendant node's DataItem to contain the updated information but this modification is not reflected in the browser. I apparently need to have some way to trigger the page renderer to rerun the template code to redraw each node.

Is there any way I can accomplish this?
Alexander Popov
Telerik team
 answered on 28 Oct 2014
1 answer
220 views
I have a question about the Column.Filterable.UI property.  I have been experimenting with custom filtering by following this example http://dojo.telerik.com/EyoL/31, however it appears that the UI function only gets called once.  Is this correct?  What I am trying to do is limit the values displayed based on other filters applied.  Below is a sample of my function.
01.function createMultiSelect(element, fieldName) {
02.            var isFilter = $("#grid").data("kendoGrid").dataSource.filter();
03.            var data = $("#grid").data("kendoGrid").dataSource;
04.            var ds = data.data();
05.            if (isFilter) {
06.                var query = new kendo.data.Query(ds);
07.                ds = query.filter(isFilter).data;
08.            }
09.            else {
10.                ds = data.data();
11.            }
12.            //var names = ds.sortBy(ds.uniq(ds.pluck(ds, "GroupCode")), function (n) { return n; });
13.            var names = _.sortBy(_.uniq(_.pluck(ds, fieldName)), function (n) { return n; });
14.            //mvvm binding should be removed, other way the dataSource will try to update the UI when the dataSource filter has changed
15.            element.removeAttr("data-bind");
16. 
17.            element.kendoMultiSelect({
18.                dataSource: names,
19.                change: function (e) {
20.                    var curFilter
21.                    if (isFilter) {
22.                        curFilter = data.filter().filters;
23.                    }
24.                    else {
25.                        curFilter = [];
26.                    }
27.                    var filter = { logic: "or", filters: curFilter };
28.                    var values = this.value();
29.                    $.each(values, function (i, v) {
30.                        filter.filters.push({ field: fieldName, operator: "eq", value: v });
31.                    });
32.                    console.log(this.dataSource.data());
33.                    $("#grid").data("kendoGrid").dataSource.filter(filter);
34.                }
35.            });
36.        }

Alexander Popov
Telerik team
 answered on 28 Oct 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?