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.
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");
}
})
)
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 have a WebGrid declared as below:
WebGrid grid = new WebGrid(rowsPerPage: Model.RowsPerPage, ajaxUpdateContainerId: "WebGrid");
I noticed where ever there is a data-swhglnk="true" attribute in a <a></a> e.g. Columns for sorting, the asynchronous behavior occurs and my WebGrid is updated.
I want to tap into the same behavior without much change to update the WebGrid on my custom interaction like user passed a filter string from a textbox or changed the number of rows per page from a dropdown, etc.
I also noticed that a big number is sent to the server like http://localhost:6066/Grid?sort=ID&sortdir=ASC&__swhg=1388556493888 when there is data-swhglnk="true".
Can someone please shed some light on this matter?
Basically, I had to resort to doing my own custom ajax call and replacing the div with returned data. I could not tap into WebGrid's async behavior with my own callbacks.
I've found an odd interaction with the Kendo for ASP.Net Grid control when adding records.
You can't create a true local datasource using the C# bindings - instead the published advice is to use an Ajax datasource with ServerOperations set to false.
I can programmatically add records to this grid without a problem and paging works fine when using the numbered part of the pager. However when clicking on any of the navigation buttons on the page (first, previous, next, last) the changes appear to be lost and the grid reverts to showing the original data. However if I set the page using javascript it will then show the correct data.
This problem doesn't occur if I replace the datasource on the C# grid with one I have created via javascript.
How about your code for "adding records".
In my project(ASP MVC 4 + kendo Wraper). I custom datasource by this way:
//Get DataSource object
var dataSource = $('#myGrid').data('kendoGrid').dataSource;
//Pusth new data to Data-Source
dataSource.transport.options.data.Data.push(objNewItem);
//Re-counting number of records
dataSource.transport.options.data.Total = dataSource.transport.options.data.Data.length;
This code have been working great up to now.
You can change page, use "first, previous, next, last" function or you can reload datasource/go to specific page number like this:
dataSource.read();
dataSource.page(1);
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"});