Telerik Forums
Kendo UI for jQuery Forum
5 answers
206 views
Hello
I'm using kendo grid on my mobile application. But I have 2 issues with it:
a) I would like to use internal grid scroll (this requires set heigh for grid and working when I set absolute value like 200px;) But I want to fill grid (max height to the size of scroll container. I can fill it with width without problem, however height is not working for me.

b) I have problem with flat theme on Windows Phone. There is something wrong with sizing. the settings of font size/ column sizes in grid (js, during creation) are different than on other devices. If everything looks good on iphone or android it is too large on windows phone. And all columns width, header sizes are not fitting properly. I have to use column sizes to use scrolling. There is also issue with group display on grid (on wp it shows ... where should be empty)

Regards
Dimo
Telerik team
 answered on 02 Aug 2013
4 answers
219 views
Hi,

In my root module (defined below), I call kendo.culture and it sets the culture right.
(function () {
    define(['jquery', 'amplify', 'modules/tools', 'k/kendo.router.min', 'k/kendo.view.min',
            'k/cultures/kendo.culture.fr-CA.min', 'k/cultures/kendo.culture.en-CA.min'], function ($, amplify, tools) {
1. I noticed that the culture that I set in my root module (app.js) does not propagate to other modules. Any idea why?

2. When I call kendo.culture in another module (to work around problem 1), the culture does not change (I check it by calling kendo.culture() from the console, it is always en-US. Any idea? Here is an example of how my other modules are defined (it's pretty much the same than above):

(function () {
    define(['jquery', 'amplify', 'modules/tools', 'modules/date', 'k/kendo.dataviz',
        'k/cultures/kendo.culture.fr-CA.min', 'k/cultures/kendo.culture.en-CA.min'], function ($, amplify, tools) {

Thanks,

Alex
Mihai
Telerik team
 answered on 02 Aug 2013
0 answers
225 views
Just building a mobile web site and have various content pages that have gallery content on so will use a scroll view to display the data.

Not all pages will have a gallery and each gallery is different.

I dont want to have to create x number of datasources for each gallery and then have x number of views with the different scrollview and content in.

I want to create one datasource and assign the datasource to the scrollview at runtime called from a web service with different parameters based on what content page is being called.

So here's my view code:
<div data-role="view" data-layout="mobile-tabstrip" id="tabstrip-contentr" data-show="initcontent">
    <div class="content">
        <div id="cntpagehtml"></div>
        <div data-role="scrollview" data-autobind="false" id="my-scrollview"
        data-template="scrollview-binding-template"  data-enable-pager="true">
        </div>
        <script id="scrollview-binding-template" type="text/x-kendo-template">
             <div style="width:300px;">
            <div>
                <img src="/webimages/gallery/#: Image #" class="slider" /></div>               
                <div class="title">#= Caption #</div>
            </div>
        </script>
    </div>
</div>
I have set autobind to false and not given it a data source so it doesn't bind

Heres my call to get the data passing in the section 
function GetGallery(sectionid) {
    var _GalleryDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: "mobiledata.asmx/GetGallery",
                dataType: "json",
                type: "POST",
                data: { SectionID: sectionid },
                contentType: "application/json; charset=utf-8"
            },
            parameterMap: function (data, operation) {
                data = $.extend({}, data);
                return JSON.stringify(data);
            }
        },
        serverPaging: true,
        pageSize: 30,
        schema: {
            data: "d[0].Items", total: "d[0].TotalItems"
        },
        change: function () {
            $("#my-scrollview").data('kendoMobileScrollView').refresh();
        }
    });
}
I now need to somehow assign the returned datasource in my data-show event code:
function initcontent(e) {
     
    var scroller = e.view.scroller;
    scroller.reset();
    GetContent("#cntpagehtml", e.view.params.p);
 
    var Section = 0;
    switch(e.view.params.p)
    {
        case "meet-the-team":
            GetGallery(3);
            //Assign the _GalleryDS to my scrollview......
            break;
        case "design-consultancy":
            GetGallery(6);
            //Assign the _GalleryDS to my scrollview......
            break;
        case "point-of-sale":
            GetGallery(4);
            //Assign the _GalleryDS to my scrollview......
             
            break;
        default:
    }
   
};

Anyone help, is it possible? or should i be doing it a different way?

Thanks

Jon.
Jon
Top achievements
Rank 2
Veteran
 asked on 02 Aug 2013
1 answer
80 views
Hi!
In the new version of Kendo Mobile Framework the kendoMobileScrollView ininitializes normally with data-role="scrollview" attribute ( http://jsfiddle.net/papageno/c8Hm6/10/ ), but when I try to initialize programmatically: $('#sv').kendoMobileScrollView(); ( http://jsfiddle.net/papageno/c8Hm6/9/ ) error occurs.

The error can be eliminated by changing the line:
that._content = options.dataSource ? new VirtualScrollViewContent(that.inner, that.pane, that.options) : new ScrollViewContent(that.inner, that.pane);
to line:
that._content = that.options.dataSource ? new VirtualScrollViewContent(that.inner, that.pane, that.options) : new ScrollViewContent(that.inner, that.pane);

Thank you!
Petyo
Telerik team
 answered on 02 Aug 2013
2 answers
455 views
Hi Telerik,

I built a Kendo Grid that DataSourced from an EF model, which comes from a database view.
We're using stored procedures (mapped as Function Imports) to add/update records, so none of your existing examples to update the Model suits my purpose.

My first question is how can I build a custom pop up form for Add/Edit?

Secondly, how do I code up the Razor and Controller action to handle this Add/Edit from the pop up form?
For example:
Razor:
@(Html.Kendo().Grid<Models.Delegates>()
                            .Name("grid")
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .Read(read => read.Action("Delegates_Read", "Home", new { employeeId = Model.EmployeeId }))
                                .Create(create=> create.Action("Delegates_Create", "Home"))  // How to pass parameters for adding new record here?
                                
                            )
                            .Columns(columns =>
                            {
                                columns.Bound(delg => delg.EMPL_I).Title("Staff ID");
                                columns.Bound(delg => delg.EMPL_M).Title("Employee Name");
                                columns.Bound(delg => delg.POSN_X).Title("Position");
                                columns.Bound(delg => delg.DEPT_NODE_M).Title("Department");
                                columns.Bound(delg => delg.EFFT_D).Title("Effective from").Format("{0:dd/MM/yyyy}");
                                columns.Bound(delg => delg.EXPY_D).Title("Expiry date").Format("{0:dd/MM/yyyy}");
                                columns.Command(command => { command.Edit(); }).Width(70);
                            })
                            .ToolBar(toolbar => toolbar.Create())
                            .Editable(editable => editable.Mode(GridEditMode.PopUp))                            
                            .Pageable()
                        )

And in controller, can I do something like this or how else?
public ActionResult Delegates_Add([DataSourceRequest]DataSourceRequest request, 
            string employeeId, string delegatedEmployeeId, DateTime effectiveDate, DateTime expiryDate, string loginUser)
        {
            _db.AddUpdateDelegateRight(employeeId, delegatedEmployeeId, effectiveDate, expiryDate, null, null, null, null, loginUser);

            //How do I handle and relay back error messages from the above SP?
            //Nothing to return here, how do I get the view to just refresh the grid?
        }
BRS
Top achievements
Rank 1
 answered on 02 Aug 2013
4 answers
1.8K+ views
Hello,

I have added required field validation on textbox. The validation works on blur event and displays a warning message, but when i click on a Save button the warning is not displayed. I am calling validator.validate() method on button click. Below is the code.

var validator = $(divOrgUNitDetailView).kendoValidator({
            rules: {
                required: function (input) {
                    if (input.is(txtOrgName))
                        return input.val() != "";
                    return true;
                }
            },
            errorTemplate: '<span class="field-validation-error"> ${message}</span>'
        }).data("kendoValidator");

and on button click i am calling, 
if(validator.validate()){}

Thanks,
Sushant
Rosen
Telerik team
 answered on 02 Aug 2013
4 answers
79 views
Hello
I have problem with tabstrip in recent available version 2013.2.716. I've downloaded this version to use new flat skin, but tab strip is now unusable. It is not selecting tab after first click. (it performs navigation, but not indicate state) Second click is not performing navigation (already done) and fix state. Please look at aattached example.
Kamen Bundev
Telerik team
 answered on 02 Aug 2013
1 answer
433 views
I have a grid with a Country (ID, Name) and a DropDownList for a list of presidents. The drop down list needs to filter based on the Country. This far I have gotten, however I can't use ViewData because the list is dynamic based on the country and the # of presidents is large.

My problem...
When the grid first loads and there is a PresidentID in the row  - the President's name is not visible, only the PresidentID

Note that PresidentID is a nullable int!


The ViewModel
public class CountryViewModel
{
    public int CountryID { get; set; }
    public string CountryName { get; set; }
 
    [UIHint("Presidents")]
    public int? PresidentID { get; set; }
}

Simplified Grid
@(Html.Kendo().Grid<CountryViewModel>()
  .Name("CountriesGrid")
  .Columns(c =>
               {
                   c.Bound(x => x.CountryName)
                   c.Bound(x => x.PresidentID)
                       .EditorTemplateName("Presidents")
               })
  .Editable(e => e.Mode(GridEditMode.InCell))
  .Events(x => x.Edit("onEdit"))
  .DataSource(ds => ds
        .Ajax()     
        .ServerOperation(false)
        .AutoSync(true)
        .Model(m =>
            {
            m.Id(x => x.CountryID);
            m.Field(x => x.CountryID).Editable(false);
            m.Field(x => x.PresidentID).DefaultValue(1);
            })
        .Read(r => r.Action("GetCountries", "Country"))
        .Update(u => u.Action("UpdateCountry", "Country"))
  ))

JavaScript on the same view as the grid...
<script>
function getCountryID() {
        var row = $(event.srcElement).closest("tr");
        var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
        var dataItem = grid.dataItem(row);
 
        return { CountryID: dataItem.CountryID }
    }
     
//for InCell edit mode
function onEdit(e) {
     var dropDown = e.container.find("[data-role=dropdownlist]").data("kendoDropDownList");
        if (dropDown) {
            dropDown.bind("change", function(e) {
                var grid = e.sender.wrapper.closest(".k-grid").data("kendoGrid");
                var dataItem = grid.dataItem(e.sender.wrapper.closest("tr"));
 
                //If current value is null
                if (!dataItem.PresidentID) {
                    //change the model value
                    dataItem.PresidentID = 0;
                    //get the currently selected value from the DDL
                    var currentlySelectedValue = e.sender.value();
                    //set the value to the model
                    dataItem.set('PresidentID', currentlySelectedValue);
                }
            });
        }
    }
 
</script>



Presidents.cshtml template file...
@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("ID")
        .DataTextField("Name")
        .AutoBind(true)
        .OptionLabel("Select...")
        .DataSource(ds => ds.Read(r => r.Action("GetPossiblePresidents", "Country")
            .Data("getCountryID()"))
            )
       )


Please help - I've been at this for hours

Nick Gerne
Top achievements
Rank 1
 answered on 02 Aug 2013
3 answers
69 views
Hello,
I am getting a strange error when I use KendoGrid (Angular). The following is the stack trace. Can some one please let me know whats going on?

Thanks
Matt'M

TypeError: Object function JQLite(element) {
if (element instanceof JQLite) {
return element;
}
if (!(this instanceof JQLite)) {
if (isString(element) && element.charAt(0) != '<') {
throw Error('selectors not implemented');
}
return new JQLite(element);
}

if (isString(element)) {
var div = document.createElement('div');
// Read about the NoScope elements here:
// http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
div.innerHTML = '<div>&#160;</div>' + element; // IE insanity to make NoScope elements work!
div.removeChild(div.firstChild); // remove the superfluous div
JQLiteAddNodes(this, div.childNodes);
this.remove(); // detach the elements from the temporary DOM div.
} else {
JQLiteAddNodes(this, element);
}
} has no method 'extend'
at gatherOptions (http://localhost:3000/no_npm_vendor/kendo/angular-kendo.js:39:35)
at Object.create (http://localhost:3000/no_npm_vendor/kendo/angular-kendo.js:107:19)
at http://localhost:3000/no_npm_vendor/kendo/angular-kendo.js:164:36
at <error: illegal access>
at completeOutstandingRequest (http://localhost:3000/vendor/angular/angular.js:3041:10)
at http://localhost:3000/vendor/angular/angular.js:3327:7 angular.js:5754(anonymous function)angular.js:5754(anonymous function)angular.js:4846(anonymous function)angular.js:9476completeOutstandingRequestangular.js:3041(anonymous function)
Burke
Telerik team
 answered on 02 Aug 2013
5 answers
96 views
If Kendo cannot find a route, method "routeMissing" is called. When that method gets executed, the URL has already changed. What can be done, so the current view and the browser's URL do not change?

I tried to call preventDefault on the event object, as can be done in the change event. However, that did not work.

Michael G. Schneider
Zachary
Top achievements
Rank 1
 answered on 01 Aug 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
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)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
Gauges
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Collapsible
Localization
MultiViewCalendar
Touch
Breadcrumb
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
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
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?