Telerik Forums
Kendo UI for jQuery Forum
5 answers
316 views

I am trying to set the default timezone (StartTimezone and EndTimezone) manually and was hoping to avoid pulling down another 3rd party library to do this.

"Automatic Timezone Detection Using JavaScript" http://pellepim.bitbucket.org/jstz/

 

Is there anyway to achieve this with window.kendo.timezone.zones  and getTimezoneOffset() ?

 

 

 

 

Georgi Krustev
Telerik team
 answered on 14 Apr 2015
2 answers
125 views

I'm trying to convert an existing TreeView that works with ajax/webapi, working with signalR and can't figure out how the requests for children are passed to the hub.

The datasource loads the root level fine by calling the read method without parameters, however the read method with the parent node ID parameter never gets called for child nodes.

I have set loadOnDemand to false and I can see multiple requests being made to the hub which appear to match the root nodes with children but get the following error:

signalR: treehub.read failed to execute. Error: There was an error invoking Hub method 'treehub.read'.

 

Has anyone got a working TreeView/signalr example or knw how to get lower level debug info.

 

Thanks

Mark

 

Mark
Top achievements
Rank 1
 answered on 14 Apr 2015
1 answer
2.0K+ views

I have MVC application which has Kendo grid. The datasource's URL property is set to /Users/GetRequests . The application runs fine locally in visual studio. In production the application is hosted under virtual directory www.mycompany.com/dashboard 

So when we deploy application to production its not working with the url /Users/GetRequests, however if i change the url to /Dashboard/Users/GetRequests then it works but then it will not work locally. 

How can i set the relative URL to datasource?

$(document).ready(function () {
    $.ajaxSetup({ cache: false });
 
    $("#dashboardTabs").kendoTabStrip();
 
    $("#downloadGrid").kendoGrid(
        {
            dataSource: new kendo.data.DataSource({
                transport:{
                    read: {
                        url: "/Users/GetRequests",
                        dataType: "json"
                    }
                },
                pageSize: 10
            }),
 
            pageable: {
                refresh: true,
                pageSizes: [5,10,15,20]
            },
 
            columns:
            [
                { title: "Request Type", field: "RequestType", width: 85 },
                { title: "Requested On", field: "RequestedOn", width: 75 }
            ]
        });
});

Kiril Nikolov
Telerik team
 answered on 14 Apr 2015
5 answers
279 views

Hello,

If I want to upload a large file in chunks, is there any suggestion? 

And, I had an upload control, and is there any method that I can fire "upload" in my code on demand.

      $("#files").kendoUpload({
        async: {
          saveurl: "Mary.aspx?save=1",
          removeurl: "Mary.aspx?remove=1",
          removeField: "removefiles[]",
          autoupload: false
        },
        multiple: true,
        showFileList: true
      }); 

 

Dimiter Madjarov
Telerik team
 answered on 14 Apr 2015
3 answers
236 views
Following is my kendo grid

@section scripts{
@Scripts.Render("~/bundles/jqueryval")
}

 @(Html.Kendo().Grid<Category>()
          .Name("grid")
          .Columns(columns =>
          {             columns.Bound(c => c.Id);    
              columns.Bound(c => c.Name)
                .ClientTemplate("<a href='" + Url.Action("Edit", "category") + "/#= Id #' " + ">#= Name #</a>").Width(140)
                .Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(true)));

              columns.Bound(c => c.Color).Width(80).Filterable(false).Sortable(false).ClientTemplate("<div style='width: 25px; height: 25px; background: #=Color#;'></div>");

              columns.Bound(r => r.AltName).Width(240);

          
              columns.Command(command => { command.Edit(); }).Width(150);
          })
                   .Events(e => e.Edit("grid_edit"))
                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .EnableCustomBinding(true)
                .HtmlAttributes(new { style = "height: 380px;" })
                .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                .Scrollable()
                .Sortable()
                .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
                .DataSource(dataSource => dataSource
                .Ajax().Read(read => read.Action("Get", "Person"))
                .Update(update => update.Action("SaveOrUpdate", "Person"))
                .Create(update => update.Action("SaveOrUpdate", "Person"))
               .Model(model =>
              {
                  model.Id(p => p.Id);
                  model.Field(p => p.Color).DefaultValue("#000000");
                  model.Field(p => p.Id).DefaultValue(new Guid());
                  model.Field(p => p.TenantId).DefaultValue(new Guid());
                  model.Field(p => p.RowVersion);
              })

                )
    )

Following is my viewmodel

public class Person
    {


        [Required]
        [Remote("IsPersonUnique", "Validation", "Admin" , AdditionalFields = "Id")]
        public string Name { get; set; }

        [UIHint("CategoryColorPicker")]
        public string Color { get; set; }

        public string AltName { get; set; }

    }

And my remote validation action method

public JsonResult IsPersonUnique(string name, Guid id)
        {
            return CategoryService.IsPersonUnique(name, id)
                ? Json(true, JsonRequestBehavior.AllowGet)
                : Json(false, JsonRequestBehavior.AllowGet);
        }

Now the remote validation doesn't fire when I am adding items inline in grid.
But it works fine when I add it through another detail page, for the same model.

But the required field validations work fine. 



Kiril Nikolov
Telerik team
 answered on 14 Apr 2015
3 answers
342 views

 

In knockoutJS, I have become accustomed to "Flow Control" bindings for the HTML binding. Such as ...

foreach : http://knockoutjs.com/documentation/foreach-binding.html

<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
    </tbody>
</table>
  
<script type="text/javascript">
    ko.applyBindings({
        people: [
            { firstName: 'Bert', lastName: 'Bertington' },
            { firstName: 'Charles', lastName: 'Charlesforth' },
            { firstName: 'Denise', lastName: 'Dentiste' }
        ]
    });
</script>

and "with" : http://knockoutjs.com/documentation/with-binding.html

<h1 data-bind="text: city"> </h1>
<p data-bind="with: coords">
    Latitude: <span data-bind="text: latitude"> </span>,
    Longitude: <span data-bind="text: longitude"> </span>
</p>
  
<script type="text/javascript">
    ko.applyBindings({
        city: "London",
        coords: {
            latitude:  51.5001524,
            longitude: -0.1262362
        }
    });
</script>


and if : http://knockoutjs.com/documentation/if-binding.html

<label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label>
  
<div data-bind="if: displayMessage">Here is a message. Astonishing.</div>


and ifnot : http://knockoutjs.com/documentation/if-binding.html

<div data-bind="ifnot: someProperty">...</div>


These have become a vital part of the way I structure views and such, and I would be very upset to lose them. I notice that no such alternatives seem to exist in Kendo UI MVVM? Is this true? Are there any plans for such in the future? This is a very big deal breaker for me.

Petyo
Telerik team
 answered on 14 Apr 2015
3 answers
376 views
     I am building a web application which makes use of kendo UI  and angular-kendo.  The problem that I'm having is that the change event handlers, when specified in code, are never fired.

Example:

01.$scope.gridData = new kendo.data.DataSource({
02.        data: [{ "Id": 1 }, { "Id": 2 }],
03.        change: function (event) {
04.            // TODO:  Save sort to localstorage.
05.            console.log("CHANGE FIRE");
06. 
07.            var sort = $scope.gridSort = this.sort(); //contactsGrid.dataSource.sort();
08. 
09.            var sortString = getSortString(sort);
10. 
11.            if (sortString != lastSortString) {
12.                var sortCopy = angular.copy(sort);
13. 
14.                contactsService.get((gridPager.page() - 1) * gridPager.pageSize(), gridPager.pageSize(), sortString).then(parseContacts);
15. 
16.                lastSortString = sortString;
17.            }
18.        }
19.    });

Whenever this is loaded at initial load of the application, the change event will fire.  If it gets loaded in a controller at a later time (think switching routes in ngRouter, or states in angular-ui-router), the change event will not get fired.

If I specify the k-on-change directive, like this:
<div kendo-pager k-options="pagerOptions" k-on-change="pagerChange()" id="gridPager"></div>
the specified change handler will fire, no matter when the HTML gets loaded.

The problem isn't just with the datasource.change event either.  The kendoPager.chancge event didn't work either when in code.

What does angular-kendo do differently at initial page load than at a partial view load that would cause that problem?  Is there a way to work around it? (Aside from specifying k-on-change)
Petyo
Telerik team
 answered on 14 Apr 2015
3 answers
442 views

Hello Telerik Folks,

 We are trying to do custom filtering on the Client leveraging the Kendo Grid dataSource.Filter() functionality in JavaScript.  We have created a header above our grid that allows a user to select many filter criteria and then we apply them for the user all at once in a JavaScript function.  This approach has many benefits for us in that it allows us to create a cleaner more intuitive interface up top that shows all of the Users' filtering selections together.  It also allows us to leverage Kendo Grid's paging without having to write our own paging and filtering Server side.

The local ApplyFilter() function that pieces together the JSON needed to create the combined multi-column filter into a newTotalFilter string.  We then apply this filter at the end with this logic.

// *** Apply Filter to Grid
if (newTotalFilter.length>0) {
    gridData.dataSource.filter({
        logic: "and",
        filters: newTotalFilter
    });
}
else
{
    var gridData = $("#OurGridID").data("kendoGrid");
    gridData.dataSource.filter({});
}
 

This works great, but we are running into problems when constructing filters that appear to push the limits of what this type of Filtering can do.  Fox example for some columns we provide a checkbox list to allow users to select the items they want to appear below.  This is comparable to a SQL 'IN' statement.  As the Kendo Grid doesn't have an 'IN' filtering functionality we try to piece together several 'Contains' with an 'Or' for that particular column.

So for example, there might be a checkbox list with 

  • ItemA
  • ItemB
  • ItemC
  • ItemD
  • ItemE

 The user might select or Check Items A,B & C.  We would then build out the â€‹JSON to look like this...

[
  {
    "filters": [
      {
        "field": "ItemsColumn",
        "operator": "contains",
        "value": "ItemA"
      },
      {
        "field": "ItemsColumn",
        "operator": "contains",
        "value": "ItemB"
      },
      {
        "field": "ItemsColumn",
        "operator": "contains",
        "value": "ItemC"
      }
    ],
    "logic": "or"
  }
]

 But when we apply the above JSON we only get the first two rules applied to the ItemsColumn.  We can see the limitation if we go into the UI for the column filter.  It only shows the first two being applied.  (Please see attached image.)

 So what we are wondering is, is there a way to increase or get around this apparent 2 rule limit to the number of filter rules that may be applied to a single column?   ...We would like to construct and apply filters in JSON and not be limited to two rules per column.  

 

 

 

Petur Subev
Telerik team
 answered on 14 Apr 2015
1 answer
337 views

I want to change the format from to include seconds.

If the timepicker receives any format it thinks is invalid, it defaults back to "hh:mm tt", hiding the error

I couldn't find any documentation on whether it support seconds at all, or what an actual valid format string looks like.

I've tried "HH:mm:ss" among a few other things but this does not work.

 

 

Demo: 

http://dojo.telerik.com/UqAFO/2

 

Will
Top achievements
Rank 1
 answered on 13 Apr 2015
2 answers
100 views

I was trying to develop a complex view that is composed by the following structure:

I have a MainGrid that is editable by a custom popup template. Inside this custom popup template I'm trying to render another Grid (SubGrid) and my problem is because one field (column) of this SubGrid is DateTime. When the browser try to render this bundle it raises a JS exception ILLEGAL TOKEN, but when I remove the DateTime field of the SubGrid the browser can render normally the both grid (MainGrid with custom template and SubGrid).

Do you know if there are any issue about DateTime field on grid inside custom template editor for another grid?

How could I solve this issue ?

 Thanks

Enio
Top achievements
Rank 1
 answered on 13 Apr 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?