Questions on Kendo UI for jQuery Forum

1 answer

729 views

Get selected row column value, update modelview

Using Kendo Grid in an MVC application.

The primary model for the View (PlanViewModel) contains a property which is a foreign key to another entity (BuildingId) For instance,

public class PlanViewModel
{

public int PlanId { get; set; }
public string PlanName { get; set; }
public int BuildingId { get; set; }
...
}

The Building ID is to be populated by the selected row of a BuildingGrid on the View.

So with the BuildingGrid, I'm using the .Selectable setting to invoke an onChange event. How in the following event would I update the model.BuildingId

function onChange(arg) {
var selected = $.map(this.select(), function (item) {
return $(item).text();
});

/// UPDATE MODEL BuildingId here

}

Thanks!

Grid

answered on 06 Feb 2014

5 answers

369 views

Sorting and filtering on Viewmodel property that was flattened in api

I am trying to understand how can provide sorting & filtering on a column of view model that was flattened.

VMAddress
addressid
street1
street2
countryid
CountryName
stateid
StateName
cityid
CityName

The Coulumns CountryName,StateName and CityName as flattened fro their respective table ( i.e Country.CountryName, State.StateName,City.CityName).

If i filter or sort on this columns nothing happens. since i don' have those fileds as column in the database.

How can shift the filter on the server to other columns ?

Grid

answered on 06 Feb 2014

8 answers

218 views

[Solved] Creating a group chart

Hi,
I have a little problem when the data is shown.
I want a chart with the hours of service of a company, I have three fields, HOURS_SERVICE, TYPE_SERVICE, COMPANY.

The chart must show the hours of each type of service by company, I've tried this:
I attach two files: the first is the chart that I want and the second is the chart that's showing with Kendo

My View:

@model IEnumerable<SIS_CSC.ViewMoldels.HorasTrabajadasTecnicosViewModel>



<

div>

<h2 align="centre"> REPORTE DE SERVICIOS POR EMPRESA</h2>

@(Html.Kendo().Chart(Model)

.Name("Chart")

.Title("Gráfico de horas de servicio de los clientes por tipo de trabajo")

.DataSource(datasource => datasource

.Read(read => read.Action("LeerExt_GraficoServicio", "Consultas").Data("getParameter"))

.Group(group => group.Add(model => model.TIPO_SERVICIO))

)

.CategoryAxis(axis => axis

.Categories(model => model.EMPRESA)

.Title("Cliente")

.Labels(label => label.Rotation(-90))

.MajorGridLines(major => major.Visible(false))

)

.SeriesDefaults(

seriesDefaults => seriesDefaults.Column().Stack(true)

)

.Series(series => {

series.Column(model => model.TOTAL_HORAS)

.Name("");

})

.Legend(legend => legend

.Position(ChartLegendPosition.Right)

)

.ValueAxis(axis => axis.Numeric()

.Title("Horas de servicio")

.Labels(labels => labels

.Format("{0}")

.Skip(1)

.Step(1)

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0,00}")

.Template("#= series.name #: #= value #")

)

</div

>



<script type="text/javascript">

    function getParameter() {

        return {

            txtFechaInicio: $("#txtFechaInicio").val(),

            txtFechaFin: $("#txtFechaFin").val(),

        };

    }



    function BindChart() {

        $("#Chart").data("kendoChart").dataSource.read();

        $("#Chart").data("kendoChart").redraw();

        //$("#Chart").data("kendoChart").refresh();

    }

</script>

My Controller:

public ActionResult LeerExt_GraficoServicio(string txtFechaInicio, string txtFechaFin)

{

return Json(GetServiciosByFecha(txtFechaInicio, txtFechaFin));

Charts

answered on 06 Feb 2014

1 answer

159 views

Custom Tabstrip Icon Background-size

Using the guide at http://docs.telerik.com/kendo-ui/getting-started/mobile/icons#restyle-only-the-custom-icon I've added a custom mask icon using the latest recommended way to do it. Unfortunately my icons (glyphish pack) seem to be just a tiny bit too large for my taste and the background-size is having no effect when i try to change it.

km-root .km-pane .km-view .km-home-new {

background-size: 90% 90%;

-webkit-background-clip: border-box;

background-color: white;

}

.km-home-new {

-webkit-mask-box-image: url("images/53-house@2x.png");

background-color: red;

}

I have tried as low as 10% 10% and it changes nothing.

TabStrip (Mobile)

answered on 06 Feb 2014

0 answers

51 views

Switch to edit button after customized save event

I've customized the save event ( do remote update), but I don't know how to switch to edit button after the data updated(still update button). thanks for any help。

Grid

asked on 06 Feb 2014

4 answers

586 views

Change grid dataSource and send object as a parameter

I am changing the url of a grid and then sending an object as a parameter. The grid is calling the new controller I want, but the view model is empty. What am I missing?

1.return mvvm.toJSON(self, function (data) {

2. data.Criteria = self._grid.dataSource.data();

3. });

New grid datasource:

01.var dataSource = new kendo.data.DataSource({

02. page: ds.page(),

03. pageSize: ds.pageSize(),

04. sort: ds.sort(),

05. type: "aspnetmvc-ajax",

06. transport: {

07. prefix:"",

08. read: {

09. url: "/AdvancedSearch/GetResults",

10. dataType: "json",

11. data: { criteria: data },

12. type: "POST",

13. traditional: true,

14. contentType: "application/json",

15. }

16. }

17.});

Replacing grid datasource:

1.self.bindings.controls.EquipmentListGrid.setDataSource(dataSource);

2.self.bindings.controls.EquipmentListGrid.rebind();

Controller:

1.[HttpPost]

2.public ActionResult GetResults([DataSourceRequest] DataSourceRequest request, AdvancedSearchViewModel criteria)

3.{

4.}

ViewModel:

01.[Serializable]

02.public class AdvancedSearchViewModel

03. {

04. [DisplayName("Include Junk Pool")]

05. public bool IncludeJunkPool { get; set; }

06. public List<string> Areas { get; set; }

07. public List<string> GeoMarkets { get; set; }

08. public bool ApplyBasket { get; set; }

09. public IList<int> Basket { get; set; }

10. public bool Export { get { return true; } }

11.

12. public string Page { get; set; }

13. public string Column { get; set; }

14. public string DisplayName { get; set; }

15. public string Operator { get; set; }

16. public string Value { get; set; }

17. public string DataType { get; set; }

18. public string Table { get; set; }

19.

20. public IList<AdvancedSearchListItem> Criteria { get; set; }

21.

22. public CurrentPage CurrentPage { get; set; }

23. public Sort Sort { get; set; }

24.}

1.return mvvm.toJSON(self, function (data) {

2. data.Criteria = self._grid.dataSource.data();

3.});

1.return mvvm.toJSON(self, function (data) {

2. data.Criteria = self._grid.dataSource.data();

3.});

Grid

answered on 06 Feb 2014

1 answer

540 views

Set map Size?

Hope this is an easy one. How do I set the size of the map? Say I want the map to be 300x300 px.

thanks,

Brian

Map

answered on 06 Feb 2014

2 answers

70 views

[Solved] Bug report for Kendoui scheduler, deselecting all owners disables filtering

On

http://demos.telerik.com/kendo-ui/web/scheduler/index.html

there are three owners.

If you deselect them all, you can see all events.

The expected outcome was that no events was visible.

Scheduler

answered on 06 Feb 2014

1 answer

131 views

How to select a grid element on my controller ?

How get a reference of my grid widget on angular ?

for example the normnal way is this :

$("#GridID").data("kendoGrid").dataSource.fetch();

but I make a reference to my widget from an angular controller ?

Grid

answered on 06 Feb 2014

6 answers

209 views

Rubber band scrolling problem with part of the day view

If you look at scheduler1.png, you'll see what the scheduler looks like when I'm not scrolling (it's so pretty!). However, when I start scrolling on the top or the bottom of the control, the times are offset from the content, as shown in scheduler2.png. Below is my angular initialization code. Thanks!

BTW, we're using this inside the new AppStudio (previous Icenium) and *loving* it. Keep up the good work!

<div id="scheduler" kendo-scheduler k-options="schedulerOptions"></div>

$scope.schedulerOptions = {
startTime: new Date(kendo.toString($scope.today, 'd') + " 8:00 AM"),
endTime: new Date(kendo.toString($scope.today, 'd') + " 6:00 PM"),
views: ["day"],
editable: false,
dateHeaderTemplate: "",
footer: false,
height: 747,
majorTimeHeaderTemplate: kendo.template("<div class='schedule-tick'>#=kendo.toString(date, 'h')#<span>#=kendo.toString(date, 'tt')#</span></div>"),
minorTickCount: 4,
eventTemplate: $("#schedule-event-template").html(),
dataSource: $scope.appointmentDataSource,
navigate: function (e) {
$scope.today = e.date;
var todaysDate = new Date();
if ($scope.today.setHours(0, 0, 0, 0) === todaysDate.setHours(0, 0, 0, 0)) {
$scope.isToday = true;
} else {
$scope.isToday = false;
}
$scope.$digest();
}
};

Scheduler

answered on 06 Feb 2014