We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Using DropDownList at Grid at DialogTemplate edit mode

Thread ID:

Created:

Updated:

Platform:

Replies:

125262 Aug 3,2016 09:51 AM Aug 5,2016 12:07 AM ASP.NET MVC 4
loading
Tags: DropDownList
egor
Asked On August 3, 2016 09:51 AM

Hi Syncfusion,

I have some troubles. I try to use your greate Grid in DialogTemplate edit mode. At this mode I want to use dropdownlist. 
I found some solution how to do that:
https://www.syncfusion.com/forums/123570/cascade-populate-dropdown-on-add-edit-mode-with-dialog-template

I try to implement it in my project. At result I get DropDownList at my template. 
But when I select one of the item at DropDownList, other items are losing. 

Could you help me with this. Maybe I do something wrong,
Here test code. To unsderstand whats wrong, just add new record and select at dropdown list some item. Then try to select another. You can't do this cause other items was removed after selection:

@{
  var testChoiceList = new List<object>
  {
    new { value = 1, text = "One" },
    new { value = 2, text = "Two" },
    new { value = 3, text = "Three" },
  };

  var jsonTestChoiceList = JsonConvert.SerializeObject(testChoiceList);

  var testGridData = new List<object>
  {
    new { Id = 1, Name = "Lorem" , PriceId = 2 },
    new { Id = 2, Name = "Ipsum" , PriceId = 1 },
    new { Id = 2, Name = "Something else" , PriceId = 3 },
  };
}

<script type="text/template" id="testTemplate">

  <div class="panel panel-default">
    <div class="panel-body">

      <input id="Name" name="Name" value="{{:Name}}" class="e-field e-ejinputtext valid"
              style="text-align: right; width: 260px; height: 28px" />

      <input type="text" id="PriceId" name="PriceId" />
    </div>
  </div>

</script>

<script type="text/javascript">
  function TestGridComplete(args) {
    if (args.requestType == "beginedit" || args.requestType == "add") {

      var sellers = JSON.parse('@Html.Raw(jsonTestChoiceList)');

      var selectedValue = args.row != null
        ? args.row.children().eq(2).text()// 15 is a seller column number.
        : null;

      var sellerCombo = $('#PriceId')
        .ejDropDownList({
          dataSource: sellers,
          fields: { value: "value", text: "text" },
          cascadeTo: 'PriceId',
          width: "100%",
        })
        .data("ejDropDownList");
      if (sellerCombo != null && selectedValue != null) {
        sellerCombo.selectItemByValue(selectedValue);
      }
    }
  }
</script>

@(Html.EJ().Grid<object>("TestGrid")
      .Datasource(ds => ds.Json(testGridData)
      .UpdateURL("/FakeUpdate")
      .RemoveURL("/FakeDelete")
      .InsertURL("/FakeInsert")
      .Adaptor(AdaptorType.RemoteSaveAdaptor))
      .AllowSorting() /*Sorting Enabled*/
      .EditSettings(edit =>
      {
        edit.AllowAdding()
          .AllowDeleting()
          .AllowEditing()
          .EditMode(EditMode.DialogTemplate)
          .DialogEditorTemplateID("#testTemplate");
      })
      .ToolbarSettings(toolbar =>
      {
        toolbar.ShowToolbar().ToolbarItems(items =>
        {
          items.AddTool(ToolBarItems.Add);
          items.AddTool(ToolBarItems.Edit);
          items.AddTool(ToolBarItems.Delete);
          items.AddTool(ToolBarItems.Update);
          items.AddTool(ToolBarItems.Cancel);
        });
      })
      .Columns(col =>
      {
        col.Field("Id").HeaderText("").IsIdentity(true).IsPrimaryKey(true).Visible(true).Width(75).Add();
        col.Field("Name").HeaderText("Name").Width(80).Visible(true).Add();
        col.Field("PriceId").HeaderText("Price Type").Visible(true).Width(80).Add();
      })
      .ClientSideEvents(eve => { eve.ActionComplete("TestGridComplete"); }))



egor
Replied On August 3, 2016 10:04 AM

Screen shots for this issue in attachments.

Attachment: ScreenShots_706e3ba7.zip

Kasithangam C [Syncfusion]
Replied On August 4, 2016 06:37 AM

Hi Egor,   
 
Thanks for contacting Syncfusion support.   
 
The cause of the issue “when I select one of the item at DropDownList, other items are losing” is that you have mentioned the dropdownlist “cascadeTo” property is same control id(PriceId). If you need to filter the data in 2nd dropdownlist based on the 1st dropdownlist, then you need to specify the 2nddropdownlist control id in the cascadeTo property as shown below code:   
<code> 
var sellerCombo = $('#PriceId') 
        .ejDropDownList({ 
          dataSource: sellers, 
          fields: { value: "value", text: "text" }, 
          cascadeTo: 'BuyerPriceId', 
          width: "100%", 
        }) 
        .data("ejDropDownList"); 
</code> 
We have showcased cascading dropdownlist functionality in the below UG link:   
 
Also, we have showcased this in our online demo link. Please find the link for the same: 
As per your code, if you use single dropdownlist, then it’s not necessary to specify the “cascadeTo” property in the dropdownlist.   
 
We have prepared a sample grid with cascade dropdownlist. Please find the sample from the following location.  
 
Sample: Sample 
Regards,
Kasithangam 


egor
Replied On August 4, 2016 04:22 PM

Yes you are right! Thenk you for your help. 
Now I follow your suggestion and get perfect result.

Thenk you for your hard job!

Best regards,
Egor.

Kasithangam C [Syncfusion]
Replied On August 5, 2016 12:07 AM

Hi Egor,  
Thanks for your update. We are happy that the provided suggestion helped you. 
Please let us know if you have further query. 
Regards, 
Kasithangam 
  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;