I have a kendo mvc grid which is basically like this:
#(Html.Kendo().Grid<baseballViewModel>()
.Name("baseball")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Index", "baseball"))
.ServerOperation(false)
)
.HtmlAttributes(new { style = "height:175px;" })
.Columns(col => {
col.Bound(player=> player.Date).Width(85);
col.Bound(player=> player.Year).Width(55);
col.Bound(player=> player.Name).Width(150);
col.Bound(player=> player.team).Width(120);
}).Sortable()
.Scrollable()
.Pageable()
)
Now, Im trying to insert a new column with button(on each row). Each button when clicked fires an event which passes player name to a controller. I have tried using col.Template() after the fourth column. But, no luck with that. Is there any way to do this?
I used this way to achieve this.
{
field: "Image", title: "#Application.Instance.Strings.Event_Grid_More", width: "60px", template: "<img src='/Content/Themes/Default/images/Door.png' onclick='showDetails()' id='door' width='20' height='20'/><div id='cardholderdetails' class='popup'></div>"
}
I am not using htmlhelpers though.
try to use custom command........
http://demos.kendoui.com/web/grid/custom-command.html
Related
I have a problem with the Kendo UI ListView pagination. When the ListView changes, the previous set page will not change in listview. I have to make the initial page ie. page 1
I'm using MVC razor control
#(Html.Kendo().ListView<M.Models.HomeModel>()
.Name("listView")
.TagName("div")
.ClientTemplateId("listingtemplate")
.Events(e => e.DataBound("listviewDataBound"))
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("M_Read", "Home").Data("queryParameters"));
dataSource.PageSize(12);
dataSource.ServerOperation(false);
})
.Pageable()
)
Maybe change "Pageable" to this:
.Pageable(pageable => pageable.Refresh(true))
Try removing dataSource.ServerOperation(false);, so paging can be done server-side.
Try this:
var grid= $("#grid_name").data("kendoGrid");
grid.dataSource.read(); // perhaps without this line
grid.dataSource.page(1);
I have a Kendo dropdownlist like below:
#(Html.Kendo().DropDownListFor(m => m.Country_ID)
.Name("Country_ID")
.DataTextField("COUNTRY_NAME")
.DataValueField("COUNTRY_CODE")
.OptionLabel("Select Country")
.DataSource(source => source.Read(read => read.Action("GetCountry", "Test")).ServerFiltering(true))
)
I need to change the option label text based on when a ID present in viewbag. Can anyone help me with this?
I have a MVC View with a simple Kendo UI Grid:
#(Html.Kendo().Grid(Model.Positions)
.Name("Test")
.Columns(columns =>
{
columns.Bound(p => p.Name);
columns.Command(command => { command.Edit(); });
})
.Editable(ed=>ed.Mode(GridEditMode.PopUp).TemplateName("Position").Window(w => w.Width(600)).Window(w => w.Title("Byrå")))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model => model.Id(p => p.Id))
.Update(update => update.Action("Update", "Office"))
.Read(read => read.Action("Get", "Office")
)
)
)
Under Shared/EditorTemplate I have added Postion.cshtml under Shared/EditorTemplates. The edit open as it shoulds and everything is fine if I use for example:
#Html.TextBoxFor(model => model.Name)
However, I can't use LabelFor since that will display the name of the property and not the value. It also seems like the grid instantiate the popup together with the grid. The values in TextBoxFor is updated when I click on Edit, but if I use #Model.Name it does not. It will always be empty.
I also tried and hide some fields depending on the value of one of the fields, but since I can't use #Model it wont work.
Anyone know how to get around this?
One of Kendo's answers to me was something like this. I haven't got it to work in my case yet, but it might help you. If you came up with a different solution to this issue could you share it?
In you custom editor.
text/javascript
function sendName() {
var grid = $('.k-grid').data().kendoGrid;
var tr = grid.tbody.find('.k-grid-edit-row');
var model = grid.dataItem(tr);
var result = {
name: model.Name
};
return result;
}
They are inspecting the html and assigning first the grid, then the selected row of the grid then mapping the fields of the row to the columns of the Grid.
I have MVC project. In this project i used Telerik window as popup and for content of the window i used Telerik MVC grid. When i run the program i see popup and grid inside it but when i clicked in a sort or filter.
It opens another page and show the grid on it. My problem is how can i render grid for sorting and filtering in a popup page that's partial view?
This is code of my window popup:
div class="t-rtl">
#{ Html.Telerik().Window()
.Name("PersonelList")
.Title("جستجوی کاربران")
.Content(#<text>#Html.Action("PersonelGridPopup", "Shared")</text>)
.Width(500)
.Height(300)
.Scrollable(true)
.Draggable(true)
.Visible(false)
.Render();
}
</div>
and this is code of my partialview for grid
#(Html.Telerik().Grid(Model)
.Name("PersonelGrid")
.Columns(columns =>
{
columns.Bound(o => o.PersonnelNumber).Width(150).Title("کد پرسنلی").Template(#<text><div><a class="popup" onclick="SendValue(this.innerHTML)">#item.PersonnelNumber</a></div></text>);
columns.Bound(o => o.Name).Width(100).Title("نام");
columns.Bound(o => o.Family).Title("نام خانوادگی");
columns.Bound(o => o.OrgPosition1.Title).Title("سمت سازمانی");
})
.Sortable()
.Filterable()
.Localizable("fa-IR")
.Footer(false)
)
#{ Html.Telerik().ScriptRegistrar().Globalization(true); }
Your grid has to implement AJAX binding. Look at http://demos.telerik.com/aspnet-mvc/razor/grid/ajaxbinding?theme=vista.
I've build a CGridView menu, and I want to always display the pager
(even when it's showing all the data and the navigation is not needed)
This is the current code I have:
$this->widget('zii.widgets.grid.CGridView',
array('dataProvider'=>$search,
'columns' => $columns,
'itemsCssClass' => 'list_table',
'template' => '{pager}{summary}{items}',
'pager' => array(
'cssFile'=>false,
'class'=>'CLinkPager',
'firstPageLabel' => '<<',
'prevPageLabel' => '<',
'nextPageLabel' => '>',
'lastPageLabel' => '>>',
'header' => '',
'footer' => $footer_btns,
),
'pagerCssClass' => 'pagination',
));
You could do this by overriding the renderPager() method -- however, it seems that the pager gets put together in a few files so one way to do it by only overriding one class would be to:
override zii.widgets.grid.CGridView to add your custom renderPager() method with something like:
Yii::import('zii.widgets.grid.CGridView');
class MyGrid extends CGridView {
public function renderPager() { ... }
}
the default renderPager() function is here.
What you want to do is look for the line that tests for pager content:
if($pager['pages']->getPageCount()>1) {
and change the "else" statement to put in your default "empty" pager content, which could use the same <ul> structure. Since you are not providing any navigation for the blank view, you don't need to worry about that data if this is used in multiple places. That could look something like:
else {
echo '<div class="'.$this->pagerCssClass.'">';
## YOUR CUSTOM "EMPTY PAGER" HTML HERE ##
echo '</div>';
}
You might need to define a couple extra css classes as well. On pages where only part of the pagination is showing (e.g., the first and last page), you can use CSS to redefine the ".hidden" class(es).