Telerik Forums
Kendo UI for jQuery Forum
2 answers
5.7K+ views

Hello,

 

I want to mass update the data of dataSource in JSON.
If you run in the following way, it seems well data is not set.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>
 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
   
<div id="gantt"></div>
<script>
   
  var dataSource =new kendo.data.GanttDataSource({
    data: [
      {
        "id": 0,
        "orderId": 0,
        "parentId": null,
        "title": "old task1",
        "start": "2015-10-19",
        "end": "2015-10-20"
      },
      {
        "id": 1,
        "orderId": 0,
        "parentId": null,
        "title": "old task2",
        "start": "2015-10-19",
        "end": "2015-10-20"
       }
      ]
  });
   
$("#gantt").kendoGantt({
  dataSource: dataSource,
  views: ["week"],
  columns: [
    { field: "title", title: "Title" },
    { field: "id", title: "ID" }
  ]
});
   
dataSource.fetch(function(){
  dataSource.data([
    {
      "id": 0,
      "orderId": 0,
      "parentId": null,
      "title": "new task1",
      "start": "2015-10-19",
      "end": "2015-10-20"
    },
    {
      "id": 1,
      "orderId": 0,
      "parentId": null,
      "title": "new task2",
      "start": "2015-10-19",
      "end": "2015-10-20"
    }
  ]);
});
   
</script>
</body>
</html>

 

Date is not displayed well as attached image.

 

Ikou
Top achievements
Rank 1
 answered on 22 Oct 2015
9 answers
813 views
I have a cascading dropdown within a grid that has inline editing.  It's done using editor templates.  The problem is that the one that cascades uses a read action that doesn't have access to the value.

As an example, you have state and city.  The list of cities depends on the state selected.  When switching over to edit the value, the states are put into a dropdown correctly and selects the state.  The selected city is lost, because it gets the list of values for the state, but doesn't know what the record had selected.  How do I access the row values?  I tried using Model, but it's null.

Putting an edit event on the grid doesn't work, because the edit function is done after the dropdown is created.

I looked at the example and don't see anything different:
http://www.kendoui.com/code-library/mvc/grid/grid-inline-and-popup-editing-using-cascading-dropdownlists.aspx

State dropdown:

@(Html.Kendo().DropDownList()

.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
.BindTo(new SelectList((System.Collections.IDictionary)(ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"]),"Key","Value",Model)) )


City dropdown:

@(Html.Kendo().DropDownList()
.Name("City")
.DataSource(x => {x.Read(read => read.Action("GetCities", "Home").Data("getState"))
.ServerFiltering( true); })
.DataTextField( "Text")
.DataValueField("Value")
.Enable(false)
.AutoBind(false)
.CascadeFrom("States")
)

function

 getState(e) {
return
    State: $("#States").val()
};
}

Edit: Wow, it added a few dozen extra line breaks that I just removed.

Matthew
Top achievements
Rank 1
 answered on 21 Oct 2015
2 answers
319 views

A user has requested an "Update and Add" button to the left of the Kendo Update command in the grid. I was able to get this feature working in the toolbar, but it is always visible and we would prefer to get it into the command area and only visible during edit. Please advise.

 

Here's the Javascript snippet that saves and adds (generic so we can pass in other grid commands):

function UpdateAdd(e) {
    var grid = $(e).data("kendoGrid");
    grid.saveRow();
    grid.addRow();
}

 

Here's the Kendo Grid in MVC/Razor (w/the working toolbar button and the command where want but as a placeholder:

@(Html.Kendo().Grid<FOO>()
                              .Name("grid")
                              .Columns(columns =>
                              {
                                  columns.Bound(x => x.ID).Width(250).Visible(false);
                                  columns.Bound(x => x.Name).Width(250);
                                  columns.Command(commands =>
                                  {
                                      commands.Custom("Update and Add").Click("UpdateAdd");
                                      commands.Edit();// The "edit" command will edit and update data items
                                      commands.Destroy(); // The "destroy" command removes data items
                                  }).Title("Commands").Width(200);
                              })
                              .ToolBar(toolBar => toolBar.Create())
                              .ToolBar(toolBar =>
                               toolBar.Custom().Name("UpdateAdd").Text("Update and Add").Url("#")
                                .HtmlAttributes(new { onclick = "UpdateAdd('#grid')" })
                                ) // The "create" command adds new data items
                              .Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode
                              .DataSource(dataSource => dataSource
                                    .WebApi()
                                    .Model(model =>
                                    {
                                        model.Id(x => x.ClientCollectionTypeID); // Specify the property which is the unique identifier of the model
                                        model.Field(x => x.ClientCollectionTypeID).Editable(false); // M
                                        model.Field(x => x.Name).Editable(true); // M
                                    })
                                    .Create(create => create.Url("/api/Foo/gridCreate"))
                                    .Read(read => read.Url("/api/Foo/grid"))
                                    .Update(update => update.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "F", id = "{0}" })))  // Action invoked when the user saves an updated data item
                                    .Destroy(destroy => destroy.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "F", id = "{0}" }))) // Action invoked when the user removes a data item
                                    .Events(e => { e.Error("onErrors"); })
                              )
                              .Pageable()
                              .Sortable()
                              .Scrollable()
                              .Filterable(ftb => ftb.Mode(GridFilterMode.Row)
                                .Operators(ops => ops
                                    .ForString(str => str.Clear()
                                        .Contains("Contains")
                                        .StartsWith("Starts with")
                                        .EndsWith("Ends with")
                                        .IsEqualTo("Is equal to")
                                    )
                                )
                              )
                )

 

Alex
Top achievements
Rank 1
 answered on 21 Oct 2015
3 answers
188 views

In the kendo method:

function isScrollable(element) {
        if (element.className.indexOf("k-auto-scrollable") > -1) {
            return true;
        }

        var overflow = getComputedStyles(element, ["overflow"]).overflow;
        return overflow == "auto" || overflow == "scroll";
    }

The element.className is undefined when I right click to open my context menu that is attached to an SVG element.  Can you put some more protection in against an undefined className for the next release please?  I can patch it now but ​I thought it was worth bringing to your attention.

Thanks

 Kenny

Iliana Dyankova
Telerik team
 answered on 21 Oct 2015
2 answers
1.7K+ views

Hi,

I've seen really nice future of grid on competition controls, "floated grid headers". It's behaviour of grid when on scrooling page with long grid inside, column header is always above top row (I shown it in attachements). It's pretty usefull, because user always know what's name is of every column. Do you know any posibility to add this behaviour to kendo grid? In advance thank for help.

 

Damian

Pavlina
Telerik team
 answered on 21 Oct 2015
22 answers
872 views
Hi;

I'm using .NET web methods to deliver CRUD services to my datasources. I am having a strange issue wherein every time I perform either a create or delete operation previous such operations are duplicated. For instance if I create a record it will call the create method once, but the next time it will call the method twice: once with the new data and once to duplicate the first call. With each new method call all previous create and delete calls are duplicated.

I suspect that the datasource is not getting an expected response from the server so it mistakenly believes that previous operations failed, queues them, and tries again on the next operation.

All my create and destroy web methods take POST operations, and merely absorb the incoming data without replying with data. In fact they are VB.NET subs with no return values. They typically have a small number of string arguments that are passed to a stored procedure in a remote database. Hence my datasource transport has a parametermap function that for all operations simply returns the arguments "stringified" for JSON.

Any idea why the datasource is repeating the create and destroy operations?
Chandler
Top achievements
Rank 1
 answered on 21 Oct 2015
1 answer
121 views

Hello,

I have a problem with the Excel export on the datagrid when using a script built using the custom download builder tool (http://www.telerik.com/download/custom-download). Version 2015.3.930.

To reproduce the problem I used this simple page :

 

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.material.min.css" />
 
    <script src="//kendo.cdn.telerik.com/2015.3.930/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script
</head>
<body>
 
        <div id="example">
            <div id="grid"></div>
 
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        toolbar: ["excel"],
                        excel: {
                            fileName: "Kendo UI Grid Export.xlsx",
                            proxyURL: "//demos.telerik.com/kendo-ui/service/export",
                            filterable: true
                        },
                        dataSource: {
                            data: products,
                            schema: {
                                model: {
                                    fields: {
                                        ProductName: { type: "string" },
                                        UnitPrice: { type: "number" },
                                        UnitsInStock: { type: "number" },
                                        Discontinued: { type: "boolean" }
                                    }
                                }
                            },
                        },
                        height: 550,
                        scrollable: false,
                        sortable: false,
                        filterable: false,
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                            { field: "Discontinued", width: "130px" }
                        ]
                    });
                });
            </script>
</div>
</body>
</html>

 

With this code, the Excel export works well.

 

Now, if instead of the kendo.all.min.js I will use a custom script with two configurations :

1) I select only the Grid component with the Excel export plugin --> the export works.

2) I select the Grid component ​with the Excel export plugin AND the Gantt componant --> the export failed with the javascript error: Object doesn't support property or method 'saveAsExcel'

The error only comes when the Gantt component is embedded int the custom script, and I need it...

I have made another test using the builder tool with ALL the components selected : it failed too. It makes me feel that the kendo.all.min.js is not the same script as the one the tool built (when selected all the components).

Any idea ?

 

 

 

T. Tsonev
Telerik team
 answered on 21 Oct 2015
1 answer
86 views

Do you have an example of passing grid options to the server? This is a follow up to this question: http://www.telerik.com/forums/pass-grid-state-to-mvc-controller#hnaJEZgxu0iivfni8UxrQw

 

Alexander Popov
Telerik team
 answered on 21 Oct 2015
6 answers
164 views

Hi there

We have to implement a Semesterview (see attachment) for our customers. In this view the dates are grouped by their weekdays. We are now considering using a kendo scheduler for this task, but we don't know whether it can be done. We have seen that there exist diefferent "views" like "Day", "WorkWeek", "Week", "Agenda" and so on - so we came up with the idea of implementing a custom view in the same manner? Is this possible and useful?

Thanks in advance and best regards 

Georgi Krustev
Telerik team
 answered on 21 Oct 2015
4 answers
1.3K+ views
I'm newbie ,Help me please. How can I validate the input type="radio"? 
My code is : 
<input id="connectionType" name="connection" type="radio" value="1" required validationMessage='<spring:message code="ui.customer.create.require.connection"/>' />
<spring:message code="ui.customer.create.lable.connection.new"/>

<input id="connectionType" name="connection" type="radio" value="2" required validationMessage='<spring:message code="ui.customer.create.require.connection"/>'/>
<spring:message code="ui.customer.create.lable.connection.exist"/>

and javascript is : 
$("#save").click(function(){
      
    var validatable = $("#create_window").kendoValidator().data("kendoValidator");
    if (validatable.validate()) {
    ajaxSubmitFormSimple($('#create_window'),'createCustomer.do',$('#createCustomerForm').serialize());
    }
    return false;
});
Daniel
Telerik team
 answered on 21 Oct 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?