Telerik Forums
Kendo UI for jQuery Forum
1 answer
221 views

Hi,

I need to display loading symbol inside grid using external fields search.

On load I need to hide the grid and once user provides search fields I want to load the grid and show loading symbol till server responds all the data.

I have tried following code.

HTML

   <div kendo-grid="subscribersGrid"
                                            k-pageable="true"                                            
                                            k-selectable="false"                    
                                            k-options="subscribersGridOptions"
                                            k-data-source="subscribersGridDataSource"
                                             k-columns="subscribersGridColumns"
                                             k-reorderable = "true"
                                             >
                                       </div>  

 

Script -->

 

 $scope.showGrid = true;
           
            var searchUrl = $rootScope.connectionProps.domain + $rootScope.connectionProps.filter;
           
            $scope.subscribersGridDataSource = new kendo.data.DataSource({
                type: "POST",
                transport: {
                    read: {
                      
                        type: "POST",
                        url: searchUrl,
                        dataType: "json",
                        contentType: "application/json",


                        data: subSearchFilterReq,
                        beforeSend: function(req) {
                            // alert('Show loading symbol');
                            req.setRequestHeader('X-AUTH-TOKEN', $cookieStore.get('authToken'));
                        },
                        afterSend: function(xhr) {

                            console.log('afterSEnd' + xhr.getRequestHeader('X-AUTH-TOKEN'));
                        },

                        complete: function(jqXHR, textStatus) {
                            if (jqXHR.status == 403) {
                                window.location.href = '#app/login';
                            }
                   
                            $scope.hideInfoLoader($rootScope.applicationResource.searchComplete);

                            console.log('hide message11');
                            
                        }
                    },
                    parameterMap: function(data, type) {
                        if (type == "read" && data) {
                            return JSON.stringify(data);
                        }
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 5,
                },
                batch: false,
                serverPaging: true,
                pageable: true,

                pageSize: 10,
                schema: {
                    data: 'data',
                    total: 'total'
                },
                error: function(e) {
                   
                    if (e.xhr.status == 403) {
                                window.location.href = '#app/login';
                    }
                    console.log('error')  ;
                    $scope.errorMsgs = angular.fromJson(e.xhr.responseText);
                    $scope.subscribersGridDataSource = [];
                    $timeout( function(){ $scope.showErrorMessage($scope.applicationResource.responseFailed); }, 1000);
                }
            });

 Inside  complete: I am trying to hide the loading symbol. but its not working.

Please suggest.​

Alexander Valchev
Telerik team
 answered on 01 Jul 2015
1 answer
191 views

Is there a way to show the time picker icon inside calendar (bottom right corner) in the DateTimePicker. So that user should click the calendar icon first and then the timepicker in the calendar to modify the time. The time selection list will be displayed on the right side of the calendar.

Kindly help me to proceed further.

Kiril Nikolov
Telerik team
 answered on 01 Jul 2015
3 answers
605 views
I want to use Kendo grid with following functionalities.

* I don't have a fixed schema. I want to extract columns from data source(JSON data returned by WCF or ASP.NET web API).

* Refresh grid(schema and data both) on other elements event. For eg. if there is three buttons on the page, on click of these buttons grid will get refreshed completely with new data and schema.

* Multi-column filter :- there should be multi-column custom filter.
Petyo
Telerik team
 answered on 01 Jul 2015
7 answers
455 views

Hi, 

 I have the following issue using the kendo line chart when the baseUnit is set to "fit". Please open this example: http://jsbin.com/geyeqi/edit?output 

Selecting the second point under June 2013, I'm expecting the following value: 4650. However, the tooltip is showing the wrong value (4850).   

Could you help me to resolve this ASAP?

 Many thanks.

window.minimumDate = new Date(Date.parse('03/01/2013'));
window.maximumDate = new Date(Date.parse('03/01/2015'));
 
$(document).ready(function () {
    var createLineChart = function (minDate, maxDate) {
 
        $("#plan-line-chart").kendoChart({
            dataSource: {
                data: getPrices(minDate, maxDate)
            },
            dataBound: function () {
                if (this.dataSource.view().length <= 12) {
                    this.options.categoryAxis.baseUnit = "months";
                }
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "line",
                style: "smooth"
            },
            seriesColors: ["rgba(178, 44, 27, 1)"],
            series:
            [
                 {
                     field: "CurrentPrice",
                     name: "Contributions",
                     categoryField: "Date"
                 }
            ],
            valueAxis: {
                majorGridLines: {
                    visible: true
                },
                line: {
                    visible: false
                },
                labels: {
                    template: "#= formatAmount(value) #"
                },
            },
            categoryAxis: {
                field: "Date",
                type: "Date",
                baseUnit: "fit",
                labels: {
                    rotation: 45
                },
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "{0}%",
                template: "#= formatAmount(value) #"
            }
        });
    };
    var rangeSliderOnChange = function (element) {
        var minDate = new Date(element.value[0]);
        var maxDate = new Date(element.value[1]);
        var linechart = $("#plan-line-chart").data("kendoChart");
        if (linechart != undefined) {
            linechart.destroy();
            createLineChart(minDate, maxDate);
        }
    };
 
    var templateString = "#= formatToMonthYear(selectionStart) # - #= formatToMonthYear(selectionEnd) #";
 
    $("#plan-range-slider").kendoRangeSlider({
        change: rangeSliderOnChange,
        min: window.minimumDate.getTime(),
        max: window.maximumDate.getTime(),
        smallStep: 86400000,
        largeStep: 86400000,
        tickPlacement: "none",
        tooltip: {
            template: kendo.template(templateString)
        }
    });
 
    createLineChart(window.minimumDate, window.maximumDate);
});
 
function formatAmount(amount) {
    return kendo.toString(amount, "#,##0.00");
}
function formatToMonthYear(val) {
    return kendo.toString(new Date(val), 'MMM yyyy');
}
 
function getPrices(min, max) {
    var prices = [
       {
           "Date": new Date(Date.parse('03/01/2015')),
           "CurrentPrice": 8250.00
       },
       {
           "Date": new Date(Date.parse('02/01/2015')),
           "CurrentPrice": 8000.00
       },
       {
           "Date": new Date(Date.parse('01/01/2015')),
           "CurrentPrice": 7750.00
       },
       {
           "Date": new Date(Date.parse('12/01/2014')),
           "CurrentPrice": 7500.00
       },
       {
           "Date": new Date(Date.parse('11/01/2014')),
           "CurrentPrice": 7250.00
       },
       {
           "Date": new Date(Date.parse('10/01/2014')),
           "CurrentPrice": 7000.00
       },
       {
           "Date": new Date(Date.parse('09/01/2014')),
           "CurrentPrice": 6750.00
       },
       {
           "Date": new Date(Date.parse('08/01/2014')),
           "CurrentPrice": 6550.00
       },
       {
           "Date": new Date(Date.parse('07/01/2014')),
           "CurrentPrice": 6350.00
       },
       {
           "Date": new Date(Date.parse('06/01/2014')),
           "CurrentPrice": 6150.00
       },
       {
           "Date": new Date(Date.parse('05/01/2014')),
           "CurrentPrice": 5950.00
       },
       {
           "Date": new Date(Date.parse('04/01/2014')),
           "CurrentPrice": 5750.00
       },
       {
           "Date": new Date(Date.parse('03/01/2014')),
           "CurrentPrice": 5550.00
       },
       {
           "Date": new Date(Date.parse('02/01/2014')),
           "CurrentPrice": 5450.00
       },
       {
           "Date": new Date(Date.parse('01/01/2014')),
           "CurrentPrice": 5350.00
       },
       {
           "Date": new Date(Date.parse('12/01/2013')),
           "CurrentPrice": 5250.00
       },
       {
           "Date": new Date(Date.parse('11/01/2013')),
           "CurrentPrice": 5150.00
       },
       {
           "Date": new Date(Date.parse('10/01/2013')),
           "CurrentPrice": 4950.00
       },
       {
           "Date": new Date(Date.parse('09/01/2013')),
           "CurrentPrice": 4950.00
       },
       {
           "Date": new Date(Date.parse('08/01/2013')),
           "CurrentPrice": 4850.00
       },
       {
           "Date": new Date(Date.parse('07/01/2013')),
           "CurrentPrice": 4750.00
       },
       {
           "Date": new Date(Date.parse('06/01/2013')),
           "CurrentPrice": 4650.00
       },
       {
           "Date": new Date(Date.parse('05/01/2013')),
           "CurrentPrice": 4550.00
       },
       {
           "Date": new Date(Date.parse('04/01/2013')),
           "CurrentPrice": 4450.00
       },
       {
           "Date": new Date(Date.parse('03/01/2013')),
           "CurrentPrice": 4350.00
       }
    ];
 
    var currentPrices = [];
    $("#currentPrices").text('');
    var minDate = new Date((min.getMonth() + 1) + '/01/' + min.getFullYear());
    var maxDate = new Date((max.getMonth() + 1) + '/01/' + max.getFullYear());
    for (var i = prices.length - 1; i >=  0; i--) {
        if (prices[i].Date >= minDate && prices[i].Date <= maxDate) {
            currentPrices.push(prices[i]);
 
            $("#currentPrices").append("<li>" + kendo.toString(prices[i].Date, 'MMM yyyy') + " :: " + prices[i].CurrentPrice + "</li>");
        }
    }
    return currentPrices;
}

T. Tsonev
Telerik team
 answered on 01 Jul 2015
1 answer
558 views

Hello,

the Kendo textbox is able to render an icon with a hyperlink at the right or the left side: http://demos.telerik.com/kendo-ui/styling/index

Is it possible to define two buttons with two different hyperlinks for one textbox?

Regards,

Sebastian

Kiril Nikolov
Telerik team
 answered on 01 Jul 2015
6 answers
373 views

Hello,

we're currently developing a web application with Kendo UI and we have a problem with the ComboBox style in Google Chrome. As you can see in the attached pictures, the margin of the ComboBox is right in IE/Firefox and the gap to the next control is displayed right. But in Google Chrome, there is no spacing in between - I suspect it has something to do with the CSS for when you hover the Dropdown-Arrow, since the space underneath it turns blue like the arrow itself (see Chrome screenshots). This portion that turns blue is exactly as high as the margin in it should be and which is correctly shown in IE/Firefox (3px).

I tried changing the CSS behind the ComboBox in different style sheets, but changing margins is no real option, since this would make the ComboBox show incorrectly in IE/Firefox instead of Chrome. As mentioned, I think it has something to do with the styling while you hover the dropdown, but I didn't find out more. Those anyone know what the problem is and where I have to make changes to solve it?

 

Thanks and regards,

Steve.

Iliana Dyankova
Telerik team
 answered on 01 Jul 2015
1 answer
700 views

Hi Team,

Please give sample to get rowitem with all cell values of that particular row in kendo grid and without enabling selection option. 

columns.Group(g => g.Title("Access").Columns(a=>
        {
            a.Bound(p => p.IsRead).Title("Read").Width(50)
                .ClientTemplate("<input type='checkbox' #= IsRead ? checked='checked' : '' #  onclick='GetRowRead(#= IsRead #, #= IsWrite #, this.checked)' ></input>");
            a.Bound(p => p.IsWrite).Title("Write").Width(50)
               .ClientTemplate("<input type='checkbox' #= IsWrite ? checked='checked' : '' # onclick='GetRowWrite(#= IsRead #, #= IsWrite #, this.checked)' ></input>");
        })

 

 

Thanks

Senthilkumar N

Boyan Dimitrov
Telerik team
 answered on 01 Jul 2015
3 answers
121 views
Hi ,
I'm trying to build an windows 8 hybird app with Kendo UI + Cordova.
There is an exception when I run it on Windows 8.

-----------------------------------------------
'WWAHost.exe' (Script): Loaded 'Script Code (MSAppHost/1.0)'.
Exception was thrown at line 39, column 13052 in ms-appx://io.cordova.blankcordovaapp2/www/Scripts/html5/kendo.all.min.js
0x800c001c - JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements  previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement.  For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.
The program '[6812] WWAHost.exe' has exited with code 1 (0x1).
-----------------------------------------------

I found a previous message said it was not supported. But I want to know is it resolved in current version?  Thanks a lot.
http://www.telerik.com/forums/does-not-work-with-windows-8



Atanas Korchev
Telerik team
 answered on 01 Jul 2015
1 answer
155 views

Hey everyone,

I have an issue with my Data Source that when I post, it's not updating the Data Source's entity with the new ID that is created on the server side. What then happens, is any other post I make sends multiple posts. The second time I post, it sends two posts, the third time, three posts, etc. I have look through the forum post here:

 http://www.telerik.com/forums/kendo-ui-grid-inserts-updates-create-duplicate-records#2063733

And I'm having the same issue. I am returning the Id of the newly inserted record, and it's even saving out to the SQL data base.

I'm using ASP.NET WebAPI Odata controllers. The controller looks like this:

// POST: odata/Actions
public IHttpActionResult Post(TNYData.Action action)
    {
      if (!ModelState.IsValid)
      {
        return BadRequest(ModelState);
      }
 
      action.Created = DateTime.Now;
      action.CreatedBy = User.Identity.Name;
      action.Modified = DateTime.Now;
      action.ModifiedBy = User.Identity.Name;
 
      db.Actions.Add(action);
      db.SaveChanges();
 
      return Created(action);
    }

The Data Source looks like this:

actionDataSource: new kendo.data.DataSource({
      type: "odata-v4",
      autoSync: true,
      transport: {
        read: {
          url: config.apiBasePath + "Actions",
          dataType: "json"
        },
        create: {
          url: config.apiBasePath + "Actions",
          dataType: "application/json",
          beforeSend: function(req) {
            req.setRequestHeader('Authorization', sessionStorage.getItem("tnyApiKey"));
          }
        }
      },
      schema: {
        data: kendo.data.schemas["odata-v4"].data,
        total: kendo.data.schemas["odata-v4"].total,
        model: {
          id: "Id",
          fields: {
              Id: {
              //this field will not be editable (default value is true)
              editable: false,
              // a defaultValue will not be assigned (default value is false)
              nullable: true
            },
            Name: {
              validation: { required: true }
            },
            Description: {
              validation: { required: false }
            }
          }
        }
      }
    })

The response JSON look like this:

{
  "odata.metadata":"http://localhost:64533/odata/$metadata#Actions/@Element","Id":367,"Name":"New Item","Description":null,"Created":"2015-06-28T19:37:14.9379909-04:00","Modified":"2015-06-28T19:37:14.9379909-04:00","CreatedBy":null,"ModifiedBy":null,"StartDate":null,"DueDate":null,"Flagged":false
}

I get no errors in Chrome console, IE, or Visual Studio.

What am I missing here?

Rosen
Telerik team
 answered on 01 Jul 2015
2 answers
450 views

Hi. There.
I have set up several nested grid in my application with the hierarchy grid example.
Grid
   Nest Grid 1
      Nest Grid 2
         Nest Grid 3

Both my Nest Grid 2 and Nest Grid 3 are dynamic bind in the detailInit events of grid options.
So is there a way to set Nest Grid 2 and Nest Grid 3's Id in javascript so that I can use that Id as my selector later on?
Thx in advance.

Peter
Top achievements
Rank 1
 answered on 01 Jul 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?