My Kendo grid incorrectly displays the responsive column when the page is viewed on a desktop (width > 2000px). My grid code is below. It seems like .Media("(max-width: 450px)"); in the last column doesn't work. It renders fine on a small screen. Only the last column is displayed.
<% Html.Kendo().Grid<WWT.Models.GageList>()
.Name("StationGrid")
.Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single))
.Filterable(filter =>
{
filter.Extra(false);
filter.Operators(op =>
{
op.ForString(str => str.Clear());
op.ForString(str =>
{
str.Clear().Contains("Contains");
});
});
filter.Mode(GridFilterMode.Row);
})
.Sortable(a => a.Enabled(true))
.Events(events => events
.DataBound("onDataBound")
.Change("AddRowClick")
)
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("IndexReplaceStation", "Window", new { company = Model.company, gageSN = Model.id, model = Model.model }).Data("GridSearchData"))
.PageSize(20)
)
.Columns(columns =>
{
columns.Bound(c => c.ModelNumber).Title("Model").HtmlAttributes(new { #class = "telerikGridCell" }).MinScreenWidth(450);
columns.Bound(c => c.SID).Title("SID").HtmlAttributes(new { #class = "telerikGridCell" }).MinScreenWidth(450);
columns.Bound(c => c).ClientTemplate("#=resColTemplate(data)#").Title("").Media("(max-width: 450px)");
})
.Scrollable(scrolling => scrolling.Height(150))
.Render();
%>
</div>
<script id="responsive-column-template" type="text/x-kendo-template">
<strong>Model</strong>
<p class="col-template-val">#=data.ModelNumber#</p>
<strong>SID</strong>
<p class="col-template-val">#=data.SID#</p>
</script>
I use min-width at 320 and 850px breakpoints.
cols.Bound(x => x.SectionCode)
.HeaderHtmlAttributes(new { style = "text-align:center" })
.Media("(min-width: 320px)")
.Width("25%");
Related
I have a simple question I cannot seem to find the answer to. I would like the grid to default to show all results on load. If possible even take out the paging at the bottom but I cannot seem to find it anywhere.
This is my grid:
#(Html.Kendo().Grid<Website.Models.LinesForPayType.LinesForPayTypeGridModel>()
.Name("gridAssignLines")
.ToolBar(toolbar =>
{
toolbar.Create().HtmlAttributes(new { #id = "CreatePaymentTypeLine", #style = "display:inline-block;" });
toolbar.Save().SaveText("Create Invoice").HtmlAttributes(new { id = "create-invoice", href = "#" }); ;
})
.Columns(columns =>
{
columns.Select().Width(30);
columns.Bound(c => c.Description);
columns.Bound(c => c.LineNo);
columns.Bound(c => c.Quantity);
columns.Bound(c => c.UnitPrice)
.ClientTemplate(Model.HomeCurrencySymbol + " #=kendo.toString(UnitPrice ? UnitPrice : 0,'n2')#");
columns.Bound(c => c.Total)
.ClientTemplate(Model.HomeCurrencySymbol + " #=kendo.toString(Total ? Total : 0,'n2')#");
})
.Events(e => e.DataBound("AddStudentController.onCheckClick"))
.Pageable(page => page
.Refresh(true)
.PageSizes("All")
)
.Editable(edit => edit.Mode(GridEditMode.InCell))
.Scrollable()
.Events(events => events.Save("AddStudentController.onInvoiceGridSave"))
.Reorderable(reorder => reorder.Columns(true))
.NoRecords("No data")
.Filterable(f => f.Operators(o => o.ForString(fs => fs.Clear().Contains("Contains").StartsWith("Start With").EndsWith("End with").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to"))))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Sort(s =>
{
s.Add(a => a.LineNo).Ascending();
})
.Model(model =>
{
model.Id(i => i.ID);
})
.Read(read => read.Action("ReadPaymentTypeLines", "Payment").Data("AddStudentController.getPaymentTypeID"))
.Create(create => create.Action("CreatePaymentTypeLines", "Payment"))
.Update(update => update.Action("CreatePaymentTypeLines", "Payment"))
)
)
Set the datasource's PageSize to int.MaxValue (e.g. https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridBuilder#datasourcesystemstring) and if you don't want to see the paging stuff, set Pageable to false.
How to filter second Dropdown based on first dropdown value inside the Kendogrid
enter code here
#(Html.Kendo().Window().Name("windowFactorDefination").Iframe(true)
.Title("Rating Factor Definition")
.Draggable()
.Resizable()
.Modal(true)
.Visible(false)
.Actions(actions => actions.Close())
.Width(850)
.Events(e => e.Close("OnCloseFactorWindow"))
.Position(settings => settings.Top(30))
.Position(settings => settings.Left(100))
.Content(#<text>
#(Html.Kendo().Grid<WeezerSetup.Model.RatingGroup>()
.Name("FactorDefinationGrid")
.Columns(columns =>
{
columns.Bound(c => c.RatingFactorDefinitionID).Visible(false);
columns.Bound(c => c.FactorDefinationDescription).Title("Factor Definition Description").HeaderHtmlAttributes(new { title = "Rating Factor description" });
columns.ForeignKey(b => b.FactorTypeID, (SelectList)ViewBag.FactorList).Width(120).Title("Factor Type").HeaderHtmlAttributes(new { title = "Data type for Rating Factor" });
columns.ForeignKey(c => c.TableID, (SelectList)ViewBag.TableList).Width(300).EditorTemplateName("TableTypeEditorDropDown").Title("SYS_Table").HtmlAttributes(new { id = "drpTableType" });
columns.ForeignKey(c => c.FieldID, (SelectList)ViewBag.FieldList).Width(300).EditorTemplateName("FieldTypeEditorDropDown").Title("SYS_Table_Field").HtmlAttributes(new { id = "drpFieldType" });
columns.ForeignKey(b => b.WildCard, (SelectList)ViewBag.WildCardList).Width(300).Title("Wild Card").HeaderHtmlAttributes(new { title = "Used when any remaining values have the same results" });
columns.Command(command =>
{
command.Edit().Text(" ").HtmlAttributes(new { id = "btnEdit", #style = "text-align:center;", data_toggle = "tooltip", data_placement = "top", title = "Edit" });
}).HeaderTemplate("Action").Width(210);
columns.Command(command => { command.Destroy().Text(" ").HtmlAttributes(new { #class = "fe-delete", title = "DELETE" }); }).HeaderTemplate("Action").HeaderHtmlAttributes(new { title = "Clicking the icon will Delete specific row" });
})
.Resizable(resize => resize.Columns(true))
.Sortable()
.AutoBind(true)
.ToolBar(toolbar => toolbar.Create())
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Filterable()
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Events(events => { events.Edit("onEditGrdMyBenefitsGrid"); events.DataBound("onRowDataBoundGrdMyBenefitsGrid"); })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("GetRatingFactorDefination", "RateSetup"))
.Model(model =>
{
model.Id(p => p.RatingFactorDefinitionID);
})
.Create(update => update.Action("AddFactorDefination", "RateSetup"))
.Update(update => update.Action("UpdateFactorDefination", "RateSetup"))
.Destroy(delete => delete.Action("DeleteRatingFactorDefinition", "RateSetup").Data("DeleteRecord"))
))
#(Html.Kendo().Tooltip()
.For("#FactorDefinationGrid")
.Filter("th")
.Position(TooltipPosition.Top)
.Width(160)
.Events(events => events.Show("onShow"))
)
</text>))}
So in the above code there are 2 columns Name TableID and FieldID both are dependent column showing as dropdown in the Kendo Grid UI.
Please give me solution to filter both dropdown.
I assume you are looking for a behavior like cascading drop downs.
Refer to this demo link
You need to do the following:-
1) Add cascade from property to editor template of FieldId
.CascadeFrom("TableId")
2) Add a function to your script file to return the selected table id
function filterFields() {
return {
tableId: $("#TableId").val()
};
}
3) Add the script function in your read call
.DataSource(source => {
source.Read(read =>
{
read.Action("ActionName", "ControllerName")
.Data("filterFields");
})
.ServerFiltering(true);
I have a Telerik Kendo Grid and I am adding a record when I click a button:
var dataSource = $("#GridArticulos").data("kendoGrid").dataSource;
dataSource.add({ ArticuloId: articuloId, Nombre: nombre, Precio:
precio, Cantidad: cantidad, Total: total });
dataSource.sync();
The record is added correctly to the grid, but when I click the save button on the grid, nothing happens, the action in the controller is not called, do I need some specific configuration on the grid?, this is what I have now:
#(Html.Kendo().Grid<App.Models.ArticulosListaViewModel>()
.Name("GridArticulos")
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(c => c.ArticuloId).Width("15%");
columns.Bound(c => c.Nombre).Width("35%").ClientFooterTemplate("Total"); ;
columns.Bound(c => c.Cantidad).Width("10%").HtmlAttributes(new { style = "text-align:right" });
columns.Bound(c => c.Precio).Width("10%").Format("{0:C}").HtmlAttributes(new { style = "text-align:right" });
columns.Bound(c => c.Total).Width("10%").Format("{0:C}").HtmlAttributes(new { style = "text-align:right" })
.ClientFooterTemplate("<div align=\"right\">#=kendo.format('{0:C}', sum)#</div>");
columns.Command(command => command.Destroy()).Width("20%");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.ToolBar(toolbar =>
{
toolbar.Save().SaveText("Crear pedido").CancelText("Cancelar");
})
.Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))
.Scrollable()
.Resizable(resize => resize.Columns(true))
.HtmlAttributes(new { style = "height:550px", #class = "ra-section" })
.DataSource(dataSource => dataSource
.Ajax()
.Aggregates(aggregates =>
{
aggregates.Add(p => p.Total).Sum();
})
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("GridArticulos_Error").RequestEnd("GridArticulos_RequestEnd"))
.Model(model =>
{
model.Id(a => a.ArticuloId);
model.Field(a => a.Nombre).Editable(false);
model.Field(a => a.Cantidad).Editable(false);
model.Field(a => a.Precio).Editable(false);
model.Field(a => a.Total).Editable(false);
})
//.Create(create => create.Action("GuardarPedido", "Pedidos").Data("ObtenerDatos"))
.Update(update => update.Action("GuardarPedido", "Pedidos").Data("ObtenerDatos"))
.Destroy(d => d.Action("EliminarArticulo", "Pedidos"))
)
)
you have your .Create() method commented out. uncomment it and point it to the appropriate controller method and you should be fine
uncomment this line--> //.Create(create => create.Action("GuardarPedido", "Pedidos").Data("ObtenerDatos"))
.Update(update => update.Action("GuardarPedido", "Pedidos").Data("ObtenerDatos"))
.Destroy(d => d.Action("EliminarArticulo", "Pedidos"))
also, your create method is pointed to the same method as your update method on the line below it so you would need to edit the method to point to another method. I can't help there since I don't know what methods you have in your controller
I have a very wired problem.
My kendo grid pager controls are getting rendered twice after I updated kendo files.
Someone knows something about this. I'm using Kendo for ASP.NET MVC.Here you have an image of the grid
The second group of buttons are the ones that works. Buttons to the right and left of the pagination numbers are blocked.
#(Html.Kendo().Grid<Monibyte.Arquitectura.Presentacion.Transaccional.Dto.Tarjetas.PocMovimientosTarjeta>()
.Name("Grid")
.Filterable()
.Groupable()
.ColumnMenu()
.AutoBind(false)
.Events(e => e.DataBound("OndataBound"))
.Events(e => e.DataBinding("OnDataBinding"))
.Reorderable(reorderable => reorderable.Columns(true))
.Pageable(pager => pager.PageSizes(Html.DefaultPageSizes()))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Sortable(sortable => sortable.AllowUnsort(true).SortMode(GridSortMode.MultipleColumn))
.Columns(columns =>
{
columns.Bound(p => p.IdMovimiento).Title("").Sortable(false).Filterable(false).Width(50)
.HtmlAttributes(new { #class = "detAdic_ListMov" }).IncludeInMenu(false)
.HeaderTemplate(Html.GridCheckAll()).ClientTemplate(Html.GridCheck() +
Html.GenericGridBtn("IncluirDetalleMovimiento", "ConsultaMovimientos", null,
altText: #RecEtiquetas.App_AgregarMovimiento,
jsparams: new
{
targetId = "detalleMovimiento",
dataFunc = "editarDataFunc",
callback = "editarCallback"
},
imageUrl: "imagenes/iconos/list(16).png",
authorizeFunc: "validaSegregar").ToHtmlString())
.HtmlAttributes(new { #class = "detAdic_ListMov", #title = #RecEtiquetas.App_AgregarMovimiento });
columns.Bound(p => p.NumTarjeta).Title(RecEtiquetas.Mod_NumTarjeta).Hidden(true).Width(50)
.ClientGroupHeaderTemplate("#= templateDescripcionTarjeta(value) #")
.HtmlAttributes(new { #title = #RecEtiquetas.Mod_NumTarjeta });
columns.Bound(p => p.NumReferencia).Title(RecEtiquetas.App_Referencia).Width(30)
.HtmlAttributes(new { #title = #RecEtiquetas.App_Referencia });
columns.Bound(p => p.FecMovimiento).Title(RecEtiquetas.App_FechaMovimiento).Width(40)
.ClientTemplate("#:$monibyte.formatDate(FecMovimiento)#")
.HtmlAttributes(new { #title = #RecEtiquetas.App_FechaMovimiento });
columns.Bound(p => p.FecTransaccion).Title(RecEtiquetas.App_FecConsumo).Hidden(true).Width(40)
.ClientTemplate("#:$monibyte.formatDate(FecTransaccion)#")
.HtmlAttributes(new { #title = #RecEtiquetas.App_FecConsumo });
columns.Bound(p => p.Descripcion).Title(RecEtiquetas.App_DescripcionMovimiento).Width(250)
.HtmlAttributes(new { #title = #RecEtiquetas.App_Descripcion });
columns.Bound(p => p.MonDebLocal).Title(Html.EtiquetasCompania("RecGlobalizacion", "App_DebitoMonedaLocal").ToString()).Width(40)
.ClientTemplate("#:SimboloMonedaLocal# #:$monibyte.formatNumber(MonDebLocal)#")
.ClientGroupFooterTemplate("#:templateMontoDebLocal(data)#")
.FooterHtmlAttributes(new { #class = "alinearDerecha" })
.HtmlAttributes(new { #class = "alinearDerecha monto-grid", #title = Html.EtiquetasCompania("RecGlobalizacion", "App_DebitoMonedaLocal") });
columns.Bound(p => p.MonCredLocal).Title(Html.EtiquetasCompania("RecGlobalizacion", "App_CreditoMonedaLocal").ToString()).Width(40)
.ClientTemplate("#:SimboloMonedaLocal# #:$monibyte.formatNumber(MonCredLocal)#")
.ClientGroupFooterTemplate("#:templateMontoCredLocal(data)#")
.FooterHtmlAttributes(new { #class = "alinearDerecha" })
.HtmlAttributes(new { #class = "alinearDerecha monto-grid", #title = Html.EtiquetasCompania("RecGlobalizacion", "App_CreditoMonedaLocal") });
columns.Bound(p => p.MonDebInter).Title(RecEtiquetas.App_DebitoDolares).Width(40)
.ClientTemplate("#:SimboloMonedaInter# #:$monibyte.formatNumber(MonDebInter)#")
.ClientGroupFooterTemplate("#:templateMontoDebInter(data)#")
.FooterHtmlAttributes(new { #class = "alinearDerecha" })
.HtmlAttributes(new { #class = "alinearDerecha monto-grid", #title = #RecEtiquetas.App_DebitoDolares });
columns.Bound(p => p.MonCredInter).Title(RecEtiquetas.App_CreditoDolares).Width(40)
.ClientTemplate("#:SimboloMonedaInter# #:$monibyte.formatNumber(MonCredInter)#")
.ClientGroupFooterTemplate("#:templateMontoCredInter(data)#")
.FooterHtmlAttributes(new { #class = "alinearDerecha" })
.HtmlAttributes(new { #class = "alinearDerecha monto-grid", #title = #RecEtiquetas.App_CreditoDolares });
columns.Bound(p => p.DescripcionMoneda).Title(RecEtiquetas.App_Moneda).Hidden(true).Width(40)
.ClientGroupHeaderTemplate(RecEtiquetas.App_TotalRegistros + " #=value# = #=count#")
.HtmlAttributes(new { #title = #RecEtiquetas.App_Moneda });
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(Html.DefaultPageSize())
.Sort(sort => sort.Add(p => p.FecMovimiento).Descending())
.Aggregates(aggregates =>
{
aggregates.Add(p => p.MonCredLocal).Sum();
aggregates.Add(p => p.MonDebLocal).Sum();
aggregates.Add(p => p.MonCredInter).Sum();
aggregates.Add(p => p.MonDebInter).Sum();
aggregates.Add(p => p.DescripcionMoneda).Count();
aggregates.Add(p => p.SimboloMonedaLocal).Min();
aggregates.Add(p => p.SimboloMonedaInter).Min();
})
.Group(groups => groups.Add(p => p.DescripcionMoneda))
.Read(read => read.Action("FiltrarMovimientos", "ConsultaMovimientos"))
))
I contacted Progress Telerik support and this is the answer they gave.
We had reports about such an issue recently. The customers who encountered it had updated UI for ASP.NET MVC to the latest version
but forgot to update the Kendo UI script and CSS files, or vice versa.
Could you double check if you updated both the DLL and the JS and CSS
files? To check the current Kendo UI scripts version in your page, you
can call:
console.log(kendo.version);
To check the DLL version, open the References folder in your project,
right-click Kendo.Mvc and select Properties.
The two versions have to match in order to have the widgets working
correctly
So check your dll and js/css versions match.
Had the same issue with kendo 2018.1.221. The issue was fixed when the jquery is loaded after the kendo javascript bundle
#Styles.Render("~/Content/kendo/2018.1.221/css")
#Scripts.Render("~/bundles/kendo/2018.1.221/kendoscripts")
//jquery needs to be loaded after kendo scripts
#Scripts.Render("~/bundles/jquery")
The reason why I was getting duplicate paging was because the Kendo.MVC.dll in the project did not match the Kendo css & scripts version used by the bundles.
Remove the Kendo.Mvc dll in your project and re-add from the local path. eg.
\Telerik UI for ASP.NET MVC R2 2018\wrappers\aspnetmvc\Binaries\Mvc4Kendo.Mvc.dll
(Same answer as Steven Anderson)
I have a Kendo Grid which has a popup editable template,
If possible i would like to pass the model (the model of the row, or at least its Id) to the editable template
Grid
#(Html.Kendo().Grid<Client>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Name).Width(140);
columns.Bound(c => c.Status);
columns.Bound(c => c.ProcesingStyle);
columns.Bound(c => c.ArchiveDays);
columns.Command(command =>
{
command.Edit().Text(" ");
command.Destroy().Text(" "); ;
}).Width(90);
})
.ToolBar(toolbar => toolbar.Create().Text("New"))
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("Client").AdditionalViewData(new { Client = Model })
.Window(w => w.Title("Site")))
.HtmlAttributes(new { style = "height: 380px;" })
.Scrollable()
.Sortable()
.Selectable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.Events(events => events.Change("onChange"))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Get", "Clients"))
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("Create", "Clients"))
.Update(update => update.Action("Update", "Clients"))
.Destroy(update => update.Action("Destroy", "Clients"))
)
)
Template
#model Client
#(Html.Kendo().ComboBoxFor(m => m.Plan)
.DataTextField("Name")
.DataValueField("Id")
.Placeholder("Select Plan...")
.HtmlAttributes(new { style = "width:300px" })
.Filter(FilterType.Contains)
.MinLength(3)
.DataSource(source =>
source.Read(read =>
read.Action("GetPlans", "Plans",new {ClientId = Model.Id}))))
Everything works fine except i need to use the Id of the row/model inside the template, in particular , i need the to pass the model.Id (which is the id of the model of the row), to the action on the Combobox in the template, so i can filter the data correctly
This is the offending line in the grid,
.TemplateName("Client").AdditionalViewData(new { Client = Model })
The result is the Model inside the template is always null, im not sure how to pass the data i need to the template
Is there anyway i can do this, or should i be looking at a different approach?
The way I got around this was to put a JavaScript function in the original view as seen below:
function getClientId() {
var row = $(event.srcElement).closest("tr");
var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
var dataItem = grid.dataItem(row);
if (dataItem)
return { clientId: dataItem.Id }
else
return { clientId: null }
}
And reference it from my editor template:
.DataSource(source => source.Read(read => read.Action("GetPlans", "Plans").Data("getClientId"))))
Note : I'm pretty sure you cant run JavaScript from a EditorTemplate so it needed to be housed in the original view.
I know this is a really old question, but for those who are wondering why this doesn't work:
.TemplateName("Client").AdditionalViewData(new { Client = Model })
This code doesn't work because the only data you can pass through this method is static data. You can pass specific strings or numbers, like "Hello World", and that would work fine. For dynamic data with kendo, I've learned that it really depends on the situation, and your solution here works well.