Interfaz de usuario de Kendo - MVC - Uso del selector jQuery personalizado para la inicialización

I am using Kendo UI 2013.Q2.

I have a scenario that my page is loading multiple modal popup windows (in-page div elements). The contents are loading from partial views with ajax requests. So, if my partial view content includes kendo components, the second popup window fails to initialize kendo elements, because they have got same IDs with the elements from previous modal popup.

Is there any way to modify jQuery selector for kendo initialization, so that i would able to specify parent window element in the selector.

MVC Code :

@(Html.Kendo().NumericTextBoxFor(m => m.DemirbasInfo.SicilSiraNo)
          .Decimals(0).Format("{0:#}")
          .Min(0).Max(int.MaxValue)
          .Spinners(false))

Renders as :

jQuery(function(){jQuery("#DemirbasInfo_SicilSiraNo").kendoNumericTextBox({"format":"{0:#}","spinners":false,"decimals":0});});

I want to modify to render it as :

 jQuery(function(){jQuery("#ModalWin_2 #DemirbasInfo_SicilSiraNo").kendoNumericTextBox({"format":"{0:#}","spinners":false,"decimals":0});});

ACTUALIZACIÓN 2020

This question was asked specific to multiple modals at once in the main page, like showing side to side multiple windows for different database records. I had come to a solution using <iframe> modals with this one. But the best practice is never using MVC Helpers from the start anyway.

If you use one modal window at once, just simply destroy the previous modal content so that kendo elements will be destroyed. And then re-open second modal.

preguntado el 27 de noviembre de 13 a las 07:11

Can they not be given unique id's? We've had a similar problem using grids and signalR. When creating elements with the same Id they don't initialize. So, we give each element a unique id base on some model or other condition. -

@NicklasWinger I had considered this. We mostly make huge javascript and jquery codings with selectors later (selecting elements, disabling, enabling, editing, saving etc...) Giving unique element ids based on model data would be so complicated to implement this operations. -

1 Respuestas

This isn't supported out of the box. You have two options:

  1. Use the JavaScript version of the NumericTextBox

  2. Modify the source code of the wrappers. You need to edit WidgetBase.cs and change the implementation of the Selector property. For example you can create a setter for it

    private string _selector;

public string Selector
{
    get
    { 
        return _selector ?? (IsInClientTemplate ? "\\#" : "#") + Id;
    }
    set
    {
        _selector = value;
    }
}

Entonces úsalo así:

@{

// initialize the NumericTextBox
var numeric = Html.Kendo().NumericTextBoxFor(m => m.DemirbasInfo.SicilSiraNo)
          .Decimals(0).Format("{0:#}")
          .Min(0).Max(int.MaxValue)
          .Spinners(false));

// Set the Selector 
numeric.ToComponent().Selector = "#ModalWin_2 #DemirbasInfo_SicilSiraNo";
};

@* render it *@
@numeric

respondido 27 nov., 13:09

Thanks for the answer. But editing source code is not an option. And we had decided to use only MVC wrappers at the project start. And now using MVC wrappers is kinda coding standard in the project. I can not use javascript version. I came up with a solution by using "iframe" element in the modal window. So the iframe content will not be effected from elements from the parent window. - Noldor

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.