Telerik Forums
Kendo UI for jQuery Forum
1 answer
462 views
Hi,

I have a grid which is bound to local JavaScript array. When i modify few records and try to get list of them, by checking "dirty" flag, i get nothing. Same when i try to retrieve deleted records; grid.dataSource._destroyed is empty.

var gridData = [
    { Id: 1, PaymentDate: '1/1/2015', Amount: 100 },
    { Id: 2, PaymentDate: '2/1/2015', Amount: 200 },
    { Id: 3, PaymentDate: '3/1/2015', Amount: 300 },
    { Id: 4, PaymentDate: '4/1/2015', Amount: 400 },
];
 
$(function() {
    $("#grid").kendoGrid({
        dataSource: {
            data: gridData,
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number" },
                        PaymentDate: { type: "date" },
                        Amount: { type: "number" }
                    }
                },
            }
        },
        editable: {
            mode: "inline"
        },
        toolbar: ["create", "save", "cancel"],
        columns: [
            {
                field: "Id",
                title: "Id",
                width: "150px"
            },
            {
                field: "PaymentDate",
                title: "Payment Date",
                format: "{0:" + dateFormat + "}",
                width: "150px"
            },
            {
                field: "Amount",
                title: "Amount",
                format: "{0:c}",
                width: "150px"
            },
            {
                command: ["edit", "destroy"]
            }
        ]
    });
 
    grid = $("#grid").data("kendoGrid");
})
 
function show() {
    var data = grid.dataSource.data();
    var destroyed = grid.dataSource._destroyed;
 
    for (i = 0; i < data.length; i++) {
        if (data[i].dirty) {
            console.log(data[i].Id);
        }
    }
 
    for (i = 0; i < destroyed.length; i++) {
        console.log(destroyed[i].Id);
    }
}


Please suggest how i may do this.
Atanas Korchev
Telerik team
 answered on 31 Dec 2014
1 answer
125 views
When an upload errors, there's a 'reload' button, but no 'remove'. Is there any way to remove the file and try another?
Atanas Korchev
Telerik team
 answered on 31 Dec 2014
1 answer
156 views
Hi,

I have a form that has a couple of input type=text controls that are required.
There are also texterea controls that are NOT required. 
On form submit I get the little icon besides the textearea control (if left empty) and submit is disabled (see attached screen shot). 

How do I mark the textarea control not required and/or not even checked by the validator?

Thanks

Miroslav
Atanas Korchev
Telerik team
 answered on 31 Dec 2014
6 answers
98 views
We cannot use dateHeaderTemplate option with timelineMonth
Please check it:

http://dojo.telerik.com/@doktoresperanto/uDUVu
ziyahan
Top achievements
Rank 1
 answered on 31 Dec 2014
2 answers
9.1K+ views
I need to add a dropdown list to a grid that gets populated with data not in the data set the grid itself is being bound to.   I've been through the samples and forums and have yet to find anything that actually works.   Can a column that is independent of the data source being used to populate the rest of the grid be included in the grid?
T. Tsonev
Telerik team
 answered on 30 Dec 2014
4 answers
189 views
I have a test index.html file that uses the following successfully:

var path = "M10 0 L90 0 L100 25 L90 50 L10 50 L0 25 Z";
var block = new kendo.dataviz.diagram.Path({ width: dataItem.width, height: dataItem.height, fill: { color: 'green' }, data: path });

When I try to recode this in Typescript, kendo.dataviz.diagram.Path is undefined/undeclared.  I see no evidence of it in kendo.all.d.ts.

This code is trying to build a group by assembling a rectangle, or a shape like the above, and some text, rather than adding shapes directly to the diagram.

Using 2014.2.1008.commercial.  I'll look at 2014.3.1119 but I see no reference to this in the release notes.
Alex Gyoshev
Telerik team
 answered on 30 Dec 2014
3 answers
701 views
Hi,

I am having problem with server filtering in my mvc api controller. The DataSourceRequest Filter is null when I look at the request variable but if I enable server paging I can see the pagesize is being set. The model returns ok but with no filtering.
I have checked in Fiddler the request header and the filter is there, see below.

GET /api/Event?callback=jQuery19100650028504896909_1419384451525&filter%5Blogic%5D=and&filter%5Bfilters%5D%5B0%5D%5Bfield%5D=StateID&filter%5Bfilters%5D%5B0%5D%5Boperator%5D=eq&filter%5Bfilters%5D%5B0%5D%5Bvalue%5D=7&_=1419384451528 HTTP/1.1


MVC API Controller Code
public DataSourceResult GetEvents([ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)
{
    return db.carEvent.ToDataSourceResult(request); 
}

Cordova App Code
var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "http://localhost:57459/api/Event",
                    dataType: "jsonp"
                }
            },
            schema: {
                data: "Data",
                model: {
                    ID: "id",
                    fields: {
                        ID: { type: "number" },
                        Event: { type: "string" },
                        Location: { type: "string" },
                        Information: { type: "string" },
                        StateID: { type: "number" },
                        EventDate: { type: "date" }
                    }
                }
            },
            serverFiltering: true,
            filter: { field: "StateID", operator: "eq", value: StateValue }
        });

Thanks Andrew
Alexander Popov
Telerik team
 answered on 30 Dec 2014
3 answers
182 views
Hello,

A have issues to successfully set the categoryAxis Labels to the bottom of the stockChart in case of Negative Values.
As recommended on other posts on the issue, I set 2 categoryAxis and I set axisCrossingValue: [0, -1000000000] .
I only succeed with some tricks to make it work with a Navigator :
http://dojo.telerik.com/OgarE/3

But if I remove the Navigator ;
It's not working anymore :
http://dojo.telerik.com/OgarE/4

It's not working either with a vertical stockChart... : 
http://dojo.telerik.com/OgarE/5

As I don't bind the data to the datasource attribute, (the data are in the series attributes), I can't catch the dataBound event (the event is not fired) to set the category axis labels padding to 0... So I can't resolve the issue this way...

Please, can you provide a solution which will work in every possible configuration ? 



T. Tsonev
Telerik team
 answered on 30 Dec 2014
1 answer
483 views
Dear all;
I really needhierarchical dropdownlist. I have not found any solution to this.
How can I do to implementation ahierarchical dropdownlist?
Alex Gyoshev
Telerik team
 answered on 30 Dec 2014
4 answers
467 views
Hi friends

I am new to Kendo controls. I have a specific situation in which the regular expression for phone number is not working.
I am using Masking for Phone number textbox. I have this kind of text box for phone number in multiple pages but somehow its not working in listview(edit).
Please have a look at the below code and if i have missed anything, please let me know. I have used the code of existing Kendo Listview MVVM sample and made changes for Product Name. when 'edit' is clicked it will change the product name to masked text box. I have given regular expression for Phone number masked text box to accommodate 10 digits phone number, but somehow its not working here. Please see this part of the code.
<dd>                
   <input title="Phone Number"                 
      name="PhoneNumber"                       
      type="text"                       
      class="k-textbox k-invalid"                       
      required=""                       
      data-bind="value: PhoneNumber"                       
      data-mask="(000) 000-0000"                       
      data-role="maskedtextbox"                      
      data-value-update="keyup"                      
      placeholder="Phone Number"                     
      pattern="^\(([0-9]{3})\) {1}([0-9]{3})-{1}([0-9]{4})$" />           
 </dd>

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
    <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
    <script src="../content/shared/js/console.js"></script>
</head>
<body>
    <div id="example">
    <div class="demo-section k-header">
        <div class="box-col" style="width: 420px;">
            <h4>Update a record</h4>
            <div data-role="listview"
                 data-edit-template="edit-template"
                 data-template="template"
                 data-bind="source: products,
                            visible: isVisible,
                            events: {
                              save: onSave
                            }"
                 style="width: 420px; height: 200px; overflow: auto"></div>
        </div>
        <div class="box-col console-section">
            <h4>Console</h4>
            <div class="console"></div>
        </div>
    </div>
    <script type="text/x-kendo-tmpl" id="template">
        <div class="product-view k-widget">
            <div class="edit-buttons">
                <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
                <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
            </div>
            <dl>
                <dt>Product Name</dt>
                <dd>#:ProductName#</dd>
                <dt>Unit Price</dt>
                <dd>#:kendo.toString(UnitPrice, "c")#</dd>
                <dt>Units In Stock</dt>
                <dd>#:UnitsInStock#</dd>
                <dt>Discontinued</dt>
                <dd>#:Discontinued#</dd>
            </dl>
        </div>
    </script>
 
    <script type="text/x-kendo-tmpl" id="edit-template">
        <div class="product-view k-widget">
            <div class="edit-buttons">
                <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
                <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
            </div>
            <dl>
                <dt>Product Name</dt>
                <dd>
                <input title="Phone Number"
                       name="PhoneNumber"
                       type="text"
                       class="k-textbox k-invalid"
                       required=""
                       data-bind="value: PhoneNumber"
                       data-mask="(000) 000-0000"
                       data-role="maskedtextbox"
                       data-value-update="keyup"
                       placeholder="Phone Number"
                       pattern="^\(([0-9]{3})\) {1}([0-9]{3})-{1}([0-9]{4})$" />
            </dd>
                <dt>Unit Price</dt>
                <dd>
                    <input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1" validationMessage="required" />
                    <span data-for="UnitPrice" class="k-invalid-msg"></span>
                </dd>
                <dt>Units In Stock</dt>
                <dd>
                    <input type="text" data-bind="value:UnitsInStock" data-role="numerictextbox" name="UnitsInStock" required="required" data-type="number" min="0" validationMessage="required" />
                    <span data-for="UnitsInStock" class="k-invalid-msg"></span>
                </dd>
                <dt>Discontinued</dt>
                <dd><input type="checkbox" name="Discontinued" data-bind="checked:Discontinued"></dd>
            </dl>
        </div>
    </script>
    <div class="box">
        <div class="box-col" style="width: 420px;">
            <h4>Configuration</h4>
            <div>
                <label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
            </div>
        </div>
        <div class="box-col">
            <h4>Information</h4>
            Kendo UI ListView supports the
            <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
        </div>
    </div>
<script>
    var viewModel = kendo.observable({
        isVisible: true,
        onSave: function(e) {
            kendoConsole.log("event :: save(" + kendo.stringify(e.model, null, 4) + ")");
        },
        products: new kendo.data.DataSource({
            schema: {
                model: {
                    id: "ProductID"
                }
            },
            batch: true,
            transport: {
                read: {
                    url: "http://demos.telerik.com/kendo-ui/service/products",
                    dataType: "jsonp"
                },
                update: {
                    url: "http://demos.telerik.com/kendo-ui/service/products/update",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "http://demos.telerik.com/kendo-ui/service/products/create",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            }
        })
    });
    kendo.bind($("#example"), viewModel);
</script>
 <style scoped>
        .product-view
        {
            float: left;
            position: relative;
            width: 400px;
            margin: -1px -1px 0 0;
        }
        .product-view dl
        {
            margin: 10px 0;
            padding: 0;
            min-width: 0;
        }
        .product-view dt, dd
        {
            float: left;
            margin: 0;
            padding: 3px;
            height: 32px;
            width: 180px;
            line-height: 32px;
            overflow: hidden;
        }
        .product-view dt
        {
            clear: left;
            padding: 3px 5px 3px 0;
            text-align: right;
            opacity: 0.6;
            width: 100px;
        }
        .product-view .k-textbox {
            width: auto;
        }
        .edit-buttons
        {
            position: absolute;
            top: 0;
            right: 0;
            width: 26px;
            height: 160px;
            padding: 2px 2px 0 3px;
            background-color: rgba(0,0,0,0.1);
        }
        .edit-buttons .k-button
        {
            width: 26px;
            margin-bottom: 1px;
        }
        .k-pager-wrap
        {
            border-top: 0;
        }
        span.k-invalid-msg
        {
            position: absolute;
            margin-left: 6px;
        }
    </style>
</div>
 
 
</body>
</html>

I will really appreciate some help on this.

Regards
Varun
Petyo
Telerik team
 answered on 30 Dec 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?