I want to show a custom command button in a telerik grid hierachy depending on the master-row data
Hi, I have a telerik hierarchy grid data, and I want to show a custom command button in the detail row, depending on the master-row data.
in the detail template grid, i call the ShowIfSubmitted() method.
command.Custom("Void").Text("Void").Click("VoidDeal").Visible("ShowIfSubmitted");
In the function:
function ShowIfSubmitted(dataItem) {
}
I only can access to the model data in the detail row.
But I want to access de master-row data, to check if the value of the property in the model meets the criteria to hide the button in the detail row.
My workaround was to extract the parent row instance model in order to get its id, with this field I created and ajax call to the DB to get all the info that I needed. Actually, with the "arguments" object, I could have extracted the id value.
Basically I just did this:
function ShowIfSubmitted(dataItem) {
var deal_status_id = 0;
$.ajax({
async: false,
data: { dealId: dataItem.Deal_Number },
url: '#Url.Action("action", "controller")',
success: function (data) {
deal_status_id = data;
}
})
return deal_status_id == submitted_status;
}
In the controller action is where I call the service.
Related
I have two controllers, A and B. A is responsible for representing some data in a grid view. Assume I have a button called "ShowInfo" which brings additional info about the selected record. And to retrieve the info about the selected record is the job of controller B.
The info is so little that it'd take just a tiny place in the corner if I navigate to another view. So I thought I'd rather bring that info inside a jQuery dialog without navigating to anywhere. But I'm a bit confused as to how to do it.
Here's the action method in controller B that is responsible for providing that info in a partial view.
public class BController:Controller{
public ActionResult GetInfo(int recordID){
RecordInfo info=RecordsRepository.GetRecordInfoById(recordID);
return PartialView(viewName:"RecordInfo",model:info);
}
}
I don't know, maybe the action method needs to different. Maybe I should return JSON instead of Partial view, but anyway, how do I do that?
You can use the jquery .get or .load methods. For example, to replace the contents of <div id="SomeElement"></div> with the partial view returned by GetInfo()
$('#ShowInfo').click(function() {
var url = '#Url.Action("GetInfo", "B")';
var ID = someValue; // the value to pass to the GetInfo method
$.get(url, { recordID: ID }, function(data) {
$('#someElement').html(data);
});
});
You can use Jquery ajax to achieve this.
Wrtire jquery ajax on the view page and call the partial view action from ajax.
receive the result in html format and replace it in the dialog box.
Put following code on main view page(ShowInfo button page)
$(document).ready(function(){
$("#ShowInfo").on("click",function(){ ///give id to showinfo button and attr data-id is record id
var id=$(this).attr("data-id");
$.ajax({
type: "POST",
url: "B/GetInfo",
data: JSON.stringify({ recordID: id }),
dataType: "html",
success: function (html)
{
////put the html response in dialog box
}
});
})
});
I have Parent Child kendo ui grids.
The child Grids read looks like this
read: {
url: baseURL + "/GetOrgSchools/OrgID=" + window.SelectedOrg,
// data: { OrgID : window.SelectedOrg }, // pass aditional data
dataType: "json" // <-- The default was "jsonp"
},
I am able to filter the child records on the selection of Parent row using this
window.SelectedOrg = orgID;
$("#gridOrgSchools").data("kendoGrid").dataSource.read({ OrgID: orgID });
$("#gridOrgSchools").css("display", "block");
But now the child grid has paging Filtering and sorting enabled.
so if I click the next page, it is not passing the OrgID and its value, it starts showing all the records.
What do I need to do so that on all the subsequent paging, filtering etc of child grid, i should be able to stick the OrgID in the URL?
Use the data function of the dataSource to constantly send to the server that field need. It will be automatically send with each server request the dataSource does.
I was able to achieve this using the following in transport of kendou ui
parameterMap: function (options, operation) {
if (operation == "read")
{
if (window.SelectedOrg != null)
options.OrgID = window.SelectedOrg;
}
I need to display a number of "dynamic" grids using jqGrid. By dynamic I mean that both definition and data of the grid are retrieved from a database. There are many grids on the page, so I am trying to minimize the number of server trips, and there is a lot of data, so server-side paging is a must.
My workflow is
On initialization of each grid, retrieve grid definition and first
page of data in one server call.
If a user sorts/pages, then retrieve a page of data from the server
Because I want to retrieve the grid definition and first page of data in one call, I cannot use datatype: 'json', url: '###' approach; instead I do:
grid.jqGrid({
mtype: 'post',
...
datatype: function (postdata) {
if (!init.data) {
var request = {
screenId: settings.screenId,
pageNumber: postdata.page,
pageSize: postdata.rows,
sortColumn: postdata.sidx,
sortDirection: postdata.sortd,
date: settings.date
};
site.callWs("/MyService", request, function (pageResponse) {
//WHAT TO CALL HERE TO SET A PAGE OF DATA?
});
} else {
//WHAT TO CALL HERE TO SET A PAGE OF DATA?
init.data = null;
}
}
});
My data object (pageResponse or init.data) looks like this
I am not sure what method to call on jqGrid once a page of data is returned. I considered addJSONData, but it seems so inefficient to convert JSON back to string, then use EVAL(). Also, considered addRowData or setting the data property, but I am confused how to instruct jqGrid that I am doing server-side paging -- if I set the data property to one page of records, what do I need to do to tell jqGrid that there is a total of 50 records and this is page 1 out of 10.
Thanks for your help.
It was a user error (mine :). I had some show/hide logic in loadComplete of jqGrid, but this event does not fire when addJSONData is called.
addJSONData works just fine when provided with a properly-structured JavaScript object.
I have situation like this:
form with textbox, two dropdowns and grid with selected values
form with search textbox, which needs to know values selected in dropdowns in above form to do searching
First form is for saving whole data to database.
Second form is for searching in database, showing searched values and adding selected values to grid in first form.
It could work if form in form were allowed, but it is not.
I have tried to add hidden values for selected ids in this dropdowns but those values are not binded.
Any ideas?
EDIT:
I have solved that problem with code below for search part of the form:
Javascript:
$('#wsSearch').click(function(e) {
$.ajax({
type: "POST",
url: '#Url.Action("Search", "Definition")',
data: {
word: $('#wsSearchWord').val(),
firstId: $('#wsFirstDropdown').val(),
secondId: $('#wsSecondDropdown').val()
},
success: function(data) {
$('#wsSearchResultContainer').html(data);
}
});
e.preventDefault();
});
Controller:
[HttpPost]
public virtual PartialViewResult Search(string word, int firstId, int secondId)
{
var model = this.service.Search(word, firstId, secondId);
return PartialView("_SearchResult", model.ToList());
}
I'm afraid, but I guess you won't get this without JavaScript. With JavaScript, you could bind on submit events of the search form and then fetch the data from the first form or you could bind on change events of the dropdowns and then change the search form.
I have a Generic list in my Model class. I want to have a textbox with autocomplete in my view which fills data from the generic list. How can I do this?.
For this you will need
Function on server side which will return list of matching data and will accept string entered by the user.
Something like this
public JsonResult AutoComplete(string input)
{
//Your code goes here
}
In the View, for the text box you need to bind KeyDown event. You can take help of jQuery for this. On key down handler you will make an Ajax call to the function you have defined in the Controller. Some thing like this:
$.ajax({
url: '#Url.Action("AutoComplete", "ControllerName")',
data: 'input=' + sampleInput,
success: function (data) {
//Show the UL drop down
},
error: function (data) {
// Show Error
}
});
In response you will get list of strings, which you will need to bind to some html element like "UI". Once done, display this UI with proper CSS below the text box. Using jQuery, you can retrieve the pixel location of text box too.
You can not use Asp.Net Auto Complete box in your project as you are developing app in MVC (no viewstate). I hope you get the idea.
You can use JQuery Autocomplate.
To fill the list, you can populate the data from you object.
I can't remember the exact Razor syntax, but you can refer to this:
//data is your Model object of type List<String>
var listString = [#foreach(x in data) { '#x',}];
$( "#dataList" ).autocomplete({
source: listString
});
<input id="dataList">
JQuery Autocomplte
http://jqueryui.com/demos/autocomplete/
This is client side auto complete, I can provide server side if you need.