I have this grid in my application.
#(Html.Kendo().Grid<Something>
()
.Name("Something")
.Selectable(builder => builder.Type(GridSelectionType.Row).Mode(GridSelectionMode.Multiple).Enabled(false) )
.ClientRowTemplate(Html.Partial("Partials/Something").ToHtmlString())
.TableHtmlAttributes(new { #class = "table table-stripped" })
.Scrollable(scrollable => scrollable.Height(100).Enabled(true))
.Columns(columns =>
{
columns.Bound(h => h.Something).Title("Something").Width(120);
columns.Bound(h => h.Something).Title("Something").Width(120);
columns.Bound(h => h.Something).Title("Something");
}))
This grid is populated when I select another grid.
Once it is populated, I should be able to select multiple rows.
I looked evrywhere for a value that I could change, but no luck so far.
How or where can I change this
.Selectable(builder => builder.Type(GridSelectionType.Row).Mode(GridSelectionMode.Multiple).Enabled(false) )
to
.Selectable(builder => builder.Type(GridSelectionType.Row).Mode(GridSelectionMode.Multiple).Enabled(true) )
programmatically?
Tks in advance.
Rui Martins
You should use the following code:
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
You can view a demo here.
Related
I'm trying to display two Kendo UI grids on two separate tabs of a Kendo tabstrip. It displays only the grid that is inside the tab with selected option being true. Here is my code:
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(items =>
{
items.Add().Text("Tickets")
.Selected(true)
.Content(
#<text>#(Html.Kendo().Grid((IEnumerable<Bugger.Models.Ticket>)ViewBag.Tickets)
.Name("grid2")
.Columns(columns =>
{
columns.Bound(tickets => tickets.TicketID);
columns.Bound(tickets => tickets.Description);
})
.Pageable()
.Sortable()
)
</text>
);
items.Add().Text("Technicians")
.Content(#<text>#(Html.Kendo().Grid((IEnumerable<Bugger.Models.Technician>) ViewBag.Technicians)
.Name("grid1")
.Columns(columns =>
{
columns.Bound(technician => technician.UserID);
columns.Bound(technician => technician.FirstName);
})
.Pageable()
.Sortable()
)</text>);
}))
I got my solution working. For future reference, I'm posting here.
The problem was that although I included "kendo.all.min.js" into my layout file, "kendo.aspnetmvc.min.js" was not included, an in order for this to work properly, I had to include this second javascript file too.
I added it to my _Layout.cshtml file.
My kendo multiselect control as displays below clears the selected values on page submit. When i submit the page and it contains validations errors, the selected items in the multiselects get lost. Even though its gets fill in the HttpPost method of the controller. Please help me find a solution for this behaviour.
#(Html.Kendo().MultiSelectFor(m => m.GemeentesIds)
.HtmlAttributes(htmlAttrMultiselect)
.DataTextField("Name")
.DataValueField("Id")
.Placeholder(Model.Disabled ? "" : "Selecteer gemeentes indien van toepassing...")
.Value(Model.Gemeentes)
.AutoBind(false)
.DataSource(source => {
source.Read(read => {
read.Action("GetGemeentes", "General").Data("GemeenteFilter").Type(HttpVerbs.Post);
})
.ServerFiltering(false);
})
)
Controller:
if (model.GemeentesIds != null)
model.Gemeentes = _organisatorischeEenheidRepository.GetGemeentesByIds(model.GemeentesIds);
Try this and see if it helps. Also assign a Name attribute using Name() method. In your case, I think it should be Gemeentes.
So your multi-select code would look like:
#(Html.Kendo().MultiSelectFor(m => m.GemeentesIds)
**.Name("Gemeentes")**
.HtmlAttributes(htmlAttrMultiselect)
.DataTextField("Name")
.DataValueField("Id")
.Placeholder(Model.Disabled ? "" : "Selecteer gemeentes indien van toepassing...")
.Value(Model.Gemeentes)
.AutoBind(false)
.DataSource(source => {
source.Read(read => {
read.Action("GetGemeentes", "General").Data("GemeenteFilter").Type(HttpVerbs.Post);
})
.ServerFiltering(false);
})
)
Source link which helped me resolve a similar issue:
http://www.telerik.com/forums/multiselect-and-form-not-sending-values-back
I have a grid which has default grouping by one of the columns e.g "Important". I allow grouping by other columns, but I want to lock my default grouping. So no one can remove this grouping.
I didn't find any property to achieve this. I tried using the DataBound event change class and removed the remove button of this column in the group header but later the Kendo script reverted this back to its original state.
#(Html.Kendo().Grid<Model>()
.Name("Grid")
.DataSource(ds => ds
.Ajax()
.PageSize(20)
.ServerOperation(false)
.Model(m => m
.Id(z => z.Id))
.Read(r => r.Action("myAction", "myController"))
.Group(g=>g.AddDescending(c=>c.Important))
)
.Columns(c =>
{
c.Bound(d => d.Important)
.Title("This is important")
.Groupable(false)
.Visible(true)
.Hidden(true);
c.Bound(d => d.otherColumn)
.Title("otherColumn")
.Groupable(true);
....
}
.Groupable()
.Events(e=>e
.Change("onChange")
.DataBound("dataBound")
)
)
I have a simple kendo grid that I am trying to associate an editor template with. The foreign key is the only property that is sent down to the client so I can't give the editor template a model type of the foreign key property.
Configuration for Kendo Grid
protected override void Configure(GridBuilder<AreaModel> grid)
{
grid.Columns(c =>
{
c.Bound(a => a.Description);
c.Bound(p => p.CompanyId).ClientTemplate("#= CompanyDescription#").EditorTemplateName("DropDown/CompanyId").Width(160);
c.Command(command => command.Edit()).Width(200);
c.Command(command => command.Destroy()).Width(110);
});
grid.ToolBar(toolbar => toolbar.Create().Text("New Area"));
grid.Editable(edit => edit.Mode(GridEditMode.InLine));
grid.DataSource(d => d
.Ajax()
.Model(m => m.Id(p => p.Id))
.Create("GridInsert", "Area")
.Update("GridUpdate", "Area")
.Destroy("GridDelete", "Area"));
}
}
The editor template is straight forward as well. Everything works except that the value is not posted to the server.
#using Kendo.Mvc.UI
#(Html.Kendo().DropDownList()
.Name("CompanyId")
.DataValueField("Id")
.DataTextField("Name")
.DataSource(d => d.Read("CompaniesData", "Company")))
Can anybody help me out on this one?
modelview propoerty name which should maintain dropdownlist's selected value must be the Name of dropdownlist in editorTemplate and the type of datavaluefield and property should be same.
My first problem is : I use kendo grid with Single Select mode and I need when view loaded for the first time, the first row is selected, in other words, i want to select the first kendo grid row programatically.
moreover other problem is i insert radiobutton column in that grid , and i want synchronize
radiobutton select with row select , in other words, i want that when user select row,it causes it's radiobutton Selected
Please help me
tnx
this is the code:
#(Html.Kendo().Grid<CommonData.Domain.LegalEntityPhone>()
.Name("SMSGrid")
.HtmlAttributes(new { style = "width:800px;" })
.Selectable(selectable =>
selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.Columns(columns =>
{
columns.Bound(c => c.Id)
.Title(" ")
.ClientTemplate(" <input type='radio' id='Approve' name='chkApprove' />");
columns.Bound(c => c.Number)
.Title("Destination")
.HeaderHtmlAttributes(new { style = "text-align: center;" })
.HtmlAttributes(new { style = "text-align: center; });
columns.Bound(c => c.CityCode)
.Title("City Code")
.Width(30)
.HeaderHtmlAttributes(new { style = "text-align: center" })
.HtmlAttributes(new { style = "text-align:center;width:30px" });
columns.Command(command => { command.Edit(); }).Width(150);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Events(events => events.Change("OnChange"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
})
.Read(read => read.Action("LegalEntityPhoneInfo_Read", "Message"))
.Update(update => update.Action("LegalEntityPhoneInfo_Update", "Message"))
)
)
There is no such thing as making the row selected in the controller because the Grid is all created on the client. You can use the dataBound event to make the first row selected.
e.g.
$(function(){
$('#GridName').data().kendoGrid.bind('dataBound',function(e){
this.select(this.tbody.find('>tr:first'));
})
})
Or use one instead of bind to make the row selected only when the page is loaded, not each time when the Grid is rebound - sort,filter, etc. Check documentation for more info.
If you are unfamiliar with jQuery, I highly recommend you take an online free tutorial from http://jqueryair.com/.
Assuming your project is referencing the jQuery script in your _Layout page, all you should have to do is add an Event handler for Databound to the grid:
.Events(events => events.DataBound("Grid_Databound"))
Then just paste this script onto the page:
<script>
function Grid_Databound() {
var grid = $("#MyGridName").data("kendoGrid");
row = grid.tbody.find(">tr:not(.k-grouping-row)").eq(0);
grid.select(row);
}
</script>
I'm sure the same script that zeinad added would work as well, always more than one way to skin a cat. As far as making the radio button show selected if the row is selected, I think if you watched the tutorial I mentioned, you should be able to figure it out. Post back if you need more help.