I am very new to Kendo UI. I am using grid control.
I have issue in selecting or changing background color of a particular row. Can anyone help me how can I do this?
My code goes something like this
#(Html.Kendo().Grid<EmpModel>()
.Name("tgrid")
.Columns(columns =>
{
columns.Bound(x => x.EmpId).Width(100).Title("Emp Id");
columns.Bound(x => x.EmpNameName).Width(100).Title("Emp Name");
columns.Bound(x => x.Comments).Width(100).Title("Comments”);
})
In ViewData["EmpId"] I have EmpId stored.
ViewData["EmpId"] = 110023
When the above grid is populated I want to highlight or select or expand the row has EmpId 110023.
What is the best way to do?
Thanks in advance
Param
Thanks in advance
Param
The question is not clear, please clarify. Basically the uid field of your model contains the unique identifier which is added to each TR automatically by the Grid. If you want to style the columns based on the data check this code library.
Related
I have a TreeView that displays a list of database records. When a user selects a record, I populate a grid with the related record details. The foreign key is sourceid.
I pass the selected record's id like this:
.Read(read => read.Action("AquisitionNotes_Read", "AquisitionNotes").Data("GetCurrentSourceID"))
The GetCurrentSourceID function is simply:
function GetCurrentSourceID() {
return {sourceid: currentSourceID };
}
That works.
But when I want to add a new record, how do I get the currentSourceID value into the Post? If I try the obvious:
.Create(update => update.Action("AquisitionNotes_Create", AquisitionNotes").Data("GetCurrentSourceID"))
The value from the editor (0 of course) gets precedence and gets passed.
How do I force my actual sourceid to overwrite the editor's value? Or am I solving the problem in the wrong way?
Brad
To pass the default value to the create you should use DataSource
for example
#(Html.Kendo().Grid()
.DataSource(data=>data.Ajax()
.Model(m=>{
m.Field(field=>field.Whatever).DefaultValue(TheValue);
})))
Got it figured out thanks to the lead that #user5135401 gave me.
user5135401's solution works if you want to set a static default value. I do not know of a way to do a dynamic default value form Razor. This is how you do it per this forum post:
Call a JS function from the grid's .Edit event like:
.Events(events => events.Edit("SetDefaultSourceID"))
Then that function returns the value, in my case the foreign key value of the selected TreeView item:
function SetDefaultSourceID(e) {
if (e.model.isNew()) {
//set the required field value
e.model.set("sourceid", currentSourceID);
}
}
I am using the MVC Kendo Grid with 4 columns, one of them is a DateTime field.
The grid allows inline and batch editing. When I click on a Boolean field, it shows a checkbox. If I click on a text field, it displays a TextField. I would guess that for a date field, it should show a DatePicker.
Instead it shows a TextField.
Here is the column declaration on the grid:
#(Html.Kendo().Grid<MyModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(e => e.MyDate).Format("{0:dd.MM.yyyy}").Title("Date");
})
.Editable(x => x.Mode(GridEditMode.InCell))
.Batch(true)
Here is my model property:
[DataType(DataType.DateTime)] // making data type as date
public DateTime? MyDate{ get; set; }
What am I missing? My only guess at this point is a missing .js file or something? Please let me know.
Thanks!
You have to add editor templates for same. You can get below all the editor templates from Kendo site or from demo.
Date.cshtml
#model DateTime?
#(Html.Kendo().DatePickerFor(m => m))
Let me know if any concern.
Someone pointed me to Kendo Bind to Data Table, which has this code in the grid builder:
.Columns(columns =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
columns.Bound(column.ColumnName);
}
})
This works, but I also want to add an "edit" column, so I added this line before the foreach:
columns.Command(command => command.Edit().Text("Edit").UpdateText("Submit")).Width(70).HtmlAttributes(new { style = "text-align: right;" });
which throws "Templates can be used only with field access, property access, single-dimension array index, or single-parameter custom indexer expressions."
How can I add an Edit column?
As it turns out, "How can I add an Edit column?" is the wrong question. There is nothing wrong with the code to add the Edit command; however, adding it surfaced the problem that was reported. In other words, the "Template" in the error message is the Edit template which doesn't know what column in the DataTable to use for its Id.
When defining the DataSource for the grid, I had this code:
.Model(model =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
model.Field(column.ColumnName, column.DataType);
}
})
as defined in a sample in a Telerik support forum. This was OK for simply displaying the data in a grid, but when I introduced the idea of Editing, it then mattered that there was no Model.Id. The question then became, how do I define an Id when the Model is a DataTable. That is a separate question, which I have posted here.
I am planning of using a cascading kendo drop down.
Drop down 1 - Countries - it will list down all the countries.
Drop down 2 - States - Based on the selection of the country I have to show the states here.
The data for both are loaded from my api controllers. I referred to this link
http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html
But, I need to pass the first selected value to the second drop down.
PLease suggest the best way to do it. Examples would be really helpful.
Thanks.
you have to use events for that
http://demos.kendoui.com/web/dropdownlist/events.html
.Events(e =>
{
e.Change("change").Select("select").Open("open").Close("close").DataBound("dataBound");
})
<script>
function change() {
// get a reference to the dropdown list
var dropdownlist = $("#dropdownlistTwoForStates").data("kendoDropDownList");
//Write your logic here to bind data for thie dropdown
// disable the dropdown list
dropdownlist.enable(true);
};
</script>
I have a kendo grid with first column as Checkboxes. I want to delete multiple rows using those check boxes. I am able to delete only single row at a time.
I tried adding
.Batch(true)
for the data source and below is my function for delete button outside the grid.
function deleteRule() {
var grid = $("#grid").data("kendoGrid");
grid.select().each(function () {
grid.removeRow($(this));
});
}
Any suggestions please ?
Yo mate,
How exactly do you remove that one row? Why you use the select method?
Basically I would suggest you to create a delete button which executes the logic to delete the selected rows - I guess you are using a tempalte column with a checkbox inside. If you add a class to that checkbox you can easily select all the checkboxes inside of the grid. So lets say the name of the class for the checkbox is cool then you can execute the following logic in the delete button click handler:
function whenYourDeleteButtonIsClicked(){
var grid = $("#grid").data("kendoGrid");
$('.cool:selected').each(function(){
grid.removeRow($(this).closest('tr'));
})
}
I hope you got the idea mate.
Good luck.
Here is what i use
works very well
$('#your-grid-id').data("kendoGrid").select().each(function () {
grid.dataSource.remove(grid.dataItem($(this).closest("tr")));
});