How do I prevent the command buttons from wrapping in the command column on each of the grid rows? I want them to render in a straight, horizontal line even if they extend past the edge of the grid.
like this:
+ ---------------------------------------------------------+
| column 1 | ... | column n | [btn1] [btn2] [btn3] [btn4] |
+ ---------------------------------------------------------+
instead of:
+ -------------------------------------------+
| column 1 | ... | column n | [btn1] [btn2] |
| | | | [btn3] [btn4] |
+ -------------------------------------------+
I have used Kendo UI (version: "2014.1.416) as before, after I upgrade to "2015.1.408".
My browser console occur the following error: Uncaught TypeError: s.attr(...).kendoColumnSorter is not a function
Could anyone give me some suggestion ? Thanks you very much
Hi
I have created Kendo menu using Model binding and set the Area as shown below
@(Html.Kendo().Menu()
.Name("menu")
.BindTo(Model,mp=>
{
mp.For<MyModel>(binding => binding
.ItemDataBound((item, main) => {
item.Text = main.FormName;
if (main.ActionName != "")
{
item.Action(main.ActionName, main.ControllerName, new { area = main.AreaName });
// item.ActionName = main.ActionName;
// item.ControllerName = main.ControllerName;
}
})
.Children(main => main.Children));
})
)
Menus are loaded correctly with 2 levels and the actions are invoked from respective areas correctly. However for the parent node default action is set. Parent node is not assigned any action.
When Area is removed, the parent node does not have action. When setting area, parent node also gets Href
Warm Regards,
Veeralakshmi Jeyavelu
Hello,
I have a problem with grid pager translation: pagination buttons tooltips and "items per page" label appear always in english.
I've checked the messages translation scripts are linked and working as you can see in the attached screenshot, and other regions such as grid filters are ok.
What am I doing wrong?
Thanks for helping.
We just updated to the latest Kendo version (2015.1.408.545), and the view switcher now has a box stuck to the left that shows your current view. I hope there is a way to turn this off, as it is not desirable in the least, since the selected view already appears...selected. Anybody else get this? I checked the demos site, and it's not doing it there at all, so I'm not sure what I've done to get it.
Example:
Hi,
I am trying to create sortable editable list view with
cascading dropdown list in it
I have three problems:
1.
On adding new item in
Controllers “Editing_Create” action I
receive null values for properties from drop down lists (EntityTypeId and EntityId)
2.
When I am adding sortable
behavior to the list view, in the edit item mode the text input for the “Text” model property is disabled
3.
Minor issue: the max characters
validation is not working on text input for the “Text” model property
Besides these three issues the list view rendered as
expected
Thanks,
View:
<div class="demo-section">
<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>
</div>
<div class="demo-section">
@(Html.Kendo().ListView<QuickLinkViewModel>()
.Name("listView" + Model.ComponentId)
.TagName("div")
.ClientTemplateId("quickLinkTemplate")
.DataSource(dataSource => dataSource
.Model(model => model.Id("ComponentId"))
.Create(create => create.Action("Editing_Create", "QuickLink", new { parentId = Model.ComponentId }))
.Read(read => read.Action("Editing_Read", "QuickLink", new{parentId = Model.ComponentId}))
.Update(update => update.Action("Editing_Update", "QuickLink"))
.Destroy(destroy => destroy.Action("Editing_Destroy", "QuickLink"))
)
.Editable()
)
</div>
@(Html.Kendo().Sortable()
.For("#listView" + Model.ComponentId)
.Handler(".handler")
.Cursor("move")
.PlaceholderHandler("layout.footer.placeholder")
.HintHandler("layout.footer.hint")
.Events(events => events.Change("layout.footer.onChange"))
)
Editable Template:
<div class="quickLink-view
k-widget">
<input type="hidden" name="ParentId" value="#:ParentId#" />
<input type="hidden" name="SortOrder" value="#:SortOrder#" />
<span class="handler"> </span>
<span>
<input data-role="dropdownlist"
data-text-field="Text"
data-value-field="Value"
data-bind="value:
EntityTypeId"
value="#:EntityTypeId#"
data-source="layout.entityTypesData"
id="entityType#:id#"
name="EntityTypeId"
data-option-label="Select"
data-close="layout.footer.setValue"
data-val-required="*">
<span class="field-validation-valid" data-valmsg-for="entityType#:id#" data-valmsg-replace="true"></span>
</span>
<span>
<input data-role="dropdownlist"
id="entity#:id#"
name="EntityId"
data-auto-bind="false"
data-text-field="Text"
data-value-field="Value"
data-cascade-from="entityType#:id#"
data-bind="value:
EntityId"
value="#:EntityId#"
data-source="layout.entityDropDownDataSource"
data-option-label="Select"
data-close="layout.footer.setValue"
data-val-required="*" />
<span class="field-validation-valid" data-valmsg-for="entity#:id#" data-valmsg-replace="true"></span>
</span>
<span>
<input class="k-textbox"
data-val="true"
data-val-maxlength="Text
cannot be longer than 25 characters."
data-val-maxlength-max="25"
data-val-required="*"
id="text#:id#"
name="Text"
type="text"
value="#:Text#" />
<span class="field-validation-valid" data-valmsg-for="text#:id#" data-valmsg-replace="true"></span>
</span>
<div class="edit-buttons">
<a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
<a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
</div>
</div>
Model:
public class QuickLinkViewModel
{
public int ComponentId { get; set; }
[Required(ErrorMessage
= Errors.Required)]
public TgEntityType?
EntityTypeId { get; set; }
[Required(ErrorMessage
= Errors.Required)]
public int? EntityId { get; set; }
[Required(ErrorMessage
= Errors.Required)]
[MaxLength(25,
ErrorMessage = "Name cannot be longer
than 25 characters.")]
public string Text { get; set; }
public int SortOrder { get; set; }
public int ParentId { get; set; }
}
Create action in Controller:
[AcceptVerbs(HttpVerbs.Post)]
public async Task<ActionResult>
Editing_Create([DataSourceRequest] DataSourceRequest request, QuickLinkViewModel link, int? parentId)
{
var results = new List<QuickLinkViewModel>();
if (link != null && parentId != null &&
ModelState.IsValid)
{
link.ParentId = parentId.Value;
await Create(link);
results.Add(link);
}
return
Json(results.ToDataSourceResult(request, ModelState));
}
Thanks
I have a grid where each row has a custom command that opens a details modal. The details modal is populated with the contents of a kendo template. I want to include a kendo grid inside of that template.
Data structure is Contract (main page)->CoveredEquipment (first grid)->WearableParts (grid on modal)
My problem is that I get a javascript "invalid template" error when the page is loaded. It seems to not like
#= kendo.render(kendo.template($("\#wearablePartsGridTemplate").html()), WearableParts); #
in the modal template.
What am I doing wrong?
<script id=
"wearablePartsGridTemplate"
type=
"x-kendo-template"
>
@(Html.Kendo().Grid<FieldServiceWeb.Areas.Admin.Models.ServiceContract.WearablePartViewModel>()
.Name(
"wearablePartsGrid"
)
.DataSource(dataSource =>
dataSource.Ajax()
.Model(model => model.Id(p => p.PartNumber))
.ServerOperation(
false
)
.Update(
"Update"
,
"ServiceContracts"
,
new
{ area =
"Admin"
})
.Destroy(
"Delete"
,
"ServiceContracts"
,
new
{ area =
"Admin"
})
.Create(
"Create"
,
"ServiceContracts"
,
new
{ area =
"Admin"
})
)
.Columns(columns => {
columns.Bound(c => c.PartNumber).Title(
"Part"
);
columns.Bound(c => c.Description);
columns.Bound(c => c.IsActive).Title(
"Active"
);
columns.Command(c => c.Destroy().Text(
"Delete"
));
})
.ToClientTemplate())
</script>
<script type="text/x-kendo-template" id="wearablePartsContent">
<label>Wearable parts for <strong>#: CSPId # - #: Description #</strong></label>
#= kendo.render(kendo.template($("\\#wearablePartsGridTemplate").html()), WearableParts); #
</script>
<script>
function openWearableParts(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$("#wearablePartsModal").find(".modal-body").html(wearablePartsTemplate(dataItem));
//createGrid();
$("#wearablePartsModal").modal("show");
}
</script>