Telerik Forums
Kendo UI for jQuery Forum
1 answer
1.1K+ views

I have a grid that resembles this: 

01.var grid = $(gridName).kendoGrid({
02.    dataSource: dataSource,
03.    selectable: true,
04.    groupable: true,
05.    sortable: true,
06.    editable: "inline",
07.    toolbar: ["create"],
08.    columns: [
09.        { field: "Product", title: "Name" },
10.        { field: "Cost", title: "Cost", format: "{0:c}" },
11.        { field: "EditedOn", title: "Edited On" },
12.        { "command": ["edit", "destroy"] , "title": "   " }
 
13.    ]
 
14.});

However, the columns are actually dynamic.  The whole thing is created as a string and is passed as a variable from ASP.  It would look this:

01.var fcolumns = '[{ "field": "Product", "title": "Name" }, { "field": "Cost", "title": "Cost", "format": "{0:c}"}, { "field": "EditedOn", "title": "Edited On" }, { "command": ["edit", "destroy"] , "title": "   " }]';
02. 
03.var grid = $(gridName).kendoGrid({
04.    dataSource: dataSource,
05.    selectable: true,
06.    groupable: true,
07.    sortable: true,
08.    editable: "inline",
09.    toolbar: ["create"],
10.    columns: JSON.parse(fcolumns),
11.});

So far all this works.

The problem I am now having is that I need the command column to use a kendo template.  

Normally I would just include a template and include a kenodo.template() command in columns area.  Something like...

<script id="command-template" type="text/x-kendo-template">
    <div class="btn-group">
        <a class="k-grid-edit btn btn-default dark">
            <i class="fa fa-edit"></i>
        </a>
        <a class="k-grid-destroy btn btn-default dark">
            <i class="fa fa-trash"></i>
        </a>
    </div>
</script>
 ... with ...

var grid = $(gridName).kendoGrid({
    dataSource: dataSource,
    selectable: true,
    editable: "inline",
    toolbar: ["create"],
    columns: [
        { field: "Product", title: "Name" },
        { field: "Cost", title: "Cost", format: "{0:c}" },
        { field: "EditedOn", title: "Edited On" },
        {
            template: kendo.template($("#command-template").html())
        }
    ],
    edit: function (e) {
        var commandCell = e.container.find("td:last");  //find the command column
        commandCell.html('<a class="btn btn-default dark k-grid-update" href="#"><i class="fa fa-save"></i></a><a class="btn btn-default dark k-grid-cancel" href="#"><i class="fa fa-undo"></i></a>'); //append the buttons
    }
});

... but of course I cannot hardcode the columns.  So I need to somehow use the template in lieu of  { "command": ["edit", "destroy"] , "title": " &nbsp; " } but the template is using javascript so I cannot do a JSON.parse() if I just swap that in the javascript variable.

What approach should I take to add the kendo.template() dynamically?  Is there a way to add it to the columns *after* the fact?  Or is there a better way to implement this concept?

 

 

 

Rosen
Telerik team
 answered on 04 Jan 2016
2 answers
780 views

Hello Kiril,

I created this new thread per your request.

Here is my problem. I have a pageable grid with filter and dropdown. It works fine until options are saved and restored from SessionStorage. The reason I use SessionStorage, because my grid has a link to another web page. When user comes back, I need to know what last grid page was active. So, grid script has reference to function:
{ field: "ProductName", title: "Product",
           filterable: { ui: grid_Filter, messages: { filter: "Search", info: ""} }
          }

But this function (grid_Filter) is missing in string that returned by getOptions() :
"field":"ProductName","title":"Product","filterable":{"messages":{"filter":"Search","info":""}}

Here is example: http://dojo.telerik.com/AQAVO

When you click on filter sign, you can see dropdown with data. If you click “Save and Restore” button and then click on filter sign again, dropdown is gone.
Is it a bug? I am looking for a work around how to set filter after setOptions.

Thank you.

Ruben
Top achievements
Rank 1
 answered on 04 Jan 2016
3 answers
234 views

Hi,

I have a requirement to make a map that will show bubbles (circles) at geographic locations. The size of the circle will be driven by a numeric value. And the color will be based on another value. I can get a bubble map with circles based on a numeric value, but I'm not able to see where I can set the color of individual circles.

 

Thanks!

Kiril Nikolov
Telerik team
 answered on 04 Jan 2016
3 answers
368 views

I have a Kendo grid which need a dropdown in some fields, i have used editor template for that (http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/editor-templates), everything is working fine, but when i select a value the grid shows the id of the dropdown element insted of its text value.

This is my partial view of the template

@(Html.Kendo().DropDownList()
        .Name("ClasificacionId")
        .DataValueField("Value")
        .DataTextField("Text")
        .BindTo((System.Collections.IEnumerable)ViewBag.ClasificacionId)
)

 

This is how i'm passing the list value to the view

 ViewBag.ClasificacionId = new SelectList(db.ClasificacionMercancia, "ClasificacionId", "Descripcion");

 

and this is how the row its defined in the kendo grid with razor sintax

.Columns(columns =>
                                       {                                          
                                           columns.Bound(o => o.ClasificacionId).Width(120).ClientTemplate("#= ClasificacionId #<input type='hidden' name='Fracion[#= index(data) #].ClasificacionId' value='#= ClasificacionId #'/>");

i need that Client template to save all editable kendo grid values to a List in my model, but i want to show the text value of the dropdown to the user insted of the id value.
Dimiter Madjarov
Telerik team
 answered on 04 Jan 2016
1 answer
301 views

I was trying to figure out how to find the JavaScript code that executes when running in the Telerik Dojo so that I could set a breakpoint in Google Chrome and step through the code. I tried looking through the sources, but I couldn't find where the code was located to set the breakpoint.

 Does anyone know how to do this?

 Thanks.

Kiril Nikolov
Telerik team
 answered on 04 Jan 2016
1 answer
379 views

I am trying to create a Kendo stacked Bar chart. I am receiving the following data from the server. I then group it by carrier. I want to display a stacked bar chart for each month of data with all carriers stacked in a single bar. Below I have included sample data I am receiving from the server using an Angular service along with my chart options for the Kendo directive.

 

{
carrier: "xxx"
count: 24674
date: Sat Nov 01 2014 00:00:00 GMT-0500 (Central Daylight Time)
percent: 0.797711034237496
total: 30931
},
{
carrier: "yyyy"
count: 5608
date: Sat Nov 01 2014 00:00:00 GMT-0500 (Central Daylight Time)
percent: 0.18130677960622
total: 30931
}
{
carrier: "xxx"
count: 28025
date: Mon Dec 01 2014 00:00:00 GMT-0600 (Central Standard Time)
percent: 0.847983297527913
total: 33049
},
{
carrier: "yyyy"
count: 4475
date: Mon Dec 01 2014 00:00:00 GMT-0600 (Central Standard Time)
percent: 0.135405004690006
total: 33049
}

Below are my chart options. I am wanting to display the data in the count column which does not seem to be working.

vm.stackedBarChartOptions = {
dataSource: new kendo.data.DataSource({
    transport: {
        type: 'json',
        read: function (options) {
            shipmentService.getMixChartData()
                .then(function (result) {
                    options.success(result.data);
                    var chart = options.data.chart;
                    chart.refresh();
                }).catch(function (error) {
                    options.error(error);
                });
        }
    },
    group: [
        { field: "carrier" }
    ],
    sort: {
        field: "date",
        dir: "asc"
    },
    schema: {
        model: {
            fields: {
                date: {
                    type: "date"
                }
            }
        }
    }
}),
    theme: 'Office365',
    seriesDefaults: {
        type: 'column'
    },
    series: [
        {
            type: "column",
            field: "count",
            name: "#= group.value #",
            stack: {
                group: "carrier"
            }
        }
    ],
    categoryAxis: {
        field: "date",
        labels: {
            format: "MMM-yy"
        }
    },
    valueAxis: {
        line: {
            visible: false
        },
        labels: {
            rotation: "auto"
        }
    },
    tooltip: {
        visible: true,
        template: "#= series.name #: #= value #"
    },
    render: function(e) {
        //vm.setChartOptions(e);
    }
}

 

When I try to display my data there is nothing in the chart. What am I missing?

Iliana Dyankova
Telerik team
 answered on 04 Jan 2016
1 answer
312 views

Hi experts, I am getting my JSon represnationof my filter in kendo grid. Now what I am looking for I need to apply that filtering in the server so I can get coorect data and return it to the grid . The problem is the filter string is too much complicated and I could represent it to sql statement. how I can do that please help me?

my JSON filter text as below:

{"logic":"and","filters":[{"logic":"or","filters":[{"field":"name","operator":"contains","value":"ji"},{"field":"name","operator":"contains","value":"james"}]},{"logic":"or","filters":[{"field":"price","operator":"contains","value":"ali"},{"field":"price","operator":"eq","value":"aaa"}]},{"logic":"and","filters":[{"field":"labor","operator":"eq","value":"staff"},{"field":"labor","operator":"endswith","value":"ss"}

I am using jsp and java as my programming language , so is there any function or method could convert the filter expression to sql or not.

 

thanks in advance

Boyan Dimitrov
Telerik team
 answered on 04 Jan 2016
7 answers
257 views

Hi,

When trying google's list view (https://material.angularjs.org/latest/demo/virtualRepeat) it feels very smooth and responsive.

It feels like the scroll speed is determined by the swipe speed. (when swiping fast the scroll moves very  fast).

Is there any way to control the scroll speed  when user scroll down (or up) by swiping,

Currently when there are lots of items it takes a lot of time to scroll to the bottom of the list (as opposed to googles list)

 

Thx

Sagi

 

 

Kiril Nikolov
Telerik team
 answered on 04 Jan 2016
1 answer
411 views

Problem:

During creating a pdf previewer for an application, kendo MVVM approach has presented a problem with rebinding embed/iframe/object elements. When the layout gets placed and values are bound the embed element calls the binded src value twice (one gets canceled, the other gets displayed). In chrome this behavior  starts with first bind of the layout, while in ie11, this happens after binding the layout for the second time.

In case when working with views the requests are compounded and go up for additional request (first time twice, third time four times, then six...)

Is there a way to bypass that or do we have to approach it with a completely different angle?

For easier understanding of the problem I pasted sample code. In case my problem didn't come quite across: To see what I'm talking about check chrome developer tools (F12) and go to Network tab. Then click the Show pdf text  a couple of times.

Javascript:

01.$(function () {
02.    var obs_global_layout = new kendo.observable({
03.        id_1: "",
04.        id_2: ""
05.    });
06. 
07.    var obs_leftSide = new kendo.observable({
08.        show_pdf: function (e) {
09.            global_layout.showIn("#rightSide", right_layout);
10.        }
11.    });
12. 
13.    var obs_rightSide = new kendo.observable({
15.    });
16. 
17.    global_layout = new kendo.Layout("layout", {
18.        model: obs_global_layout,
19.        wrap: false
20.    });
21. 
22.    left_layout = new kendo.Layout("lefter", {
23.        model: obs_leftSide,
24.        wrap: false
25.    });
26. 
27.    right_layout = new kendo.Layout("viewer", {
28.        model: obs_rightSide,
29.        wrap: false
30.    });
31. 
32.    global_layout.render($("#wrapper"));
33.    global_layout.showIn("#leftSide", left_layout);
34.});

Html: 

01.<!DOCTYPE html>
02.<html>
03.<head>
04.    <title></title>
05.    <meta charset="utf-8" />
06.    <script src="jQuery/jquery.min.js"></script>
07.    <script src="kendoUI/js/kendo.web.min.js"></script>
08.    <style>
09.        body, html {margin:0;padding:0;height:100%;}
10.        #wrapper, .embed {height:100%;}
11.        #leftSide {float:left;width:25%;height:100%;}
12.        #rightSide {float:left;width:75%;height:100%;}
13.    </style>
14.</head>
15.<body>
16.    <div id="wrapper">
17.         
18.    </div>
19. 
20.    <script type="kendo/template" id="layout">
21.        <div>
22.            <div id="leftSide">
23. 
24.            </div>
25.            <div id="rightSide">
26. 
27.            </div>
28.        </div>
29.    </script>
30. 
31.    <script type="kendo/template" id="lefter">
32.        <div class="link">
33.            <span data-bind="click: show_pdf">Show pdf</span>
34.        </div>
35.    </script>
36. 
37.    <script type="kendo/template" id="viewer">
38.        <div class="embed">
39.            <iframe width="100%" height="100%" data-bind="attr: {src: pdf_link}" />
40.        </div>
41.    </script>
42.    <script src="default.js"></script>
43.</body>
44.</html>

Petyo
Telerik team
 answered on 04 Jan 2016
3 answers
335 views

Hi!

I need to define some Hierarches in a pivot table with json data (not olap/xmla).

I can't find an example of this, the only example of Local Binding (http://demos.telerik.com/kendo-ui/pivotgrid/local-flat-data-binding) is very simple.

In this example, "All Categories" and "All Product" are two different ways to separate the data. What i need is a nested relation Category -> Product, so i can't view mesaures by product if i don't open the category first.

An example of this can be viewed on the "Basic Usage" example (http://demos.telerik.com/kendo-ui/pivotgrid/index). If you drag "Customer" fields into "ROWS" section, you will see nested fields in the pivot table (All Customes -> Australia, Canada, France...). See the image.

Any advice to configure the hierarchies?

Thanks!

Georgi Krustev
Telerik team
 answered on 04 Jan 2016
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
Drag and Drop
Application
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
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
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
LLM Kit
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?