Telerik Forums
UI for ASP.NET MVC Forum
3 answers
139 views

I have a Kendo MVC Grid that has inline editing enabled.  The form has a master SAVE button on top of the form.  The intent is to let the user modify multiple rows and then do one master save.

 

So right now the EDIT button allows the user to edit the row values and presents an UPDATE button.  This works in that the update method specified in the grid's configuration fires the controller event.  In that event I just return the row that was sent in.  That is all working but we would like the red indicator to show in the row in the modified cells after the controller action and then be cleared when the master save button is clicked, and the JavaScript submits the form's modified rows to that controller action in an AJAX batch action on the form.

 

Can someone offer a possible solution?

 

Thanks

Reid
Top achievements
Rank 2
 answered on 03 Jun 2016
1 answer
177 views

I stuggle with this grid and editortemplate with a combobox. My model has a int? idAfdeling that is the foreign key.

With the valuePrimitive set to false, the idAfdeling remains null after a combobox item is selected, it will update once the initial idAfdeling is not null.

With the valuePrimitive set to true, the idAfdeling is updated after selecting an item, but the autobind option is not respected and an ajax call is made.

 

Now i wonder if there is any option to make the combination (combobox, nullable int, bind on demand) work..

@(Html.Kendo().ComboBoxFor(m => m)
    .DataTextField("Omschrijving")
    .DataValueField("idAfdeling")
    .DataSource(ds =>
    {
        ds.Read(read => read.Action("Afdelingen", "Afdeling", new { Area = "Tabellen" }).Data("passAfdeling"));
    })
    .HeaderTemplateId("AfdelingHeaderTemplate")
    .TemplateId("AfdelingTemplate")
    .Suggest(true)
    .ValuePrimitive(false)
    .AutoBind(false)
)

 

 

 

 

 

Bozhidar
Telerik team
 answered on 03 Jun 2016
7 answers
1.2K+ views
Hi

Is there a way to change the items in a dropdownlist (Category) based on a selection from another dropdownlist (Category Value)?

Thanks,
Konstantin Dikov
Telerik team
 answered on 03 Jun 2016
1 answer
84 views

How would one go about accomplishing the following in MVC: Import data from a database into the spreadsheet control and implement formula cells in certain columns.

I'm not sure the methodology to work in a sort of hybrid method using this control. Is there a way to feed formulas from the controller? Currently I am adding null values to properties of my viewmodel so the columns can show up in the spreadsheet, but these wipe out the formulae I am placing in the column. Here is the code I am using. Not the most elegant :)

 

@(Html.Kendo().Spreadsheet()
        .Name("spreadsheet")
        .HtmlAttributes(new { style = "width:100%" })
        .Excel(excel => excel
            .ProxyURL(Url.Action("Index_Save", "Spreadsheet"))
        )
        .Pdf(pdf => pdf
            .ProxyURL(Url.Action("Index_Save", "Spreadsheet"))
        )
        .Sheets(sheets =>
        {
            sheets.Add()
                .Name("Products")
                .DataSource<BBC.Bids.ViewModels.OrderViewModel>(ds => ds
                    .Ajax()
                    .Batch(true)
                    .Read(r => r.Action("Orders_Read", "Grid").Data("selectedOrder"))
                    .Update("Products_Update", "Spreadsheet")
                    .Create("Products_Create", "Spreadsheet")
                    .Destroy("Products_Destroy", "Spreadsheet")
                    .Events(e => e.Change("onChange"))
                    .Model(m =>
                    {
                        m.Id(p => p.LineNo);
                    })
                )
                .Columns(columns =>
                {
                    columns.Add().Width(25);
                    columns.Add().Width(200);
                    columns.Add().Width(100);
                    columns.Add().Width(25);
                    columns.Add().Width(50);
                    columns.Add().Width(50);
                    columns.Add().Width(50);
                    columns.Add().Width(50);
                    columns.Add().Width(50);
                    columns.Add().Width(50);
                    columns.Add().Width(50);
                    columns.Add().Width(50);
                })
                .Rows(rows =>
                {
                    rows.Add().Height(40).Cells(cells =>
                    {
                        for (var i = 1; i < 23; i++)
                        {
                            cells.Add()
                            .Bold(true)
                            .Background("#9c27b0")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");
                        }
                    });

                    for (var i = 2; i < 500; i++)
                    {
                        rows.Add().Cells(cells =>
                        {
                            cells.Add();
                            cells.Add();
                            cells.Add();
                            cells.Add();
                            cells.Add();
                            cells.Add();
                            cells.Add();
                            cells.Add();
                            cells.Add();
                            cells.Add();
                            cells.Add();
                            cells.Add().Formula("J" + i + "*W" + i); // calculated freight cost
                            cells.Add();
                            cells.Add();
                            cells.Add();
                            cells.Add();
                            cells.Add();
                            cells.Add();
                            cells.Add();
                        });
                    }

                });
        })
    )

Bozhidar
Telerik team
 answered on 02 Jun 2016
1 answer
161 views

Hi,

I have written a function that triggers when the Update event on the grid ends.  This is defined as :

.DataSource(dataSource => dataSource
               .Ajax()
               .Events(events =>
                   {
                       events.RequestEnd("onUpdateEnd");
                   })
               .Model(model =>
               {
                   model.Id(p => p.vessel_idx);                   
               })

My function is as follows:

function onUpdateEnd(e) {
 
       if (e.type == "update") {
           var grid = $("#Grid").data("kendoGrid"),
               dataItem = grid.dataItem($(this).closest("tr")),
               stop_date = document.getElementById("fixture_stop"),
               start_date = dataItem.fixture_start;
            
           if (end_date < start_date) {
               alert("Dates are wrong")
           } else {
               alert("Dates are correct")
           }
           $("#Grid").data("kendoGrid").dataSource.read();
       }      
   }

The problen that once the updateend function trigger, the console returns an error saying that dataItem is null (start_date) which crashes the application.  What am I doing wrong and why can't I grab that cell data for use in my function?

Many thanks

 

Konstantin Dikov
Telerik team
 answered on 02 Jun 2016
6 answers
4.1K+ views

Hi,

How can I change the default font of a MVC Project with all Kendo Controls / Widget i.e. to Segoe UI?

Peter

Peter
Top achievements
Rank 1
 answered on 01 Jun 2016
1 answer
207 views

Hi,

I don't find an example to plot a heatmap /  intensity chart.

Is a chart similar to the chart in the attached file possible with ASP.NET MVC?

Peter

Rumen
Telerik team
 answered on 01 Jun 2016
4 answers
1.0K+ views

Is there a way to have a Custom Command Button that is only visible when the user is editing a cell and becomes invisible when the editing is complete?  And if so, when clicked resets the row to it's original values.  Right now if the model annotations specifies [required] for a field, if the user starts to edit that column then changes there mind they still have to enter a valid value there. 

I ask this because using the default Edit Inline mode the Update button when clicked hits the controller and resets the dirty flag on the records so the red indicators go away.  We want to have a custom master "Save" button that does a master save of all rows at once.

So basically a way to use the default Edit, Update, Cancel mechanism built into Kendo that just leaves the red indicators and dirty flags when the user clicks the update button and also snaps the row out of edit mode.  In this respect we would not need a custom "cancel" button.

Any suggestions would be welcome.

 

Thanks

Venelin
Telerik team
 answered on 01 Jun 2016
4 answers
164 views

hi,

i cannot get the total sum to show in the ClientFooterTemplate,  below is the code.  please let me know what i need to change.  

the ClientGroupFooterTemplate does show, but the ClientFooterTemplate does not.

thanks.

    @(Html.Kendo().Grid<VolumeViewModel>
        ()
        .Name("ReportGrid")
        .Columns(columns =>
        {
            columns.Bound(o => o.Firm).Width(130).Locked(true);
            columns.Bound(o => o.Collat).Width(70);
            columns.Bound(o => o.UserName).Width(100).Title("User");
            columns.Bound(o => o.Product).Title("Product Type").Width(110);
            columns.Bound(o => o.Symbol).Title("Symbol").Width(100);
            columns.Bound(o => o.Volume).Title("Amount (USD)").Width(150).Format("{0:n0}")
                    .ClientGroupFooterTemplate("Sub-total: #= kendo.toString(sum, \"n2\")#")
                    .ClientFooterTemplate("Period Total: #= kendo.toString(sum, \"n2\")#");
        })
        .ToolBar(tools => tools.Excel())
        .Excel(excel => excel
        .FileName("RevenueReport.xlsx")
        .Filterable(true)
        .AllPages(true)
        .ProxyURL(Url.Action("ExcelExportSave", "ReportGrid"))
        )
        .Sortable()
        .AllowCopy(true)
        .ColumnMenu()
        .Groupable(group => group.ShowFooter(true))
        .Resizable(resize => resize.Columns(true))
        .Scrollable(scrollable => scrollable.Virtual(true))
        .Scrollable(s => s.Height("500px"))
        .Filterable(filterable => filterable
        .Extra(true)
        .Operators(operators => operators
        .ForNumber(n => n.Clear()
        .IsEqualTo("Is Equal To")
        .IsGreaterThan("Is Greater Than")
        .IsGreaterThanOrEqualTo("Is Greater Than Or Equalt To")
        .IsLessThan("Is Less Than")
        .IsLessThanOrEqualTo("Is Less Than Or Equal To")
        )
        .ForDate(d => d.Clear()
        .IsEqualTo("Is Equal To")
        .IsGreaterThan("Is Greater Than")
        .IsGreaterThanOrEqualTo("Is Greater Than Or Equal To")
        .IsLessThan("Is Less Than")
        .IsLessThanOrEqualTo("Is Less Than Or Equal To"))
        )
        )
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Row)
        )
        .AutoBind(false)
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(100)
            .Model(model =>
            {
                model.Id(p => p.Firm);
                model.Field(p => p.Collat).Editable(false);
                model.Field(p => p.UserName).Editable(false);
                model.Field(p => p.Product).Editable(false);
                model.Field(p => p.Symbol).Editable(false);
                model.Field(p => p.Volume).Editable(false);
            })
        .Read(read => read.Action("Volume", "ReportGrid")
        .Data("GetGridData"))
        .Group(groups =>
        {
            groups.Add(model => model.Firm);
            groups.Add(model => model.Collat);
            groups.Add(model => model.UserName);
            groups.Add(model => model.Product);
            groups.Add(model => model.Symbol);
        })
        .Aggregates(aggregates =>
        {
            aggregates.Add(model => model.Volume).Sum();
        })

        .Events(events => events.Error("onError").Change("onChange"))
        ))

James
Top achievements
Rank 1
 answered on 31 May 2016
1 answer
457 views

I am wanting to pass only the rows where the checkbox is checked to my controller but I can not seem to figure this out.  I don't want to use selected but checked boxes.

Scenario: user is presented with a list of products, some of which are pre-checked.  they will then select more products by checking the checkboxes.  I want to send all those rows to the controller, and also have it work with paging.  Is there a way to change the following from using "selected" to use the checked?

 

// gather the selected rows and send them to the controller
  $(function () {
      $('#btnGenerate').click(function () {
          var grid = $('#products').data('kendoGrid');
          var selectedElements = grid.select();
          for (var j = 0; j < selectedElements.length; j++) {
              var item = grid.dataItem(selectedElements[j]);
              items['products[' + j + '].ItemDescription'] = item.ItemDescription;
              items['products[' + j + '].Quantity'] = item.Quantity;
          }
          $.ajax({
              type: "POST",
              data: items,
              url: '@Url.Action("ProductsCart","Trial")',
              success: function () {
                  window.location.href = "@Url.Action("ProductsCart", "Trial")";
              },
              error: function () {
                  alert("No products were selected.");
              }
          });
      });
  });

// POST: Add Trial Products to cart
[HttpPost]
public ActionResult ProductsCart(TrialProductViewModel[] products)
{
   // do something with products
 
    return Json(products);
}

Viktor Tachev
Telerik team
 answered on 31 May 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
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
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?