all my grids will have in the first column, some image links to edit, delete and open the record.
I can't get this column to be fixed at 80 pixels.
Here is my code:
#(Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(keys => keys.Add(c => c.Handle))
.DataBinding(dataBinding => dataBinding
.Ajax()
.Select("AjaxPesquisar", "Especialidade")
.Update("AjaxAtualizar", "Especialidade")
.Delete("AjaxDelete", "Especialidade"))
.HtmlAttributes(new { #class = "grid-padrao" })
.ClientEvents(events => events
.OnDataBound("atualizarCss")
)
.Columns(columns =>
{
columns.Template(#<span><a class="formatacao" href="/Especialidade/Details/238" image="show"></a><a class="formatacao delete-link" href="/Especialidade/AjaxDelete/238" image="delete"></a><a class="formatacao" href="/Especialidade/Edit/238" image="edit"></a></span>).Width(80);
columns.Bound("Descricao").Title("Descrição");
columns.Bound("Handle").Title("Código");
})
.Pageable()
.Sortable()
)
Column widths work best if the table-layout CSS setting of the table is set to fixed. You can either make your grid Scrollable() or use the following CSS:
<style>
.t-grid table
{
table-layout: fixed;
}
</style>
You can find more info about tables here.
I have the same issue too! What I did to get it work is to add:
columns.Bound(o => o.YourColumn)
.HtmlAttributes(new{#style="display:inline-block;width:80px;" });
Hope this helps.
Related
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.
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.
I'm trying to add a DropDown inside kendo grid but it displays a TextBox
#(Html.Kendo().Grid((IEnumerable<Doc.Web.Models.Vendor.DocumentsDetails>)Model.documents_lst)
.Name("grid").Scrollable()
.Columns(columns =>
{
columns.Bound(o => o.DocumentRevisionID).Visible(false);
columns.Bound(o => o.Documentnumber).Title("Document #").Width(150);
columns.Bound(o => o.Revision).Title("Revision").Width(80);
columns.Bound(o => o.RevisionDate).Format("{0:dd/MM/yyyy}").Title("Rev Date").Width(85);
columns.Bound(o => o.RevisionStatus).Title("Revision</br> Status").Width(100);
columns.Bound(s => s.DocNumberPurpose).ClientTemplate((#Html.Kendo().DropDownList()
.BindTo((System.Collections.IEnumerable)ViewData["Purpose"])
.Name("DocNumberPurpose")
.DataTextField("Text")
.DataValueField("Value")
.ToClientTemplate()).ToHtmlString());
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(o => o.DocumentRevisionID))
.Model(model=>model.Field(o=>o.DocNumberPurpose).Editable(false))
)
.Events(ev=>ev.DataBound("onGridDataBound"))
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.DocumentRevisionID))
.Read(read => read.Action("EditingInline_Read", "DesignCoverSheet").Data("additionalInfo"))
)
)
<script>
function onGridDataBound(e) {
$('#grid script').appendTo(document.body);
}
</script>
You're very close actually:
columns.Bound(property => property.neatProperty).Width(38).EditorTemplateName("neatPropertyDropDownList").Title("NeatProperty")
And then in a separate view called "neatPropertyDropDownList.cshtml"
#using System.Collections;
#(Html.Kendo().DropDownList()
.Name("NeatProperty")
.DataTextField("Value")
.DataValueField("Text")
.BindTo("don't forget to bind!")
)
Check this article for a detailed example of exactly what you are trying to do, specifically in step 3
Step 3 – Embedding the Kendo Drop-down List
Basically you can do that in the following manner:
Inside the Kendo grid the property foreign key of your model must be linked to a EditorTemplateName that accepts a template name. As an example:
columns.Bound(e => e.CompanyId).EditorTemplateName("CompaniesList").Title("Company").ClientTemplate("#:CompanyName#");
The template name in the above example is "CompaniesList" which will be a cshtml view file inside EditorTemplates folder.
As per the above article:
The EditorTemplateName specifies to the grid that when either in Create or Edit modes, the template should be placed in the data file named "CompaniesList" that is found in the directory by name of EditorTemplates directory. The subsequent step therefore involves the creation of a folder by name of "EditorTemplates" and place an empty view in it by name of "CompaniesList". The code bit "ClientTemplate(“#:CompanyName#”)" means that when display is in the view mode, (that is, not creating or editing) CompanyName has to be displayed (in this case, it is "Microsoft"). Once this is complete, all what remains to be done is the creation of drop-down list which will be used in the view.
After you create the "CompaniesList" editor template file, you define the Kendo drop down list inside it as follows:
#using System.Collections
#model System.Int32
#(Html.Kendo().DropDownList()
.BindTo((IEnumerable)ViewBag.Companies)
.OptionLabel("- Select Company - ")
.DataValueField("Id")
.DataTextField("Name")
.Name("CompanyId")
)
Note that the drop down Name must be exactly as the column property in the grid which is "CompanyId"
You might look into Kendo Grid ForeignKey Column concept. It can be used as
columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName").Title("Category").Width(150);
Detail can be found here http://demos.telerik.com/kendo-ui/web/grid/foreignkeycolumn.html
I'm tryin to export kendo grid to excel: i tried this method:
http://jsfiddle.net/SZBrt/4/
But i have a kendo grid already that gets data on button click.
I want another button to excel the grid with datas on export button click as mentioned in jsfiddle.
#(Html.Kendo().Grid<KendoGridExportExcelMvc.Models.Sales>()
.Name("Sale")
.Columns(columns =>
{
columns.Bound(p => p.R).Width(100);
columns.Bound(p => p.Cur).Width(100);
columns.Bound(p => p.goods).Width(100);
columns.Bound(p => p.cost).Width(70);
columns.Bound(p => p.isdeleted).Width(60);
})
.Sortable()
.Scrollable()
.HtmlAttributes(new { #style = "Font:12px calibri; " })
.Filterable()
)
how to bring this inside the js file. please help,
Well, dude, you are just rendering HTML.
If you want to generate a real CSV file, just use one of the classes from the System.IO namespace, and write directly to the Response's OutputStream.
See this article for reference on how to do it:
Writing to Output Stream from Action
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.