i'm using kendo mvc grid.i want Read/Update functions run by manuly(jquery)
it's my function:
.Read(read => read.Action("Eqp_Read", "ShiftReports"))
You should call datasource read method.
$("#your_grid_id").data("kendoGrid").dataSource.read();
In Kendo grid MVC, you can use. Events to specify your own javascript functions for read, update, save and so on.
In those javascript functions, you can write ajax calls like below.
Example:
.Events(
m => m.Save("SaveFunc")
.Edit("EditFunc")
.DataBound("ReadFunc")
)
And in JavaScript:
function SaveFunc(e) {
//Your ajax code here
}
Related
I'm using LoadContentFrom method of Kendo TabStrip, it allows tabstrip to load content from another action method.
The content will be loaded only when user clicks the link, tab, therefore it causes a short delay that I'd like to avoid. I wasn't able to find any method to enable eager loading for this control and load all the tabs at once. Any suggestion or workaround is welcome.
This is a sample tabstrip:
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.Animation(false)
.SelectedIndex(0)
.Items(i =>
{
i.Add()
.Text("Action1")
.LoadContentFrom("Action1", "Controller");
i.Add()
.Text("Action2")
.LoadContentFrom("Action2", "Controller");
i.Add()
.Text("Action3")
.LoadContentFrom("Action3", "Controller");
})
)
UPDATE
Thanks to #joaumg, this is the JS code that I'm using:
$('#tabstrip').data().kendoTabStrip.reload($('#tabstrip ul li'))
Reload method does the job and loads the tab, and $('#tabstrip ul li') selector return an array of all tabs.
There are 3 ways of doing it...
First, generating the HTML and calling $("#tabstrip").kendoTabStrip();
Second, generate a JSON, and pass it as dataSource
Both uses the client side and can be seen here: http://docs.telerik.com/kendo-ui/web/tabstrip/overview#initialize-the-tabstrip
A server side uses the TabStrip HtmlHelper, which doc's can be found here: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/tabstrip/overview#tabstrip ( look at the .Items and .Content methods )
I am using MVVM framework(view/viewmodel). I have a hyperlinked field on one of the kendo grid columns. My requirement is that on clicking the hyperlink on the grid, viewmodel function should call. I am trying to achieve this but not able to call. Please suggest any approach for this.
Define a template as:
template: 'Click-me',
And then define SayHello function as:
function SayHello(me) {
alert("hello");
var item = $("#grid").data("kendoGrid").dataItem($(me).closest("tr"));
console.log("item", item);
item.sayGoodbye();
}
NOTE: That SayHello needs to be global.
Where sayGoodbye is defined in your model.
Example here http://jsfiddle.net/OnaBai/2p3yH/
I'm working on a web application project using Scala / Lift. I would like to make my application support drag and drop to improve the user experience.
But I'm not quite sure how to bridge jQuery part with Lift.
Currently I've a working UI part, an div block has class named listRow is dragable with an HTML5 attribute data-stuffid which has an ID from database.
It can be dragged to an block named nextAction, and I could print out the data-stuffid field correctly in JavaScript.
Here is my JavaScript code block:
<script type="text/javascript">
$('.listRow').draggable({
revert: true
});
$("#nextAction").droppable({
accept: ".listRow",
tolerance: "pointer",
activeClass: "dropActive",
hoverClass: "dropHover",
drop: function(event, ui) {
var stuffID = ui.draggable.data("stuffid")
console.log(stuffID)
}
})
But I don't know how to call to a Lift AJAX handler, and pass stuffID to Lift in the case.
What I would like to do is have an Scala function likes the following:
def showDialog(stuffID: String): JsCmds
{
// Do some server side work, ex: querying database
// Return a javascript cmds likes SHtml.ajaxButton...etc.
Alert("SutffID:" + stuffID)
}
And when user drag a .listRow to "#nextAction", showDialog would be called, and return the javascript to browser and let browser execute it.
You probably looking for one of these two functions. I'd take a look at :
JsCmds.Function and SHtml.ajaxCall
JsCmds.Function will allow you to create a JavaScript function, and SHtml.ajaxCall will allow you to execute code via ajax. You'd create a function in your Lift CSS Selector and then you'd be able to call that functions directly from your jQuery code.
There are a lot of discussions on using both those, some relevant info might be:
https://groups.google.com/forum/?fromgroups=#!topic/liftweb/4EyE1EbcDDM
https://groups.google.com/forum/?fromgroups=#!topic/liftweb/aAmvSjPxcyI
When initializing jquery from lift, just send lift ajax callback as parameter
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(){...});
Using MVC2 I have created a form using the Ajax helper in a view. The form posts to a controller which binds to a model object. A PartialViewResult is returned by the controller and the HTML gets updated into a div. So far, so good.
I now need to submit the same form and return the results in a generated file for the user to download. Obviously I don't want the file contents going into my div.
Is there an elegant way to handle this situation without having to hack it to bits? I'm fairly new to MVC / AJAX and it's still a point of confusion for me.
You may not use ajax call to download files. Following links may help you to do what you are trying to do
JQuery Ajax call for PDF file download
http://forums.asp.net/t/1683990.aspx/1
OK, so I couldn't find any simple solutions anywhere so I came up with my own. I remove the Ajax event handlers from the form when I want the download, put them back when I want the Ajax. I'm guessing there's a more elegant way to do this, as this feels like a 'clever trick'. I'm open to better suggestions but so far this is my preferred method.
Reference ToggleAjax.js on my page:
var ToggleAjax = function ($, form) {
var onclick = form.onclick,
onsubmit = form.onsubmit;
$('input[class*="ajax-enabled"]').click(function () {
form.onclick = onclick;
form.onsubmit = onsubmit;
});
$('input[class*="ajax-disabled"]').click(function () {
form.onclick = function () { };
form.onsubmit = function () { };
});
};
Then I call ToggleAjax on my page and pass in the form:
$(function () {
ToggleAjax($, $('form')[0]);
});
And of course I add the class ajax-enabled or ajax-disabled to the input controls.