Telerik Forums
Kendo UI for jQuery Forum
3 answers
401 views
Hello,

A little briefing:

In most of the pages in my web site we need to show always the same currency symbol but for different culture,

Eg.: User culture is "en-US", but the currency symbol for the currency that I have to display is £, I need to use the currency symbol position, thousand and decimal separator from the culture, but the £ currency symbol. I solved this scenario by:

kendo.culture("en-US");
kendo.culture().numberFormat.currency.symbol = 
"£";

That's working very well, the problem comes when I have multiple currencies in the same grid. 

I have a "Currency" type that basically have the "Value" and "CurrencySymbol" properties, I could do something like:

columns.Bound(c => c.PropertyOfTypeCyrrency).ClientTemplate(" #= PropertyOfTypeCyrrency.CurrencySymbol # #= PropertyOfTypeCyrrency.Value #");

But it will not have the right Currency position (right, left, right with space, left with space), thousand and decimal separator.

While I was writing this post I just figured out that I can solve by:
columns.Bound(c => c.PropertyOfTypeCyrrency).ClientTemplate("#= kendo.toString(PropertyOfTypeCyrrency.Value, 'C').replace(kendo.culture().numberFormat.currency.symbol, PropertyOfTypeCyrrency.CurrencySymbol) #");

Is there any other approach?
Also, how do I configure the Filter to work with "PropertyOfTypeCyrrency.Value" in this case?
For this "Currency" type I've override the "ToString()", and also I have the DisplayTemplate, is there any way to use one of those with "ClientTemplate"?

Thanks in Advanced!
Georgi Krustev
Telerik team
 answered on 08 May 2014
1 answer
138 views
Hi there,

I have two html.listboxfor, and need to swap data between them. Is there any way to make them draggable so that the user can drag and drop items in these two lists. Any help is much appreciated. Thanks.
Alexander Valchev
Telerik team
 answered on 08 May 2014
1 answer
109 views
Hello,

When I change the culture to "ja-JP" ( kendo.culture("ja-JP") ),
its AM and PM didn't be shown. (The first image. )

But I think that it works well with others. (The second image)

Does this a bug or any configure I need to set?

Thanks for your help,
Ming
Ming
Top achievements
Rank 1
 answered on 08 May 2014
2 answers
119 views
Check out the example: http://jsbin.com/yagihuwe/1/edit

When the following code was commented:

$('#grid tbody').kendoSortable({
  axis:"y",
  change : function(e){
    var data = $('#grid').data('kendoGrid').dataItem(e.item);
  }
});

Change the selection of the grid row, then the name at grid bottom will be updated automatically, but when we enable the above code, and select different rows, the name just don't change. It seemed that the event was stopped by sortable widget. Any suggestions?
hustcer
Top achievements
Rank 1
 answered on 08 May 2014
1 answer
101 views
Hello,

here's what I am trying to achieve:

I have a mobile web app using a  kendo grid on a page.
One of the columns has a template something like : "<a href='##' onclick='someViewmodel.rowClicked(#:someValue#);'''

When the hyperlink is clicked the app is supposed to navigate to a specific mobile view. Instead of doing this it navigates to the home page.
Normally when I trigger anything from a mobile grid I have to do an e.preventDefault() in order to stop unwanted behaviour and then everything works as expected.

In this case however I cannot do that as I do not have the event. If I try to use an mvvm binding inside the template, it does not work as it looks the mvvm bindings happen before the template is rendered. So if I try to do an data-bind="click: run" then it is completely ignored.

how can I stop the default grid behaviour so that the app navigates to the right place ? 

Fiddle Example

Rosen
Telerik team
 answered on 08 May 2014
10 answers
1.0K+ views
I am trying to use a Masked Input in a Kendo Template.  Can I do so, or do I need it outside of the template?  How do I do this?  Thanks.

<script id="popup_editor" type="text/x-kendo-template">
                <div class="k-edit-label">
                <label for="EmpID">Employee ID</label>
            </div>
 
            <input type="text" name="EmployeeID" data-type="number" data-bind="value:EmpID" data-role="numerictextbox" />
 
            <div class="k-edit-label">
                <label for="FirstName">First Name</label>
            </div>
 
                <input type="text" class="k-input k-textbox" name="FirstName" data-bind="value:FirstName">
            <!-- drop down list editor for field: "FirstName" -->
 
                 
            <div class="k-edit-label">
                <label for="LastName">Last Name</label>
            </div>
            <!-- textbox editor for field: "LastName" -->
            <!-- field: "LastName" is not included as a grid column -->
            <input type="text" class="k-input k-textbox" name="LastName" data-bind="value:LastName">
             
            <div class="k-edit-label">
                <label for="DOB">DOB</label>
            </div>
            <!-- datepicker editor for field: "DOB" -->
            <input type="text"
                name="DOB"
                data-type="date"
                data-bind="value:DOB"
                data-role="datepicker" />
                 
            <div class="k-edit-label">
                <label for="Phone">Phone</label>
            </div>
            <!-- numeric textbox editor for field: "Age" -->
            <input type="text" class="k-input k-textbox" name="Phone" data-bind="value:Phone">
            </input>
            #<script type="text/javascript">#
            #    jQuery(function () {#
            #        $("#Phone").mask("(999) 999-9999");#
                });
            #<\/script>#
 
 
            <div class="k-edit-label">
                <label for="LocationPicker">Locations</label>
            </div>
 
 
            <input name="LocationPicker"
            data-bind="value:LocID"
            data-value-field="Value"
            data-text-field="LocID"
            data-source="filteredLocationDataSource"
            data-role="dropdownlist" />
             
            <!--textarea id="editor" rows="10" cols="30" data-bind="value:Comments"></textarea>
            <input type="text" name="Comments" data-bind="value:Comments" />-->
 
    <div class="k-edit-label">
                <label for="Modified">Modified</label>
            </div>
            <!-- datepicker editor for field: "DOB" -->
            <input type="text"
                name="Modified"
                data-type="date"
                data-bind="value:Modified"
                data-role="datepicker" />
 
    <div class="k-edit-label">
                <label for="ModifiedBy">Modified By</label>
            </div>
            <!-- datepicker editor for field: "Modified By" -->
            <input type="text" name="ModifiedBy" data-type="number" data-bind="value:ModifiedBy" data-role="numerictextbox" />
        </script>
Atanas Korchev
Telerik team
 answered on 08 May 2014
1 answer
305 views
Hi,
I would like to know if it is possible to switch the bing layer in the kendoMap control to display the
satellite Images of bing.
If it is possible then how can I do it ?

Markus
T. Tsonev
Telerik team
 answered on 08 May 2014
12 answers
1.2K+ views
Tried to implement the same in ASP.NET MVC 4 Application . 
Followed all steps but it keeps throwing an error "Object doesn't support property or method 'kendoGrid'". Infact even a DatePicker doesnt work. 

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding

This is what I have included in the site.Master. The 

        <link href="/Content/KendoUI/kendo.common.min.css" rel="stylesheet" />
        <link href="/Content/KendoUI/kendo.default.min.css" rel="stylesheet" />
        <script src="/Scripts/KendoUI/jquery.min.js"></script>
        <script src="/Scripts/KendoUI/kendo.web.min.js"></script>
        <script src="/Scripts/KendoUI/kendo.aspnetmvc.min.js"></script>

and included the following n index.aspx
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
     <%: Html.Kendo().Grid<KendoUISamples.DataProviders.Product>()
      .Name("grid")
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action("ProductsRead", "Home")) // Set the action method which will return the data in JSON format
       )
      .Columns(columns =>
      {
          // Create a column bound to the ProductID property
          columns.Bound(product => product.ProductID);
          // Create a column bound to the ProductName property
          columns.Bound(product => product.ProductName);
          // Create a column bound to the UnitsInStock property
          columns.Bound(product => product.UnitsInStock);
      })
%>
</asp:Content>

Contents of BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));

I have wasted close to a week. Please let me know what are the basic js / css files we need to include. 

Prashant
Top achievements
Rank 1
 answered on 08 May 2014
1 answer
134 views
i have drop down list in grid popup editor. It works ok for update. But when i click on Add new record it gives me error "TypeError:language is null. Error is returned due to template applied in Grid Columns to show value in grid. I want to use condition some thing like tha
columns: [
                   { field: "contactId",title: "ContactId", hidden: true },
                   { field: "businessName", title: "Business Name", width: 200 },
                   { field: "firstName", title: "Contact Title", width: 200 },
                   { field: "lastName", title: "Last Name", hidden: true },
                   { field: "language", title: "Language", width: 100, editor: langDropDownEditor,template: "#if(language!=null){=language.value}#"},
                   { field: "country", title: "Country", width: "100px", editor: countryDropDownEditor },
                   { field: "address", title: "Address", hidden: true },
                   { field: "city", title: "City", width: 100 },
                   { field: "gsm", title:"GSM",hidden: true },
                   { field: "email",title:"Email", hidden: true },
                   { field: "isActive",title:"Active", hidden: true },
                   { command: ["edit", "destroy"], title: " ", width: "160px" },
               ],
t
But it gives me error.
Please help me to solve this issue
Saima
Top achievements
Rank 1
 answered on 08 May 2014
2 answers
170 views
I'd like to set the following Grid property via data attribute initialization.

http://docs.telerik.com/kendo-ui/api/web/grid#configuration-pageable.messages.display

So I've added the following attribute but it doesn't seem to work.

data-pageable="messages: { display: 'Showing {0}-{1} of {2} leads' }"

Is it possible to set this property via attributes?
RES
Top achievements
Rank 1
 answered on 07 May 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
+? more
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?