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

I have a function attached to the change event of a dropdown list yet when I am selecting a different option and my function is being called the old and selected values of the sender property are the same.

Regards
Georgi Krustev
Telerik team
 answered on 17 Sep 2014
1 answer
379 views
Hi all,

I'm trying to access the instance of a kendo ui widget from within an angular directive.
To do so, I'm using kendo's widgetInstance function.
However, in angular's link function, the widget is not yet created (line 3).

1.link: (scope:, element, attrs) =>{
2.    // widget is undefined
3.    var widget = kendo.widgetInstance(element, kendo.dataviz.ui);
4.    scope.$on('kendoWidgetCreated', (r, t) =>{   
5.        // widget is defined, how to check that widget2 === element?
6.        var widget2 = <kendo.dataviz.ui.Chart>kendo.widgetInstance(element, kendo.dataviz.ui);
7.    });
8.}

I've read about the kendoWidgetCreated event; when using this, there are 2 issues (line 7):
  • the event is fired for every widget that is created within the scope; how to check that element === widget without depending on id's?
  • when using an isolated scope , the event is not fired on this isolated scope
Is there a better way to access the widget instance from within a directive?

Thanks for your time,
Koen

Petyo
Telerik team
 answered on 17 Sep 2014
3 answers
189 views
I'd like to have a kind of mask '___.___.___/0001-__', there is some escape caracter to consider 0 as fixed and not numeric.

Thanks
Georgi Krustev
Telerik team
 answered on 17 Sep 2014
3 answers
126 views
Hello,

I have the mobile _layout.cshtml page with jquery.mobile css file along with kendo css. The kendo dropdown is displayed properly without any problem but when i display grid the page dropdown is shown twice once with normal kendo theme and a blue one below it similar to jquery mobile dropdown with blue rounded border. How can i handle this. Attached an image showing the problem . If i place a kendo dropdown in the page it has no such problem , can i use some stylesheet on page to overcome this?

Anamika
Kiril Nikolov
Telerik team
 answered on 17 Sep 2014
1 answer
156 views
Hi, I have a complex object with 3 level hierarchy like 

sections: { uiFieldSection1: { fields: [] }, uiFieldSection2: { fields: [] }, uiFieldSection3: { fields: [] }, uiFieldSection4: { fields: [] } },

having multiple sections in section object and each section is having fields object which has 6 properties. The data I get is from a Json response.
I am using template for my UI.

<div class="modal-body vam-pLR" id="buildingContent" data-template="businessEntityTemplate" data-bind="source: uiFieldSection1">
 </div>
<script id="businessEntityTemplate" type="text/x-kendo-template">
                    <table class="table">
                        #var columnCount = 3;
                        for(var i=0; i< fields.length; i++){#
                                    <tr><td>
<input data-role='dropdownlist' id="#:fields[i].name#" data-option-label="Select" data-bind="source:fields[#:i#].values,events:{change:ddlOnChanged},value:fields[#:i#].defaultvalue" name="#:fields[i].id#" /><!--data-option-label="Select"-->
                                    </td></tr>
                  <!-- My logic -->
                        #}#
 

Now my issue is I have around 100 fields in each section, after loading all the sections in UI, it is taking around 4 to 5 seconds to fire the change event and to select an item from dropdownlist.
What I observed it is taking time for value binding. If I remove the value binding things are normal. 

Can someone provide me the solution for this.
Thanks
Vladimir Iliev
Telerik team
 answered on 17 Sep 2014
1 answer
654 views
Hi ,

I am new in using kendo ui 

i have 3 dropdown list in that same  observable values are binding in all 3 list,  in change event of each dropdown list i have to remove the item from another two dropdown list same way suppose i select item from 2nd dropdown selected item will remove from 1st and 3rd, suppose again selecting different item from list those values are added to the remain dropdown list how can i achieve this.

Thanks
 
Georgi Krustev
Telerik team
 answered on 17 Sep 2014
1 answer
169 views
Hello,

I'm using a Kendo Grid with a datasource using type Odata.
I have troubles creating a new row in the database from the datasource.
This is my datasource code:

var ds = new kendo.data.DataSource({
                type: "odata",
                transport: {
                    read: {
                        url: baseUrl,
                        dataType: "json"
                    },
                    update: {
                        url: function (data) {
                            return baseUrl + "('" + data.ID_Agenzia + "')";
                        }
                    },
                    create: {
                        url: baseUrl
                    },
                    destroy: {
                        url: function (data) {
                            return baseUrl + "('" + data.ID_Agenzia + "')";
                        }
                    }
                },
                schema: {
                    model: {
                        id: "ID_Agenzia",
                        fields: {
                            ID_Agenzia: { type: "string" },
                           // etc... my other fields omitted for brevity.
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            });

Then I tried a simple grid with the automatic toolbar Create (pretty standard, I think I can omit the code), using this DS.

As far as I understood, Kendo got a method "isNew" to discern between Create/Update and it checks if the ID is === to the default value.
All the examples I found googling around, were using the ID as a numeric incremental value... But in my table the ID is a String (obviously unique) that needs to be inserted by the user!!

Hoping I've explained myself well, the issue should be clear: If the user inserts the ID, the datasource won't recognize that it's a Create operation...
Otherwise if I forbit the manual ID insert, the create will work... but the row will be inserted in the DB with the default value (empty string) and this is wrong!

How can I solve this?
Thanks.
Alexander Popov
Telerik team
 answered on 17 Sep 2014
2 answers
333 views
I have an ticket line grid, with a Total column, which is calculated (Qty x Price), using the total function in the model definition:
schema: {
    model: {
        id: "id",
        fields: {
            id: { type: "string" },
            orderId: { type: "number" },
            lineNo: { type: "number" },
            itemNo: { type: "string" },
            ...
            price: { type: "number" },
            qty: { type: "number" },
            comment: { type: "string" },
        },
        total: function () {
            return (this.get("qty") * this.get("price")).toFixed(2);
        }
    }
}

Note that I use a total function in the model definition instead of a template expression such as "#=Qty * price#" because I need it to also work in the custom edit form (which has a total field that needs to be dynamically updated when qty or price is changed).

Here is a plunker: http://plnkr.co/edit/YHiupWy49mvk4kZAqJTA?p=preview

I need to have a field outside of the grid that always reflects the grand total of the grid (=the total of the Total column).  I have put a place holder below the grid in the plunker, Grand Total; this is where the total should show.

How can I do this, preferably in an AngularJS way?

Thanks,
Lars
Alexander Popov
Telerik team
 answered on 16 Sep 2014
1 answer
625 views
Hi there,

Wasn't sure whether to post this in the grid forum or this one but it seems more like a dropdownlist issue so here we go.

I have a dropdownlist within an editor templates for a a grid that is configured for inline editing.   The dropdownlist is being populated from values within the grid row that I am extracting through javascript within editor template (see below).

Once an item is selected in the dropdown and "Update" is clicked, my controller calls a stored procedure that then updates the database.

(just as an asside for various reasons that I wont get into, I am not using the features of entity framework on this project and am heavilly reliant on stored procedures for my data layer)

Everything works fine, EXCEPT that the text field within object that I pass to the dropdownlist doesn't seem to get update, and therefor doesn't show up correctly on the grid until I refresh the page.   The ID value however IS getting updated ... not sure if, in my case, I need to hook into the change event somehow and manually update the text in the object through javascript.

Here is my code:

THE GRID THAT CALLS THE DROPDOWNLIST "EditorProductMasterData"

@(Html.Kendo().Grid(Model)
    .Name("ProductInfo_" + lang)
    .Columns(columns =>
    {
        columns.Bound(c => c.GridRowID).Hidden(); 
        columns.Bound(c => c.ColumnName);
        columns.Bound(c => c.ProductData.FieldName);
        columns.Bound(c => c.ProductData.ProductValue).ClientTemplate("#: ProductData.ProductValue.MasterDataText #").EditorTemplateName("EditorProductMasterData");
        columns.Command(command => { command.Edit(); });
    })
    .DataSource(d => d
      .Ajax()
      .Read(r => r.Action("Get", "Product"))
      .Update(u => u.Action("Update", "Product"))
      .Model(m =>
      {
         m.Id(p => p.GridRowID);
         m.Field(p => p.ColumnName).Editable(false);
         m.Field(p => p.ProductData.FieldName).Editable(false);
         m.Field(p => p.ProductData.MasterDataValue).Editable(true);
      })

     )
    .Pageable()
    .Editable(e => e.Mode(GridEditMode.InLine))
)

DROPDOWNLIST WITHIN EDITOR TEMPLATE

<script type="text/javascript">
    function sendMasterData() {
        var rowID = $("[name=GridRowID").val();
        var model = $("#ProductInfo_EN").data("kendoGrid").dataSource.get(rowID);

        return  {
            countrycode: model.ProductData.Country,
            lang: model.ProductData.Language,
            GlobalFieldName: model.ProductData.FieldName,
            MDTableName: model.ProductData.MasterDataTableName
        };
    }

</script>
@model NewGlobalProductCatalogue.Models.ProductInfo
@(Html.Kendo().DropDownListFor(p => p.ProductData.ProductValue)
.Name("ProductData.ProductValue.MasterDataID")
.DataValueField("MasterDataID")
.DataTextField("MasterDataText")
.DataSource(d => d
    // .Read(r => r.Action("Index", "MasterDataSelection", new { countrycode = Model.Country, lang = Model.Language, GlobalFieldName = Model.FieldName, MDTableName = Model.MasterDataTableName }))
       .Read(r => r.Action("Index", "MasterDataSelection").Data("sendMasterData").Type(HttpVerbs.Post))

)
.AutoBind(false)
.SelectedIndex(0)
)

Both the object "ProductValue" and the List that is returned from the stored procedure that is called by the ".Read" are based on the same data type and therefor contain identically named properties "MasterDataID" and "MasterDataText".   My assumption was that if I used the same datatype for both the datasource and the object is passed into the editor template, that the control would bind the two together, so that when I selected a value in the dropdown, it would update both the ID and the TEXT in the object.

In my case, it only seems to update the ID and leaves the old value in the text filed ... hence the grid still has told old text value even though the database has been updated with new ID.

Any ideas what I can do?

thx

-Sheldon





Alexander Popov
Telerik team
 answered on 16 Sep 2014
1 answer
124 views
Hello,
I have setup a grid like this:
$scope.mainGridOptions = {
            dataSource: {
                transport: {
                    read: function (e) {
                        $http({ method: 'GET', url: myUrl, cache: true }).
                            success(function (data) {
                                e.success(data);
                            }).
                            error(function (data, status) {
                                console.log(status);
                            });
                    }
                },
                serverPaging: false,
                serverSorting: false,
                schema: {
                    model: {
                        fields: {
                            expiryDate: { type: "date" }
                        }
                    }
                }
            },
            sortable: true,
            filterable: {
                mode: "row, menu",
                operators: {
                    date: {
                        gt: "After",
                        lt: "Before"
                    }
                }
            }
           }

and filtering for a date before today works fine but using after produces no results at all. The data does contain data with dates in the future.
I am using the latest version v2014.2.903

Any ideas?
Thanks,
Casper
Casper
Top achievements
Rank 1
 answered on 16 Sep 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
ScrollView
Switch
TextArea
BulletChart
Licensing
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
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?