I have a Kendo MVC Grid that has the following edit and delete command buttons.
The code looks like this:
columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(86);
As you can see, the box each icon is in is way too big and takes up unnecessary space. I'd like to keep the icons but just shrink the space they consume. Can I do this?
Related
I have a grid which opens a custom pop-up window
Editable(ed =>
ed.Mode(GridEditMode.PopUp).TemplateName("AddEditWorkOrder").Window(w
=> w.Resizable(r => r.MinWidth(1200).Enabled(true)).Title("Add Work Order"))
In the pop up i have a tab strip and some of the tabs have a grid inside. When I change the edit mode of some of them to
.Editable(ed => ed.Mode(GridEditMode.InLine))
the overview grid edit mode is set to inline edit, which is unacceptable. Do you have any clue how to set the inner grid to inline?
I am using a kendo grid to display my data. I want to show another kendo grid inside one cell of my kendo grid. Is there anyway I can achieve this?
There is a 'way' (using the "template" option of the corresponding Grid column), however I would suggest to instead use Grid hierarchy to show details about current row:
Grid: hierarchy demo
Nesting another Grid inside cells of current Grid is not a good idea as it will not be usable, it will reduce the page performance etc.
I turn to you stackoverflow!
I'm using a kendo ui batch grid with InCell editing set and am wanting to know a way to set a particular column into edit mode.
I've tried using editCell, and so far it hasn't caused any of the cells to go into edit mode :(
In this particular case, we have a ClientTemplate column specified which has a button (really its a link...) in it. When the user clicks the button I would like a particular cell in that row to switch to edit mode. For reference here's what the specific column template looks like:
columns.Template(t => { }).HeaderTemplate("")
.ClientTemplate(#"
<a href='javascript: void(0)' class='abutton SecondaryActiveBtn' onclick='editVariableRate(this)' title='Edit'>Edit</a>")
.Width(100).Title("");
Here is the particular javascript method that gets called on the button click:
function editVariableRate(element) {
grid = $("#variableFee").data("kendoGrid");
var cell = $(element).closest("tr").find("td:eq(2)");
grid.editCell(cell);
}
Am I doing something wrong here because the particular column never goes into edit mode?
For reference, I can do the following successfully using the same "cell" variable:
var cellIndex = grid.cellIndex(cell);
and cellIndex gets assigned correctly, so I don't think its a problem of selecting the particular cell...
Anybody have any ideas?
Figured it out! It was the link that was the cause of the problem :( Swapping that to be an input button was the only thing that was needed. bangs head into desk.
Initially we are using Telerik ASP.NET combo box. For this having load on demand option ( link). Now we are moving to Kendo UI combo box.
This combo box doesn't contain all options (which are present in telerik asp.net combobox) like Load on demand , ShowMoreResultsBox.. etc.
Could you please provide solution for updating item on Load on demand
#(Html.Kendo().ComboBox()
.Name("fabric")
.Filter("contains")
.Placeholder("Select fabric...")
.DataTextField("Text")
.DataValueField("Value")
.DataSource(source =>
source.Read(read =>
{
read.Url("http://localhost:59590/api/Search/LoadonDemand");
}).ServerFiltering(true))
.HighlightFirst(true)
.IgnoreCase(true)
This is the post for this on Kendo Premium forums itself. Just updating so that SO also has its update: Update items for ComboBox with Load on demand
Just copying their reply.
1st reply
Basically to achieve the "Load on demand" behavior you should also set
the "AutoBind" option to false - that way the ComboBox will request
the data only when requested by the user. Additionally you can modify
the server to restrict the response to for example 5 records. That way
the ComboBox will load only 5 records, related to current search text
on demand.
2nd reply
I'm afraid that loading items on demand inside the ComboBox result
drop-down currently is not supported out of the box and the solution
from my previous reply should be used instead. Also please note that
the KendoUI UserVoice already have such idea added and you can vote
for it here (most voted ideas are included in next KendoUI releases).
The Telerik MVC grid I am using is shown below. The data is displaying in the grid but the
filterable attribute is not working, though the "Filter Icon" is displaying. I have registered the scripts and css in the layout.cshtml but I dont know why the filterable action is not working and sometimes the Column Widths are ignored and the grid is rendering in a default size.
#model IEnumerable<Customers>
#(Html.Telerik()
.Grid(Model)
.Name("Customers")
.PrefixUrlParameters(false)
.Columns(columns=>
{
columns.Bound(c => c.CustomerId).Title("CustomerId").Width(50);<br/>
columns.Bound(c => c.CustomerStatus).Title("Customer Status").Width(70);
columns.Bound(c=>c.CityId).Title("CityID").Width(50);
}
.Filterable()
.Sortable(sort=>sort.SortMode(GridSortMode.MultipleColumn))
)
layout.cshtml (registered scripts and stylesheets):
#(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css").Combined(true).Compress(true)))
#(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))
In order to specify the size of the grid, you could wrap it in a div:
<div style="width:300px;">
#(Html.Telerik()...
</div>
Also, make sure you enable sorting/filtering in your grid:
.Sortable(sorting => sorting.Enabled(true))
.Filterable(filtering => filtering.Enabled(true))
If it still doesn't work, ensure that the script file being created by the Telerik script manager can be served by your web server (view source, grab the .axd link and paste it into your address bar).
One more thing:
Don't forget that the columns will expand to accomodate all their
content so be sure your column widths match your parent div.
You could also use Firebug to examine any script issues in your page.
if you are using Datakeys or if you have enabled custom binding on the grid action method, removing that might solve the problem.
I have discovered a very interesting thing. The filtering on my grid was not working. The icon was there, but it was not clickable. And it all was acting weird. For example at sorting it was adding a long tail to the query string. And I spent two days on this. Until I found the problem. I had four tabs on a page, and in each I was loading a partial. Each partial was containing one grid. The first three grids (on the first three tabs) were working fine. The fourth was not. I have moved the last partial in the first tab, it was working fine, but the grid in the third tab was not working anymore. The problem was that only three grids on a page were working. If I had all the four grids on the first tab, only the first three were working, the fourth was not. Very weird. Didn't find the source of the problem though...
Telerik grids really are terrible. If a dataype is datatimeoffset for a column the filter will never work.