Our grid has a columns to retrieve more details based off the "npinumber". This wouldn't be on edit or any other actions. I just want to open up a window. I don't even know where to begin with this, so if anyone can help me or guide me to a solution, that would be awesome!

Thank you!

Hi, I'm using a solution for exporting several grids to one excel file and it works great, but it only exports the current page of the application. Is there any way I can export all pages of the grids? Just like this:

.Excel(excel => excel
      .FileName("Reporte.xlsx")
      .Filterable(true)
      .AllPages(true)
      .ProxyURL(Url.Action("Excel_Export_Save", "Export"))
      )

This is my current solution:

In the grids I have am Event trigger:

.Events(e => e.ExcelExport("pendientes_excelExport"))

And then a js function, fired by a button click:

// used to sync the exports
    var promises = [
      $.Deferred(),
      $.Deferred(),
      $.Deferred(),
      $.Deferred(),
      $.Deferred()
    ];

    $("#export").click(function (e) {
        // trigger export of the grids
        
        $("#grillaOrigen1").data("kendoGrid").saveAsExcel();
        $("#grillaOrigen2").data("kendoGrid").saveAsExcel();
        $("#grillaConciliadas").data("kendoGrid").saveAsExcel();
        $("#grillaManuales").data("kendoGrid").saveAsExcel();
        $("#grillaPendientes").data("kendoGrid").saveAsExcel();

        // wait for exports to finish
        $.when.apply(null, promises)
         .then(function (grillaOrigen1Workbook, grillaOrigen2Workbook, grillaConciliadasWorkbook, grillaManualesWorkbook, grillaPendientesWorkbook) {

             // create a new workbook using the sheets of workbooks
             var sheets = [
               grillaOrigen1Workbook.sheets[0],
               grillaOrigen2Workbook.sheets[0],
               grillaConciliadasWorkbook.sheets[0],
               grillaManualesWorkbook.sheets[0],
               grillaPendientesWorkbook.sheets[0]
             ];

             sheets[0].title = "Origen1";
             sheets[1].title = "Origen2";
             sheets[2].title = "Conciliadas";
             sheets[3].title = "Manuales";
             sheets[4].title = "Pendientes";

             var workbook = new kendo.ooxml.Workbook({
                 sheets: sheets
             });

             // save the new workbook
            kendo.saveAs({
                dataURI: workbook.toDataURL(),
                fileName: "Conciliacion.xlsx"
            });
        });
    });

    function origen1_excelExport(e) {
        e.preventDefault();

        promises[0].resolve(e.workbook);
    }

    function origen2_excelExport(e) {
        e.preventDefault();

        promises[1].resolve(e.workbook);
    }

    function conciliadas_excelExport(e) {
        e.preventDefault();

        promises[2].resolve(e.workbook);
    }

    function manuales_excelExport(e) {
        e.preventDefault();

        promises[3].resolve(e.workbook);
    }

    function pendientes_excelExport(e) {
        e.preventDefault();

        promises[4].resolve(e.workbook);
    }

Thank you very much

Hi,

- Is it possible to move the Update and Cancel button of the popup Editor to the top instead of the buttom of the editor?

- or is it possible to hide/remove that two buttons and use my own Buttons or use a toolbar with a Save and Cancel Button instead?

regards robert

 @(Html.Kendo().Grid<FileDataModel>()
                  .Name("grid")
                  .Columns(columns =>
                  {
                  columns.Bound(c => c.FileName);
                  columns.Bound(c => c.Title);
                  columns.Bound(c => c.SelectedDocType);
                  columns.Template(@<text></text>).Title("<b>Download</b>")
                          .ClientTemplate("<a href='" + Url.Action("Download", "Home", new { @id = "#=Id#" }) + "'>Download</a>")
                          .HtmlAttributes(new { style = "text-align: left;" });
                      columns.Command(command =>
                      {
                          command.Edit();
                          command.Destroy();
                      }).Title("<b>Action</b>");
                  }).Events(e => e.DataBound("onDataBound"))
                  .Scrollable(a=>a.Height("auto"))
                  .Selectable()
                  .Groupable()
                  .Sortable()
                  .Editable(config => config.Mode(GridEditMode.PopUp))
                  .Pageable(pageable => pageable
                      .Refresh(true)
                      .PageSizes(true)
                      .ButtonCount(5))
                  .ToolBar(toolBar => toolBar.Template("<a class='k-button  k-button-icontext' onclick='addFilePopup()' href='#' id='addNewFile'></span>Add new file</a>"))
                  .DataSource(dataSource => dataSource
                      .Ajax()
                      .Batch(false)
                      .PageSize(20)
                  .Model(model =>
                  {
                      model.Id(p => p.Id);
                      model.Field(p => p.Id).Editable(false);
                      model.Field(p => p.CreatedDate).Editable(false);
                      model.Field(p => p.DateSigned).Editable(false);
                      model.Field(p => p.DateSubmitted).Editable(false);
                      model.Field(p => p.DjjNumber).Editable(false);
                      model.Field(p => p.ScanDate).Editable(false);
                      model.Field(p => p.ScanUser).Editable(false);
                  })
                  .Read(read => read.Action("GetFiles", "Home", new { djjNumber = Model.DjjNumber }))
                  .Update(update => update.Action("EditingInline_Update", "Home"))
                  .Destroy(destroy => destroy.Action("EditingInline_Destroy", "Home"))
          ))

</div>

Kendo Autocomplete and Validation function.

$("#txtDocType").kendoAutoComplete({
            dataSource: new kendo.data.DataSource({
                type: "json", // specifies data protocol
                pageSize: 3,//This is to set search limit
                serverFiltering: true,
                transport: {
                    read: '@Url.Action("GetDocumentTypes", "Home")',
                    parameterMap:function(){
                        return {filterKey:$("#txtDocType").data("kendoAutoComplete").value()};
                    }
                },
            }),
            dataTextField:"Type",
            filter: "contains",
            minLength: 3,//This is to set minimum character length for autocomplete
        });
    });

    function ValidateDocumentType(){
        var isValidDocType=true;
        $.ajax({
            data:{documentType:$("#txtDocType").val()},
            url:'@Url.Action("GetDocumentType", "Home")',
            async: false,
            success:function(data) {
                if(data==false)
                    isValidDocType=false;
                complete=true;
            },
        });
        return isValidDocType;
    }

Auto complete for Document type works as expected when i add new file (Tool bar add file).

How do I achieve the same auto complete and validation if user clicks edit/Update? I am using ScaffoldColumn to make the Doc type editable when user clicks Edit in Kendo Grid.

I am trying to call a function each time a key is pressed in the textbox of the combobox to update another pulldown box.

Here is my razor code.

                                        @(Html.Kendo().ComboBoxFor(m => m.ToAccountID)
                                            .Name("ToAccountID")
                                            .DataTextField("Text")
                                            .DataValueField("Value")
                                            .HtmlAttributes(new { style = "width:100%;" })
                                            .BindTo(acctList)
                                            .Events(e =>
                                                {
                                                    e.Select("onToSelectChange");
                                                })
                                        )

I have tried this but get a javascript error.

  // javascript

    $("#ToAccountID").data("kendoComboBox").input.keypress(function(){
        console.log("pressed");
    });

Error:

TypeError: $(...).data(...) is null
<anonymous>

Thanks.

I find the default Kendo Grid (MVC) is just plain ugly.  Everything about it is monstrously huge, so much padding, the text is huge, it's just really ugly for a modern looking web application.  Does anyone have any good tips or styles they'd care to share to make this thing look at least a little bit decent?

I tend to do this, which helps, but it's still pretty ugly (especially the filter row)

Hi

I'm trying to create a grid with a variable number of columns using the MVC Grid component referencing the following (simplified) model:-

public class GridModel
{
     public int Id { get; set; }
     public string Name { get; set; }
     public List<int> Values { get; set; }
}

Using the AutoGenerate option of the column configuration only seems to create columns for the Id & Name model properties, but not the Values enumerable.

I can't find an obvious way to achieve this; could you provide some help please?

Thanks in Advance

Hello, I want to paste data into grid, please revise my code. Thanks.

@(Html.Kendo().Grid<ConfigurationModel>()
        .Name("grid")
        .Events(e => e.Edit("onGridEdit"))
        .AutoBind(false)
        .Columns(columns =>
        {
            columns.Bound(c => c.A);
            columns.Bound(c => c.B);
            columns.Bound(c => c.C);
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
        })
        .ToolBar(toolbar => { toolbar.Create();  toolbar.Excel(); })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .HtmlAttributes(new { style = "height: 550px;" })
        .Sortable()
        .Pageable(pageable => pageable
             .Refresh(true)
             .PageSizes(true)
             .ButtonCount(15))
        .Excel(excel => excel
            .FileName("Export.xlsx")
            .Filterable(true)
            .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
        )
        .DataSource(dataSource => dataSource
            .Ajax()
            .Events(events => events.Error("grid_error"))
            .Model(model =>
            {
                model.Id(p => p.A);
               
            })
            .Create(create => create
                .Action("Create", "Configuration"))
            .Read(read => read
                .Action("Read", "Configuration")
             )
            .Update(update => update
                .Action("Update", "Configuration")
            )
            .Destroy(destroy => destroy
                .Action("Destroy", "Configuration"))
            .PageSize(10)
        )

I am fairly new to kendo UI and very new to MVC. We have an application written in kendo UI. I am concerned about the potential volume of data being transferred to the client side as datasets grow. I am thinking of making some of our current application MVC based if we can gain greater control over paging through grids.

1) With kendo UI is it the case that the page brings back the whole result set, and then paging through is managed locally client side within the page?

2) With MVC version of the grid is the data bound server side or is the whole dataset delivered to the browser and paging managed as per (1). Does this limit the amount the data transferred from server to client?

3) With MVC version is there any mechanism that allows the paging to occur within the SQL statement to restrict the size of the result turned from the database server?

Any pointers with this would be appreciated.