Telerik Forums
UI for ASP.NET MVC Forum
1 answer
325 views

I have a Telerik Grid for asp.net MVC 4 using Kendo 2014.
The grid has a 1 foreign key and I am using the foreign key template.

The Grid is working properly as far as CRUD operations, however, the GridData source is not getting updated. Consequently when trying to use the new updated values from the grid.dataSource (visible in the grid) I am getting the old values:

I have tried to update the datasource but am not able to get any of the prescribed datasource events events triggered  other than events.change which is not specific enough.

Here is my Grid:

@(Html.Kendo().Grid<PMTWebReconcile.Models.ProcEquipViewModel>()
              .Name("ProcEqGrid")
            //.HtmlAttributes(new { style = "height: 480px; margin-left: 260px" })
              .Events(events => events.Edit("onEdit"))//.Events(events => events.Change("onChange"))
              .Columns(columns =>
                {
                    columns.Bound(p => p.peqID).Width(20).Title("ID");
                    columns.Bound(p => p.peqName).Width(120).Title("Name");
                    columns.Bound(p => p.peqTag).Width(120).Title("Tag");
                    columns.Bound(p => p.peqDescription).Width(200).Title("Description");
                    columns.ForeignKey(p => p.eqtID, (System.Collections.IEnumerable)ViewData["EqptTypes"], "TypeID", "Type").Title("Eqpt Type").Width(200);
                  //columns.Bound(p => p.eqtID).Width(120).ClientTemplate("<span tabindex='0' class='k-widget k-dropdown k-header' unselectable='on'><span class='k-dropdown-wrap k-state-default' unselectable='on'><span class='k-input' unselectable='on'>Select Type</span><span class='k-select'><span class='k-icon k-i-arrow-s'>select</span></span></span><input name='Type' id='Type' style='display: none;' type='text' data-role='dropdownlist'></span>");
 
                         
                   columns.Bound(p => p.peqID).Width(10).Title("Edit Sizes")
                        .ClientTemplate("<button type='button' onclick=\"EditProcEquipment(this);\" text='text'  class='k-button k-button-icontext k-grid-edit' style='min-width: 30px; min-height: 25px;  height: 25px; padding-top: 0; padding-right: 0;'><span class='k-icon k-edit'></button>");
                    columns.Bound(p => p.peqActive).Width(30);
                    columns.Command(commands =>
                        commands.Edit().HtmlAttributes(new { style = "min-width:64px;width:80px" });
                           //commands.Delete().ButtonType(GridButtonType.Image);
                    }).Width(200);
                         
                  })
                  .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); }) // toolbar.Save(); })
                   //.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext k-grid-add' href='#' onlick='customCreateCmd()'>Add new record</a>"))
                    .HtmlAttributes(new { style = "veritcal-align:top" })
                   .Selectable(s => s.Mode(GridSelectionMode.Single))
                                  //.Selectable(s => s.Mode(GridSelectionMode.Multiple))
                                  //.Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode.
                  .Editable(editable => editable.Mode(GridEditMode.InCell))
                  .Pageable()
                  .Sortable()
                  .Filterable()
                  .DataSource(dataSource =>  dataSource
                  .Ajax()
                  .Batch(true)
                  .ServerOperation(false)
                  .Events(events => events.Error("errorHandler").Sync("onSync").RequestEnd("onRequestEnd"))//.Sync("sync_handler"))
                   //.Events(events => events.RequestEnd("onRequestEnd"))
                   //.Events(events => events.Change("onChange"))
                   //.Events(events => events.Push("onPush"))
                   //.Events(events => events.Edit("onEdit"))
                  .AutoSync(true)
                  .Model(model =>
                          {
                            model.Id(p => p.peqID); // Specify the property which is the unique identifier of the model.
                            model.Field(p => p.peqID).Editable(false); // Make the ProductID property not editable.
                            //model.Field(p => p.Type).DefaultValue(new PMTWebReconcile.Models.EquipTypeViewModel());
                            model.Field(p => p.eqtID).DefaultValue(16);
                            model.Field(p => p.plsID);//need to come from treeview selector
                           //model.Field(p => p.plsID).DefaultValue(Html.Kendo().TreeView("tvPH").select());
                         })
                         .Read(read => read.Action("ForeignKeyColumn_Read", "PlantHierArchy", new { plsID = (subUnitID) }))
                         .Create(create => create.Action("ForeignKeyColumn_Create", "PlantHierArchy"))
                         .Update(update => update.Action("ForeignKeyColumn_Update", "PlantHierArchy").Type(HttpVerbs.Post).Data("UpdateHandler"))
                       )                       
                         //.ClientDetailTemplateId
              )

And my corresponding Update and Insert which are updating the Database Successfully.

[AcceptVerbs(HttpVerbs.Post)]
       public ActionResult ForeignKeyColumn_Create([DataSourceRequest] DataSourceRequest request,
           [Bind(Prefix = "models")]IEnumerable<ProcEquipViewModel> procEqs)
       {
           var results = new List<ProcEquipViewModel>();
           if (procEqs != null && ModelState.IsValid)
           {
               foreach (var proc in procEqs)
               {
                   CreateProcEquip(proc);
                   results.Add(proc);
               }
           }
 
           return Json(results.ToDataSourceResult(request, ModelState));
       }
[AcceptVerbs(HttpVerbs.Post)]
      public ActionResult ForeignKeyColumn_Update([DataSourceRequest] DataSourceRequest request,
          [Bind(Prefix = "models")]IEnumerable<ProcEquipViewModel> procEqs)
      {
          if (procEqs != null && ModelState.IsValid)
          {
              foreach (var proc in procEqs)
              {
                  //productService.Update(product);
                  UpdateProcEquip(proc);
              }
          }
 
          DataSourceResult DSR = procEqs.ToDataSourceResult(request, ModelState);
          JsonResult JR = Json(DSR);
          return JR;
      }

How can I update my data source?
additionally it would also be nice to be able to capture and update other update items but The grid.datasource is the most important.

Kostadin
Telerik team
 answered on 21 Nov 2016
1 answer
374 views

Hello Telerik team,

I just wanted to know if there are plans to decouple DataSourceRequest / DataSourceResult from the MVC subsystem ?

We want to use it between a WCF client and a WCF server but it does not serialize well with the SOAP MVC XML serializer.
We succeeded in serializing JSON in the WCF XMLmessage although it require us to convert/parse JSON to DataSourceRequest/DataSourceResult both at the client and the server.
By the way in order to achieve this the WCF hosting project has to reference a bunch of MCV assemblies just because the Kendo.Mvc.Ui assembly depends on it.

In addition to this serializing / deserializing JSON <-> DataSourceRequest/DataSourceResult is easy with the Newtonsoft JSON converter but it becomes complicated if we want to transfer an object instead of a JSON string (representing a serializable object similar to DataSourceRequest/DataSourceResult) ...

I may be wrong but it seems to me that all of this seems fairly complex for a task that sounds simple.

I saw the following post about using existing WCF service but I think this does work only with REST web service.

So is there any plan to be able :
 - to use DataSourceRequest / DataSourceResult in wcf xml serialization out of the box
 - to use the DataSourceRequest / DataSourceResult types in a convenient way without referencing all the MVC subsystem types (such as System.Web.Mvc.dll, System.Web.WebPages.dll, ...)

?

Thanks for your work and support,
 Dev

 
Ianko
Telerik team
 answered on 21 Nov 2016
2 answers
303 views

Hi,

I use a Edit Template for the popup edit in my grid and it works fine except that if I change something and click save without closing the window the changes from the database (there are some computed columns) are reflecting in the grid but not in the popup - why?
(see also attached Pictures BeforeSave.jpg and AfterSave.jpg)

Isn't the popup window bind with MVVM in two way binding so changes in the grid should reflect in the window?

Robert

here is the html for the Template

<div class="container-fluid">
    <div class="form-horizontal" style="width:750px" id="formFachgruppenzugehörig" name="formFachgruppenzugehörig">
        @(Html.HiddenFor(m => m.Mitglied_ID, ""))
        @(Html.HiddenFor(m => m.Berechtigung_ID, ""))
        @(Html.HiddenFor(m => m.Sparte_ID, ""))
        @(Html.HiddenFor(m => m.Fachgruppe_ID, ""))
        @(Html.HiddenFor(m => m.FachgruppeSub_ID, ""))
        @(Html.HiddenFor(m => m.Fachgruppe_Version_ID, ""))
        @(Html.HiddenFor(m => m.Berufsgruppe_ID, ""))
        @(Html.HiddenFor(m => m.Berufsgruppe_Version_ID, ""))
        @(Html.HiddenFor(m => m.RowVersion, ""))
        @(Html.HiddenFor(m => m.Timestamp, ""))
         
         
        <div class="row p-h-xs">
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label">Sparte:</label>
                <div class="col-sm-9">
                    <p class="gpdbform-control-static">
                        <span class="label label-success pull-right">@(Html.ValueFor(m => m.Sparte_ID, ""))</span>
                        <span data-bind="text: Sparte"></span>
                    </p>
                </div>
            </div>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label">Fachgruppe:</label>
                <div class="col-sm-9">
                    <p class="gpdbform-control-static">
                        <span class="label label-success pull-right">@(Html.ValueFor(m => m.Fachgruppe_ID, ""))</span>
                        <span data-bind="text: Fachgruppe"></span>
                    </p>
                </div>
            </div>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label">Berufsgruppe:</label>
                <div class="col-sm-9">
                    <p class="gpdbform-control-static">
                        <span class="label label-success pull-right">@(Html.ValueFor(m => m.Berufsgruppe_ID, ""))</span>
                        <span data-bind="text: Berufsgruppe"></span>
                    </p>
                </div>
            </div>
            <hr class="light"/>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label">Rechtsw.datum:</label>
                <div class="col-sm-4">
                    @(Html.EditorFor(m => m.Rechtswirksamkeitsdatum, ""))
                    @Html.ValidationMessageFor(model => model.Rechtswirksamkeitsdatum)
                </div>
                <label class="col-sm-4 control-label">Hauptbetreuende Fachgruppe:</label>
                <div class="col-sm-1">
                    <div class="checkbox">
                        <label>
                            @(Html.EditorFor(m => m.Hauptbetreuung, ""))
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label">gelöscht:</label>
                <div class="col-sm-4">
                    @(Html.EditorFor(m => m.gelöscht, ""))
                    @Html.ValidationMessageFor(model => model.gelöscht)
                </div>
                <label class="col-sm-4 control-label">Hauptgewerbe:</label>
                <div class="col-sm-1">
                    <div class="checkbox">
                        <label>
                            @(Html.EditorFor(m => m.Hauptgewerbe, ""))
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label">Aktuell:</label>
                <div class="col-sm-4">
                    <div class="checkbox">
                        <label>
                            @(Html.EditorFor(m => m.Aktuell, ""))
                        </label>
                    </div>
                </div>
                <label class="col-sm-4 control-label">Hauptgremium:</label>
                <div class="col-sm-1">
                    <div class="checkbox">
                        <label>
                            @(Html.EditorFor(m => m.Hauptgremium, ""))
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group m-xxs">
                <div class="col-sm-6">
                </div>
                <label class="col-sm-5 control-label">Nebengremium:</label>
                <div class="col-sm-1">
                    <div class="checkbox">
                        <label>
                            @(Html.EditorFor(m => m.Nebengremium, ""))
                        </label>
                    </div>
                </div>
            </div>
            <hr class="light"/>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label"><small class="text-muted">angelegt:</small></label>
                <div class="col-sm-3">
                    <p class="gpdbform-control-static">
                        <small class="text-muted"><span data-format="dd.MM.yyyy hh:mm:ss" data-bind="text: angelegt"></span></small>
                    </p>
                </div>
                <label class="col-sm-3 control-label"><small class="text-muted">Mitglied_ID:</small></label>
                <div class="col-sm-3">
                    <p class="gpdbform-control-static">
                        <small class="text-muted"><span data-bind="text: Mitglied_ID"></span></small>
                    </p>
                </div>
            </div>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label"><small class="text-muted">geändert:</small></label>
                <div class="col-sm-3">
                    <p class="gpdbform-control-static">
                        <small class="text-muted"><span data-format="dd.MM.yyyy hh:mm:ss" data-bind="text: geändert"></span></small>
                    </p>
                </div>
                <label class="col-sm-3 control-label"><small class="text-muted">Berechtigung_ID:</small></label>
                <div class="col-sm-3">
                    <p class="gpdbform-control-static">
                        <small class="text-muted"><span data-bind="text: Berechtigung_ID"></span></small>
                    </p>
                </div>
            </div>
            <div class="form-group m-xxs">
                <label class="col-sm-3 control-label"><small class="text-muted">Benutzer:</small></label>
                <div class="col-sm-3">
                    <p class="gpdbform-control-static">
                        <small class="text-muted"><span data-bind="text: Benutzer"></span></small>
                    </p>
                </div>
            </div>
        </div>
 
    </div>
</div>

Robert Madrian
Top achievements
Rank 1
Veteran
Iron
 answered on 21 Nov 2016
2 answers
479 views

Hi,

I want to use my own Editor (PartialView) to edit row's from my Kendo MVC grid
(not use the build in template editing because off the limitations with the layout like save and cancel button location etc.)
attached you can see a Picture off my editing form (it uses i.e also Kendo Toolbar with save button...)

My question is: what is the best approach to implement this?

I have found two possibilities to solve this but not sure if these are good Solutions:

  1. Load the PartialView with the Kendo window without binding to the grid data but select the data in the Controller and use that model binding
    window.refresh({
            url: "/Mitglied/Fachgruppenzugehoerig/_Edit/",
            data: {
                mitgliedid: dataitem.Mitglied_ID,
                berechtigungid: dataitem.Berechtigung_ID,
                sparteid: dataitem.Sparte_ID,
                fachgruppeid: dataitem.Fachgruppe_ID,
                fachgruppesubid: dataitem.FachgruppeSub_ID,
                fachgruppeversionid: dataitem.Fachgruppe_Version_ID,
                berufsgruppeid: dataitem.Berufsgruppe_ID,
                berufsgruppeversionid: dataitem.Berufsgruppe_Version_ID
            }

in the partial view I use normal razor Syntax to bind to the model:

...
<div>
<label class="col-sm-3 control-label">Rechtsw.datum:</label>
    <div class="col-sm-4">
    @(Html.EditorFor(m => m.Rechtswirksamkeitsdatum, ""))
    @Html.ValidationMessageFor(model => model.Rechtswirksamkeitsdatum)
</div>

with this approach i have to refresh the grid after data changes...

2. Load the PartialView with the Kendo window and use "Kendo.bind" to bind the controls to the valus of the Kendo grid:

var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataItem(grid.select());
kendo.bind($('#externaleditor'), dataItem);

here in the partial view I use different razor Syntax to bind to the grid values (see data_bind = "value: Rechtswirksamkeitsdatum") :

<label class="col-sm-3 control-label">Rechtsw.datum:</label>
                <div class="col-sm-4">
                    @(Html.TextBox("Rechtswirksamkeitsdatum", "", new { data_bind = "value: Rechtswirksamkeitsdatum", @class = "k-textbox" }))
                    @Html.ValidationMessageFor(model => model.Rechtswirksamkeitsdatum)
                </div>

 

robert

 

Robert Madrian
Top achievements
Rank 1
Veteran
Iron
 answered on 21 Nov 2016
3 answers
162 views

We have a set up where we have a grid in a dialog and are trying to fire a simple action ...

So the end configuration on the dialog looks like this ..

.Actions(actions =>
{
actions.Add().Text("Cancel");
actions.Add().Text("OK").Primary(true).Action("onActionOK");
})

 

the function is a pretty simple one right now.. just trying to make sure it is hit

function onActionOK(e) {
console.log("actionOK event");

}

 

But this is never hit and there are no messages in the console.... is there an alternate way that I should be defining the action?

 

Thanks
AJ

Rumen
Telerik team
 answered on 18 Nov 2016
3 answers
116 views
Hi,
I'd like to know how can I show DropDownList as the default control type for specific column in GridView control on its initial loading instead of showing the default label in each row for specific column.
I'm using in-cell edit mode and I followed your demos to show DropDownList for specific column by using ClientTemplate and ForeignKey Column Type ..Its working good, However, I'd like to show this DropDownList always for this columns in all rows in GridView initial loading not only when focus on the related cell.

View.cshtml:

@(Html.Kendo().Grid<MyModels.Models.ViewModels.ProductCategoryViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(160);
        columns.Bound(p => p.UnitPrice).Width(120);
        columns.Command(command => command.Destroy()).Width(90);
    })
    .ToolBar(toolBar =>
        {
            toolBar.Create();
            toolBar.Save();
        })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
        })
        .PageSize(20)
                .Read(read => read.Action("GetAllProductsAndRelatedCategories", "Product"))
                .Create(create => create.Action("AddProductsAndRelatedCategories", "Product"))
                .Update(update => update.Action("UpdateProductsAndRelatedCategories", "Product"))
                .Destroy(destroy => destroy.Action("RemoveProductsAndRelatedCategories", "Product"))
    )
)

Eyup
Telerik team
 answered on 18 Nov 2016
9 answers
393 views
Does the scheduler have drag and drop capability?  If so, is there an example or documentation on how to implement drag and drop?
Vladimir Iliev
Telerik team
 answered on 17 Nov 2016
7 answers
306 views

I have a Telerik MVC Grid with server binding. I configure it to have an 'all' page size option. The page size selection works and when I pick 'all' it does show all the records but the selected page size value in the dropdown resets to default. Is this a bug or I'm doing something wrong? Is there a workaround for this? I've attached an example project (excluded Kendo components from the archive). 

Thank you.

Nik

Pavlina
Telerik team
 answered on 17 Nov 2016
1 answer
114 views

I have a grid that has a command edit , I would like to retrieve the new text in the events.Save("onEdit")) javascript.

I cannot see how to do this, and cannot locate any samples in the forms.

 

My current function and grid is below.  How can I retrieve the data from the email address when the update button is selected in edit more.

 

function onEdit(e) {
e.preventDefault();
alert("save 1");
var grid = $("#siteManagementNotifications").data("kendoGrid");
var tr = $(e.target).closest("tr");
var data = this.dataItem(tr);
alert(data.emailAddress);

}

 

@(Html.Kendo().Grid<WebSite.Library.Models.SiteNotifications>()
.Name("siteManagementNotifications")
.Columns(columns =>
{
columns.Bound(p => p.siteId).Title("Id").Width(50).Hidden();
columns.Bound(p => p.siteNotificationId).Title("Id").Width(50).Hidden();
columns.Bound(p => p.siteNotification).Title("Type").Width(50);
columns.Bound(p => p.emailAddress).Title("Notification").Width(120).EditorTemplateName("TextBoxEditor");
//columns.Command(command => command.Custom("Save").Click("SaveSiteNotification")).Width(180);
columns.Command(command => { command.Edit(); }).Width(250);
})

.Events(events => events.Save("onEdit"))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.NoRecords("No notifications exist.")
.DataSource(source => source
.Custom()
.Schema(schema => schema
.Model(m => m.Id(p => p.siteNotificationId)))
.Transport(transport => transport
.Read(read =>
{
read.Url("/Api/SiteInfo/_getNotifications/" + Model.SiteId)
.DataType("json");
})
))
)

Konstantin Dikov
Telerik team
 answered on 17 Nov 2016
1 answer
106 views
Hi,  How to set  Kendo Grid scrollable: virtual: false with javascript after grid databound successfull, i tried that  $("#grid").kendoGrid({scrollable: {virtual: false},});  but it is not working. I want to change it dynamically. Please Help.
Stephen
Top achievements
Rank 2
 answered on 16 Nov 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?