Display different data in dropdownlist if we update or create

[Xavier]

Hi,

 

I have a grid inline with two fields "OrigenId" and "DestiID". These fields uses foreignkey and two templates named "GetOrigenOnPlanning" and "GetDestiOnPlanning". Now I explaind to you that I need, the data inside in template will be different in function if user selects update or create. The problem is I don't find a event is traggered before the data are inserted in dropboxlist, I tested with event edit or event push of the datasource object.

 

GRID

 

@(Html.Kendo().Grid<ExpeditionViewModel>()
            .Name("expedition")
            .HtmlAttributes(new { style = "margin-bottom:10px;" })
            .Scrollable()
            .ToolBar(t =>
            {
                if (User.IsInRole("Modify"))
                {
                    t.Create().Text("Afegir Expedicio");
                }
            })
            .Columns(columns =>
            {
                columns.Bound(f => f.ExpeditionID).Width(90);
                columns.Bound(f => f.Data).Width(100);
                columns.ForeignKey(f => f.OrigenID, (System.Collections.IEnumerable)ViewBag.Centres, "ContactID", "Nom").Width(120).EditorTemplateName("GetOrigenOnPlanning");
                columns.ForeignKey(f => f.DestiID, (System.Collections.IEnumerable)ViewBag.Centres, "ContactID", "Nom").Width(120).EditorTemplateName("GetDestiOnPlanning");
                columns.ForeignKey(f => f.VehicleID, (System.Collections.IEnumerable)ViewBag.Vehicles, "VehicleID", "Matricula").Width(110).EditorTemplateName("CustomGridForeignKey");
                columns.ForeignKey(f => f.XoferID, (System.Collections.IEnumerable)ViewBag.Xofers, "PersonID", "Nom").Width(200).EditorTemplateName("CustomGridForeignKey");
                if (User.IsInRole("Modify"))
                {
                    columns.Command(commands =>
                    {
                        commands.Edit();
                        commands.Destroy();
                    });
                }
            })
            .Editable(e => e.Mode(GridEditMode.InLine))
            .Events(e => e
                .Change("onChange")
                .Edit("onEdit")
                )
            .Sortable()
            .Selectable()
            .Pageable(pageable => pageable.Refresh(true))
            .Navigatable()
            .Filterable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Model(m =>
                {
                    m.Id(f => f.ExpeditionID);
                    m.Field(f => f.ExpeditionID).Editable(false);
                    m.Field(f => f.Data).DefaultValue(ViewBag.date);
                    //m.Field(f => f.OrigenID).DefaultValue(ViewBag.CentreUsuari);
                    //m.Field(f => f.DestiID).DefaultValue(ViewBag.CentreUsuari);
                })
                .Events(e => e
                    .Error(@<text>
                        function (e) {
                        onError(e, "expedition");
                        }
                    </text>)
                    .Push("onPush")
                )
                .Read("Read", "Planning", new { date = ViewBag.date })
                .Create("Create", "Planning")
                .Update("Update", "Planning")
                .Destroy("Destroy", "Planning")
            )
        )

TEMPLATES

 

@model object

@(
 Html.Kendo().DropDownListFor(m => m)
    .Name("OrigenID")
    .DataTextField("Nom")
    .DataValueField("ContactID")
    .ValuePrimitive(true)
    .AutoBind(true)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("SearchCentres", "Productors", new { area = "Comercial" }).Data("filterCentres");
        })
        .ServerFiltering(true);
    })
)

@model object

@(
 Html.Kendo().DropDownListFor(m => m)
    .Name("DestiID")
    .DataTextField("Nom")
    .DataValueField("ContactID")
    .ValuePrimitive(true)
    .AutoBind(true)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("SearchCentres", "Productors", new { area = "Comercial" }).Data("filterCentres");
        })
        .ServerFiltering(true);
    })
)
function filterCentres() {

        return {
            contactCreate : isCreate
        };
    }

Code Event Edit and Push

var isCreate;
    function onPush(e) {
        if (e.type == "update") {
            isCreate = false;
        } else {
            if (e.type == "create")
                isCreate = true;
        }
    }

    function onEdit(e) {

        if (!e.model.isNew()) {
            isCreate = false;

            //$("#expedition tbody [data-role=dropdownlist]").each(function () {
            //    var ddl = $(this).data("kendoDropDownList");
            //    if (ddl) {
            //        ddl.options.optionLabel = ddl.value;
                    //ddl.refresh();
                    //ddl.Value("");
            //    }
            //})

        } else {
            isCreate = true;

            $("#expedition tbody [data-role=dropdownlist]").each(function () {
                var ddl = $(this).data("kendoDropDownList");
                if (ddl) {
                    ddl.options.optionLabel = "-Select Please-";
                    ddl.refresh();
                    ddl.value("");
                }
            })
        }

 

 

Thanks in advance.

 

Xavier de la Rubia.

[Atanas Korchev]

Hello Xavier,

Using the edit event and checking e.model.isNew() is the recommended approach to detect add vs. update mode. However your dropdownlist is bound via separate ajax request because it has a DataSource set. This causes the data to load later (after the ajax request is done). 

Still your code should work as expected. What happens if you log the value of the isCreate variable:

function filterCentres() {

         console.log("isCreate = ", isCreate);

        return {

            contactCreate : isCreate

        };

    }

Do you see the right value displayed in the console (true or false)?

Regards,
Atanas Korchev
Telerik

[Xavier]

Hi Atanas, 

 

When I use popup mode I haven't this problem. But when I use grid with inline mode event edit assign the value to var isCreate later after function filterCentres return value contactCreate. 

Can you help about this question?

 

 

Thanks in advance.

Xavier.

[Atanas Korchev]

Hello Xavier,

 

Indeed the edit event may be too late to set the flag. I can suggest a different implementation - to find the data item from the filterCentres function:

 

function filterCentres() {

   var grid = $("#expedition").data("kendoGrid");

   var uid = $("#OrigenID").closest("tr").attr("data-uid");

   var dataItem = grid.dataSource.getByUid(uid);

   

   return {
         contactCreate : dataItem.isNew()
        };

 }

 

Regards,
Atanas Korchev
Telerik

[Xavier]

Thanks Atanas, that's is ok.