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.​
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.
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;}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
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.
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
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/Actionspublic 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?
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.