CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-gridkendo-dropdown
imperium2335
imperium2335

Reputation: 24122

Kendoui Grid Custom Filter UI Retrieve Value from Datasource

I am trying to make a filter UI for one of my columns in a kendo grid that is to be a drop down select.

So far I have:

function stateFilter(element)
{
  element.kendoDropDownList({
    dataSource: [
      {
        "state": "New",
        "stateId": 1
      },
      {
        "state": "Current",
        "stateId": 2
      },
      {
        "state": "Non-finalised",
        "stateId": 7
      }
    ],
    optionLabel: 'Select state',
    dataTextField: 'state',
    dataValueField: 'stateId',
    template: '#="<span class=\'filterTrigger\' data-value=\'"+stateId+"\'>"+state+"</span>" #',
    select: function(e)
    {
      console.log(e)
      var val = e.item[0].innerHTML
      val = val.substring(41, 40);
      html = e.item[0].innerText;
      activeFilter = activeFilter.filter(function( obj ) {
        return obj.field !== 'state';
      })
      activeFilter.push({
        field: 'state',
        operator: 'eq',
        value: val
      })
      $('.k-animation-container').hide();
      filtersState = 1 ;
      grid.dataSource.filter(activeFilter);
    }
  })
}

Is there a better way to fetch stateId from the datasource than having to pass it as a data param and chopping it up with substring() and passing that as the value?

Upvotes: 0

Views: 895

Answers (2)

CSharper
CSharper

Reputation: 5580

This is a Kendo Grid that has a dropdown in the grid to change values and its in razor syntax. For what it's worth I'll post code. It is truncated a little and all the opening/closing pounds should line up. 

 columns.Bound(m => m.IncludeInForecast).HtmlAttributes(new { Align="center"}).Title("Include In Forecast?").ClientTemplate(

"\\# if (IncludeInForecast == true) { \\#" +

                                  "<select id='\\#= OrderDetailId \\#' onchange=SaveIncludeInForecast('\\#= OrderDetailId \\#','\\#= ProposalId \\#'); style='Width: 80px; color: 'navy' > " +
                                    "<option id='yes' selected value='1'>Yes</option>" +
                                    "<option id='no' value='0'>No</option>" +

                                    "</select>" +
                             "\\# } else { \\#" +
                                  "<select id='\\#= OrderDetailId \\#' onchange=SaveIncludeInForecast('\\#= OrderDetailId \\#','\\#= ProposalId \\#'); style='Width: 80px; color: 'navy' > " +
                                    "<option id='yes'  value='1'>Yes</option>" +
                                    "<option id='no' selected value='0'>No</option>" +
                                 "\\# } \\#" +
                        "\\# }
);

You'll notice places where I'm doing this '\\#= ProposalId \\#'. That's how you can grab values off of the model.

Then the resulting function

function SaveIncludeInForecast(orderDetailId, proposalId)
{      

}

Hope this isn't completely useless.

Upvotes: 0

Robin Giltner
Robin Giltner

Reputation: 3055

I'm not entirely sure what you are doing. If you are just wanting to add a dropdownlist as a filter on a column in a grid, it's much easier that what you are doing.

Here is a quick sample doing just that... http://jsbin.com/coreh/1/edit

If this isn't what you are meaning, please post the code for your grid to better determine what you are trying to accomplish.

Upvotes: 0

Related Questions