I have got a grid and a custom command button inside the grid.
My goal is to open a Telerik popup window and pass the column values to this popup window.
So far I created a grid with the custom command which opens a Telerik window. But I am not sure how to pass the values from the grid to the popup window.
The Grid
#(Html.Kendo().Grid<Lagerbase.Models.Artikel>()
.Name("CompanyGrid")
.Columns(columns =>
{
....
columns.Bound(o => o.Id);
columns.Command(command => command.Custom("Buchen").Click("Buchen"));
}
...
)
The popup window
(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")
.Content(#<text>
<h4>Id: (this is where I want to display the Id from the grid)</h4>
</text>)
.Resizable()
.Width(600)
.Visible(false)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
)
The JavaScript function
<script>
function Buchen(e) {
e.preventDefault();
$("#window").data("kendoWindow").center().open();
}
</script>
In the popup window I marked the area where I want to pass the column value, based on which button was pressed. Thanks in advance!
You can get current data item in javascript and then get the id property from it.
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$("#lblMyValue").text(dataItem.Id);
Related
I'm using .net-core and Kendo-UI for a project.
I'm trying to pass checked(Each row has a checkbox) values from one Kendo Grid to another which resides in a popup window.
This popup window is a bootstrap 4 popup that is called when the button is clicked.
The problem is the grid in the popup window will not show the checked data.
How it works is the user checks off rows in the grid and then clicks a button which then fires a POST to the server.
This post contains an array of the checked rows.
This array is then passed back through the controller to the other Kendo Grid inside the popup.
What I expect to happen is the data passed to the controller is passed back to this new grid.
What is happening is the second grid remains empty.
I checked the network tab in chrome tools and the controller is returning the data.
Its just not finding its way to the grid.
Any ideas?
// Here is the controller function, ajax call and the kendo grid(popup).
// Controller function
public IActionResult SendInventoryGridData
([DataSourceRequest]DataSourceRequest request, string ViewBy, int BrandId, string[] Asins)
{
List <InventoryVM> Datalist= new List<InventoryVM>();
foreach(string Asin in Asins)
{
Datalist.Add(new InventoryVM { Asin = Asin, Quantity = 1 });
}
var results = Datalist;
return Json(results.ToDataSourceResult(request));
}
// Ajax Post
$.ajax({
type: "POST", url: '#Url.Action("SendInventoryGridData", "InventoryManager")',
success: function (data) {
console.log(data);
},
data: { "ViewBy": viewBy, "BrandId": brandId, "Asins": Asins },
accept: 'application/json'
});
`````````````````````````````````````````````````````````````````````````
// Kendo Grid in popup window
`````````````````````````````````````````````````````````````````````
#(Html.Kendo().Grid<Grit.WebUI.Models.Inventory.InventoryVM>()
.Name("gReviewFeedbackCombo")
.Columns(columns =>
{
columns.Bound(p => p.Asin).Title("Asin");
columns.Bound(p => p.Quantity).Editable("productNameEditable");
})
.Scrollable(sc => sc.Endless(true))
.HtmlAttributes(new { style = "height:400px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.Asin))
.Read(read => read.Action("SendInventoryGridData", "InventoryManager")))
.Events(events => events.DataBound("dataBound")
)
)
``````````````````````````````````````````````````````````````````````````
After some thought I found an answer. I removed the ajax call and let the grid call the function itself. Worked like a charm.
My main page has a GridView and Buttons for add/update. When I click the update button, a window pops up(used JavaScript) which has input fields and a Button for actually updating the record. What I want to know is how to refresh the main page when I click the update button inside the pop-up window.
This is the partial code of what I tried on actual update's OnClick:
if (PreviousPage != null)
{
GridView gridv = (GridView)Page.PreviousPage.FindControl("GridView1");
gridv.DataBind();
}
While debugging, I realized that the if statement was never executed. Does that mean pop-up windows do not have a PreviousPage initially? If so how can I reach the Main page then? (i shall note that the main page is not a master page)
This is how I create the pop-up on button click from the Main page(so it's a new window):
function btnEditEP_Click() {
var recID = document.getElementById('<%=tboxEdit.ClientID%>').value;
window.open("editPopupEP.aspx?Txt=" + recID, "_blank", "toolbar=yes", "resizable=yes", "scrollbars=yes");
}
On your child window you can call a function something like this in your child window call on your update function
<script type="text/javascript">
function MyFunction() {
window.opener.PostBackParentWindow();
window.close();
}
</script>
and in your parent window call add this code
<script type="text/javascript">
function PostBackParentWindow() {
__doPostBack(null, null);
}
</script>
Hope it might help
On the update click also perform the close pop up call
<script>
var popupWindow;
function openw(url) {
popupWindow = window.open(url, "popup", "");
}
function closew() {
if (popupWindow) {
popupWindow.close();
}
}
</script>
open<br />
close
like described here . How to close a popup window in a parent window?
and then in closw you can call your parent page with true/false value depending on your update operation. You can use a hiddenfield for this.
Let's say I have a view with Kendo treeview bounded to remote data source.
#(Html.Kendo().TreeView()
.Name("schemas")
.DataTextField("name")
.DataSource(dataSource => dataSource.Read(read => read.Action("Schemas", "Forms")))
.Events(events => events
.Select("onSelected")))
So the treeview just makes a call to the Schemas action in my FormsController
Also on the same page I have a form, which is simply the textbox and a button to submit the form
#using (Html.BeginForm("Load", "Forms", FormMethod.Post))
{
<div id="rootNode">
#Html.TextBox("rootElementName")
#Html.Button("next")
</div>
}
So I am just wondering what is the best way to handle user input and pass it to the the Load action of the FormsController? The user should select one of the options in the treeview and enter the value into textbox.
Or should I create some sort of viewmodel for my view with all my nodes inside + two additional fields for the textbox input and selected node?
I would take out the form elements, leaving:
<div id="rootNode">
#Html.TextBox("rootElementName")
#Html.Button("next")
</div>
The following js, this will pick up the tree item id on select.
The second function will call your Form controller action with the parameters.
<script>
var selectedNodeid;
//get the tree selected item id
function onSelected(e) {
var data = $('#schemas).data('kendoTreeView').dataItem(e.node);
selectedNodeid = data.id;
}
//button on click event
$(document).ready(function () {
$("#next")
.bind("click", function () {
//get parameters then pa
var id = selectedNodeid;
var rootElementName = $('#rootElementName).val()
$.ajax({
url: "Form/Load",
data:{id:id,rootElementName:rootElementName},
success: function () { }
});
}
})
</script>
I haven't tested this but it should be close.
I look forward to someone adding a better approach.
I need custom grid behavior on client side: on press Add button, grid create new row in InLine mode, and on press Add2 button, grid create new row in InForm mode, with additional functionality. I add new custom command in toolbar and call javascript function Add2, where try change grid edit mode. But edit mode not changed, new row created in InLine mode. What I do wrong, and in general, is it possible?
<script type="text/javascript">
function Add2() {
var grid = $('#Property').data('tGrid');
grid.editing.mode = 'InForm';
grid.addRow();
}
</script>
Html.Telerik().Grid<Models.PropertyTypeModel>().Name("Property")
// skip
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_PropertySelect", "Options", new { oid = "<#= OptionTypeID #>" })
// skip
})
.ToolBar(commands =>
{
commands.Insert().ButtonType(GridButtonType.ImageAndText);
commands.Custom().Text("Add2").Url("javascript:void(0)").HtmlAttributes(new { onclick = "Add2()" });
})
.Editable(editing => editing
.Mode(GridEditMode.InLine)
)
)
Thanks in advance for your reply.
This is not currently supported.
I am trying to use the Telerik MVC Menu control (as a button bar), but can't seem to be able to set the width to auto-generate. What I mean is, the menu continues to the end of the DIV. I would like the menu to only be as wide as the sum of the button widths. Actually, the Telerik demo is doing the same thing as my menu is doing:
http://demos.telerik.com/aspnet-mvc/razor/menu/sitemapbinding
(Look at how the menu continues on to the right of "Other product lines").
Here is my menu:
#{ Html.Telerik().Menu()
.Name("case-history-button-menu")
.ClientEvents(events => events.OnSelect("onCaseHistoryMenuBarSelect"))
.Items(menu =>
{
menu.Add()
.Text("Add a Response").HtmlAttributes(new { id = "cases-history-addresponse" } ); #*Sets the ID HTML attribute so we can access it *#
menu.Add()
.Text("Add a Comment").HtmlAttributes(new { id = "cases-history-button-addcomment" }); ;
menu.Add()
.Text("Back to Cases").HtmlAttributes(new { id = "cases-history-button-back" }); ;
})
.Render();
}
I do realize that I could just hard code my width ... but as I add or remove buttons (programatically) I want the menu to resize.
The Telerik MVC menu is rendered as an <UL> element. The latter has block display by default which means it occupies all the available space. You can override the display to "inline-block" and then the menu should be sized as you need it to:
#{ Html.Telerik().Menu()
.Name("case-history-button-menu")
// set the display to inline-block
.HtmlAttributes( new { style = "display: inline-block" } )
}
Have in mind though that older versions of IE won't accept inline-block display. You may need "inline" if you must support older IEs.