Hi i am using progress to disable a grid, i am able to achieve this using
kendo.ui.progress($("#grid"), true);
But for my requirement i must not show the spinner image. for that i tried
Method 1
kendo.ui.progress($("#grid"), function(){
removeclass("k-loading-image") ;
return true;
});
Method 2
$('#grid*').prop('disabled', false);
Method 3:
$("#grid").append("<div class='k-loading-mask' style='width:100%;height:100%'><span class='k-loading-text'>Loading...</span><div class='k-loading-color'><br\><br\><br\><a href='www.google.com' >LINK</a></div></div>");
Any help is much appreciated.Thanks
EDIT
#(Html.Kendo().Grid(Model)
.Name("grdAddrMaster")
.Columns(columns =>
{
columns.Bound(m => m.id);
columns.Bound(m => m.name);
})
.AutoBind(false)
.Sortable()
.Scrollable()
.Pageable()
.Selectable()
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts With"))
.ForNumber(num => num.ToString()
.StartsWith("Starts With"))
))
.DataSource(datasource => datasource.Ajax()
.Model(model =>
{
model.Id(m => m.id);
})
.PageSize(10)
.Read(read => read.Action("ReadData", "Home"))))
If you just want to remove the loading image then you just need to create a css class to override the existing background image of the loading image class as below:
.k-loading-image {
//background-image: url('Default/loading-image.gif'); // Existing code in the css (kendo.default.min.css)
background-image: url('your logo') !important; // path to your logo which you wish to show
}
Edit:
Working Example
You will need to add the below line to disable the Loading image at run time:
kendo.ui.progress($("#grdAddrMaster"), true);
$("#grdAddrMaster").find(".k-loading-image").css("background-image", "url('') !important");
Related
I need help writing a script/Function for my Telerik UI for asp.net MVC program. I have a delete button in my tool bar and I think my script is correct for it deleting. Now, I'm told that my check boxes haft to have a script also to be deleted when checked. As a C# coder, I'm not entirely knowledgeable about Json coding. So, any help would be appreciated! Here is my code below.
#(Html.Kendo().Grid<MVCSQLDatabase.Models>()
.Name("Grid")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Batch(true)
.Model(model => model.Id(p => p.Proposal_Uid))
.Read(read => read.Action("Proposals_Read", "Grid"))
.Create(create => create.Action("Proposals_Create", "Grid"))
.Update(update => update.Action("Proposals_Update", "Grid"))
.Destroy(destroy => destroy.Action("Proposals_Destroy", "Grid"))
)
.Resizable(resize => resize.Columns(true))
.Columns(columns =>
{
columns.Select().Width(100); //<-- my check boxes code.
columns.Bound(c => c.Prime).Width(215);
columns.Bound(c => c.Proposal).Width(200);
columns.Bound(c => c.C).Width(190);
columns.Bound(c => c.Cl).Width(185);
columns.Bound(c => c.T).Width(290);
columns.Bound(c => c.M).Width(220);
columns.Bound(c => c.S).Format("{0: dd/MM/yyyy}").Width(170);
columns.Bound(c => c.E).Format("{0: dd/MM/yyyy}").Width(170);
columns.Bound(c => c.P).Width(235);
columns.Bound(c => c.Con).Width(215);
columns.Command(command => { command.Destroy(); }).Width(180);// <--- My delete button in my column
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
toolbar.Excel();
toolbar.Custom().Text("Delete").Name("batchDestroy").IconClass("k-icon k-i-close"); //<-- my custom made delete button in my toolbar.
})
.ColumnMenu()
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Selectable(selectable =>
{
selectable.Mode(GridSelectionMode.Multiple);
selectable.Type(GridSelectionType.Row);
})
.PersistSelection()
.Filterable(filterable => filterable.Mode(GridFilterMode.Row))
.Scrollable()
.HtmlAttributes(new { style = "height:835px;" })
)
<script>
$("#grid").on("click", "batchDestroy", function() {
var $tr = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem($tr);
grid.dataSource.remove(dataItem);
});
</script>
Here is the code for anybody else stuck in this situation. The thing that got me the most, was the .done function to end the button click function and then saving the grid AFTER the delete was made. Hopefully, this helps others!
<script>
$(document).ready(function ()
{
$(".k-grid-Destroy").on("click", function (e)
{
e.preventDefault();
var grid = $("#Grid").data("kendoGrid");
var selectedRows = grid.select();
kendo.confirm(kendo.format("Are you sure you wish to delete {0} records?", selectedRows.length))
.done(function ()
{
$.each(selectedRows, function (i, row)
{
grid.removeRow(row);
})
grid.saveChanges();
});
});
});
</script>
Telerik Kendo MVC Grid - How do I set onload/initial filter equals True with checkbox columns?
I am trying to set a True/False column filter to True on initial load. My Viewmodel has a bool property called IsHoliday. I have followed the example in the link above but i don't have any records showing in the grid at startup. My read action returns a JSON of IEnumerable as suggested in the referenced link. My View is as follows:
#(Html.Kendo().Grid<HolidayVM>()
.Name("h_grid")
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(15)
.ServerOperation(false)
.Events(events => events.Error("grid_error")) // Handle the "error" event
.Model(model =>
{
model.Id(m => m.Date);
model.Field(m => m.Date).Editable(false);
})
.Filter(f => f.Add(m => m.IsHoliday.Equals(true)))
.Read(read => read.Action("Holiday_Read", "Holiday"))
.Update(up => up.Action("Holiday_Update", "Holiday").Data("grid_sendAntiForgery"))
)
.Columns(columns =>
{
columns.Bound(p => p.Date).Width(30).Format("{0:dd-MMMM}");
columns.Bound(p => p.HolidayText).Width(100).Filterable(false);
columns.Bound(p => p.IsHoliday)
.ClientTemplate("<input type='checkbox' #= IsHoliday ? '' : checked='checked' # disabled='disabled' />")
.Filterable(ftb => ftb.Cell(cell => cell.Operator("Is equal to")))
.Width(30);
columns.Command(cmd =>
{
cmd.Edit().HtmlAttributes(new { title = "Edit" });
}).Title("Commands").Width(25);
})
.Pageable()
.Sortable()
)
Ideally I will like my grid to look like in attached image, on load, with IsHoliday set to True
I finally figured it out.
.Filter(f => f.Add(m => m.IsHoliday).IsEqualTo(true))
instead of
.Filter(f => f.Add(m => m.IsHoliday.Equals(true)))
use this easily:
columns.Bound(p => p.ISProperty).ClientTemplate("#= ISProperty? 'Yes' : 'No' #")
I have the following code on a page.
The problem is that when the "MainSearchSubmit" button is clicked the method "RefreshGrid()" is resulting in 2 subsequent ajax calls to the server. I found this is because the call to "datasource.read()" and "datasource.page(1)" are both posting back to the server (they are both running the read() method of the dataSource).
I still need to set the grid page to 1 when the search button is clicked because otherwise someone can be on page 3, then click the search button, get the updated results, but still be on page 3. They need to be reset to page 1 when the click the search button.
Also I still need to run the read() because otherwise the updated parameters are not passed and the data is not refreshed.
I've found similar posts, some with people suggesting using the .query() method. I tried that (code commented out in "RefreshGrid()" method), but that was also resulting in 2 posts to the server.
Any ideas on how I can fix this?
Code:
<script>
$(document).ready(InitializeNDCMapping);
function InitializeMainMapping() {
$("#MainSearchSubmit").click(function (e) {
RefreshGrid();
e.preventDefault();
});
}
function RefreshGrid() {
$("#MainListGrid").data("kendoGrid").dataSource.read();
$("#MainListGrid").data("kendoGrid").dataSource.page(1);
//Defunct code
//var dataSource1 = $("#NDCListGrid").data("kendoGrid").dataSource;
//dataSource.query({
// read: dataSource1.read(),
// page: dataSource1.Page(1),
// pagesize: dataSource1.PageSize(25)
//});
}
</script>
<div class="search-buttons">
<input type="submit" value="Search" id="MainSearchSubmit" />
<input type="button" value="Reset" onclick="ResetMainSearch()" />
</div>
<div>
#(Html.Kendo().Grid<BackOffice.ViewModels.NDCItem>()
.Name("MainListGrid")
.Filterable()
.Pageable(p => p.PageSizes(new int[] { 25, 50, 100 }).Input(true)
.Messages(m=>m.Empty("No Main-Ingredient found")).Numeric(false))
.Sortable()
.Navigatable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Columns(columns =>
{
columns.Bound(l => l.NDCCode).Title("NDC Code").Width("5%")
.ClientTemplate(#Html.DialogFormLink("#=NDCCode#", Url.Action("NDCMappingEdit", new { NDCCode = "#=NDCCode#", mainMultumDrugCode = "#=MainMultumDrugCode#", drugId = "#=DrugId#", isMapped = "#=IsMapped#" }), "NDC Mapping", "", "", "NDCDialogLink", "1100", "600", "").ToHtmlString());
columns.Bound(l => l.Name).Title("Generic Name").Width("15%");
columns.Bound(l => l.MainCode).Hidden();
columns.Bound(l => l.MainId).Hidden();
columns.Bound(l => l.MainDescription).Title("Main Description").Width("15%");
columns.Bound(l => l.MainIngredientCode).Hidden();
columns.Bound(l => l.MainIngredient).Title("Main Ingredient").Width("15%");
columns.Bound(l => l.MainNumAmount).Title("Main Qty").Width("5%");
columns.Bound(l => l.MainNum).Title("Main Unit").Width("5%");
columns.Bound(l => l.MainDenomAmount).Title("Main Denom").Width("5%");
columns.Bound(l => l.MainDenom).Title("Main Denom Unit").Width("5%");
columns.Bound(l => l.IsMapped).Title("Mapped").Width("5%").Filterable(false).Sortable(false)
.ClientTemplate("<input type='checkbox' name='selected_#=MainCode#' class='chkbx select'" + "#= IsMapped ? 'checked' : ''#" + " />")
.HtmlAttributes(new { #class = "center", #onclick = "return false" })
.HeaderHtmlAttributes(new { #class = "center" });
})
.AutoBind(false)
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Read(read => read.Action("MainList_Read", "Drug").Data("getRouteParams"))
.Model(model =>
{
model.Field(f => f.MainCode).Editable(false);
model.Field(f => f.MainName).Editable(false);
model.Field(f => f.MainDCCode).Editable(false);
model.Field(f => f.MainId).Editable(false);
model.Field(f => f.MainDescription).Editable(false);
model.Field(f => f.MainIngredientCode).Editable(false);
model.Field(f => f.MainIngredient).Editable(false);
model.Field(f => f.MainNumAmount).Editable(false);
model.Field(f => f.MainNum).Editable(false);
model.Field(f => f.MainDenomAmount).Editable(false);
model.Field(f => f.MainDenom).Editable(false);
model.Field(f => f.IsMapped).Editable(false);
})
.PageSize(25)
.Events(events => events.Error("MainRead_Error"))
)
)
</div>
In the past, when I had similar problems, it was almost always because the click handler was registered twice and even though the user clicked the button once, the handler executed twice.
Where do you call InitializeMainMapping()? Also, I am not sure if this is a copy and paste error, but the InitializeMainMapping() is missing a closing }. Are you getting any javascript errors when the user clicks on the button?
Just a few ideas to get you started.
I was able to find the solution. If the page is already set to 1 and you run...
grid.dataSource.page(1);
This results in a read. Otherwise if the page is not yet set to 1 and you run the code above it doesn't result in a read. So the solution to the issue is below.
if (grid.dataSource.page() != 1) {
grid.dataSource.page(1);
}
grid.dataSource.read( {parameter: "value"} );
Found this solution here:
KendoUI: resetting grid data to first page after button click
I have a Kendo Grid (MVC Razor) that I am trying to have pass extra data to the controller via the .Data call off of the Read method:
#(Html.Kendo().Grid<AssignedSiteGridPoco>()
.Name("UnAssignedSiteGrid")
.Filterable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Columns(columns =>
{
columns.Bound(p => p.SiteId).Hidden();
columns.Bound(p => p.SiteName).Title("Site Name").Width(180);
columns.Bound(p => p.City).Title("City").Width(80);
columns.Bound(p => p.StateName).Title("State Name").Width(100);
columns.Command(command => command
.Custom("Add")
.Click("unassignedSiteGridClick")
).Width(90);
})
.Scrollable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Resizable(resize => resize.Columns(true))
.Events(events =>
{
//events.Change("GridChange");
//events.DataBound("OnDataBound");
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.SiteId);
model.Field(p => p.SiteName);
model.Field(p => p.City).Editable(false);
model.Field(p => p.StateName).Editable(false);
})
.PageSize(15)
.Read(read => read.Action("GetUnassignedSiteGridDataList", "Manager").Data("getUserRightName"))
))
The Javascript block, placed above the grid div, is as follows:
function getUserRightName() {
return
{
UserRightName : "2"
};
}
And the controller:
public JsonResult GetUnassignedSiteGridDataList([DataSourceRequest]DataSourceRequest request, string UserRightName)
{
var model = new AssignedSiteGridPoco();
var siteList = _managerPresentationService.GetUnassignedSiteGridDataList(model);
return Json(siteList.ToDataSourceResult(request));
}
The string value being passed from the view's read method is null in the "UserRightName" string. According to the examples, it should pass back the text value "2" My Version of Kendo is: 2014.2.807 InternalBuild. Is there a problem in this build in this area?
Thanks,
Steven
Wrap the key name in the json structure into quotes i.e.
change your js function to this:
function getUserRightName() {
return {'UserRightName':"2"};
}
I have a Kendo Grid with Popup editing. However, I need to have my own PartialView displayed for editing.
Is there any way to tell the grid what PartialView to display for editing?
If that can't be done, is there a way to wire up the grid so it calls a JavaScript function which would then pop up a custom window that I will populate with a partial view? It would have to be able to pass the ID of Row that was selected so that the view would edit the correct row. I know how to create the Window, I just don't know how to call it from the grid and get the Id of the row.
This is the grid:
#(Html.Kendo().Grid<OrderSummaryLineItem>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ReportType).Width(75);
columns.Bound(c => c.ReferenceId).Width(75);
columns.Bound(c => c.BorrowerName).Width(75);
columns.Bound(c => c.PropertyAddress).Width(100);
columns.Bound(c => c.EstimatedCompletionDate).Width(100);
columns.Bound(c => c.ReportPrice).Width(75);
columns.Bound(c => c.ExpediteFee).Width(75);
columns.Bound(c => c.Discount).Width(75);
columns.Bound(c => c.TotalPrice).Width(75);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.HtmlAttributes(new { style = "height: 600px;" })
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model=> model.Id(c=> c.ReferenceId))
.Read(read => read.Action("Orders_Read", "OrderSummary"))
.Destroy(update => update.Action("EditingPopup_Destroy", "OrderSummary"))
)
)
Update:
I have this partially resolved: I added a custom Command like this:
columns.Command(command => { command.Custom("ViewDetails").Click("showDetails");
This wires up the "showDetails" JavaScript function. But I am still not able to pass the current row Id.
This is what I came up with:
columns.Template(#<text></text>).ClientTemplate("<a href='"+Url.Action("EditOrderLineItem","OrderSummary")+"/#=Id#'>Edit</a>");