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

I have applied a class HTML attribute to the final column in a Grid a

@(Html.Kendo().Grid<myModel>()
    .Columns(columns =>
    {
        columns.Bound(entity => entity.SurrogateKey).Hidden();
        columns.Bound(entity => entity.column1);
        columns.Bound(entity => entity.column2);
        columns.Command(command => command.Destroy())
            .HtmlAttributes(new { @class = "finalColumn" })
            ;
    })

When a new row is added using addRow(), the new row's column doesn't have the "finalColumn" class attached to it (it just has the dirty cell class).  Is this expected behavior?  If so, do you have any suggestions on how I should handle this so the new row's final column has the "finalColumn" class?

Thanks,

Richard

Georgi
Telerik team
 answered on 10 May 2017
2 answers
80 views

I slightly modified following example: http://www.telerik.com/kendo-angular-ui/components/grid/excel-export/#toc-exporting-specific-data

I just added "sum" aggregate to "ProductID" field. It works fine in the grid. But when I try to save the grid as an excel file, I loose  that aggregate. Though the excel file contains grouped data.

Here is a plunker to reproduce: http://plnkr.co/edit/ej4yEj2wZO0RoHXlzqGF?p=preview

Could someone help me to fix that plunker, please?

 

Graham
Top achievements
Rank 1
 answered on 10 May 2017
4 answers
718 views

Hi. there is a bug in last release 2017.2.504, where was fixed weekNumber for DatePeacker.

If en-US culture/messages are included (maybe not only en-US, didn't check all of them)- error happens and modal doesn't appear https://www.screencast.com/t/whv1Kup3itFO

example: http://dojo.telerik.com/Ovequ

 

Taras
Top achievements
Rank 2
 answered on 10 May 2017
1 answer
1.0K+ views

Hello i have a little problem with the kendo upload.

I want send one file to my spring controller but i can't with the kendo ui.

 

I have a simple form:

<form>
    <ul>
        <li>
            <input data-role="maskedtextbox" data-bind="value: testoHome" id="testohome" name="testo home" />
            <input id="upload" name="upload" type="file" />
        </li>
        <li>
            <button id="next" class="k-button k-primary" onclick="Form.sendData()">Next</button>
        </li>
    </ul>
</form>

 

with a simple js:

var Form = {
    vm: null,
    sendData: function(){      
        data = new FormData();
        data.append("file", $('#a-can-uploadrl')[0].files[0]);
        data.append("testo", Form.vm.get("testoHome"));
         
        $.ajax({
            url: myURL,
            data: data,
            contentType: false,
            processData: false,
            enctype: 'multipart/form-data',
            type: 'POST',
            success:
                function(data){
                   alert(data);
                }
       });     
    },
    InitKendoBind: function(){
        this.vm = kendo.observable({
            testoHome: null
        });
        kendo.bind($("#formId")[0], vm);
    },
    Init: function() {
        $("#formId").submit(function(event) {
            event.preventDefault();
        });
         
        $("upload").kendoUpload();
         
        this.InitKendoBind();
    },
}
 
$(document).ready(function() {
    Form.Init();
});

 

 

but if i use the kendo upload with

$("upload").kendoUpload()

 

the 

$('#a-can-uploadrl')[0].files[0]

 

is undefined.

If i not use the kendo upload i take the file with this code

$('#a-can-uploadrl')[0].files[0]

 

and i can pass the file to my controller.

 

How i can take the file for pass all the data (file with name, size, etc. + others input strings from my form) using the kendo upload?

(without the async uploading)

 

this is my java controller:

@RequestMapping(value="myURL", method=RequestMethod.POST)
public static Long myURL(HttpServletRequest request,
        @RequestParam("file") MultipartFile file
        @RequestParam("testo") String cantiereString
        ) throws FileUploadException, IOException {
     
    /* some code */
     
    return 1;
}
Ianko
Telerik team
 answered on 10 May 2017
1 answer
228 views

I've been tasked with having a browser-based ability to quickly enter large amounts of data into a table.  One requirement is that the user should be able to do everything using only the keyboard after the first column/row has focus.  The typical use case for a 3 column table would be:

Enter value, TAB, enter value, TAB, enter value, TAB (new row is created)

Enter value, TAB, enter value, TAB, enter value, TAB (new row is created)

...

I have been working on this for a few days with my initial expectation being that it wouldn't be a challenge.  I'm finding that it's more difficult than expected and would like to take a step back to ensure I'm not missing any obvious alternative solutions.

My current belief is that this kind of quick batch editing mode (keyboard only) isn't directly supported in the Kendo Grid widget and is expected to require some JQuery customization/event handling.  Does that sound correct?

You may notice I've posted 3 other threads recently.  They are all related to this basic problem.  If you have any high-level pointers that may not have been obvious because the threads were so specific, I would be all ears :).

Thanks,

Richard

Stefan
Telerik team
 answered on 10 May 2017
5 answers
250 views

Hi Guys,

Following on from my original posting relating to scrolling issues

    http://www.telerik.com/forums/frozen-column-row-alignment-issue
    
I have now tripped over another scenario whereby the frozen column scrolls independently of the other rows.

To illustrate the problem I have created the following

    http://dojo.telerik.com/eyeku
    
If you run this dojo and select the first checkbox then using the keyboard tab through the other checkboxes.

As you traverse down the checkboxes the rows in the frozen column will start to scroll but the other rows remain static causing major synchronization issues between the two tables.

Regards
Alan

AGB
Top achievements
Rank 1
Iron
 answered on 10 May 2017
1 answer
204 views

Hi, I downloaded 2017.1.223 versions of kendo ui and more recent versions too, but I do not find the css files non-minified and  I am only finding the minified versions.
I need css files non-minified to customize and maybe fix issues own my app.
Where can I to find these files?

Thanks.

Stefan
Telerik team
 answered on 10 May 2017
1 answer
166 views

Hi!

It seems like the space between the notification icon and the notification message differs between different notification types:

I have prepared an example. Just press a few times on the "As a popup on bottom-right" button to see the different spacings: http://dojo.telerik.com/Awuli/2

Only the template for the warning notification seems to have the right spacing.

 

Best regads,

Kaan

Ivan Danchev
Telerik team
 answered on 10 May 2017
1 answer
293 views
Exist any configuration to specify the position of new row , something like the supported on Grid's '"createAt": "bottom"'.

Thanks

Stefan
Telerik team
 answered on 10 May 2017
1 answer
167 views

Currently I try to add three area series within one chart. Two area series should be rendered from top to bottom, and one from bottom to top. In my example "grenze3" should be rendered from bottom to top.

This is my html code:

@{
    ViewBag.Title = "Home Page";
}
 
<div id="example">
 
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>
    <script>
        function createChart() {
            $("#chart").kendoStockChart({
                dataSource: {
                    transport: {
                        read: {
                            url: "../Content/spain-electricity.json",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                year: { type: "date" }
                            }
                        }
                    }
                },
                title: {
                    text: ""
                },
                dateField: "year",
                legend: {
                    visible: true,
                    position: "top"
                },
                seriesDefaults: {
                    type: "line",
                    markers: {
                        visible: false
                    }
                },
                series: [{
                    field: "nuclear",
                    name: "test 1",
                    axis: "bottom"
                },
                {
                    field: "hydro",
                    name: "test 2",
                    axis: "bottom"
                },
                {
                    field: "wind",
                    name: "test 3",
                    axis: "bottom"
                },
                {
                    field: "grenze2",
                    name: "Grenze 2",
                    type: "area",
                    missingValues: "interpolate",
                    axis: "top",
                    line: {
                        style: "step"
                    }
                },
                {
                    field: "grenze",
                    name: "Grenze",
                    type: "area",
                    missingValues: "interpolate",
                    axis: "top",
                        line: {
                            style: "step"
                        }
                },
 
                {
                    field: "grenze3",
                    name: "Grenze 3",
                    type: "area",
                    missingValues: "interpolate",
                    axis: "bottom",
                        line: {
                            style: "step"
                        }
                },
                ],
                valueAxes: [
 
                    {
                        name: "top",
                        labels: {
                            visible: true,
                            format: "{0}"
                        },
                        reverse: true,
                        visible: true,
                        axisCrossingValues: 70000,
                        min: 70000,
                        max: 0
                    },
                    {
                        name: "bottom",
                        labels: {
                            visible: true,
                            format: "{0}"
                        },
                            visible: true,
                        reverse: false,
                        min: 0,
                        max: 70000
                    },
                ],
                categoryAxis: {
                    field: "year",
                    type: "date",
                    labels: {
                        rotation: 0
                    },
                    crosshair: {
                        visible: true
                    },
                    majorGridLines: {
                        visible: false
                    },
                },
                valueAxis: {
                    labels: {
                        format: "N0"
                    },
                    majorUnit: 10000,
                    //plotBands: [{
                    //    from: 0,
                    //    to: 10000,
                    //    color: "#c00",
                    //    opacity: 0.3
                    //}, {
                    //    from: 70000,
                    //    to: 60000,
                    //    color: "#c00",
                    //    opacity: 0.3
                    //}, {
                    //    from: 70000,
                    //    to: 55000,
                    //    color: "#0066ff",
                    //    opacity: 0.3
                    //}],
                },
                tooltip: {
                    visible: true,
                    shared: true,
                    format: "N0"
                },
                navigator: {
                    series: [{
                        field: "nuclear",
                        name: "Hauptpresse"
                    },
                    {
                        field: "hydro",
                        name: "Dehner 1"
                    },
                    {
                        field: "wind",
                        name: "Dehner 2"
                    },
                    {
                        field: "grenze",
                        name: "Grenzwert"
                    }],
                    select: {
                        from: "2016/12/01",
                        to: "2017/10/07"
                    },
                    categoryAxis: {
                        labels: {
                            rotation: "auto"
                        }
                    }
                }
            });
        }
 
        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
 
</div>

 

This is my json data file:

[
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2016/12/01",
    "unit": "GWh",
    "solar": 2578,
    "hydro": 26112,
    "wind": 32203,
    "nuclear": 58973
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/01/01",
    "unit": "GWh",
    "solar": 508,
    "hydro": 30522,
    "wind": 27568,
    "nuclear": 55103
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/02/01",
    "unit": "GWh",
    "solar": 119,
    "hydro": 29831,
    "wind": 23297,
    "nuclear": 60126
  },
  {
    "grenze": 60000,
    "grenze2": 65000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/03/01",
    "unit": "GWh",
    "solar": 41,
    "hydro": 23025,
    "wind": 21176,
    "nuclear": 57539
  },
  {
    "grenze": 60000,
    "grenze2": 65000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/04/01",
    "unit": "GWh",
    "solar": 56,
    "hydro": 34439,
    "wind": 15700,
    "nuclear": 63606
  },
  {
    "grenze": 60000,
    "grenze2": 65000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/05/01",
    "unit": "GWh",
    "solar": 41,
    "hydro": 43897,
    "wind": 12075,
    "nuclear": 61875
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/06/01",
    "unit": "GWh",
    "solar": 30,
    "hydro": 26270,
    "wind": 9342,
    "nuclear": 63016
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/07/01",
    "unit": "GWh",
    "solar": 24,
    "hydro": 43864,
    "wind": 6759,
    "nuclear": 63708
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/08/01",
    "unit": "GWh",
    "solar": 18,
    "hydro": 31807,
    "wind": 4727,
    "nuclear": 62206
  }
]

 

In theory plot bands would also work, but from my understanding they do not support different values as you see it in the grenze2 series.

Iliana Dyankova
Telerik team
 answered on 10 May 2017
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
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?