How to make an image in kendo grid hyper link which needs to point to the fileurl.
Fileurl has a location url which will open a document located in c folder in new tab.
Here i am giving my code:
View:
#(Html.Kendo().Grid<MVCExample.Models.Data>()
.Name("PreviewGrid")
.Columns(columns =>
{
columns.Template(e => e.FileUrl).ClientTemplate("<img src='../../Images/pdficon.png'/>").Title("").Width(10);
columns.Bound(e => e.PName).Title("ReportName").Width(50).HeaderHtmlAttributes(new { #style = "font-weight:bold" });
//columns.Bound(e => e.FileUrl).Title("FileName").Width(200).HeaderHtmlAttributes(new { #style = "font-weight:bold" });
})
.HtmlAttributes(new { style = "width:800px" })
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Field(p => p.Name).Editable(false);
model.Field(p => p.FileDate).Editable(false);
}).Read(read => read.Action("ReadData", "Home").Data("GetFilterData"))
)
.Pageable(pager => pager.PageSizes(new int[] { 25, 50, 100, 200 }))
.Sortable()
.Scrollable(scrollable => scrollable.Enabled(false))
)
Controller:
IList<DataDto1> p1 = this.mycodee.GetData();
IList<DataDto> p2 = this.mycode.GetDataFiles();
string url = EnvSettingsTools.FIRArchivePath.ToString();
var data = from s in p1
where s.pId == 5//Convert.ToInt32(filterBydesk)
join e in p2
on s.PId equals e.PId
where e.PDate.Date == filterByDate
where e.PortfolioId ==1// Convert.ToInt32(filterByportfolio)
select new File
{
PName = s.pName,
FileUrl = url+""+ e.FileName+".pdf"
};
I resolved it by,
#(Html.Kendo().Grid<MVCExample.Models.Data>()
.Name("PreviewGrid")
.Columns(columns =>
{
columns.Bound(e => e.PortfolioName).Title("ReportName").HeaderHtmlAttributes(new { #style = "font-weight:bold" });
columns.Template(e => e.FileUrl).ClientTemplate("<a target='_blank' href='file:///#:data.FileUrl#'><img src='/Areas/Tools/Images/iconpdf.gif'/></a>").Title("");
})
)
Thanks for support
Related
I have the following Kendo().Grid():
#(Html.Kendo().Grid<TicketReportPropertyEntity>()
.Name("TicketReportPropertyGrid")
.Columns(columns =>
{
columns.Bound(c => c.ID).Hidden();
columns.Bound(c => c.PropertyName).Title("Property Name").EditorTemplateName("_PropertyNameEditor").Width(900);
columns.Bound(c => c.Amount).Title("Amount").Format("{0:C}").Width(90);
columns.Command(command => command.Destroy()).Width(150);
})
.Events(events => events.DataBound("Databound").SaveChanges("SaveGrid").Edit("Edit"))
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
//.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(c => c.ID);
model.Field(c => c.PropertyName);
model.Field(c => c.Amount);
})
.Create(create => create.Action("AddTicketReportProperty", "TicketReportProperty").Data("GetData"))
.Read(read => read.Action("GetData", "TicketReportProperty", Model))
.Update(update => update.Action("UpdateTicketReportProperty", "TicketReportProperty"))
.Destroy(delete => delete.Action("DeleteTicketReportProperty", "TicketReportProperty"))
)
)
And my controller's method:
[HttpPost]
public ActionResult DeleteTicketReportProperty([DataSourceRequest] DataSourceRequest request, TicketReportPropertyModel model)
{
var result = new TicketReportPropertyModel().DeleteTicketReportProperty(model.ID);
return Json(new[] { model }.ToDataSourceResult(request, ModelState));
}
Here is a "SaveGrid" function:
function SaveGrid(e) {
console.log("save")
var rowsCount = e.sender.dataSource.data().length;
var totalSum = 0;
if (rowsCount > 0) {
for (var i = 0; i < rowsCount; i++) {
totalSum += e.sender.dataSource.data()[i].Amount;
}
}
var ticketAmount = $('#Ticket_Amount').val();
console.log(ticketAmount);
if (totalSum != ticketAmount) {
console.log("failed");
//show the popup
e.preventDefault();
}
}
It should add, update and delete records. Now, I'm working on deleting the record. But the event does not call the controller.
I'm following telerik example here
What am I missing?
I believe you are not following exactly the example from telerik. When you create the Grid you're using an Entity TicketReportPropertyEntity, but in the Controller you are receiving a Model TicketReportPropertyModel.
Make sure you create your Grid using the Model, not the Entity, as the example you're following.
#(Html.Kendo().Grid<TicketReportPropertyModel>()
How to filter second Dropdown based on first dropdown value inside the Kendogrid
enter code here
#(Html.Kendo().Window().Name("windowFactorDefination").Iframe(true)
.Title("Rating Factor Definition")
.Draggable()
.Resizable()
.Modal(true)
.Visible(false)
.Actions(actions => actions.Close())
.Width(850)
.Events(e => e.Close("OnCloseFactorWindow"))
.Position(settings => settings.Top(30))
.Position(settings => settings.Left(100))
.Content(#<text>
#(Html.Kendo().Grid<WeezerSetup.Model.RatingGroup>()
.Name("FactorDefinationGrid")
.Columns(columns =>
{
columns.Bound(c => c.RatingFactorDefinitionID).Visible(false);
columns.Bound(c => c.FactorDefinationDescription).Title("Factor Definition Description").HeaderHtmlAttributes(new { title = "Rating Factor description" });
columns.ForeignKey(b => b.FactorTypeID, (SelectList)ViewBag.FactorList).Width(120).Title("Factor Type").HeaderHtmlAttributes(new { title = "Data type for Rating Factor" });
columns.ForeignKey(c => c.TableID, (SelectList)ViewBag.TableList).Width(300).EditorTemplateName("TableTypeEditorDropDown").Title("SYS_Table").HtmlAttributes(new { id = "drpTableType" });
columns.ForeignKey(c => c.FieldID, (SelectList)ViewBag.FieldList).Width(300).EditorTemplateName("FieldTypeEditorDropDown").Title("SYS_Table_Field").HtmlAttributes(new { id = "drpFieldType" });
columns.ForeignKey(b => b.WildCard, (SelectList)ViewBag.WildCardList).Width(300).Title("Wild Card").HeaderHtmlAttributes(new { title = "Used when any remaining values have the same results" });
columns.Command(command =>
{
command.Edit().Text(" ").HtmlAttributes(new { id = "btnEdit", #style = "text-align:center;", data_toggle = "tooltip", data_placement = "top", title = "Edit" });
}).HeaderTemplate("Action").Width(210);
columns.Command(command => { command.Destroy().Text(" ").HtmlAttributes(new { #class = "fe-delete", title = "DELETE" }); }).HeaderTemplate("Action").HeaderHtmlAttributes(new { title = "Clicking the icon will Delete specific row" });
})
.Resizable(resize => resize.Columns(true))
.Sortable()
.AutoBind(true)
.ToolBar(toolbar => toolbar.Create())
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Filterable()
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Events(events => { events.Edit("onEditGrdMyBenefitsGrid"); events.DataBound("onRowDataBoundGrdMyBenefitsGrid"); })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("GetRatingFactorDefination", "RateSetup"))
.Model(model =>
{
model.Id(p => p.RatingFactorDefinitionID);
})
.Create(update => update.Action("AddFactorDefination", "RateSetup"))
.Update(update => update.Action("UpdateFactorDefination", "RateSetup"))
.Destroy(delete => delete.Action("DeleteRatingFactorDefinition", "RateSetup").Data("DeleteRecord"))
))
#(Html.Kendo().Tooltip()
.For("#FactorDefinationGrid")
.Filter("th")
.Position(TooltipPosition.Top)
.Width(160)
.Events(events => events.Show("onShow"))
)
</text>))}
So in the above code there are 2 columns Name TableID and FieldID both are dependent column showing as dropdown in the Kendo Grid UI.
Please give me solution to filter both dropdown.
I assume you are looking for a behavior like cascading drop downs.
Refer to this demo link
You need to do the following:-
1) Add cascade from property to editor template of FieldId
.CascadeFrom("TableId")
2) Add a function to your script file to return the selected table id
function filterFields() {
return {
tableId: $("#TableId").val()
};
}
3) Add the script function in your read call
.DataSource(source => {
source.Read(read =>
{
read.Action("ActionName", "ControllerName")
.Data("filterFields");
})
.ServerFiltering(true);
I have a kendo grid in which I want to form delete button to pass the details of the row to the controller (as I am using mvc). Then I will use these details to delete the row from the database.
I searched in kendo website and I found the part for the delete or destroy call but I don't know how to pass these details of the row to the controller.
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Width(140);
columns.Bound(p => p.UnitsInStock).Width(140);
columns.Bound(p => p.Discontinued).Width(100);
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolbar => {
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.ProductID))
.Create("Editing_Create", "Grid")
.Read("Editing_Read", "Grid")
.Update("Editing_Update", "Grid")
.Destroy("Editing_Destroy", "Grid")
)
)
My grid:
<div id="grid">
#(Html.Kendo().Grid<dynamic>()
.Name("BrowseGrid")
.Columns(columns =>
{
foreach (System.Data.DataColumn c in Model.Grid.Columns)
{
columns.Bound(c.ColumnName).EditorTemplateName("String");
}
columns.Command(command =>
{
command.Destroy();
command.Custom("").Text("editteam").HtmlAttributes(new { id = "editteam", onClick = "editRow()" });
});
})
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model =>
{
//Define the model
foreach (System.Data.DataColumn column in Model.Grid.Columns)
{
model.Field(column.ColumnName, column.DataType);
model.Id("Id");
}
})
.Read(read =>
read.Action("BrowseGrid", "Configuration")
)
.Destroy( update => update.Action("Delete", "Configuration"))
//Data("{nodeID:"+#Model.nodeID+"}"
)
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(new int[] { 10, 100, 1000, 10000, 100000, 1000000 })
.ButtonCount(10)
)
)
Please change to:
.Destroy(update => update.Action("Process_Destroy", "controller name"))
and in controller,
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Process_Destroy([DataSourceRequest] DataSourceRequest request, ProductViewModel product)
{
if (product != null)
{
//write your code for delete action;
}
return Json(ModelState.ToDataSourceResult());
}
This will work.
I am assuming you only need the id of the row to delete it, but I think you can send the full model of the selected row. I am sending both.
Like this:
.Destroy(d => d.Action("controllerMethod", "controllerName").Data("jsFunction"))
And in javascript:
function jsFunction() {
var grid = $("#BrowseGrid").data("kendoGrid");
var id = grid.dataItem(grid.select()).Id;
return {
id: id
};
}
Your controller method should receive the parameter:
public ActionResult controllerMethod(string id)
From the samples and documentation, it looks like if I want to update one row (or do a batch update) in a Telerik grid, I also need to refresh the data in the entire grid.
Is there a way to just update that one row on the client and not return all the grid data every time I want to do an update? It seems extremely wasteful to keep returning that much data every time.
Even if I do a batch update, why do I need to return all the new data?
Generally a database has many users, and your user interface may be accessed by multiple people. If the grid is going to update, then it will include any other changes that may have happened to the data since the grid originally loaded.
The grid allows you to limit the number of records that are shown at a time via the paging option. On our project we are loading the grid with AJAX, and using IQueryable's in the controller. When we call ToDataSourceResult(request) on the IQueryable, it only retrieves the data that is needed, and does not load the full table from the database.
On the Razor View:
#(Html.Kendo().Grid<WebApp.ViewModels.AccountViewModel>()
.Name("Accounts")
.Columns(columns =>
{
columns.Bound(c => c.AccountNumber);
columns.Bound(c => c.Name);
columns.Bound(c => c.Address1);
columns.Bound(c => c.Address2);
columns.Bound(c => c.City);
columns.Bound(c => c.State);
columns.Bound(c => c.Zip);
columns.Bound(c => c.PrimaryContact).Title("Contact");
})
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
.DoesNotContain("Doesn't Contain")
)
)
)
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(new int[] { 5, 10, 20, 50, 100, 500 })
.ButtonCount(5)
)
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add("Name").Ascending())
.PageSize(20)
.Read(read => read.Action("Account_Read", "Account"))
)
)
Then in the controller:
public ActionResult Account_Read([DataSourceRequest] DataSourceRequest request)
{
var jsonlist = GetAccounts()
.Select(sa => new AccountViewModel
{
ID = sa.ID,
AccountNumber = sa.AccountNumber,
Name = sa.Name,
Address1 = sa.Address1,
Address2 = sa.Address2,
City = sa.City,
State = sa.State,
Zip = sa.Zip,
PrimaryContact = sa.User.FirstName + " " + sa.User.LastName
}
).ToDataSourceResult(request);
return Json(jsonlist);
}
UPDATE
We have an inline edit form on one of our Kendo grids. It took us a bit to get it how we watned. In the Razor View:
#(Html.Kendo().Grid<DataViewModel>()
.Name("Data")
.Columns(columns =>
{
columns.Bound(c => c.FieldName)
.EditorTemplateName("DataFieldName")
.Title("Item Name")
.Width(200);
columns.Bound(c => c.TextValue)
.Title("Text");
columns.Command(command => { command.Edit(); command.Destroy(); })
.Title("Actions")
.Width(172);
})
.Filterable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(new int[] { 5, 10, 20, 50, 100 })
.ButtonCount(5)
)
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add("CreatedDate").Descending())
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(pd => pd.ID);
model.Field(pd => pd.CreatedDate).Editable(false);
model.Field(pd => pd.ValuesID).DefaultValue(Model.Values.ID);
})
.Read(read => read.Action("Data_Read", "History", new { ValuesID = Model.Values.ID }))
.Create(update => update.Action("Data_Create", "History"))
.Update(update => update.Action("Data_Update", "History"))
.Destroy(update => update.Action("Data_Destroy", "History"))
)
)
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
</script>
In order to use the Kendo date time picker for the date option, we had to create a custom editor template. We created a new folder under Views >> Shared >> EditorTemplates. The file name is DataFieldName.cshtml:
#model WebApp.ViewModels.DataViewModel
#using WebApp.ViewModels
#(Html.Kendo().ComboBox()
.Name("FieldName")
.Placeholder("Select/Create Item Name")
.DataTextField("Name")
.DataValueField("Name")
.Filter(FilterType.Contains)
.DataSource(source => source
.Read(read => read.Action("GetFieldNames", "History"))
)
)
Then the controller has all of the action results for the AJAX calls:
[HttpPost]
public ActionResult Data_Create(DataViewModel DataIn)
{
var Data = new Data();
Data.ValuesID = DataIn.ValuesID;
Data.FieldName = DataIn.FieldName;
Data.TextValue = DataIn.TextValue;
if (DataIn.TimeValue != null) Data.TimeValue = DataIn.TimeValue;
if (ModelState.IsValid)
{
db.Datas.Add(Data);
db.SaveChanges();
}
return RedirectToAction("EditValue", new
{
ValueID = DataIn.ValuesID,
tankID = db.Values.FirstOrDefault(pv => pv.ID == DataIn.ValuesID).TankID
});
}
[HttpPost]
public ActionResult Data_Update(DataViewModel DataIn)
{
var Data = db.Datas.Find(DataIn.ID);
Data.FieldName = DataIn.FieldName;
Data.TextValue = DataIn.TextValue;
if (DataIn.TimeValue != null) Data.TimeValue = DataIn.TimeValue;
if (ModelState.IsValid)
{
db.Entry(Data).State = EntityState.Modified;
db.SaveChanges();
}
return RedirectToAction("EditValue", new
{
ValueID = DataIn.ValuesID,
tkID = db.Values.FirstOrDefault(pv => pv.ID == DataIn.ValuesID).tkID
});
}
[HttpPost]
public ActionResult Data_Destroy(DataViewModel DataIn)
{
var Data = db.Datas.Find(DataIn.ID);
db.Datas.Remove(Data);
db.SaveChanges();
return RedirectToAction("EditValue", new
{
ValueID = DataIn.ValuesID,
tkID = db.Values.FirstOrDefault(pv => pv.ID == DataIn.ValuesID).tkID
});
}
public ActionResult GetFieldNames()
{
var jsonList = db.Datas
.Select(pd => new
{
Name = pd.FieldName
})
.Distinct()
.OrderBy(pd => pd.Name)
.ToList();
return Json(jsonList, JsonRequestBehavior.AllowGet);
}
#(Html.Kendo().Grid<RTM.WEB.MVC.ViewModels.SortingViewModel.ProductViewModel>()
.Name("ProductsGrid").HtmlAttributes("height:430")
.Columns(columns =>
{
columns.Bound(p => p.IsSelected).Width(50).Title("");
columns.Bound(p => p.ProductName);
columns.Bound(p => p.Price).Format("{0:C}");
columns.Bound(p => p.GroupName);
// columns.Bound(p => p.MeasurementId);
// columns.Bound(p => p.BarcodeValue);
columns.Command(comand =>
{
comand.Custom("Edit").Click("ViewEdit");
comand.Destroy();
}).Title("Commands").Width(180);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
//.Events(events=>events.Sync("addGroupData"))
.ServerOperation(true)
.Batch(true)
.Events(events =>
{
events.Error("errorHandler");
events.Sync("addDataToResponce");
})
.Model(model =>
{
model.Id(p => p.ProductId);
model.Field(p => p.ProductId).Editable(false);
})
// .Aggregates(aggregates =>
//{
// //aggregates.Add(p => p.ProductId);
// //aggregates.Add(p => p.ProductName);
// aggregates.Add(p => p.Price).Sum();
//})
.Group(groups => groups.Add(p => p.GroupName))
.Create(create => create.Action("Products_Create", "Sorting"))
.Read(read => read.Action("Products_Read", "Sorting"))
.Update(update => update.Action("Products_Update", "Sorting"))
.Destroy(destroy => destroy.Action("Products_Destroy", "Sorting"))
)
.ToolBar(toolbar =>
{
toolbar.Template(#<text>
<div >
<a class="k-button" onclick="AddProduct()">Add New Product</a>
#item.SaveButton()
<a class="k-button" onclick="NewGroup()">NewGroup</a>
<a class="k-button" onclick="UnGroup()">UnGroup</a>
<label>Show products by warehouse:</label>
#(Html.Kendo().DropDownList()
.Name("warehouses")
.OptionLabel("All")
.DataTextField("Name")
.DataValueField("WarehouseId")
.AutoBind(false)
// .Events(e => e.Change("warehousesChange"))
.DataSource(ds =>
{
ds.Read("Products_Warehouses", "Sorting");
})
)
</div>
</text>);
})
.Events(events =>
{
events.DataBound("dataBound");
})
.Pageable(page => page.PageSizes(true).Numeric(false).Refresh(true).Input(true))
//.Navigatable()
.Selectable()
.ColumnMenu()
.Filterable()
.Sortable()
.Scrollable()
.Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
)
public JsonResult Products_Read([DataSourceRequest]DataSourceRequest request)
{
int allcount=0;
List<ProductModel> products= DataManager.ProductRepository.GetAllProducts(request.Page, request.PageSize,ref allcount);
List<ProductViewModel> productViewModels=new List<ProductViewModel>();
foreach (var product in products)
{
productViewModels.Add(ConvertProductViewModel(product));
}
if (request.Sorts.Count != 0)
{
string member = request.Sorts.First().Member;
string sorttype = request.Sorts.First().SortDirection.ToString();
switch (member)
{
case "IsSelected":
if (sorttype == "Ascending")
{
productViewModels = productViewModels.OrderBy(p => p.IsSelected).ToList();
}
if (sorttype == "Descending")
{
productViewModels = productViewModels.OrderByDescending(p => p.IsSelected).ToList();
}
break;
case "ProductName":
if (sorttype == "Ascending")
{
productViewModels = productViewModels.OrderBy(p => p.ProductName).ToList();
}
if (sorttype == "Descending")
{
productViewModels = productViewModels.OrderByDescending(p => p.ProductName).ToList();
}
break;
case "Price":
if (sorttype == "Ascending")
{
productViewModels = productViewModels.OrderBy(p => p.Price).ToList();
}
if (sorttype == "Descending")
{
productViewModels = productViewModels.OrderByDescending(p => p.Price).ToList();
}
break;
}
}
var result = new DataSourceResult()
{
Data = productViewModels,
Total = allcount,
AggregateResults = null,
Errors = null,
};
return Json(result, JsonRequestBehavior.AllowGet);
}
This is my code.When i return data from action server paging doesn't work.
I want do server paging kendo ui group grid, but response data type undefined.I need working example for group grid.It works in basic grid but don't work for group grid.
You should just need to update the controller method. As the sorting you are doing seems quite basic, you can use the supplied Kendo method ToDataSourceResult(DataSourceRequest request).
Add the following to your using section in the Controller:
using Kendo.Mvc.Extensions;
Then simply return:
return Json(productViewModels
.ToDataSourceResult(request, JsonRequestBehavior.AllowGet));
This should take care of any filtering, sorting, grouping, and paging for you.
You might also want to take a look at AutoMapper to more easily map objects from Product to ProductViewModel.