I have a application that has a kendo grid.

I can filter the grid using several dropdownlists that are outside the grid.

When I click on search, I add filters to the datasource filter list. For example,

    var dataSource = $("#grid").data("kendoGrid").dataSource;
                var dataSourceFilterQuery = new Array();
   
        if ($("#something").data("kendoDropDownList").value() !== null) {
                        dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
                }
   
                dataSource.filter(dataSourceFilterQuery);    

Then I get the results I want. It works.
I then have the possibility of saving the values of all the dropdownlists as one filter in localStorage.

     const filtersObject = {
                    Something: whatever.value(),
                    ...
                };
   
                this.storage.setItem("Filter", JSON.stringify(filtersObject));

When I restart the application, the dropdownlists are populated with whatever is in localStorage

    const filter =  JSON.parse(localStorage.getItem("Filter"));
   
                    $("#something").data("kendoDropDownList").value(filters.whatever || "");               
                }

The thing is, I wanted to add these filters, if they exist on localStorage, to the datasource when the application starts so that the user can see the results of the filter he saved when the applications starts and not have to click on search again.

So, what I want is to do apply this

    var dataSource = $("#grid").data("kendoGrid").dataSource;
                var dataSourceFilterQuery = new Array();
   
        if ($("#something").data("kendoDropDownList").value() !== null) {
                        dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
                }
   
                dataSource.filter(dataSourceFilterQuery);

before the grid is displayed.

Is this possible?

Tks in advance.

Hi,

I'm a beginner in the use of your framework.

I'm trying to use a listboxcontrol containing hours that I can select for 7 different days of the week.

When I oepn the window containing my listbox I refresh my columns with data already selected for the day I'm working on or reloading my listbox (if no data was saved.

Here is my function :

function onOpenRefresh(e) {

        var caseCochee = "";
        // On récupère la première case cochée
        if ($("#header-chb-lundi").is(':checked')) {
            caseCochee = "lundi";
        } else if ($("#header-chb-mardi").is(':checked')) {
            caseCochee = "mardi";
        } else if ($("#header-chb-mercredi").is(':checked')) {
            caseCochee = "mercredi";
        } else if ($("#header-chb-jeudi").is(':checked')) {
            caseCochee = "jeudi";
        } else if ($("#header-chb-vendredi").is(':checked')) {
            caseCochee = "vendredi";
        } else if ($("#header-chb-samedi").is(':checked')) {
            caseCochee = "samedi";
        } else if ($("#header-chb-dimanche").is(':checked')) {
            caseCochee = "dimanche";
        } else {
            alert("Vous n'avez pas choisi de jour !!!");
            return;
        }
        
        var sourceUrl = "@Url.Action("GetTranchesHoraires", "EngagementRadioSM")";
        var dataSource1 = new kendo.data.DataSource({
            transport: {
                read: sourceUrl,
                dataType: "jsonp"
            }
        });

        // On réinit nos deux listbox
        var listeTranches1 = $("#listbox1").data("kendoListBox");
        var listeTranches2 = $("#listbox2").data("kendoListBox");

        listeTranches1.setDataSource(dataSource1);
        listeTranches1.dataSource.read();
        listeTranches2.dataSource.data([]); // On vide à gauche
        // On crée un tableau trié
        var mesTranchesTrie = [];
        if (mesTranches.length > 0 && mesTranches.find(function (e) { return e.sweekDay === caseCochee; })) {
            debugger;
            mesTranchesTrie = mesTranches;
            mesTranchesTrie.sort(function (a, b) { return b["nid_tranche"] - a["nid_tranche"]; });
            var tranche = [];
            for (var k = 0; k < mesTranchesTrie.length; k++) {
                if (mesTranchesTrie[k].sweekDay == caseCochee) {
                    tranche.push({ nid_tranche_horaire: mesTranchesTrie[k].nid_tranche, slibelle: mesTranchesTrie[k].slibelle });
                }
            }
            debugger;
            var d2 = new kendo.data.DataSource({ data: tranche });
            d2.read();
            listeTranches2.setDataSource(d2);

            var d1 = listeTranches1.dataSource;
            var dret = new kendo.data.DataSource();
            for (var i = 0; i < d2._data.length; i++) {
                var idTanche2 = d2._data[i].nid_tranche_horaire;
                for (var j = 0; j < d1._data.length; j++) {
                    var idTanche1 = d1._data[j].nid_tranche_horaire;
                    if (idTanche2 != idTanche1) {
                        dret.add({ nid_tranche_horaire: d1._data[j].nid_tranche_horaire, slibelle: d1._data[j].slibelle });
                    }
                }
                d1 = dret;
                dret = new kendo.data.DataSource();
            }
            debugger;
            listeTranches1.setDataSource(d1);
        } else {
            debugger;
            listeTranches1.setDataSource(dataSource1);
            listeTranches1.dataSource.read(); // On remplit à droite
        }
    };

And here is my EngagementRadioSM function alloowing me to get the hours that I put in my Listbox:

public JsonResult GetTranchesHoraires()
        {
            List<TrancheHoraire> lls_ret = new List<TrancheHoraire>();
            var list = _context.P_GCC_GET_TRANCHES_HORAIRES();
            foreach (var line in list)
            {
                TrancheHoraire obj = new TrancheHoraire
                {
                    nid_tranche_horaire = line.nid_tranche_horaire,
                    slibelle = line.slibelle
                };
                obj.bisValid = false;
                lls_ret.Add(obj);
            }
            return Json(lls_ret, JsonRequestBehavior.AllowGet);
        }

mesTranches is an array where I put my data for the different selected hours and days.

My main problem is that I cannot reset my listbox 1 when I already have data for the selected day in mesTranches ...

Hope my explanation isn't too bad (I'm french ...)

Thanx a lot for your help

Antoine

Hello,

I need to replace the content of the unselected rows with empty string, or replace with an empty row, upon doing a PDF export.

For example if I have the following grid:

ID      Description

1        Row 1

2        Row 2

3        Row 3

If I leave row 2 unselected it should be exported the following way:

ID      Description
1        Row 1

3        Row 3

Here is my code:

  @(Html.Kendo().Grid(Model)
                .Name("Grid")
                .ToolBar(toolbar => toolbar.Create().Text("Nuevo").HtmlAttributes(new { @class = "" }))
            .ToolBar(tools => tools.Pdf().Text("Imprimir"))
            .Pdf(pdf => pdf
            .AllPages()
            .AvoidLinks()
            .PaperSize("A4")
            .Scale(0.8)
            .Margin("2cm", "1cm", "1cm", "1cm")
            .RepeatHeaders()
            .TemplateId("page-template")
            .FileName("Ficha.pdf")
            .ProxyURL(Url.Action("Pdf_Export_Save", "Grid")))
            .Pageable(pager => pager
   .Refresh(true)
)
            .Columns(columns =>
            {
                columns.Bound(p => p.IdFicha).Title("Numero");
                columns.Bound(p => p.Fecha).Format("{0:dd/MM/yyyy}");
                columns.Bound(p => p.Descripcion).Title("Descripción");
                columns.Bound(p => p.Comentarios);
                columns.ForeignKey(x => x.IdCliente, (System.Collections.IEnumerable)ViewData["clientes"], "IdCliente", "Nombre").Hidden();
          
                columns.Command(command =>
                {
                    command.Edit().HtmlAttributes(new { @class = "btn btn-primary" })
                 .Text("Editar")
                 .UpdateText("Guardar")
                 .CancelText("Cancelar");
                    command.Destroy().Text("Eliminar");

                });

            })
             .Editable(editable => editable.Mode(GridEditMode.PopUp).Window(w => w.Title("Fichas")))
    .Pageable(p => p
                .Messages(m => m
                    .Display("Mostrando {0}-{1} de {2} registros")
                    .Empty("No se encontraron registros")
                    .First("Ir a la primera página")
                    .Last("Ir a la última página")
                    .Next("Ir a la página siguiente")
                    .Previous("Ir a la página anterior")
                )
)
.DataSource(dataSource => dataSource
        .Ajax()
    .Read(read => read.Action("Ficha_Read", "Home").Data("additionalData").Type(System.Web.Mvc.HttpVerbs.Post))
    )
    .Sortable()
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
    .Pageable(x => { x.Enabled(false); })
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(model => model.Id(p => p.IdFicha))
        .Destroy(update => update.Action("Ficha_Destroy", "Home"))
        .Update(update => update.Action("Ficha_Update", "Home"))
        .Create(update => update.Action("Ficha_Create", "Home").Data("additionalData").Type(System.Web.Mvc.HttpVerbs.Post))
     )
    .Events(e => e.PdfExport("PdfExport"))

<script>

  function PdfExport(e) {
    
    if (!exportFlag) {
      e.sender.showColumn(3);
      e.preventDefault();
      exportFlag = true;

      setTimeout(function () {
        e.sender.saveAsPDF();
      });
    } else {
        e.sender.hideColumn(3);

      exportFlag = false;
    }

  }



</script>

Thanks

Hi all,

I've got a slight problem when displaying data from my model. My model is simple and straight forward:

I'm displaying some of the data in a Kendo Grid which is working without problem. The grid is displaying fine. I want to use a custom editor template to open a popup which displays the "TableName" property and another grid which contains the "List<ColumnDescription> Columns" property. Here is the code for my main grid which displays the TableSchema model:

And finally, there is the code for my custom editor template:

My problem now is that if I click "Edit" on the main grid to edit a "TableSchema", the popup shows up. The data for the TableName is showing without problem but the grid for the "Model.Columns" property is empty or even "null". Note, there is data in my database for the TableSchema and the Columns.

Do you know the problem and could anybody help me?

Thank you very much,

Sascha

Hi,

Is there an option to make the ComboBox not close until I've clicked elsewhere on the page? The scrolling function in the combobox kind of interferes with the scrolling on the actual page when scrolling with the mouse. 

Below is my view containing my ListView as well as my controller.  I can successfully edit and save my data client side, but it never calls the update action on my controller and I can't figure out why.  I've copied the example from the Editing demo, but can't figure out what I'm missing.  Any ideas?

Hello guys, i am trying to load a partial view in my tab-strip. each tab strip has a place-holder, where the partial view. will be displayed. One first load, the partial view displays that data. However, when i click the subsequent tabs, the tab-strip does not reload  with the new data. i have added a tab re-load logic but, to no avail unfortunately.

Here is my Index.cshtml

Here is my ParentController.cs

Here is the picture, when if load the firs time and when i click on the next tab. Thanks for your help.

Why do my video controls look like the attached image versus the way the demo works?  I've gone through styles, disabling what I thought might do it?

@(Html.Kendo().MediaPlayer()
                    .Name("heads-up-youtube-player-id-" + Model.LiveWidgetID)
                    .AutoPlay(Model.AutoPlay)
                    .AutoRepeat(Model.AutoRepeat)
                    .Navigatable(Model.Navigatable)
                    .FullScreen(Model.FullScreen)
                    .Volume(Model.Volume)
                    .Mute(Model.Mute)
                    .ForwardSeek(Model.ForwardSeek)
                    .Media(m => m
                        .Title(Model.WidgetTitle)
                        .Source(Model.YouTubeURL)
                    )
                    .HtmlAttributes(new { style = "height: 100%; background-color: transparent" })
                )