Questions on Kendo UI for jQuery Forum

6 answers

248 views

I am trying to open a grid as the detail template inside a grid but it seems it is not opening is correct place. Please help. The detail steps with screenshot is the attached document.

The code to open the grid is as below

Grid Definition and related code

@(Html.Kendo().Grid().Name("grvInvSplit")

.TableHtmlAttributes(new { style = "table-layout: fixed;" })

.ClientDetailTemplateId("ViewGridItemDetails")

.DataSource(dataSource => dataSource.Ajax()

.Batch(false)

.ServerOperation(false)

.Read(...)

.Create(..)

.Update(..)

.Model(model => model.Id(p => p.GridRowNum))

.Model(model => model.Field(p => p.GridRowNum).DefaultValue(-1))

.Events(events => events.RequestEnd("onGridRqstEnd")

.Error("onGridError"))

)

.Columns(cols =>

{

...

})

.EnableCustomBinding(false)

.Selectable()

.Pageable()

.Resizable(resizing => resizing.Columns(true))

.Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InLine)

.DisplayDeleteConfirmation(false)

)

.Events(events => events.DataBound("onGridDataBound")

.Save("onGridSave")

.Edit("onGridEdit")

.Change("onGridChange")

.DetailExpand("gridViewChrgDetailExpand")

)

<script id="ViewGridItemDetails" type="text/x-kendo-template">

<div id="ViewGridItemDetailsRow_#= GridRowNum #">

Loading ...

</div>

</script>

<script>

gridViewChrgDetailExpand: function (e) {

$("#ViewGridItemDetailsRow_" + selectedGridRow.GridRowNum).html(<html>);

}

</script>

Please help to solve the issue.

regards,
Sanjay

Grid

answered on 07 Feb 2014

1 answer

677 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

336 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

169 views

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

136 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

35 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

546 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

502 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

59 views

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

112 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