Telerik Forums
Kendo UI for jQuery Forum
1 answer
378 views

Hi There,

 I am trying to implement hierarchy grid and want to allow Create and update on both master and child grid. Data in hierarchy grid populated perfectly. But mentioned below are the problems with Create and Edit feature. I am using Inline editing.

 1) When I click on Edit button, selected row opened in editable form with Update and Cancel button, but nothing happens when I click on Update or Cancel, both button not working. This issue is both on Master and Child grid.

2) If I click on "Add New Record" on master grid, then it tries to bind the child grid as well and also new row added but not in editable format. It adds a blank row with Edit button and after that "Edit" button not works not only of this row but of rows of entire grid.

 3) If I try to put create and update method in child grid then no data is populated in child Grid.

 

I have tried to look out for solution but with no luck. Below is the code, if you guys want to check.

<link href='@Url.Content("~/Content/kendo.common.min.css")' rel="stylesheet" type="text/css" />
<link href='@Url.Content("~/Content/kendo.default.min.css")' rel="stylesheet" type="text/css" />
<script src='@Url.Content("~/Scripts/kendo.all.min.js")' type="text/javascript"></script>
 
<div id="example">
    <div id="userDefinedGrid"></div>
 
    <script>
        $(document).ready(function () {
 
            masterDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/MCSSIF/Template/GetUserDefinedType",
                        type: 'POST',
                        dataType: "json"
                    },
                    update: function (options) {
                        alert('not firing');
                    },
                    create: function (options) {
                        alert('not firing');
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },
                pageSize: 20,
                autoSync: true,
                schema: {
                    data: function (response) {
                        return response.UserTypes;
                    },
                    total: function (response) {
                        return response.UserTypes.length;
                    },
                    model: {
                        id: "UserDefinedTypeID",
                        fields: {
                            UserDefinedTypeID: { editable: false, nullable: true },
                            UserDefinedTypeName: { validation: { required: true } },
                            Active: { type: "boolean" },
                            CreatedBy: { editable: false },
                            CreatedOn: { editable: false },
                            ModifiedBy: { editable: false },
                            ModifiedOn: { editable: false },
                        }
                    }
                }
            });
 
            $("#userDefinedGrid").kendoGrid({
                dataSource: masterDataSource,
                height: 600,
                filterable: true,
                sortable: true,
                pageable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                detailInit: detailInit,
                dataBound: function () {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                },
                toolbar: ["create"],
                columns: [
                    { command: ["edit"], title: " ", width: "100px" },
                    { field: "UserDefinedTypeName", title: "User Defined Type", width: "200px" },
                    { field: "Active", title: "Active", width: "100px" },
                    { field: "CreatedBy", title: "Created By", width: "150px" },
                    { field: "CreatedOn", title: "Created On", width: "150px" },
                    { field: "ModifiedBy", title: "Modified By", width: "150px" },
                    { field: "ModifiedOn", title: "Modified On", width: "150px" }
                ],
                editable: "inline"
            });
        });
 
        function detailInit(e) {
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    type: "POST",
                    transport: {
                        read: {
                            url: "/MCSSIF/Template/GetUserDefinedTypeOptions",
                            type: 'POST',
                            dataType: "json",
                            data: { userDefinedTypeID: e.data.UserDefinedTypeID }
                        }
                    },
                    schema: {
                        data: function (response) {
                            return response.UserTypeValues;
                        },
                        model: {
                            id: "UserDefinedTypeOptionID",
                            fields: {
                                UserDefinedTypeOptionID: { editable: false, nullable: true },
                                UserDefinedTypeID: { editable: false },
                                Sequence: { editable: false },
                                OptionText: { validation: { required: true } },
                                Active: { type: "boolean" },
                                CreatedBy: { editable: false },
                                CreatedOn: { editable: false },
                                ModifiedBy: { editable: false },
                                ModifiedOn: { editable: false },
                            }
                        }
                    }
                },
                filterable: true,
                scrollable: false,
                sortable: true,
                toolbar: ["create"],
                columns: [
                    { command: ["edit"], title: " ", width: "100px" },
                    { field: "OptionText", title: "User Defined Type Option", width: "200px" },
                    { field: "Active", title: "Active", width: "100px" },
                    { field: "CreatedBy", title: "Created By", width: "150px" },
                    { field: "CreatedOn", title: "Created On", width: "150px" },
                    { field: "ModifiedBy", title: "Modified By", width: "150px" },
                    { field: "ModifiedOn", title: "Modified On", width: "150px" }
                ],
                editable: "inline"
            });
        }
    </script>
</div>

 

Please update me where I am doing wrong ASAP.

 

Thanks,

Sandeep

Boyan Dimitrov
Telerik team
 answered on 04 Sep 2015
1 answer
470 views

I have a Line chart with two lines and I want to change the color of one of the lines if it intersects the other line. Changing the background or any other solution I am not aware of would work too. Basically, I want to show visually that it is bad when line B is below line A.

I am using c# MVC, oh, and I'm in way over my head :/  

My code...

@(Html.Kendo().Chart<MetricsDashboard.Models.ABLineChart>()

    .Name("whatever")

    .Title("whatever")

    .DataSource(ds => ds.Read(read => read.Action("_NameofThing",Charts,Model)))

    .Series(series => {

            series.Line(model => model.LineAdata).Name("LineA").Color("Blue");

            series.Line(model => model.LineB.data).Name("LineB").Color("Green");

     })

     .CategoryAxis(axis => axis

             .Categories(model => model.CategoryAxis

      )

     .ValueAxis(axis => axis.Numeric()

             .Labels(labels => labels.Format("{0:N0"))

      )

)

 

Iliana Dyankova
Telerik team
 answered on 03 Sep 2015
2 answers
159 views

Dear Telerik, 

 

We need to implement maps on our page using MVVM including 'tile' and 'marker' layers, but we couldn't find any related documentation.
The only example we found is this forum thread: http://www.telerik.com/forums/mvvm-support-
that doesn't show how to implement needed layers.

Could you please point me to the needed documentation or make an example where I can see it working, especially urlTemplate of the tile layer.

Regards

 

 Peter Beyer 

ByggeFakta

Peter Beyer
Top achievements
Rank 1
 answered on 03 Sep 2015
5 answers
492 views
Hello, we found an error related with Grid and Validator.

Validation is not triggered sometimes on a grid edit box after editing a custom validation cell with backspace.
Reproduced on Firefox v26.0, using page http://demos.kendoui.com/web/grid/editing-custom-validation.html.

1 - Load the URL
2 - Click on “Add new record”
3 - Enter “aAbc” on ProductName
4 - Hit TAB and change focus to Unit Price. Validation message shows up stating that “ProductName should start with capital letter”.
5 - Hit Shift+TAB to return to ProductName field.
6 - Use left arrow on keyboard to place the cursos after “a” and hit backspace.
7 - Hit TAB to change focus again to Unit Price.
8 - At this moment, validation seems to not be triggered at 100% of times and the error message is still shown to the user.
9 - Although it is noticed less often, the same issue can be reproduced when the whole field is re-entered, instead of simply hitting backspace/delete.

Please check the image attached for an example.

Additional information about the error:
It is actually not a result of editing with backspace or delete.
The problem can be reproduced also when you re-type the complete string and set that to the same valid value it had previously.
For example, type in the demo Abc, switch fields, ProductName validates OK. Switch back, change ProductName to aAbc, switch field, ProductName is marked incorrect. Switch back, type in Abc again, switch field, error message is still present.

What happens is that the datasource model is not updated when the validation fails. So in the last time, when you enter the correct value, it probably compares to the last correct value it has on the model. As it is exactly the same as you have now on the UI control, the validation is not run.
It seems to be a consequence of some optimization that is attempted on the validation framework.

Regards

Kiril Nikolov
Telerik team
 answered on 03 Sep 2015
2 answers
80 views

Is there a way I can know if suggestion popup has closed. I want this to have autocomplete to show up with new suggestion list after I have made a selection from popup.Currently I am using settimeout for a search method but it depends on timeout value I set and therefore fails sometime to open the popup for search.

 

below is my code snipped in the select event

  var item = e.item;
var selection = item.text();

e.preventDefault();

var ​city = selection.concat(" & ");
e.sender.value(city );

$("#Item2_County").data("kendoAutoComplete").dataSource.read();

setTimeout(function () { $("#Item2_County").data("kendoAutoComplete").search(city) }, 500);

Abhay
Top achievements
Rank 1
 answered on 03 Sep 2015
1 answer
167 views
Hi

I am using the TreeList to load a tree from a JSON Service. I have the requirement that on double clicking a node not only one level should be expanded but all remaining levels. Is there any way to do this?
One part that I find tricky is to find out which rows belong to a certain parent row. Another thing is that the expand method of the TreeGrid does not return a Promise which makes it difficult to know when a level has been loaded.

Thanks
Nikolay Rusev
Telerik team
 answered on 03 Sep 2015
6 answers
310 views
I was reviewing the TeamPulse demo stating that it used KendoUI for the new version.  I like the task board UI concept.  What types of KendoUI controls were used to create the task board?

Thanks
Valeri Hristov
Telerik team
 answered on 03 Sep 2015
8 answers
190 views

Hey Guys

Please see attached image. All ​text columns and ​column titles look fine in the Kendo Grid. ( They handle the Swedish Characters fine)

But when I export to excel , the headers can't ​show the Swedish characters. ( Excel columns are fine)

I'm a bit stumped about what to even check with this issue.

 Can someone suggest some things to even check / try?

 Many thanks

 Rob

Rob
Top achievements
Rank 2
Iron
Veteran
Iron
 answered on 03 Sep 2015
1 answer
172 views

Hi,

 

I am displaying multiple column charts on a single page which all have the same categoryAxis. What I would like to do is display the tooltip and crosshair for every chart when hovering over ​a single one.

 

My problem is that there doesn't seem to be a way to trigger a tooltip manually. Is it doable ?

I have set up an example here: http://dojo.telerik.com/uNaNa/10

 

 Thanks,

Jeremy

Iliana Dyankova
Telerik team
 answered on 03 Sep 2015
1 answer
272 views

I have two questions - 

1) Currently I have a grid with a grouping on "Type". However, I need to be able to display columns with totals similar to the column footers but in the group header.

2) I need to display column sums at the top of the grid, not at the bottom for all types. A row with computed values?

 

Any suggestions? Are these types of things possible with the grid?

Konstantin Dikov
Telerik team
 answered on 03 Sep 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
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?