I am using dhtmlx grid.I have two grids named grid1,grid2.
I have loaded the two grids using json object.
If i select one record in the grid1 and click on the button that record has to load in the second record.I am able to load that selected record in the second grid using document.location.reload(true);with this, the total page is refreshing.but i want to refresh grid2 only.
I want to refresh grid2 only after click on the button.how can i refresh/reload grid2.
You can use Ajax to load and replace the second grid. Let's say the second grid has an id of second-grid, something like
#Ajax.ActionLink("Load Second Grid", "ActionName", new AjaxOptions
{
UpdateTargetId = "second-grid",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET"
})
will replace what's inside second-grid with the result from ActionName when Load Second Grid is clicked.
You can use onRowSelect handler to catch moment when row clicked in master grid.
And you can use grid.parse API to load new data in second grid.
<script>
grid1.attachEvent("onRowSelect", function(id){
grid2.parse(some_data, "json")
})
</script>
Related
I have view for showing Member details. Inside there is an EditorFor element which represents subjects taken by the member.
#Html.EditorFor(m => m.Subject)
Inside the editor template there is a Html.DropDownListFor() which shows the selected subject and button to delete that subject
I am using an Html.DropDownListFor element as :
#Html.DropDownListFor(m => m.SubjectID, Enumerable.Empty<SelectListItem>(), "Select Subject",
new { #class = "form-control subjects" })
The second parameter(source) is set empty since I want to load the source from an AJAX request; like below:
$.getJSON(url, function (response) {
$.each(response.Subjects, function (index, item) {
$('.subjects').append($('<option></option>').text(item.Text).val(item.ID));
});
// code to fill other dropdowns
});
Currently the html loads before the dropdowns are filled. So the values of all subject dropdowns are set to the default "Select Subject". Is there a way around this or is it the wrong approach?
Note: There are a number of dropdowns in this page. That's why I would prefer to load them an AJAX request and cache it instead of putting in viewModel and filling it for each request.
** EDIT **
In AJAX call, the action returns a json object containing dropdowns used across all pages. This action is decorated with [Output Cache] to avoid frequent trips to server. Changed the code in $.each to reflect this.
You can initially assign the value of the property to a javascript variable, and use that to set the value of the selected option in the ajax callback after the options have been appended.
// Store initial value
var selectedId = #Html.Raw(Json.Encode(Model.Subject.SubjectID))
var subjects = $('.subjects'); // cache it
$.getJSON(url, function (response) {
$.each(response, function (index, item) {
subjects.append($('<option></option>').text(item.Text).val(item.ID));
});
// Set selected option
subjects.val(selectedId);
});
However its not clear why you are making an ajax call, unless you are generating cascading dropdownlists which does not appear to be the case. What you doing is basically saying to the client - here is some data, but I forgot to send what you need, so waste some more time and resources establishing another connection to get the rest of the data. And you are not caching anything despite what you think.
If on the other hand your Subject property is actually a collection of objects (in which case, it should be Subjects - plural), then the correct approach using an EditorTemplate is explained in Option 1 of this answer.
Note also if Subject is a collection, then the var selectedId = .. code above would need to be modified to generate an array of the SubjectID values, for example
var selectedIds = #Html.Raw(Json.Encode(Model.Subject.Select(x => x.SubjectID)))
and then the each dropdownlist value will need to be set in a loop
$.each(subjects, function(index, item) {
$(this).val(selectedIds[index]);
});
If your JSON tells you what option they have selected you can simply do the following after you have populated your dropdown:
$('.form-control.subjects').get(0).selectedIndex = [SELECTED_INDEX];
Where [SELECTED_INDEX] is the index of the element you want to select inside the dropdown.
I have a Kendo grid that has a selectbox on each row.
When I perform an update action on a row, in the database the data for the row is updated and the data for the selectbox is updated. Then I run a dataSource.read() on the grid to refresh the screen. However, even though the row refreshes, the data in the selectbox does not.
So the question is, how do I tell Kendo grid to refresh the data in the selectbox?
you can use dataSource.sync(); for manually refresh the dropdownlist.
var dataSource=new kendo.data.DataSource({
// Datasource Code with Parameter
});
var grid = JQuery("#grid").kendoGrid({
dataSource:dataSource,
});
jQuery('#changeevent').change(function()
{
dataSource.read({
parametername:jQuery("#valueoffeild").val()
});
var grid = jQuery("#grid").data("kendoGrid")
grid.refresh();
});
I have this tiny problem.
I have DIV with id="Contacts", javascript renders some partial VIEW and loads it into that DIV container.
VIEW is basically html page that has uses jQuery tabs plugin to display content with tabs.
the very last row in the VIEW is:
$(function () {
$("#contacts").tabs({ selected: 1 });
});
When it is loaded first time, everything is perfect.
The VIEW has an Ajax.ActionLink, that reloads that partial view back to it's container DIV.
#Ajax.ActionLink("RELOAD",
"Contacts",
null,
new AjaxOptions { UpdateTargetId = "contacts", LoadingElementId = "loading" })
Everything works except, TABS are not created anymore. Just bulleted links.
The script at the end of the VIEW is executing, but doesn't create tabs.
Please advice. Thanks.
I am using RenderPartial to generate CListView and all the contents generated properly and good pagination is working fine too. But when I added my custom JS to elements generated by the CListview it works fine for the the fist page content but when i use pagination and click to page 2 then the JS binding fails.
Is there any other way to bind custom event to elements generated in YII CListview I had tried using live, and on nothing work for me here is my js file.
I think I have to call my function on every ajax load in but how can I achieve in yii
This is the script I am using to update ratings on server with button click and this the element for which these forms and buttons are defined are generated by CListview in yii
$(document).ready(function(){
$('form[id^="rating_formup_"]').each(function() {
$(this).live('click', function() {
alert("hi");
var profileid= $(this).find('#profile_id').attr('value');
var userid= $(this).find('#user_id').attr('value');
console.log(userid);
var data = new Object();
data.profile_id=profileid;
data.user_id=userid;
data.liked="Liked";
$.post('profile_rating_ajax.php', data, handleAjaxResponse);
return false;
});
});
});
You can also try CGridView.afterAjaxUpdate:
'afterAjaxUpdate' => 'js:applyEventHandlers'
The $.each method will loop only on existing elements, so the live binder will never see the ajax-generated content.
Why don't you try it like this:
$(document).ready(function(){
$('form[id^="rating_formup_"]').live('click', function() {
alert("hi");
var profileid= $(this).find('#profile_id').attr('value');
var userid= $(this).find('#user_id').attr('value');
console.log(userid);
var data = new Object();
data.profile_id=profileid;
data.user_id=userid;
data.liked="Liked";
$.post('profile_rating_ajax.php', data, handleAjaxResponse);
return false;
});
});
This problem can be solved by two ways:
Use 'onclick' html definitions for every item that is going to receive that event, and when generating the element, pass the id of the $data to the js function. For example, inside the 'view' page:
echo CHtml::htmlButton('click me', array('onclick'=>'myFunction('.$data->id.')');
Bind event handlers to 'body' as the framework does. They'll survive after ajax updates:
$('body').on('click','#myUniqueId',funcion(){...});
I have a Jquery dialog and I load a view to it which contains a webgrid. It opens normally and display content in a webgrid. But when I click a paging link, then next page of webgrid is not open within the dialog but as a different page in the browser.
Can't I have a webgrid within a Jquery dialog?
If I can, do I have to set specific properties?
You need to define ajaxUpdateCallback function, in example:
var grid = new WebGrid(source: Model,
ajaxUpdateCallback: "GridUpdate",
ajaxUpdateContainerId: "grid"
rowsPerPage: 50);
ensure that your .GetHtml method has :
#grid.GetHtml(
htmlAttributes: new { id = "grid" },
//.. rest of the options here
)
and add the below to your main view
<script type="text/javascript">
function GridUpdate(data) {
$('#grid').html(data);
}
</script>
Take a 5 minutes to look at your WebGrid's code, it will help you a lot and save time in future. what it is, is a HTML table enhanced with jQuery code. Look at page links, and headers (for sorting) they are all just $.load() invocations with Url, and Callback parameter. So What is important is to figure out the right div id and a callback function :)