Hi, i use a kendo grid with navigatable option set to true.

When i press tab key the current cell step to next row cell but change event is not fired.

I need to select the row corresponding to the active cell setted when i press tab key.

How to solve?

Thanks

I am trying to do an application in which I have three related listviews. The second listview is charged in dependency of the item selected in the first one, and the third depends on the second one. When I select an item I need to pass the controller, the id of this item not its text. It works perfectly in the first listview but reaches an error in the second one.

I copy here my view:

@model PruebaTelerik.Models.CompanyGroupModel

<script type="text/x-kendo-tmpl" id="ListViewTemplate">
<option value="#:Id#">#:Description#</option>
</script>

<script>
function onChange(args) {
var dbConnObj = $("#ListAgrupaciones").data("kendoListView");
var index = dbConnObj.select().index();
var dataItem = dbConnObj.dataSource.view()[index];
var _id = dataItem.Id;
cargarDatos('Companies/LoadCompanies', "#ListCompanies", _id);
}

function cargarDatos(urlEspecifica, listaModificar, _id) {
$.ajax({
url: urlEspecifica,
type: 'POST',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify({ nombre: _id }),
success: function (nombre) {
$(listaModificar).kendoListView({
dataSource: nombre,
template: kendo.template($("#ListViewTemplate").html())
});

},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error: " + XMLHttpRequest.responseText);
}

});

}

function onChangeCompanies(arg) {
debugger;
var objeto = $("#ListCompanies").data("kendoListView");
debugger;
var indice = objeto.select().index();
debugger;
var item = objeto.dataSource.view()[indice];
debugger;
var _id = item.Id;
debugger;
alert(_id);
cargarDatos('Companies/LoadProducts', "#ListProducts", _id);
}

</script>

The controller has this methods:

[HttpPost]
public ActionResult LoadCompanies(string nombre)
{
int ID = -1;
int dummy;
if (Int32.TryParse(nombre, out dummy))
{
ID = dummy;
}
if (ID == 1)
{
nombre = "agrupación1";
}
if (ID == 2)
{
nombre = "agrupación2";
}
SelectListModel selectList;
List<SelectListModel> listAgrupaciones = new List<SelectListModel>();
selectList = new SelectListModel() { Id = 3, Description = nombre + " 1" };
listAgrupaciones.Add(selectList);
selectList = new SelectListModel() { Id = 4, Description = nombre + " 2" };
listAgrupaciones.Add(selectList);
return Json(listAgrupaciones, JsonRequestBehavior.AllowGet);

}

[HttpPost]
public ActionResult LoadProducts(string nombre)
{
int ID = -1;
int dummy;
if (Int32.TryParse(nombre, out dummy))
{
ID = dummy;
}
if (ID == 1)
{
nombre = "compañía1";
}
if (ID == 2)
{
nombre = "compañía2";
}
SelectListModel selectList;
List<SelectListModel> listAgrupaciones = new List<SelectListModel>();
selectList = new SelectListModel() { Id = 1, Description = nombre + " 1" };
listAgrupaciones.Add(selectList);
selectList = new SelectListModel() { Id = 2, Description = nombre + " 2" };
listAgrupaciones.Add(selectList);
return Json(listAgrupaciones, JsonRequestBehavior.AllowGet);
}

Could anyone help me? Thanks a lot.









</script>

<article class="col-lg-12 col-md-12">
<span class="moduleTitle">
<span class="titleBox">Compañías</span>
</span>
<div class="articleContent selectMultiple">
<div class="formRow">
<div class="formItem multiple">
<label>Agrupación: </label>
@Html.Kendo().ListView(Model.CompanyGroups).Name("ListAgrupaciones").TagName("select multiple").ClientTemplateId("ListViewTemplate").BindTo(Model.CompanyGroups).Selectable(selectable => selectable.Enabled(true)).Events(events => events.Change("onChange"))
</div>
<div class="formItem multiple">
<label>Compañía: </label>
@*<select multiple>
<option>Compañía 1</option>
<option>Compañía 2</option>
<option>Compañía 3</option>
</select>*@

@Html.Kendo().ListView(Model.Companies).Name("ListCompanies").TagName("select multiple companies").ClientTemplateId("ListViewTemplate").Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single).Enabled(true)).Events(events => events.Change("onChangeCompanies"))

</div>
<div class="formItem multiple ">
<label>Procedencia: </label>
@*<select multiple>
<option>Procedencia 1</option>
<option>Procedencia 2</option>
<option>Procedencia 3</option>
</select>*@

@Html.Kendo().ListView(Model.Products).Name("ListProducts").TagName("select multiple products").ClientTemplateId("ListViewTemplate").Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single).Enabled(true))
</div>
</div>


</div>
</article>

Trying to group together data returned from my controller into a chart where items are categorized and grouped by type. Similar to the spain electricty production chart (binding to remote data) or the stock prices (binding to grouped data).

Here's the JSON I've got coming out of the controller

Each type of request (RegionRequest, AuthorizationRequest, etc.) would be the group. Inside that group the data array contains a series of clients and the count of those requests.

After an hour of mucking about with the wrapper I'm still lost on how to group this data and what goes where. I'm not using a C# model so things like the SeriesDefaults doens't work for me because I can't use a lamdba expression to set it up. I'm in control of all the parts here (markup or JSON) so I can output the JSON in a flatter format or something (although I really don't want to output the complete list of request types as these counts are low but outputting 300+ elements doesn't make sense when I can count it in LINQ on the server side much faster).

So any advice on how the data should be formatted or what the wrapper should look like given this data? Do I have to create a view model to do this (which is fine, I just didn't want to do it for a single chart).

BTW I really struggle with the documentation and examples on the site. They're great but only when they perfectly fit in your scenario. In my case for example I can't find an example where a) it's using the MVC wrapper b) it's binding to remote data c) the data is grouped d) there's no C# model. The descriptions of some of the MVC wrappers is just horrible. For example the description for the CategoryAxis says "Configures the category axis" and the example code in the documentation has an example pulling a single property from a model. Can you configure multiple categories? What if you don't have a model?

I really hope I'm not the only one feeling this. The wrappers are great but I'm constantly having to find snippets and samples on StackOverflow to try to figure out what's going on and how to do things, and usually it results in finding something "close" to what I want that I can tweak and sometimes this means finding a jsfiddle that someone has put together and reverse engineering the html/js to what should be plugged into the MVC wrapper. Yes I know you don't have to use the wrappers but they're there for a purpose and I'd rather try to use them instead of raw markup.

Thanks

I am trying to color a row based on the results that returned from the datasource.

Is there a good clean way to accomplish this? The result comes back as a Hex value (not shown in the code below) so it can be a simple concatenation if needed in my MVC or Jquery. I just dont know the best way to perform this. Please help. Thanks

Greetings,

 I am new to Telerik's MVC controls and also to Jquery in general.  I am trying to build a wizard like interface for the attached screen shot using the Telerik window.  I can get the first step to load, but when click either of the buttons to load the new view for step 2, nothing happens.  The controller fires correctly.    It seems like I need to somehow refresh or reload the Telerik window, but I am not sure how to to do this.  Any help would be much appreciated.

 View

 Controller

Hi,

How can I disable error to get to the global error handlar, when we define a local error handle for Kendo grid? I've tried to use e.preventDefault(), but it doesn't work.

Global error handling

Example of local error handling

    //TODO: Stop error from being propagated to global .ajaxError

<-- SNIP -->

 <-- SNIP --> 

         .Events(e => e.Error("onError")

 Any ideas on how to solve it?

I was exporting to Excel just fine in Chrome when I started using this product.  Now I get an "Aw, Snap" error anytime I do it.  Firefox works just fine.  I cleared cache/cookies, disabled virus scanner, rebooted machine, even reinstalled Chrome.

Here is the grid code:

this.Html.Kendo().Grid<EmployeeHistoryGridVM>()
      .Name("grid")
      .Filterable()
      .ColumnMenu(x => x.Filterable(true))
      .Sortable()
      .Groupable()
      .ToolBar(toolbar =>
      {
 toolbar.Excel();
 //toolbar.Custom().Name("foo").Text("Perform Action").Action("PerformAction", "EmployeeHistory");
 //toolbar.Template(x => { this.Html.Write("test"); });
})
      .Scrollable(scrollable => scrollable.Height(430))
      .Columns(col =>
      {
          col.Bound(x => x.Id).Width(120).Sortable(false).Locked();
 col.Bound(x => x.CategoryName).Width(120).Sortable(true);
 col.Bound(x => x.CompanyName).Width(120).Sortable(true).Filterable(true);
 col.Group(g => 
 g.Title("Month 12th Count")
 .HeaderHtmlAttributes(new { style = "text-align: center;"})
 .Columns(c =>
 {
 c.Bound(x => x.Month1_12Count).Title("Month 1").Filterable(true).HeaderHtmlAttributes(new { style = "white-space: normal"}).Width(120);
 c.Bound(x => x.Month2_12Count).Title("Month 2").Filterable(true).HeaderHtmlAttributes(new { style = "white-space: normal" }).Width(120);
 c.Bound(x => x.Month3_12Count).Title("Month 3").Filterable(true).HeaderHtmlAttributes(new { style = "white-space: normal" }).Width(120);
 }));
 col.Bound(x => x.Month1).Filterable(true).Width(120);
 col.Bound(x => x.Month2).Filterable(true).Width(120);
 col.Bound(x => x.Month3).Filterable(true).Width(120);
 col.Bound(x => x.PayCycleCode).Sortable(true).Filterable(true).Width(120);
 col.Bound(x => x.Quarter).Sortable(true).Filterable(true).Width(120);
 col.Bound(x => x.TaxCode).Sortable(true).Filterable(true).Width(120);
 col.Bound(x => x.Year).Sortable(true).Filterable(true).Width(120);
      })
 .Excel(excel => excel
.FileName("test.xlsx")
.Filterable(true)
.AllPages(true)
//.ForceProxy(true)
.ProxyURL(Url.Action("Export_Save", "EmployeeHistory")))
      .Filterable()
      .Resizable(x => x.Columns(true))
      .Reorderable(x => x.Columns(true))
        //.Events(e => { e.ColumnMenuInit("filterMenuInit"); })
      .Pageable(pageable => pageable
          .ButtonCount(5)
          .Info(true))
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(50)
 .Read(read => read.Action("GetData", "EmployeeHistory").Data("sendAntiForgery")))
      .ToHtmlString();

And here is the Controller code:

[HttpPost]
public ActionResult Export_Save(string contentType, string base64, string fileName)
{
var fileContents = Convert.FromBase64String(base64);

return File(fileContents, contentType, fileName);
}

public ActionResult GetData([DataSourceRequest]DataSourceRequest request)
{
    //request.Deflatten(EmployeeHistoryGridVM.KendoDBMapping);

IQueryable<ViewCompanyStatus> details = this.DataManager.AppDataContextManager.GetViewCompanyStatusRepository()
.Find(x => x.Id != 0) as IQueryable<ViewCompanyStatus>;

Func<ViewCompanyStatus, HistoryCompanyStatsGridVM> InfoFactory = delegate(ViewCompanyStatus model)
{
return new HistoryCompanyStatsGridVM
(
model
);
};

DataSourceResult result = details.ToDataSourceResult(request, x => InfoFactory(x));

// large data sets will blow us the F up for export
//JsonResult r = Json(result, JsonRequestBehavior.AllowGet);

var serializer = new JavaScriptSerializer { MaxJsonLength = Int32.MaxValue };
var result2 = new ContentResult
{
Content = serializer.Serialize(result),
ContentType = "application/json"
};
return result2;
}

Thanks in advance!

I am using Telerik Grid / Popup editing. When the user clicks the Add New Record/Edit button, he/she needs to see a form with several fields that are not from the grid. How can that be done?

In other words, the form needs to be customized.

For Example:

My grid contains the following columns:

1) name

2) phone

3) fax

But the popup should contain:

1) email

2) address

3) state.

I am using Telerik MVC with razor and C#.