Hi all,

I've a dynamic grid (no columns defined). I want to allow the user to change the text in the column header. Ideally, I'd like the user to click the column menu, select Rename. A modal will appear prompting them for the new column title. They enter text, click OK, and that title is applied to the selected column. Any thoughts how I can achieve that?

If it's any help, below is my Razor code that generates the grid.

Thanks in advance!

Steve.

Hi,

I am using kendo upload control and I need to upload zip file through only if zip file has only one file inside it other wise i needed to fail the upload.  OnSuccess event of upload I am calling controller action to add validations for the upload file.  How can I send file itself through Ajax to controller action so that i can extract zip file on server side and fail the upload if zip has more than 1 file inside it.

 @(Html.Kendo().Upload()
                              .Name("files").ShowFileList(false)
                              .Async(a => a.AutoUpload(false)
                                  .Save("UploadSingleDocument", "Upload")
                              )
                              .Multiple(false)
                              .Events(events => events
                                  .Select("attachClickHandler")
                                  .Upload("OnUpload").Success("OnSuccess").Error("onError"))
                        )

Below is my javascript code. e.files[0] is always returning null.

 $.ajax({
                url: ('@Url.Action("ValidateDocumentExtension", "Upload")'),
                contentType: "application/json",
                async: true,
                type: "POST",
                data: JSON.stringify({files:e.files[0], fieldlst: webFormFields, fileName: document.getElementById("DocumentName").value }),
                success: function(data) {
                    if (data === 'False') {
                        showNotification("Upload Document", "Invalid Document Extension", "error");
                        flagUpload = false;
                    } else if (data === 'True') {
                        flagUpload = true;
                        if ($("div.k-notification-error").Exists()) {
                            $("div.k-notification-error").hide();
                        }
                        if ($("div.k-notification-info").Exists()) {
                            $("div.k-notification-info").hide();
                        }
                    }
                }
            });

Hello,

I want to know if it´s posible to  make a Tooltip on a tabstrip on (MVC) .

best Regards F.K.

Hi,

I have requirement of freezing column at the start and the end. for eg. let say, i have 10 column in the grid. from these i want first two columns to be freezed and last column to be freezed. however column should NOT loose their respective position i.e. last column should remain as the last column but in freezed manner. between columns should be horizontal scroll-able. Please guide

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)