Consider I have below mentioned Telrik Grid and first time it is loaded by employee details(name, Description). I want to add a row in telrik grid when i click add button which is out side of grid. My problem is how to add new record with existing record. I mean how to rebind the grid.
#(Html.Telerik().Grid<Project.Models.Employee>()
.Name("myName")
.DataKeys(keys => keys.Add(c => c.EmpId))
.Columns(columns => {
columns.Bound(o => o.Name).Width(200);
columns.Bound(o => o.Description).Width(400);
})
)
Please, provide me better solution. Remember my button out side the grid.
Take a look at the following example. This demo explains how to do the editing with the grid using AJAX.
http://demos.telerik.com/aspnet-mvc/grid/editingajax
Go through the demo - things are pretty clear what to do.
Lohith (Tech Evangelist, Telerik India)
If you in client side, then you can use javascript function rebind():
var grid = $("#Grid").data("tGrid");
//send additional arguments by passing them as a literal JavaScript object
grid.rebind({customerID : "ALFKI"});
But for more custom answer i need more information about your scenario. Is it ajax binding, server binding, or else. How do you add row (is it editing in cell or else) etc.
'It could be helpfull'
var grid = $("#Grid").data("tGrid");
//send additional arguments by passing them as a literal JavaScript object
grid.rebind({customerID : "SAJJAD"});
Related
How I can suppres read action in kendo grid mvc which depends on field in model which send to this grid?
For example I send false value and I dont call read action
As JamieD77 mentioned one of the ways to do this is to use the AutoBind option of the Grid (not the DataSource):
#(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.AutoBind(Model.ShouldLoad)
Using the above approach however have some drawbacks - for example if the "Sortable" option of the Grid is enabled and the user try to sort the empty Grid, it will result in "Read" request (the Grid will try to fetch data from the server). That why I would suggest ot instead conditionally hide the whole Grid or conditionally remove the "Read" option of the DataSource and bind the Grid to empty array using it's "BindTo" option.
I also need to conditionally suppress the grid's read action, based on a value in the model (there was no reason in this case to make a call to the server). Thanks to the answer by #Vladimir lliev, where he mentioned NOT using AutoBind, but instead removing the "Read" action from the DataSource and binding to an empty array.
This pointed me in the right direction, but I didn't know how to do that with the razor syntax. I figured it out, so I'm sharing for anyone else who needs this.
#(Html.Kendo().Grid<SomeNamespace.Model>(
// If you need to optionally bind to an empty datasource in certain scenarios,
// use the grid's constructor. Also, conditionally enable the DataSource's "Read"
// action. Note: it's not enough to just conditionally enable the "Read" action,
// since the grid still makes a request for some reason, but when you use an empty
// array AND disable the "Read" action, no call is made to the server.
Model.ShouldGridRead ? null : new SomeNamespace.Model[] { }
)
.Name("MyGrid")
.Columns(cols =>
{
})
.DataSource(ds => ds
.Ajax()
.Batch(true)
.Model(model =>
{
})
.Read(a =>
{
if (Model.ShouldGridRead)
{
a.Action("Some_Action", "Some_Controller");
}
})
)
I am using Grid control from Telerik Extensions for ASP.NET MVC. I have loaded the grid in the partial view using Ajax binding. When I sort the grid columns, the styles specified in RowAction are lost.
#(Html.Telerik().Grid<MySite.DTO.CaseDto>(Model.Cases)
.Name("CasesGrid")
.HtmlAttributes(new { style = "width: 1000px;" })
.DataBinding(dataBinding => dataBinding.Ajax()
.OperationMode(GridOperationMode.Client)
.Select("DI_UrgentCases_AjaxRead", "Dashboard")
)
I am using RowAction to highlight certain rows based on the values of the particular cell.
.RowAction(row =>
{
if (row.DataItem.IsUrgent)
{
row.HtmlAttributes["style"] = "background:#FFBABA";
}
})
I tried the suggestion given in http://www.telerik.com/forums/ajax-binding-and-rowaction-conflict- but it did not work. I tried rebinding the grid on client side, but when I do that, the sorted grid appears in the new page instead of within the partial view.
Please help!
Finally, I found a solution to my issue. My problem was that every time I sorted the grid, all the rendering and events bindings were lost. Every time the grid was rebind using ajax binding, it only returned the data and loaded in the grid.
To retain any css styles and event binding, I had to apply the css again and rebind the events after the data was bound to the grid.
Telerik extension provides a client event called "OnDataBound" which is called when the grid is data bound via ajax or web-service. (Reference: Client Events for Telerik Extensions Grid
#(Html.Telerik().Grid<MySite.DAL.DTO.UserDto>(Model.Users)
.Name("MyUsersGrid")
.ClientEvents( events => events.OnDataBound("grid_OnDataBound"))
function grid_OnDataBound(e) { code for rebind, apply css...}
Then in function grid_OnDataBound(), we can define the code to rebind events and apply css when this event is raised on data bound.
Below I have 2 dropdown lists, both bound to an Angular model. The first is a Kendo dropdown, the second is just a standard MVC dropdown. They both correctly display their initial selections. The second one correctly updates its selected item when I make a change to the underlying Angular model. Why doesn't the first one do the same?
#(Html.Kendo().DropDownListFor(x => x.HomeProvince)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(Model.ProvinceList)
.OptionLabel("Select")
.HtmlAttributes(new { required = "required", ng_model = "model.HomeProvince", ng_pattern = "/^[1-9][0-9]{0,1}$/" })
)
#Html.DropDownListFor(x => x.HomeProvince, Model.ProvinceList, new { ng_model = "model.HomeProvince" })
Do not know Kendo, but I do know that if you are working with 3rd party libraries updating data bound to angularjs models. You need to use $scope.$apply. This will force the digest cycle and angular will take care of the binding.
I followed a tutorial for MVC5 about coding a helper extension to populate dropdownlists using enums. This works perfectly until using an edit view.
On a create page I fill the ddl and select no problem. But when I want to update the value on an edit view, using a ddl filled just as on the create, I can't default the actual value (from the database) as the displayed value.
I've searched high and low but starting to think it can't be done. I'm not sure what code will help so here goes;
My ddl on the edit view
#Html.EditorFor(model => model.ProjectStatus)
ProjectStatus is the enum that is used to retrieve the enum value in the helper extension and populate the ddl.
So my ddl may contain statuses such as:
New,
WIP,
Rejected,
Fixed,
Closed
and my current value may = New. So when I load the edit view I would like the value New to be defaulted in to the ddl, and be able to change this value by selecting another using the ddl.
The value I would like to default to is actually in the view (model.Status). I just can't work out how to include this in the code above.
I hope this makes sense and any help appreciated.
Thanks for reading.
I'm not exactly sure what your extension method looks like. If you want a more direct answer, you'll need to include more details on your specific implementation. That being said, here is some sample code from an edit.cshtml template on Autoquoter.com
<div class="control-group">
#Html.LabelFor(model => model.AddonType)
<div class="controls">
#Html.DropDownListFor(model => model.AddonType, EnumHelper.SelectListFor((AddonType)Model.AddonType))
#Html.ValidationMessageFor(model => model.AddonType)
</div>
</div>
Notice the parameter to EnumHelper.SelectListFor. We pass in the current value to the helper method. Then we add it as the final parameter to the SelectList constructor.
public static SelectList SelectListFor<T>(T selected) where T : struct
{
Type t = typeof(T);
return !t.IsEnum ? null
: new SelectList(BuildSelectListItems<T>(), "Value", "Text", selected.ToString());
}
For anyone that may be interested I fixed this using jquery.
I was getting hung up on drop downs filled by enums, razor and html helpers etc. I looked at the raw html produced and approached it from that angle.
The following code works for me but I'm no expert so there may well be better solutions
// set initial value of Status ddl
$(document).ready(function () {
var initialValue = $("##Html.IdFor(model => model.Status)").val();
$("select option").filter(function () {
return $(this).text() == initialValue;
}).prop("selected", true);
});
I hope this helps.
I have a Telerik Grid, with two columns I need to keep second column as drop-down list box with in the grid, I am using ASP.NET MVC control
Can any body tell me how to do this?
I need to do that for my project.
Here is how I did it:
columns.Bound(o => o.Role).ClientTemplate(
Html.Telerik().DropDownList()
.Name("RoleList<#= UserID #>")
.BindTo(new SelectList(UserController.GetRoles()))
.ToHtmlString()
);
The static method GetRoles returns a simple IEnumerable of String. You still can return a custom object by using a different SelectList constructor to specify Value and Text property of your custom object.
new SelectList(UserController.GetCustomRoles(), "RoleID", "ShortName")
You can set the template of the column to embed arbitrary HTML. If using Ajax binding - try the client template. The following online examples will be helpful:
Server templates
Client templates