Questions on Kendo UI for jQuery Forum

16 answers

4.2K+ views

Kendo UI Grid Inserts/Updates create Duplicate Records

Hi, I am using Kendo UI in an MVC application

I have a Kendo UI Grid which performs some CRUD operations but it inserts duplicate records when I try to update an existing record.
Is there a way to replace your insert and update dialog with my own custom jquery dialog.

If I turn-off Batch Editing, my post to the controller fails. My controller has the following annotations:

[AcceptVerbs(HttpVerbs.Post)]
        [JsonParameter(Input = "models", Output = "Offices", DataType = typeof(IList<RegionalOfficeModel>))]
        public ActionResult Delete(IList<OfficeModel> Offices)

 //My code to delete

Grid

answered on 17 Apr 2013

1 answer

71 views

Get cell's column header and rows header?

How to Get cell's column header and rows header when I click a cell?

Grid

answered on 17 Apr 2013

1 answer

1.3K+ views

Pass parameter/value to kendo window

HI,

I'm new to using mvc, kendo & even javascript. I basically need help on how to send data from a button which will be used to bind with a Kendo Editor. I followed the Kendo example for opening a window using jquery but now i want to pass a value (id perhaps)

My code:

@model IEnumerable<Scholarship2013.Models.AwardCart>

<table id="awardSearchResultGrid" style="width:100%">

<thead>

<tr>

<th data-field="awardName">Award Name</th>

<th data-field="description">Award Description</th>

<th>Essay</th>

</tr>

</thead>

<tbody>

@if (Model!=null)

{

foreach (var awc in Model.Where(a => a.Award.IsEssayRequired == true))

{

<tr>

<td>@awc.Award.AwardName</td>

<td>@awc.Award.AwardDescription</td>

<td><span id="undo" class="k-button" onclick="ShowAward(@awc.AwardID)">Add Essay</span></td>

</tr>

}

</tbody>

</table>

@(Html.Kendo().Window().Name("window")

.Title("Essay for ")

.Content(@<text>

<div>

@Html.Kendo().EditorFor("Value of ID here").Name("Test").Value("test")

</div>

</text>)

.Visible(false)

.Modal(true)

.Draggable(true)

.Width(1024)

)

<script>

function onClose() {

$("#undo").show();

}

$(document).ready(function() {

$("#undo").bind("click", function() {

$("#window").data("kendoWindow").open();

});

</script>

Window

answered on 17 Apr 2013

1 answer

91 views

Dynamic Pages on ScrollViewer

I have a ScrollViewer where I need to change the pages on the fly. As you navigate the app I'm changing the content of a scrollviewer in a different view (pre-loading content). If I go from 3 pages, down to 1, and back up to 3 the ScrollViewer only shows 1 page. I've tried the refresh() and content() methods but that doesn't seem to re-initialize the scrollviewer. If I change the content of a scrollviewer how do I tell it to re-initialize itself?

General Discussions

answered on 17 Apr 2013

4 answers

329 views

Handling server side errors (non-MVC version)

I'm aware of the following example showing how to deal with server side errors.
http://www.kendoui.com/code-library/mvc/grid/handling-server-side-validation-errors-during-pop-up-editing.aspx

However I'm trying to handle server side errors using the non-MVC version of the Kendo grid and I notice in the API there is no dataBinding event that I can cancel. So how would I cancel the data binding in this scenario? Thanks,

Scott

Grid

answered on 17 Apr 2013

1 answer

191 views

Show progress on Grid popup edit save

I have a Grid which uses popup editing with a custom popup template.

I've finally got it all working just as I want, with some tricky ajax driven validation, but I've now run into a slight problem.

It takes a couple of seconds for the new or updated data to be sent to the server and a valid response to be received. In this time, users are thinking they've not clicked the Save button properly and are resubmitting the data.

What would be the best way to show some sort of progress indicator to let the user know something is happening until the popup closes and the grid is displayed again.

Thanks.

Grid

answered on 17 Apr 2013

2 answers

481 views

Hidden validators when virtual scrolling & createAt bottom

Hello,

I have a grid with virtual scrolling on it due to huge data.
On all my grids I would like to create new lines only at the bottom of the grid.
When the grid has to display a validator ("field required" as for exemple) the validator is hidden at the bottom of the grid (we only see the arrow but not the complete message).
I don't think it will be hard to reproduce, is there a workaround ? Thanks

@(Html.Kendo().Grid<Integraal.Models.ImmoBaseCptTiersCompte>()

.Name(Model.idView + "immoBaseCptTiers_grilleTiers")

.HtmlAttributes(new { @class = "immoBaseCptTiers_grilleTiers" })

.Columns(columns =>

{

columns.Bound(m => m.ct_num_compte).Width(80);

columns.Bound(m => m.ct_titre);

columns.Command(command => command.Destroy().Text(" ")).Width(40);

})

.Editable(editable => editable.Mode(GridEditMode.InCell)

.CreateAt(GridInsertRowPosition.Top)

)

.Navigatable()

.Resizable(resize => resize.Columns(true))

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))

.Scrollable(scrollable => scrollable.Enabled(true)

.Virtual(true)

)

.Sortable(s => s.AllowUnsort(true).Enabled(true).SortMode(GridSortMode.MultipleColumn))

.AutoBind(false)

.Events(e => e

.Edit("immoBaseCptTiers_grilleTiersEdit")

.Change("immoBaseCptTiers_grilleTiersChange")

)

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Batch(true)

.ServerOperation(true)

.Events(events => events

.Error("kendoGridErrorHandler")

.Sync("immoBaseCptTiers_grilleTiersSync")

)

.Read(read => read.Action("Editing_Read", "ImmoBaseCptTiers").Data("baseCptTiers_additionnalData_read"))

.Create(create => create.Action("Editing_Create", "ImmoBaseCptTiers").Data("baseCptTiers_additionnalData_create"))

.Update(update => update.Action("Editing_Update", "ImmoBaseCptTiers").Data("baseCptTiers_additionnalData_update"))

.Destroy(destroy => destroy.Action("Editing_Destroy", "ImmoBaseCptTiers").Data("baseCptTiers_additionnalData_destroy"))

.Model(model =>

{

model.Id(m => m.ct_num_compte);

model.Field(m => m.ct_soc_code).DefaultValue(Global.GlobalSession.societe.code);

}))

)

Grid

answered on 17 Apr 2013

2 answers

175 views

.kendoMobileListView Web API and endlessScroll challenges

I am having issues getting endlessScroll to work to work with API. Maybe I am just not putting two and two together. I have seen options of converting IEnumerable to IQueryable OData, but that did not work either. Watching the Network trace, it appears that it is passing the correct parameters to the Web API controller.

The current issue is that when I scroll down, the endlessScroll does not get triggered for more records. It returns the pageSize specified but does not make another request to the Web API Get(). Please help! And thanks in advance for the assistance.

HERE IS MY INDEX.HTML PAGE SCRIPT. BELOW IS MY WEB API GET()

<script>

var dataSource;

function listViewInit(e) {

dataSource = new kendo.data.DataSource({

pageSize: 10,

page: 1,

serverPaging: true,

transport: {

read: {

url: "/api/Message/?isArchive=false",

dataType: "json",

type: 'GET'

}

},

parameterMap: function (options) {

var parameters = {

take: options.take,

skip: options.skip,

pageSize: options.pageSize,

page: options.page //next page

};

return parameters;

},

schema: {

data: function (data) {

return data.Data;

},

total: function (data) {

return data.Count;

}

});

e.view.element.find("#secure-inbox").kendoMobileListView({

endlessScroll: true,

dataSource: dataSource,

template: $("#listTemplate").text(),

scrollThreshold: 10

})

.kendoTouch({

filter: ">li",

enableSwipe: true,

touchstart: touchstart_inbox,

tap: navigate_inbox,

swipe: swipe_inbox

});

}

// Other Functions Removed For Forum Post //

</script

>






// GET api/<controller>
       public object Get(bool isArchived = false, int page = 1, int pageSize = 20)
       {
           IEnumerable<Message> data;
 
           int count;
 
           triagedbEntities db = new triagedbEntities();
           db.Configuration.ProxyCreationEnabled = false;
 
           data = (from x in db.view_secure_messages
                       where (x.TriageDecision != null) == isArchived
                       select new Message
                       {
                           msg_id = x.MessageID,
                           message_subject = x.MessageSubject,
                           message_received = x.MessageReceived
                       }).OrderByDescending(a => a.message_received).Skip((page - 1)*pageSize).Take(pageSize).ToList();
           count = data.Count();
 
           return new
           {
               Count = count,
               Data = data
           };
       }

ListView (Mobile)

answered on 17 Apr 2013

1 answer

168 views

How to set the trigger only for the third column td,not all the td in a grid?

How to set the trigger only for the third column td,not all the td in a grid?
I had set all the td like this:
my.contextMenu({
trigger: '#Grid td ',
rightButton: true,
menu: '#testMenu',
callback: ctxCallback
});

Grid

answered on 17 Apr 2013

3 answers

1.0K+ views

Kendo Grid doesn't work in Partial View

Hi,

i try to load a kendo grid in partial view. But i found that edit from inline is not able to work even it was fine at a normal page in this case, i try to copy the same code in index page, grid was working fine.

so i have already upload my test codes, please help to find out what problem exactly it is, thanks!

Grid

answered on 17 Apr 2013